-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
140 lines (140 loc) · 7.04 KB
/
Copy pathindex.html
File metadata and controls
140 lines (140 loc) · 7.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Moy.Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/style.css">
<style>
body {
background-color: #fff;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.container {
background-color: #fff;
line-height: 1.6;
font-size: 16px;
font-family: "Helvetica Neue", Arial, sans-serif;
color: #444;
}
@media only screen and (min-width: 650px) {
.container {
max-width: 600px;
border: 2px solid #C20108;
padding: 10px;
margin: 6px auto;
}
}
.row + .row {
margin-top: 10px;
}
.row.example img {
width: 80%;
margin: 10px auto 25px;
display: block;
border: 1px solid #444;
}
</style>
</head>
<body>
<div class='container'>
<div class='flex row' style='justify-content: space-around; margin-bottom: 10px;'>
<div class="moy-logo-block"><a href="https://moy.design" target="_blank">
<img src="/moy.svg"><strong>MOY</strong></a>
</div>
</div>
<div class='row'>
<h2>Welcome to Moy.Design!</h2>
<p>We don't like the Web as it is today. It's heavy, overloaded with scripts, images, counters, social buttons, web fonts, etc. It's slow. It's clumsy. We think it can be better.</p>
<p><b>Moy.Design browser plugin</b> changes the appearance of websites. It serves a number of purposes:</p>
<ul>
<li>Provide a way to see information from different websites in a unified way, which is customizable by end users.</li>
<li>Make web pages lighter, with less scripts, images, styling and other heavy and often unnecessary stuff.</li>
<li>Make web pages more readable, human-friendly, eye-friendly.</li>
<li>Make web pages mobile-friendly.</li>
</ul>
</div>
<div class='row'>
<h2>Installation</h2>
</div>
<div class='flex row' style='justify-content: space-around;'>
<button id='installBut' class='large'>Click here to install the plugin</button>
</div>
<div class='row'>
<p>...or choose one of the browser-specific links below:</p>
<ul>
<li><a id='chromeBut' href="https://chrome.google.com/webstore/detail/kgepfphemgiidklhpnfoobmoieiglgon" target="_blank">Chrome plugin</a></li>
<li><a id='firefoxBut' href="https://addons.mozilla.org/en-US/firefox/addon/moy-design" target="_blank">Firefox plugin</a> (works on desktop and Android)</li>
</ul>
<p>When the plugin's installed, it will show welcome page with some examples to test it on.</p>
</div>
<div class='row example'>
<h2>Examples</h2>
<p>The original page:<img src='/huffpost-original.png'></p>
<p>The same page with one of the plugin's looks enabled:<img src='/huffpost-iv.png'></p>
<p>Another look:<img src='/huffpost-sepia.png'></p>
<p>The same look with the plugin menu:<img src='/huffpost-sepia-popup.png'></p>
</div>
<div class='row'>
<h2>Get help</h2>
<p>If something is unclear or seems buggy (e.g. the plugin shows no looks for a page or renders a page incorrectly), please feel free to:</p>
<ul>
<li><a href="https://github.com/MoyDesign/MoyPlugin/issues">file an issue</a> in our GitHub repository</li>
<li>ask for help in the <a href="https://groups.io/g/moy">mailing list</a></li>
<li>ask for help directly: <a href="mailto:info@moy.design">info@moy.design</a></li>
<li>contact <a href="https://github.com/dsavenko">me</a> personally.</li>
</ul>
</div>
<div class='row'>
<h2>Technical overview</h2>
<p>The plugin uses <i>parsers</i> to extract valuable information from original pages and <i>templates</i> (or <i>'looks'</i>) to render the information.</p>
<p>Parsers and templates are located in the <a href='https://github.com/MoyDesign/MoyData'>MoyDesign's</a> MoyData GitHub repository. The plugin downloads them <b>all</b> the first time when it's installed. Then, it periodically checks for updates.</p>
<p>You can specify another GitHub account. This is useful for creating your own parsers and templates: just fork the main MoyData repo and point the plugin to your own account. Please, consider making a pull request to the original repo afterwards.</p>
<p>Detailed documentation about the plugin, including how to create your own parsers and templates, is available <a id='docsBut' href='https://github.com/MoyDesign/MoyDocs/blob/master/README.md#moydesign-documentation'><b>here</b></a>.</p>
<p>Happy hacking! :)</p>
</div>
<div class='flex row' style='justify-content: space-around;'>
<button id='readTheDocsBut' class='large'>Read the docs</button>
</div>
</div>
<a href="https://github.com/MoyDesign/MoyPlugin"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<script type="text/javascript">
function onInstallButClick() {
var isFirefox = typeof InstallTrigger !== 'undefined'
var isChrome = !!window.chrome && !!window.chrome.webstore
var href
if (isFirefox) {
href = firefoxBut.href
}
if (isChrome) {
href = chromeBut.href
}
if (href) {
window.open(href, '_blank')
} else {
alert('Looks like your browser is not supported :(')
}
}
function onDocsButClick() {
window.open(docsBut.href)
}
installBut.onclick = onInstallButClick
readTheDocsBut.onclick = onDocsButClick
</script>
</body>
</html>