forked from TimPietrusky/KudosPlease
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
183 lines (166 loc) · 6.28 KB
/
index.php
File metadata and controls
183 lines (166 loc) · 6.28 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<!doctype html>
<html lang="en">
<head>
<title>Kudos Please</title>
<meta charset="utf-8">
<meta name="author" content="Tim Pietrusky">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="1 days">
<meta name="description" content="An one-element kudos widget with no dependencies + API!">
<meta property="og:title" content="Kudos Please">
<meta property="og:description" content="An one-element kudos widget with no dependencies + API!">
<meta property="og:image" content="http://kudosplease.com/img/kudosplease_200.jpg">
<meta property="og:url" content="http://kudosplease.com">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/img/kudosplease.ico" type="image/x-icon">
</head>
<?php
$isLive = false;
// Local vs production
if (preg_match('!(kudosplease.com)!', $_SERVER['HTTP_HOST']) == 1) {
$isLive = true;
}
?>
<body id="kudosplease" data-max-width="1024" data-auto-extend="true">
<article data-high="1">
<section data-cols="1">
<div>
<h1>ku·dos Please</h1>
</div>
<div>
<p>To gain kudos is to earn respect and recognition (<a href="http://www.urbandictionary.com/define.php?term=kudos" target="_blank">Urbandirectory</a>).</p>
</div>
</section>
</article>
<article data-high="2">
<section data-cols="2" class="section--alpha">
<div data-type="1">
<div class="kudos kudos--default" data-amount="0" data-url="kudosplease.com"></div>
</div>
<div data-type="2">
<p>A one-element <b>kudos widget</b> with no dependencies.</p>
<p>Works on touch and normal devices. </p>
<p>The widget interacts with the <b>Kudos Please API</b> so you don't have to worry about saving the amount.</p>
<p>
<a href="https://github.com/TimPietrusky/KudosPlease" target="_blank">
<button class="button--alpha">Find it on GitHub</button>
</a>
</p>
</div>
</section>
</article>
<article data-high="4">
<section data-cols="2">
<div data-type="1">
<h2>1. Insert JS / CSS</h2>
<b>JS</b>
<pre><code class="language-markup"><script src="kudosplease-min.js"></script></code></pre>
<b>CSS</b>
<pre><code class="language-markup"><link rel="stylesheet" href="kudosplease-min.css"></code></pre>
</div>
<div data-type="2">
<h2>2. Insert the widget</h2>
<b>HTML</b>
<pre><code class="language-markup"><div class="kudos" data-amount="0" data-url="domain.tld/my-awesome-article"></div></code></pre>
<ul>
<li><b>data-amount</b> - the amount of kudos for a specific url</li>
<li><b>data-url</b> - the url to a specific site which receives the widget (without http://)</li>
</ul>
</div>
</section>
<section data-cols="1">
<div data-type="3">
<h2>3. Create the widget</h2>
<pre><code class="language-javascript">new KudosPlease({
el : '.kudos',
duration : 1500,
persistent : true,
status : {
alpha: 'fontelico-emo-shoot',
beta: 'fontelico-emo-shoot',
gamma: 'fontelico-emo-beer'
}
});</code></pre>
<ul>
<li><b>el</b> - the class of the kudos dom element</li>
<li><b>duration</b> - seconds until the kudos amount is increased</li>
<li><b>persistent</b> - [default: true] enables/disables localStorage to prevent the same user from kudoing the same URL again</li>
<li>
<b>status</b> - adds a class to the widget which represents the content (e.g. icon) of the widget for every status
<ul>
<li><b>alpha</b> - amount of 0</li>
<li><b>beta</b> - amount > 0</li>
<li><b>gamma</b> - kudos given (finish)</li>
</ul>
</li>
</ul>
</div>
</section>
</article>
<article data-high="2">
<section data-cols="2" class="section--beta">
<div data-type="2">
<div>
<h2>Persistence disabled</h2>
<p>
After you reload the page, you can use the widget again.
</p>
<pre><code class="language-javascript">new KudosPlease({
el : '.kudos--persistent',
duration : 1500,
persistent : false,
status : {
alpha: '',
beta: '',
gamma: 'fontelico-emo-sunglasses'
}
});</code></pre>
</div>
</div>
<div data-type="1">
<div class="kudos kudos--persistent" data-amount="0" data-url="kudosplease.com/persistent"></div>
</div>
</section>
</article>
<article data-high="3">
<section data-cols="2">
<div>
<a href="http://twitter.com/share?text=To+gain+kudos+is+to+earn+respect+and+recognition&url=http://kudosplease.com/" target="_blank">
<button>
Spread the word
</button>
</a>
</div>
<div>
<a href="https://github.com/TimPietrusky/KudosPlease" target="_blank">
<button>
Find it on GitHub
</button>
</a>
</div>
</section>
</article>
<article data-high="5">
<section data-cols="1">
<div>
<p>
Handcrafted 2013 by <a href="http://twitter.com/TimPietrusky" target="_blank">@TimPietrusky</a>.
</p>
</div>
</section>
</article>
<?php if ($isLive): ?>
<script src="/js/main-min.js"></script>
<script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-5596313-10']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();</script>
<?php else: ?>
<script src="/js/kudosplease.js"></script>
<script src="/js/main.js"></script>
<script src="/js/prism.js"></script>
<?php endif; ?>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</body>
</html>