Compare commits
135 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Gabriele Cirulli
|
90d8daa348 | ||
|
Gabriele Cirulli
|
48d1e87da7 | ||
|
Gabriele Cirulli
|
11e72a6423 | ||
|
Gabriele Cirulli
|
08726f7910 | ||
|
Gabriele Cirulli
|
c03c54aa73 | ||
|
Gabriele Cirulli
|
a5508bcbba | ||
|
Gabriele Cirulli
|
1a691b62a1 | ||
|
Gabriele Cirulli
|
1f5f0a32c8 | ||
|
Gabriele Cirulli
|
ca93878f6b | ||
|
Gabriele Cirulli
|
8f7725b8ab | ||
|
Gabriele Cirulli
|
9662478fbe | ||
|
Gabriele Cirulli
|
487ad74026 | ||
|
Gabriele Cirulli
|
bacc1519aa | ||
|
Gabriele Cirulli
|
883e8143cb | ||
|
Gabriele Cirulli
|
9d43b28dcc | ||
|
Gabriele Cirulli
|
97ccf41fe2 | ||
|
Gabriele Cirulli
|
7835eb8583 | ||
|
Gabriele Cirulli
|
3a647514fb | ||
|
Gabriele Cirulli
|
7bd95616f5 | ||
|
Gabriele Cirulli
|
1e587116a3 | ||
|
Gabriele Cirulli
|
57803a19fa | ||
|
Gabriele Cirulli
|
9bedbf228d | ||
|
Gabriele Cirulli
|
5736ded3be | ||
|
Gabriele Cirulli
|
9c95ab0836 | ||
|
Gabriele Cirulli
|
47ae9ea3be | ||
|
Gabriele Cirulli
|
730f1a95f1 | ||
|
Gabriele Cirulli
|
d1f497ff3b | ||
|
Gabriele Cirulli
|
988ec60a37 | ||
|
Gabriele Cirulli
|
c8f4a5c8c7 | ||
|
Anna Harren
|
f37a31ead4 | ||
|
K1ish
|
e5103f96b0 | ||
|
sigod
|
7e940d8bf2 | ||
|
sigod
|
66cee7e7a0 | ||
|
Mikhail Novikov
|
0fc4354517 | ||
|
Lee Reilly
|
00b1f13e05 | ||
|
Lee Reilly
|
b69154b183 | ||
|
Lee Reilly
|
775e574041 | ||
|
Mikhail Novikov
|
96bc88a795 | ||
|
Mikhail Novikov
|
09beaf57d1 | ||
|
Lee Reilly
|
19a5b225c9 | ||
|
Lee Reilly
|
6ef707529b | ||
|
Lee Reilly
|
48881f3c6f | ||
|
Gabriele Cirulli
|
95be843b3f | ||
|
Gabriele Cirulli
|
4a115b7a87 | ||
|
Gabriele Cirulli
|
a3c50eaf36 | ||
|
Gabriele Cirulli
|
2d76d56f42 | ||
|
Gabriele Cirulli
|
3793755010 | ||
|
Gabriele Cirulli
|
b56159b5da | ||
|
Gabriele Cirulli
|
7a6c761368 | ||
|
Gabriele Cirulli
|
1ca07d765e | ||
|
Gabriele Cirulli
|
26e2e0d2a2 | ||
|
Gabriele Cirulli
|
5110b255e1 | ||
|
Gabriele Cirulli
|
9efe9dab55 | ||
|
Gabriele Cirulli
|
888f0ad7fa | ||
|
Gabriele Cirulli
|
0f66c1834c | ||
|
Gabriele Cirulli
|
5edc10a077 | ||
|
Gabriele Cirulli
|
b81c5e9a74 | ||
|
Gabriele Cirulli
|
73a3db0c60 | ||
|
Gabriele Cirulli
|
77a09fd987 | ||
|
Gabriele Cirulli
|
fc414e45ae | ||
|
Gabriele Cirulli
|
2cc4f2a4cd | ||
|
Gabriele Cirulli
|
60ae35982b | ||
|
Gabriele Cirulli
|
fa49d3bc5a | ||
|
Gabriele Cirulli
|
fe04a69ba4 | ||
|
Gabriele Cirulli
|
a0ca822b4f | ||
|
Gabriele Cirulli
|
f3c41d72b7 | ||
|
Gabriele Cirulli
|
5afb368c15 | ||
|
Gabriele Cirulli
|
6c8d94c0cf | ||
|
Gabriele Cirulli
|
82e55988b4 | ||
|
Gabriele Cirulli
|
864a6c9a6a | ||
|
Gabriele Cirulli
|
fb2e012f06 | ||
|
Gabriele Cirulli
|
856e168c32 | ||
|
Gabriele Cirulli
|
36222ca5fb | ||
|
Gabriele Cirulli
|
941e6eea99 | ||
|
Cotton Hou
|
f57c8b052b | ||
|
Gabriele Cirulli
|
af61d052cb | ||
|
Gabriele Cirulli
|
907aff4266 | ||
|
Gabriele Cirulli
|
001a5b9ea2 | ||
|
Gabriele Cirulli
|
90f9541b1d | ||
|
Cotton Hou
|
887c6b4cfe | ||
|
Gabriele Cirulli
|
c6d4e4f29f | ||
|
Gabriele Cirulli
|
b7f09a4c23 | ||
|
Gabriele Cirulli
|
702dd1aa39 | ||
|
Gabriele Cirulli
|
91f0d161a0 | ||
|
Gabriele Cirulli
|
84fb0327d4 | ||
|
Gabriele Cirulli
|
8b1f3a4f71 | ||
|
Gabriele Cirulli
|
1fa911145a | ||
|
Gabriele Cirulli
|
d7932b9ddb | ||
|
Gabriele Cirulli
|
53dd0a79d9 | ||
|
Gabriele Cirulli
|
66b623dc1f | ||
|
Gabriele Cirulli
|
9f1c974499 | ||
|
Gabriele Cirulli
|
602c1015dd | ||
|
Gabriele Cirulli
|
52979f1297 | ||
|
Gabriele Cirulli
|
119d8ecdd0 | ||
|
Gabriele Cirulli
|
d16f57574f | ||
|
Gabriele Cirulli
|
03ec53ea25 | ||
|
Eli White
|
96ad918a06 | ||
|
Gabriele Cirulli
|
ebf96bfebb | ||
|
Gabriele Cirulli
|
e1dde5750d | ||
|
Gabriele Cirulli
|
e8618987aa | ||
|
Gabriele Cirulli
|
ce45d4cd8e | ||
|
Gabriele Cirulli
|
ff72bf8a14 | ||
|
Gabriele Cirulli
|
603833b981 | ||
|
Gabriele Cirulli
|
9d50e7d746 | ||
|
Gabriele Cirulli
|
39f229a9fa | ||
|
Gabriele Cirulli
|
f162d2a17c | ||
|
Gabriele Cirulli
|
bfd21d6e6b | ||
|
Gabriele Cirulli
|
a95df7a180 | ||
|
Gabriele Cirulli
|
347e11f1dc | ||
|
Gabriele Cirulli
|
16a6ecfca6 | ||
|
Gabriele Cirulli
|
4abe387b78 | ||
|
Gabriele Cirulli
|
9ce7f4eec0 | ||
|
Gabriele Cirulli
|
1cfb14c467 | ||
|
Gabriele Cirulli
|
50a4f29844 | ||
|
Gabriele Cirulli
|
13b16063b7 | ||
|
Gabriele Cirulli
|
80c878749f | ||
|
Gabriele Cirulli
|
6aa953cc1e | ||
|
Gabriele Cirulli
|
789440d4e8 | ||
|
Gabriele Cirulli
|
68f7e4a9c8 | ||
|
Gabriele Cirulli
|
557b35f988 | ||
|
Gabriele Cirulli
|
8ac3e1d0c5 | ||
|
Gabriele Cirulli
|
1ddcdae421 | ||
|
Gabriele Cirulli
|
b71af089c5 | ||
|
Gabriele Cirulli
|
62a314ad72 | ||
|
Gabriele Cirulli
|
7f99ed8316 | ||
|
Gabriele Cirulli
|
8bd4133b74 | ||
|
Gabriele Cirulli
|
2125c04a68 | ||
|
Gabriele Cirulli
|
9d48120a14 | ||
|
Gabriele Cirulli
|
aaebb037d2 | ||
|
Gabriele Cirulli
|
a85abfdaba | ||
|
Gabriele Cirulli
|
06fa37b0ae | ||
|
Gabriele Cirulli
|
c84ebb04b5 | ||
|
Gabriele Cirulli
|
54da66da14 | ||
|
Gabriele Cirulli
|
b5b8a8a024 | ||
|
Gabriele Cirulli
|
043b1ae08a |
@@ -1 +1,2 @@
|
||||
.sass-cache/
|
||||
.vscode/
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
CACHE MANIFEST
|
||||
|
||||
# Adds the ability to play the game offline.
|
||||
# The following comment needs to be updated whenever a change is made.
|
||||
# Run `rake appcache:update` to do so
|
||||
# Updated: 2019-01-13T21:16:00+01:00
|
||||
|
||||
# Main page
|
||||
index.html
|
||||
|
||||
# Privacy Page
|
||||
privacy.html
|
||||
|
||||
# CSS
|
||||
style/main.css
|
||||
|
||||
# Fonts
|
||||
style/fonts/clear-sans.css
|
||||
style/fonts/ClearSans-Bold-webfont.eot
|
||||
style/fonts/ClearSans-Bold-webfont.svg
|
||||
style/fonts/ClearSans-Bold-webfont.woff
|
||||
style/fonts/ClearSans-Light-webfont.eot
|
||||
style/fonts/ClearSans-Light-webfont.svg
|
||||
style/fonts/ClearSans-Light-webfont.woff
|
||||
style/fonts/ClearSans-Regular-webfont.eot
|
||||
style/fonts/ClearSans-Regular-webfont.svg
|
||||
style/fonts/ClearSans-Regular-webfont.woff
|
||||
|
||||
# Other resources
|
||||
meta/apple-touch-icon.png
|
||||
meta/icon_bitcoin.svg
|
||||
meta/icon_pp.svg
|
||||
meta/og_image.png
|
||||
|
||||
# JavaScript
|
||||
js/animframe_polyfill.js
|
||||
js/application.js
|
||||
js/bind_polyfill.js
|
||||
js/classlist_polyfill.js
|
||||
js/game_manager.js
|
||||
js/grid.js
|
||||
js/html_actuator.js
|
||||
js/keyboard_input_manager.js
|
||||
js/local_storage_manager.js
|
||||
js/tile.js
|
||||
|
||||
favicon.ico
|
||||
|
||||
NETWORK:
|
||||
*
|
||||
|
||||
+125
-2
@@ -1,9 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>2048</title>
|
||||
|
||||
<script>
|
||||
if (typeof window !== undefined && typeof window.location !== undefined && window.location.hostname === "gabrielecirulli.github.io") {
|
||||
if (typeof window.location.replace === "function") {
|
||||
window.location.replace("https://play2048.co/");
|
||||
} else {
|
||||
window.location = "https://play2048.co/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42620757-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "UA-42620757-2");
|
||||
</script>
|
||||
|
||||
<link href="style/main.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
|
||||
@@ -15,8 +34,57 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
||||
<meta name="apple-itunes-app" content="app-id=868076805">
|
||||
|
||||
<meta property="og:title" content="2048"/>
|
||||
<meta property="og:site_name" content="2048"/>
|
||||
<meta property="og:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!"/>
|
||||
<meta property="og:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png"/>
|
||||
|
||||
<meta name="twitter:card" content="app" />
|
||||
<meta name="twitter:site" content="@gabrielecirulli" />
|
||||
<meta name="twitter:title" content="2048" />
|
||||
<meta name="twitter:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!" />
|
||||
<meta name="twitter:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png" />
|
||||
<meta name="twitter:url" content="http://gabrielecirulli.github.io/2048/" />
|
||||
<meta name="twitter:app:country" content="US">
|
||||
<meta name="twitter:app:name:iphone" content="2048">
|
||||
<meta name="twitter:app:id:iphone" content="868076805">
|
||||
<meta name="twitter:app:url:iphone" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:ipad" content="2048">
|
||||
<meta name="twitter:app:id:ipad" content="868076805">
|
||||
<meta name="twitter:app:url:ipad" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:googleplay" content="2048">
|
||||
<meta name="twitter:app:id:googleplay" content="com.gabrielecirulli.app2048">
|
||||
<meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048">
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({
|
||||
google_ad_client: "ca-pub-2670526606338388",
|
||||
enable_page_level_ads: true
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<ins
|
||||
class="adsbygoogle"
|
||||
style="display:inline-block;width:160px;height:600px"
|
||||
data-ad-client="ca-pub-2670526606338388"
|
||||
data-ad-slot="2901539552"
|
||||
></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="cookie-notice">
|
||||
<p>2048 uses cookies to analyse traffic to the site and to serve ads. <a href="./privacy.html">Learn More</a></p>
|
||||
<a class="cookie-notice-dismiss-button">Got it</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="heading">
|
||||
<h1 class="title">2048</h1>
|
||||
@@ -31,12 +99,33 @@
|
||||
<a class="restart-button">New Game</a>
|
||||
</div>
|
||||
|
||||
<div class="app-notice">
|
||||
<span class="notice-close-button">×</span>
|
||||
<p>Get 2048 for <a href="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048" target="_blank">Android!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="game-container">
|
||||
<div class="game-message">
|
||||
<p></p>
|
||||
<div class="lower">
|
||||
<a class="keep-playing-button">Keep going</a>
|
||||
<a class="retry-button">Try again</a>
|
||||
<div class="score-sharing"></div>
|
||||
<div class="mailing-list">
|
||||
<!-- MailChimp Signup Form -->
|
||||
<form action="http://gabrielecirulli.us8.list-manage.com/subscribe/post?u=991201206817cfb4e4247ed6c&id=7928ea817b" method="post" name="mc-embedded-subscribe-form" class="mailing-list-form" target="_blank">
|
||||
<strong>Get email updates from Gabriele</strong>
|
||||
|
||||
<input type="email" value="" name="EMAIL" class="mailing-list-email-field" placeholder="Your email address" spellcheck="false">
|
||||
|
||||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||
<div style="position: absolute; left: -9999px;">
|
||||
<input type="text" name="b_991201206817cfb4e4247ed6c_7928ea817b" value="">
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Go" name="subscribe" class="mailing-list-subscribe-button">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,17 +161,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="under-board-container">
|
||||
<ins class="adsbygoogle"
|
||||
data-ad-client="ca-pub-2670526606338388"
|
||||
data-ad-slot="3711201455"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="false"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<p class="game-explanation">
|
||||
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
<strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and should be used with caution.
|
||||
<strong class="important">Note:</strong> The game on <a href="http://git.io/2048">this site</a> is the original version of 2048. Apps for <a href="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048" target="_blank">Android</a> are also available. Other versions are derivatives or fakes, and should be used with caution.
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
|
||||
</p>
|
||||
<div class="sharing">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out 2048, a game where you join numbers to score high! #2048game" data-via="gabrielecirulli" data-url="http://git.io/2048" data-counturl="http://gabrielecirulli.github.io/2048/">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
|
||||
<form class="pp-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
<input type="hidden" name="hosted_button_id" value="NVNPJLTBZ8AME">
|
||||
<button name="submit"><img src="meta/icon_pp.svg">Donate</button>
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<span class="btc-donate">
|
||||
<a href="bitcoin:1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i">
|
||||
<img src="meta/icon_bitcoin.svg">Donate BTC
|
||||
</a>
|
||||
<span class="address"><code>1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i</code></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="links">
|
||||
<a href="./privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="js/bind_polyfill.js"></script>
|
||||
|
||||
+222
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>2048</title>
|
||||
|
||||
<script>
|
||||
if (typeof window !== undefined && typeof window.location !== undefined && window.location.hostname === "gabrielecirulli.github.io") {
|
||||
if (typeof window.location.replace === "function") {
|
||||
window.location.replace("https://play2048.co/");
|
||||
} else {
|
||||
window.location = "https://play2048.co/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42620757-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "UA-42620757-2");
|
||||
</script>
|
||||
|
||||
<link href="style/main.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
|
||||
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
|
||||
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
||||
<meta name="apple-itunes-app" content="app-id=868076805">
|
||||
|
||||
<meta property="og:title" content="2048"/>
|
||||
<meta property="og:site_name" content="2048"/>
|
||||
<meta property="og:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!"/>
|
||||
<meta property="og:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png"/>
|
||||
|
||||
<meta name="twitter:card" content="app" />
|
||||
<meta name="twitter:site" content="@gabrielecirulli" />
|
||||
<meta name="twitter:title" content="2048" />
|
||||
<meta name="twitter:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!" />
|
||||
<meta name="twitter:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png" />
|
||||
<meta name="twitter:url" content="http://gabrielecirulli.github.io/2048/" />
|
||||
<meta name="twitter:app:country" content="US">
|
||||
<meta name="twitter:app:name:iphone" content="2048">
|
||||
<meta name="twitter:app:id:iphone" content="868076805">
|
||||
<meta name="twitter:app:url:iphone" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:ipad" content="2048">
|
||||
<meta name="twitter:app:id:ipad" content="868076805">
|
||||
<meta name="twitter:app:url:ipad" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:googleplay" content="2048">
|
||||
<meta name="twitter:app:id:googleplay" content="com.gabrielecirulli.app2048">
|
||||
<meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048">
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({
|
||||
google_ad_client: "ca-pub-2670526606338388",
|
||||
enable_page_level_ads: true
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<ins
|
||||
class="adsbygoogle"
|
||||
style="display:inline-block;width:160px;height:600px"
|
||||
data-ad-client="ca-pub-2670526606338388"
|
||||
data-ad-slot="2901539552"
|
||||
></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="cookie-notice">
|
||||
<p>2048 uses cookies to analyse traffic to the site and to serve ads. <a href="./privacy.html">Learn More</a></p>
|
||||
<a class="cookie-notice-dismiss-button">Got it</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="heading">
|
||||
<h1 class="title">2048</h1>
|
||||
<div class="scores-container">
|
||||
<div class="score-container">0</div>
|
||||
<div class="best-container">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="above-game">
|
||||
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
|
||||
<a class="restart-button">New Game</a>
|
||||
</div>
|
||||
|
||||
<div class="app-notice">
|
||||
<span class="notice-close-button">×</span>
|
||||
<p>Get 2048 for <a href="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048" target="_blank">Android!</a></p>
|
||||
</div>
|
||||
|
||||
<div class="game-container">
|
||||
<div class="game-message">
|
||||
<p></p>
|
||||
<div class="lower">
|
||||
<a class="keep-playing-button">Keep going</a>
|
||||
<a class="retry-button">Try again</a>
|
||||
<div class="score-sharing"></div>
|
||||
<div class="mailing-list">
|
||||
<!-- MailChimp Signup Form -->
|
||||
<form action="http://gabrielecirulli.us8.list-manage.com/subscribe/post?u=991201206817cfb4e4247ed6c&id=7928ea817b" method="post" name="mc-embedded-subscribe-form" class="mailing-list-form" target="_blank">
|
||||
<strong>Get email updates from Gabriele</strong>
|
||||
|
||||
<input type="email" value="" name="EMAIL" class="mailing-list-email-field" placeholder="Your email address" spellcheck="false">
|
||||
|
||||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||
<div style="position: absolute; left: -9999px;">
|
||||
<input type="text" name="b_991201206817cfb4e4247ed6c_7928ea817b" value="">
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Go" name="subscribe" class="mailing-list-subscribe-button">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="grid-row">
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
<div class="grid-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="under-board-container">
|
||||
<ins class="adsbygoogle"
|
||||
data-ad-client="ca-pub-2670526606338388"
|
||||
data-ad-slot="3711201455"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="false"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<p class="game-explanation">
|
||||
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
<strong class="important">Note:</strong> The game on <a href="http://git.io/2048">this site</a> is the original version of 2048. Apps for <a href="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048" target="_blank">Android</a> are also available. Other versions are derivatives or fakes, and should be used with caution.
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
|
||||
</p>
|
||||
<div class="sharing">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out 2048, a game where you join numbers to score high! #2048game" data-via="gabrielecirulli" data-url="http://git.io/2048" data-counturl="http://gabrielecirulli.github.io/2048/">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
|
||||
<form class="pp-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
<input type="hidden" name="hosted_button_id" value="NVNPJLTBZ8AME">
|
||||
<button name="submit"><img src="meta/icon_pp.svg">Donate</button>
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<span class="btc-donate">
|
||||
<a href="bitcoin:1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i">
|
||||
<img src="meta/icon_bitcoin.svg">Donate BTC
|
||||
</a>
|
||||
<span class="address"><code>1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i</code></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="links">
|
||||
<a href="./privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="js/bind_polyfill.js"></script>
|
||||
<script src="js/classlist_polyfill.js"></script>
|
||||
<script src="js/animframe_polyfill.js"></script>
|
||||
<script src="js/keyboard_input_manager.js"></script>
|
||||
<script src="js/html_actuator.js"></script>
|
||||
<script src="js/grid.js"></script>
|
||||
<script src="js/tile.js"></script>
|
||||
<script src="js/local_storage_manager.js"></script>
|
||||
<script src="js/game_manager.js"></script>
|
||||
<script src="js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,39 @@
|
||||
// Wait till the browser is ready to render the game (avoids glitches)
|
||||
window.requestAnimationFrame(function () {
|
||||
new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
|
||||
|
||||
// TODO: This code is in need of a refactor (along with the rest)
|
||||
var storage = new LocalStorageManager;
|
||||
var noticeClose = document.querySelector(".notice-close-button");
|
||||
var notice = document.querySelector(".app-notice");
|
||||
var cookieNotice = document.querySelector(".cookie-notice");
|
||||
var cookieNoticeClose = document.querySelector(".cookie-notice-dismiss-button");
|
||||
|
||||
if (storage.getNoticeClosed()) {
|
||||
notice.parentNode.removeChild(notice);
|
||||
} else {
|
||||
noticeClose.addEventListener("click", function () {
|
||||
notice.parentNode.removeChild(notice);
|
||||
storage.setNoticeClosed(true);
|
||||
if (typeof gtag !== undefined){
|
||||
gtag("event", "closed", {
|
||||
event_category: "notice",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (storage.getCookieNoticeClosed()) {
|
||||
cookieNotice.parentNode.removeChild(cookieNotice);
|
||||
} else {
|
||||
cookieNoticeClose.addEventListener("click", function () {
|
||||
cookieNotice.parentNode.removeChild(cookieNotice);
|
||||
storage.setCookieNoticeClosed(true);
|
||||
if (typeof gtag !== undefined){
|
||||
gtag("event", "closed", {
|
||||
event_category: "cookie-notice",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
@@ -3,6 +3,7 @@ function HTMLActuator() {
|
||||
this.scoreContainer = document.querySelector(".score-container");
|
||||
this.bestContainer = document.querySelector(".best-container");
|
||||
this.messageContainer = document.querySelector(".game-message");
|
||||
this.sharingContainer = document.querySelector(".score-sharing");
|
||||
|
||||
this.score = 0;
|
||||
}
|
||||
@@ -37,6 +38,12 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
|
||||
|
||||
// Continues the game (both restart and keep playing)
|
||||
HTMLActuator.prototype.continueGame = function () {
|
||||
if (typeof gtag !== "undefined") {
|
||||
gtag("event", "restart", {
|
||||
event_category: "game",
|
||||
});
|
||||
}
|
||||
|
||||
this.clearMessage();
|
||||
};
|
||||
|
||||
@@ -128,8 +135,20 @@ HTMLActuator.prototype.message = function (won) {
|
||||
var type = won ? "game-won" : "game-over";
|
||||
var message = won ? "You win!" : "Game over!";
|
||||
|
||||
if (typeof gtag !== "undefined") {
|
||||
gtag("event", "end", {
|
||||
event_category: "game",
|
||||
event_label: type,
|
||||
value: this.score,
|
||||
});
|
||||
}
|
||||
|
||||
this.messageContainer.classList.add(type);
|
||||
this.messageContainer.getElementsByTagName("p")[0].textContent = message;
|
||||
|
||||
this.clearContainer(this.sharingContainer);
|
||||
this.sharingContainer.appendChild(this.scoreTweetButton());
|
||||
twttr.widgets.load();
|
||||
};
|
||||
|
||||
HTMLActuator.prototype.clearMessage = function () {
|
||||
@@ -137,3 +156,19 @@ HTMLActuator.prototype.clearMessage = function () {
|
||||
this.messageContainer.classList.remove("game-won");
|
||||
this.messageContainer.classList.remove("game-over");
|
||||
};
|
||||
|
||||
HTMLActuator.prototype.scoreTweetButton = function () {
|
||||
var tweet = document.createElement("a");
|
||||
tweet.classList.add("twitter-share-button");
|
||||
tweet.setAttribute("href", "https://twitter.com/share");
|
||||
tweet.setAttribute("data-via", "gabrielecirulli");
|
||||
tweet.setAttribute("data-url", "http://git.io/2048");
|
||||
tweet.setAttribute("data-counturl", "http://gabrielecirulli.github.io/2048/");
|
||||
tweet.textContent = "Tweet";
|
||||
|
||||
var text = "I scored " + this.score + " points at 2048, a game where you " +
|
||||
"join numbers to score high! #2048game";
|
||||
tweet.setAttribute("data-text", text);
|
||||
|
||||
return tweet;
|
||||
};
|
||||
|
||||
@@ -55,6 +55,9 @@ KeyboardInputManager.prototype.listen = function () {
|
||||
event.shiftKey;
|
||||
var mapped = map[event.which];
|
||||
|
||||
// Ignore the event if it's happening in a text field
|
||||
if (self.targetIsInput(event)) return;
|
||||
|
||||
if (!modifiers) {
|
||||
if (mapped !== undefined) {
|
||||
event.preventDefault();
|
||||
@@ -79,8 +82,9 @@ KeyboardInputManager.prototype.listen = function () {
|
||||
|
||||
gameContainer.addEventListener(this.eventTouchstart, function (event) {
|
||||
if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
|
||||
event.targetTouches.length > 1) {
|
||||
return; // Ignore if touching with more than 1 finger
|
||||
event.targetTouches.length > 1 ||
|
||||
self.targetIsInput(event)) {
|
||||
return; // Ignore if touching with more than 1 finger or touching input
|
||||
}
|
||||
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
@@ -100,8 +104,9 @@ KeyboardInputManager.prototype.listen = function () {
|
||||
|
||||
gameContainer.addEventListener(this.eventTouchend, function (event) {
|
||||
if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
|
||||
event.targetTouches.length > 0) {
|
||||
return; // Ignore if still touching with one or more fingers
|
||||
event.targetTouches.length > 0 ||
|
||||
self.targetIsInput(event)) {
|
||||
return; // Ignore if still touching with one or more fingers or input
|
||||
}
|
||||
|
||||
var touchEndClientX, touchEndClientY;
|
||||
@@ -142,3 +147,7 @@ KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) {
|
||||
button.addEventListener("click", fn.bind(this));
|
||||
button.addEventListener(this.eventTouchend, fn.bind(this));
|
||||
};
|
||||
|
||||
KeyboardInputManager.prototype.targetIsInput = function (event) {
|
||||
return event.target.tagName.toLowerCase() === "input";
|
||||
};
|
||||
|
||||
@@ -19,8 +19,10 @@ window.fakeStorage = {
|
||||
};
|
||||
|
||||
function LocalStorageManager() {
|
||||
this.bestScoreKey = "bestScore";
|
||||
this.gameStateKey = "gameState";
|
||||
this.bestScoreKey = "bestScore";
|
||||
this.gameStateKey = "gameState";
|
||||
this.noticeClosedKey = "noticeClosed";
|
||||
this.cookieNoticeClosedKey = "cookieNoticeClosed";
|
||||
|
||||
var supported = this.localStorageSupported();
|
||||
this.storage = supported ? window.localStorage : window.fakeStorage;
|
||||
@@ -61,3 +63,19 @@ LocalStorageManager.prototype.setGameState = function (gameState) {
|
||||
LocalStorageManager.prototype.clearGameState = function () {
|
||||
this.storage.removeItem(this.gameStateKey);
|
||||
};
|
||||
|
||||
LocalStorageManager.prototype.setNoticeClosed = function (noticeClosed) {
|
||||
this.storage.setItem(this.noticeClosedKey, JSON.stringify(noticeClosed));
|
||||
};
|
||||
|
||||
LocalStorageManager.prototype.getNoticeClosed = function () {
|
||||
return JSON.parse(this.storage.getItem(this.noticeClosedKey) || "false");
|
||||
};
|
||||
|
||||
LocalStorageManager.prototype.setCookieNoticeClosed = function (cookieNoticeClosed) {
|
||||
this.storage.setItem(this.cookieNoticeClosedKey, JSON.stringify(cookieNoticeClosed));
|
||||
};
|
||||
|
||||
LocalStorageManager.prototype.getCookieNoticeClosed = function () {
|
||||
return JSON.parse(this.storage.getItem(this.cookieNoticeClosedKey) || "false");
|
||||
};
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#DDB802" d="M10,19.5c-5.2,0-9.5-4.3-9.5-9.5S4.8,0.5,10,0.5s9.5,4.3,9.5,9.5S15.2,19.5,10,19.5z"/>
|
||||
<path fill="#FFED95" d="M10,1c5,0,9,4,9,9c0,5-4,9-9,9c-5,0-9-4-9-9C1,5,5,1,10,1 M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10
|
||||
c5.5,0,10-4.5,10-10C20,4.5,15.5,0,10,0L10,0z"/>
|
||||
</g>
|
||||
<path fill="#FFFFFF" d="M15,8.5c0.2-1.4-0.9-2.2-2.5-2.7l0.5-2l-1.3-0.3l-0.5,1.9c-0.3-0.1-0.7-0.2-1-0.2l0.5-1.9L9.4,3L8.9,5
|
||||
C8.6,4.9,8.3,4.8,8.1,4.8l0,0L6.3,4.4L6,5.6c0,0,0.9,0.2,0.9,0.2C7.4,6,7.5,6.3,7.5,6.5L6.9,8.8c0,0,0.1,0,0.1,0c0,0-0.1,0-0.1,0
|
||||
l-0.8,3.1C6,12,5.9,12.3,5.5,12.2c0,0-0.9-0.2-0.9-0.2L4,13.3l1.6,0.4c0.3,0.1,0.6,0.1,0.9,0.2l-0.5,2l1.3,0.3l0.5-2
|
||||
c0.3,0.1,0.7,0.2,1,0.2l-0.5,1.9l1.3,0.3l0.5-2c2.2,0.4,3.8,0.2,4.5-1.6c0.6-1.5,0-2.3-1.2-2.9C14.2,10.1,14.8,9.6,15,8.5L15,8.5z
|
||||
M12.1,12.3c-0.4,1.5-3,0.7-3.9,0.5l0.7-2.6C9.7,10.4,12.5,10.8,12.1,12.3z M12.5,8.5C12.1,9.9,9.9,9.2,9.2,9l0.6-2.4
|
||||
C10.5,6.8,12.8,7.1,12.5,8.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<g>
|
||||
<circle fill="#FFFFFF" cx="10" cy="10" r="10"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#195A7F" d="M12.3,4.8h-5L5,15h3l0.7-3.4h2.1c2,0,3.7-1.2,4.2-3.4
|
||||
C15.5,5.9,13.8,4.8,12.3,4.8z M12.2,8.3c-0.2,0.8-0.9,1.4-1.7,1.4H9.1l0.6-2.8h1.4C11.9,6.9,12.4,7.5,12.2,8.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 768 B |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
+149
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" manifest="cache.appcache">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Privacy Policy — 2048</title>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42620757-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "UA-42620757-2");
|
||||
</script>
|
||||
|
||||
<link href="style/main.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
|
||||
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
|
||||
<!-- iPhone 5+ -->
|
||||
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
|
||||
<!-- iPhone, retina -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
||||
<meta name="apple-itunes-app" content="app-id=868076805">
|
||||
|
||||
<meta property="og:title" content="2048" />
|
||||
<meta property="og:site_name" content="2048" />
|
||||
<meta property="og:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!"
|
||||
/>
|
||||
<meta property="og:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png" />
|
||||
|
||||
<meta name="twitter:card" content="app" />
|
||||
<meta name="twitter:site" content="@gabrielecirulli" />
|
||||
<meta name="twitter:title" content="2048" />
|
||||
<meta name="twitter:description" content="Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive!"
|
||||
/>
|
||||
<meta name="twitter:image" content="http://gabrielecirulli.github.io/2048/meta/og_image.png" />
|
||||
<meta name="twitter:url" content="http://gabrielecirulli.github.io/2048/" />
|
||||
<meta name="twitter:app:country" content="US">
|
||||
<meta name="twitter:app:name:iphone" content="2048">
|
||||
<meta name="twitter:app:id:iphone" content="868076805">
|
||||
<meta name="twitter:app:url:iphone" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:ipad" content="2048">
|
||||
<meta name="twitter:app:id:ipad" content="868076805">
|
||||
<meta name="twitter:app:url:ipad" content="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805">
|
||||
<meta name="twitter:app:name:googleplay" content="2048">
|
||||
<meta name="twitter:app:id:googleplay" content="com.gabrielecirulli.app2048">
|
||||
<meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container privacy">
|
||||
<div class="heading">
|
||||
<h2 class="title">Privacy Policy and Cookie Statement</h2>
|
||||
</div>
|
||||
<p>
|
||||
<a href="https://gabrielecirulli.github.io/2048">https://gabrielecirulli.github.io/2048</a> and <a href="https://play2048.co">https://play2048.co</a> are operated and maintained by Gabriele Cirulli,
|
||||
<a href="https://github.com/iirelu">@iirelu</a> and
|
||||
<a href="https://github.com/sigod">@sigod</a>. This website is hosted on servers operated by GitHub Inc. This document outlines the data handling practices for this website.
|
||||
</p>
|
||||
|
||||
<h3>What personal data do you collect?</h3>
|
||||
|
||||
<p>For analytics purposes, anonymous and aggregated data may be collected, using Google Analytics. Google AdSense, used on this website for advertsing purposes, may also collect similar data. This data includes:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Technical data:</strong> Your IP address, browser type, operating system type, hardware model (if available), location
|
||||
and locale (language and region), screen dimensions, browser dimensions, etc.</li>
|
||||
<li>
|
||||
<strong>Navigational information:</strong> What pages you access on this website, how long you spend on each page;</li>
|
||||
<li>
|
||||
<strong>Usage information:</strong> Analytics tied to your use of website features, such as when you start, win or lose a
|
||||
game.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>AdSense is used to publish ads on this site. Users in the European Economic Area (EEA) are served non-personalized ads (NPA), which do not track users and are not based on the user's past behavior on this or other websites. The following data may be used in order to serve NPAs:</p>
|
||||
|
||||
<ul>
|
||||
<li>Coarse (such as city-level) geo-targeting based on current location;</li>
|
||||
<li>Content on the current site;</li>
|
||||
</ul>
|
||||
|
||||
<p>For all other users, personalized ads may be displayed. Personalized ads may use the following information:</p>
|
||||
|
||||
<ul>
|
||||
<li>Sites or apps that have been visited in the past;</li>
|
||||
<li>Past searches and location data;</li>
|
||||
<li>Videos and ads that have been seen in the past;</li>
|
||||
<li>Personal information provided in the past by the user, such as age range, gender, and topics of interest.</li>
|
||||
</ul>
|
||||
|
||||
<p>For more information on how Google Analytics and Google AdSense use this data see:
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://privacy.google.com/how-ads-work.html">https://privacy.google.com/how-ads-work.html</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://policies.google.com/technologies/partner-sites">https://policies.google.com/technologies/partner-sites</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://support.google.com/analytics/answer/6004245">https://support.google.com/analytics/answer/6004245</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://support.google.com/adsense/answer/7549925?hl=en">https://support.google.com/adsense/answer/7549925?hl=en</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h3>Are cookies stored on my device? How are they used?</h3>
|
||||
|
||||
<p>We use your browser's local storage features to locally store information about the game's state. This lets us save your
|
||||
game at any point and allow you to pick it back up from where you left off. This data is kept in your browser and never
|
||||
sent to servers operated by us or a third-party. No personally-identifiable information is included.</p>
|
||||
|
||||
<h3>Other notices about services used by this website</h3>
|
||||
|
||||
<ul>
|
||||
<li>This website embeds social media features from Twitter. For information on Twitter's Cookie Policy please see:
|
||||
<a href="https://help.twitter.com/en/rules-and-policies/twitter-cookies">https://help.twitter.com/en/rules-and-policies/twitter-cookies</a>
|
||||
</li>
|
||||
<li>This website embeds a PayPal donation button which may store cookies on your device in order to function. For information on Paypal's Cookie Policy please see:
|
||||
<a href="https://www.paypal.com/uk/webapps/mpp/ua/cookie-full">https://www.paypal.com/uk/webapps/mpp/ua/cookie-full</a>
|
||||
</li>
|
||||
<li>This website uses Google Analytics. For information on Google Analytics's Cookie Policy please see:
|
||||
<a href="https://support.google.com/analytics/answer/6004245">https://support.google.com/analytics/answer/6004245</a>
|
||||
</li>
|
||||
<li>This website uses Google AdSense. For information on Google AdSense's Cookie Policy please see:
|
||||
<a href="https://support.google.com/adsense/answer/7549925?hl=en">https://support.google.com/adsense/answer/7549925?hl=en</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>If you have any questions, feel free to email
|
||||
<a href="mailto:me@gabrielecirulli.com">me@gabrielecirulli.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -72,6 +72,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Appearance
|
||||
@mixin appearance($args...) {
|
||||
-webkit-appearance: $args;
|
||||
-moz-appearance: $args;
|
||||
appearance: $args;
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
|
||||
+517
-96
@@ -10,6 +10,38 @@ html, body {
|
||||
body {
|
||||
margin: 80px 0; }
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
input[type="text"], input[type="email"] {
|
||||
cursor: auto;
|
||||
background: #fcfbf9;
|
||||
font-weight: normal;
|
||||
color: #776e65;
|
||||
padding: 0 15px; }
|
||||
input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder {
|
||||
color: #9d948c; }
|
||||
input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder {
|
||||
color: #9d948c; }
|
||||
input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder {
|
||||
color: #9d948c; }
|
||||
|
||||
.heading:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -137,6 +169,24 @@ hr {
|
||||
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
@-webkit-keyframes slide-up {
|
||||
0% {
|
||||
margin-top: 32%; }
|
||||
|
||||
100% {
|
||||
margin-top: 20%; } }
|
||||
@-moz-keyframes slide-up {
|
||||
0% {
|
||||
margin-top: 32%; }
|
||||
|
||||
100% {
|
||||
margin-top: 20%; } }
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
margin-top: 32%; }
|
||||
|
||||
100% {
|
||||
margin-top: 20%; } }
|
||||
.game-container {
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
@@ -156,50 +206,79 @@ hr {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.game-container .game-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.5);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
-webkit-animation: fade-in 800ms ease 1200ms;
|
||||
-moz-animation: fade-in 800ms ease 1200ms;
|
||||
animation: fade-in 800ms ease 1200ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-container .game-message p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px; }
|
||||
.game-container .game-message .lower {
|
||||
|
||||
.game-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.73);
|
||||
z-index: 100;
|
||||
padding-top: 40px;
|
||||
text-align: center;
|
||||
-webkit-animation: fade-in 800ms ease 1200ms;
|
||||
-moz-animation: fade-in 800ms ease 1200ms;
|
||||
animation: fade-in 800ms ease 1200ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-message p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px; }
|
||||
.game-message .lower {
|
||||
display: block;
|
||||
margin-top: 29px; }
|
||||
.game-message .mailing-list {
|
||||
margin-top: 52px; }
|
||||
.game-message .mailing-list strong {
|
||||
display: block;
|
||||
margin-top: 59px; }
|
||||
.game-container .game-message a {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
margin-left: 9px; }
|
||||
.game-container .game-message a.keep-playing-button {
|
||||
display: none; }
|
||||
.game-container .game-message.game-won {
|
||||
background: rgba(237, 194, 46, 0.5);
|
||||
color: #f9f6f2; }
|
||||
.game-container .game-message.game-won a.keep-playing-button {
|
||||
display: inline-block; }
|
||||
.game-container .game-message.game-won, .game-container .game-message.game-over {
|
||||
display: block; }
|
||||
margin-bottom: 10px; }
|
||||
.game-message .mailing-list .mailing-list-email-field {
|
||||
width: 230px;
|
||||
margin-right: 5px; }
|
||||
.game-message a {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
margin-left: 9px; }
|
||||
.game-message a.keep-playing-button {
|
||||
display: none; }
|
||||
.game-message .score-sharing {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px; }
|
||||
.game-message.game-won {
|
||||
background: rgba(237, 194, 46, 0.5);
|
||||
color: #f9f6f2; }
|
||||
.game-message.game-won a.keep-playing-button {
|
||||
display: inline-block; }
|
||||
.game-message.game-won, .game-message.game-over {
|
||||
display: block; }
|
||||
.game-message.game-won p, .game-message.game-over p {
|
||||
-webkit-animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
-moz-animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
|
||||
-webkit-animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
-moz-animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.grid-container {
|
||||
position: absolute;
|
||||
@@ -526,20 +605,28 @@ hr {
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: right; }
|
||||
|
||||
.game-explanation {
|
||||
margin-top: 50px; }
|
||||
margin-top: 30px; }
|
||||
|
||||
.sharing {
|
||||
margin-top: 20px;
|
||||
text-align: center; }
|
||||
.sharing > iframe, .sharing > span, .sharing > form {
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
html, body {
|
||||
font-size: 15px; }
|
||||
|
||||
body {
|
||||
margin: 20px 0;
|
||||
padding: 0 20px; }
|
||||
margin-top: 0;
|
||||
padding: 20px; }
|
||||
|
||||
h1.title {
|
||||
font-size: 27px;
|
||||
@@ -589,50 +676,79 @@ hr {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.game-container .game-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.5);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
-webkit-animation: fade-in 800ms ease 1200ms;
|
||||
-moz-animation: fade-in 800ms ease 1200ms;
|
||||
animation: fade-in 800ms ease 1200ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-container .game-message p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px; }
|
||||
.game-container .game-message .lower {
|
||||
|
||||
.game-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(238, 228, 218, 0.73);
|
||||
z-index: 100;
|
||||
padding-top: 40px;
|
||||
text-align: center;
|
||||
-webkit-animation: fade-in 800ms ease 1200ms;
|
||||
-moz-animation: fade-in 800ms ease 1200ms;
|
||||
animation: fade-in 800ms ease 1200ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-message p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px; }
|
||||
.game-message .lower {
|
||||
display: block;
|
||||
margin-top: 29px; }
|
||||
.game-message .mailing-list {
|
||||
margin-top: 52px; }
|
||||
.game-message .mailing-list strong {
|
||||
display: block;
|
||||
margin-top: 59px; }
|
||||
.game-container .game-message a {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
margin-left: 9px; }
|
||||
.game-container .game-message a.keep-playing-button {
|
||||
display: none; }
|
||||
.game-container .game-message.game-won {
|
||||
background: rgba(237, 194, 46, 0.5);
|
||||
color: #f9f6f2; }
|
||||
.game-container .game-message.game-won a.keep-playing-button {
|
||||
display: inline-block; }
|
||||
.game-container .game-message.game-won, .game-container .game-message.game-over {
|
||||
display: block; }
|
||||
margin-bottom: 10px; }
|
||||
.game-message .mailing-list .mailing-list-email-field {
|
||||
width: 230px;
|
||||
margin-right: 5px; }
|
||||
.game-message a {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
margin-left: 9px; }
|
||||
.game-message a.keep-playing-button {
|
||||
display: none; }
|
||||
.game-message .score-sharing {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px; }
|
||||
.game-message.game-won {
|
||||
background: rgba(237, 194, 46, 0.5);
|
||||
color: #f9f6f2; }
|
||||
.game-message.game-won a.keep-playing-button {
|
||||
display: inline-block; }
|
||||
.game-message.game-won, .game-message.game-over {
|
||||
display: block; }
|
||||
.game-message.game-won p, .game-message.game-over p {
|
||||
-webkit-animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
-moz-animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
animation: slide-up 1.5s ease-in-out 2500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
|
||||
-webkit-animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
-moz-animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
animation: fade-in 1.5s ease-in-out 2500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.grid-container {
|
||||
position: absolute;
|
||||
@@ -749,10 +865,315 @@ hr {
|
||||
.tile .tile-inner {
|
||||
font-size: 35px; }
|
||||
|
||||
.game-message p {
|
||||
font-size: 30px !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
margin-top: 90px !important; }
|
||||
.game-message .lower {
|
||||
margin-top: 30px !important; } }
|
||||
.game-message {
|
||||
padding-top: 0; }
|
||||
.game-message p {
|
||||
font-size: 30px !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
margin-top: 32% !important;
|
||||
margin-bottom: 0 !important; }
|
||||
.game-message .lower {
|
||||
margin-top: 10px !important; }
|
||||
.game-message.game-won .score-sharing {
|
||||
margin-top: 10px; }
|
||||
.game-message.game-over .mailing-list {
|
||||
margin-top: 25px; }
|
||||
.game-message .mailing-list {
|
||||
margin-top: 10px; }
|
||||
.game-message .mailing-list .mailing-list-email-field {
|
||||
width: 180px; }
|
||||
|
||||
.sharing > iframe, .sharing > span, .sharing > form {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px; } }
|
||||
.pp-donate button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer; }
|
||||
.pp-donate button img {
|
||||
vertical-align: -4px;
|
||||
margin-right: 8px; }
|
||||
|
||||
.btc-donate {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer; }
|
||||
.btc-donate img {
|
||||
vertical-align: -4px;
|
||||
margin-right: 8px; }
|
||||
.btc-donate a {
|
||||
color: #f9f6f2;
|
||||
text-decoration: none;
|
||||
font-weight: normal; }
|
||||
.btc-donate .address {
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
right: 50%;
|
||||
margin-right: -170px;
|
||||
padding-bottom: 7px;
|
||||
top: -30px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 400ms ease;
|
||||
-moz-transition: 400ms ease;
|
||||
transition: 400ms ease;
|
||||
-webkit-transition-property: top, opacity;
|
||||
-moz-transition-property: top, opacity;
|
||||
transition-property: top, opacity; }
|
||||
.btc-donate .address:after {
|
||||
position: absolute;
|
||||
border-top: 10px solid #bbada0;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
content: "";
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
margin-left: -7px; }
|
||||
.btc-donate .address code {
|
||||
background-color: #bbada0;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||||
text-align: center; }
|
||||
.btc-donate:hover .address, .btc-donate .address:hover .address {
|
||||
opacity: 1;
|
||||
top: -45px;
|
||||
pointer-events: auto; }
|
||||
@media screen and (max-width: 520px) {
|
||||
.btc-donate {
|
||||
width: 120px; }
|
||||
.btc-donate .address {
|
||||
margin-right: -150px;
|
||||
width: 300px; }
|
||||
.btc-donate .address code {
|
||||
font-size: 13px; }
|
||||
.btc-donate .address:after {
|
||||
left: 50%;
|
||||
bottom: 2px; } }
|
||||
|
||||
@-webkit-keyframes pop-in-big {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 30px; } }
|
||||
@-moz-keyframes pop-in-big {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 30px; } }
|
||||
@keyframes pop-in-big {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 30px; } }
|
||||
@-webkit-keyframes pop-in-small {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 10px; } }
|
||||
@-moz-keyframes pop-in-small {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 10px; } }
|
||||
@keyframes pop-in-small {
|
||||
0% {
|
||||
-webkit-transform: scale(0) translateZ(0);
|
||||
-moz-transform: scale(0) translateZ(0);
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
margin-top: -40px; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) translateZ(0);
|
||||
-moz-transform: scale(1) translateZ(0);
|
||||
transform: scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
margin-top: 10px; } }
|
||||
.app-notice {
|
||||
position: relative;
|
||||
-webkit-animation: pop-in-big 700ms ease 2s both;
|
||||
-moz-animation: pop-in-big 700ms ease 2s both;
|
||||
animation: pop-in-big 700ms ease 2s both;
|
||||
background: #edc53f;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px; }
|
||||
.app-notice:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both; }
|
||||
.app-notice .notice-close-button {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
opacity: 0.7; }
|
||||
.app-notice p {
|
||||
margin-bottom: 0; }
|
||||
.app-notice, .app-notice p {
|
||||
line-height: 20px; }
|
||||
.app-notice a {
|
||||
color: white; }
|
||||
@media screen and (max-width: 520px) {
|
||||
.app-notice {
|
||||
-webkit-animation: pop-in-small 700ms ease 2s both;
|
||||
-moz-animation: pop-in-small 700ms ease 2s both;
|
||||
animation: pop-in-small 700ms ease 2s both;
|
||||
margin-top: 10px;
|
||||
height: 40px; } }
|
||||
|
||||
.links {
|
||||
text-align: center;
|
||||
margin-top: 20px; }
|
||||
|
||||
.privacy {
|
||||
word-wrap: break-word; }
|
||||
|
||||
/* extras */
|
||||
.sidebar {
|
||||
width: 180px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.sidebar,
|
||||
.sidebar .adsbygoogle {
|
||||
display: none; } }
|
||||
|
||||
|
||||
.under-board-container {
|
||||
margin-top: 38px; }
|
||||
|
||||
.under-board-container,
|
||||
.under-board-container .adsbygoogle {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: none; }
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.under-board-container,
|
||||
.under-board-container .adsbygoogle {
|
||||
display: block; } }
|
||||
|
||||
.cookie-notice {
|
||||
position: fixed;
|
||||
font-size: 15px;
|
||||
z-index: 999;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 20%;
|
||||
min-width: 460px;
|
||||
background: #e8e5db;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
@media screen and (max-width: 520px) {
|
||||
.cookie-notice {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
min-width: auto; } }
|
||||
.cookie-notice, .cookie-notice p a {
|
||||
color: #a09488; }
|
||||
.cookie-notice p {
|
||||
margin-bottom: 0;
|
||||
flex: 1; }
|
||||
.cookie-notice, .cookie-notice p {
|
||||
line-height: 20px; }
|
||||
|
||||
.cookie-notice-dismiss-button {
|
||||
display: inline-block;
|
||||
background: #8f7a66;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: #f9f6f2;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 20px; }
|
||||
|
||||
+452
-61
@@ -35,6 +35,56 @@ body {
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
// Styles for buttons
|
||||
@mixin button {
|
||||
display: inline-block;
|
||||
background: darken($game-container-background, 20%);
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: $bright-text-color;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
@include button;
|
||||
font: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@include appearance(none);
|
||||
|
||||
&[type="text"], &[type="email"] {
|
||||
cursor: auto;
|
||||
background: lighten($tile-color, 9%);
|
||||
font-weight: normal;
|
||||
color: $text-color;
|
||||
|
||||
padding: 0 15px;
|
||||
|
||||
@mixin placeholder {
|
||||
color: lighten($text-color, 15%);
|
||||
}
|
||||
|
||||
// Included separately so that browsers don't refuse mixed rules
|
||||
&::-webkit-input-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
@include clearfix;
|
||||
}
|
||||
@@ -155,16 +205,16 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for buttons
|
||||
@mixin button {
|
||||
display: inline-block;
|
||||
background: darken($game-container-background, 20%);
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
text-decoration: none;
|
||||
color: $bright-text-color;
|
||||
height: 40px;
|
||||
line-height: 42px;
|
||||
@include keyframes(slide-up) {
|
||||
0% {
|
||||
margin-top: 32%;
|
||||
// margin-top: 222px;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 20%;
|
||||
// margin-top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
// Game field mixin used to render CSS at different width
|
||||
@@ -192,59 +242,91 @@ hr {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.game-message {
|
||||
display: none;
|
||||
.game-message {
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba($tile-color, .5);
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba($tile-color, .73);
|
||||
z-index: 100;
|
||||
|
||||
text-align: center;
|
||||
padding-top: 40px; // Pushes content down in desktop version (removed on mobile)
|
||||
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px;
|
||||
// height: $field-width;
|
||||
// line-height: $field-width;
|
||||
}
|
||||
|
||||
.lower {
|
||||
display: block;
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
.mailing-list {
|
||||
margin-top: 52px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mailing-list-email-field {
|
||||
width: 230px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include button;
|
||||
margin-left: 9px;
|
||||
// margin-top: 59px;
|
||||
|
||||
&.keep-playing-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.score-sharing {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@include animation(fade-in 800ms ease $transition-speed * 12);
|
||||
@include animation-fill-mode(both);
|
||||
|
||||
&.game-won {
|
||||
background: rgba($tile-gold-color, .5);
|
||||
color: $bright-text-color;
|
||||
|
||||
a.keep-playing-button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.game-won, &.game-over {
|
||||
display: block;
|
||||
|
||||
p {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-top: 222px;
|
||||
// height: $field-width;
|
||||
// line-height: $field-width;
|
||||
@include animation(slide-up 1.5s ease-in-out $transition-speed * 25);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
|
||||
.lower {
|
||||
display: block;
|
||||
margin-top: 59px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include button;
|
||||
margin-left: 9px;
|
||||
// margin-top: 59px;
|
||||
|
||||
&.keep-playing-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include animation(fade-in 800ms ease $transition-speed * 12);
|
||||
@include animation-fill-mode(both);
|
||||
|
||||
&.game-won {
|
||||
background: rgba($tile-gold-color, .5);
|
||||
color: $bright-text-color;
|
||||
|
||||
a.keep-playing-button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.game-won, &.game-over {
|
||||
display: block;
|
||||
.mailing-list {
|
||||
@include animation(fade-in 1.5s ease-in-out $transition-speed * 25);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -469,7 +551,17 @@ hr {
|
||||
}
|
||||
|
||||
.game-explanation {
|
||||
margin-top: 50px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.sharing {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
> iframe, > span, > form {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller($mobile-threshold) {
|
||||
@@ -486,8 +578,8 @@ hr {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 20px 0;
|
||||
padding: 0 20px;
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1.title {
|
||||
@@ -535,15 +627,314 @@ hr {
|
||||
}
|
||||
|
||||
.game-message {
|
||||
padding-top: 0;
|
||||
|
||||
p {
|
||||
font-size: 30px !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
margin-top: 90px !important;
|
||||
margin-top: 32% !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.lower {
|
||||
margin-top: 30px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
&.game-won .score-sharing {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.game-over .mailing-list {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.mailing-list {
|
||||
margin-top: 10px;
|
||||
|
||||
.mailing-list-email-field {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sharing {
|
||||
> iframe, > span, > form {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// PP Donate button
|
||||
.pp-donate {
|
||||
button {
|
||||
@include appearance(none);
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
@include button;
|
||||
|
||||
img {
|
||||
vertical-align: -4px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bitcoin donate button
|
||||
.btc-donate {
|
||||
// font-size: 14px;
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
@include button;
|
||||
|
||||
img {
|
||||
vertical-align: -4px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $bright-text-color;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.address {
|
||||
// display: none;
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
// background: red;
|
||||
width: 340px;
|
||||
right: 50%;
|
||||
margin-right: -170px;
|
||||
|
||||
padding-bottom: 7px;
|
||||
|
||||
top: -30px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@include transition(400ms ease);
|
||||
@include transition-property(top, opacity);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
border-top: 10px solid $game-container-background;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
content: "";
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $game-container-background;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, .address:hover {
|
||||
.address {
|
||||
opacity: 1;
|
||||
top: -45px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for small screens
|
||||
@include smaller($mobile-threshold) {
|
||||
width: 120px;
|
||||
|
||||
.address {
|
||||
margin-right: -150px;
|
||||
// background: red;
|
||||
width: 300px;
|
||||
|
||||
code {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pop-in-big) {
|
||||
0% {
|
||||
@include transform(scale(0) translateZ(0));
|
||||
opacity: 0;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
100% {
|
||||
@include transform(scale(1) translateZ(0));
|
||||
opacity: 1;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pop-in-small) {
|
||||
0% {
|
||||
@include transform(scale(0) translateZ(0));
|
||||
opacity: 0;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
100% {
|
||||
@include transform(scale(1) translateZ(0));
|
||||
opacity: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-notice {
|
||||
position: relative;
|
||||
@include animation(pop-in-big 700ms ease 2s both);
|
||||
background: #edc53f;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-radius: $tile-border-radius;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.notice-close-button {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
// float: left;
|
||||
}
|
||||
|
||||
&, p {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@include smaller($mobile-threshold) {
|
||||
@include animation(pop-in-small 700ms ease 2s both);
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.privacy {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Ads & Cookie Notice
|
||||
|
||||
/* extras */
|
||||
|
||||
.sidebar {
|
||||
width: 180px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.sidebar,
|
||||
.sidebar .adsbygoogle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.under-board-container {
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.under-board-container,
|
||||
.under-board-container .adsbygoogle {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.under-board-container,
|
||||
.under-board-container .adsbygoogle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-notice {
|
||||
position: fixed;
|
||||
font-size: 15px;
|
||||
z-index: 999;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 20%;
|
||||
min-width: 460px;
|
||||
background: #e8e5db;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include smaller($mobile-threshold) {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&, p a {
|
||||
color: #a09488;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&, p {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-notice-dismiss-button {
|
||||
@include button;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user