aboutsummaryrefslogtreecommitdiff
path: root/games/symbolistic
diff options
context:
space:
mode:
authorUnknown <Alee14498@gmail.com>2017-10-01 00:24:20 -0400
committerUnknown <Alee14498@gmail.com>2017-10-01 00:24:20 -0400
commit78f3c0e9893d36e0ce039c2b79ede8a92ebe468a (patch)
tree8479930f9372a1e9998b6750651565cf52b81ca8 /games/symbolistic
parentd8ba59582c137de474789690e777d8c029e08fe6 (diff)
downloadwindows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.gz
windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.bz2
windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.zip
Adding the code
Diffstat (limited to 'games/symbolistic')
-rw-r--r--games/symbolistic/click.mp3bin0 -> 1252 bytes
-rw-r--r--games/symbolistic/css/charms.css166
-rw-r--r--games/symbolistic/index.html141
-rw-r--r--games/symbolistic/script.jsbin0 -> 7202 bytes
-rw-r--r--games/symbolistic/splashscreen.pngbin0 -> 10904 bytes
-rw-r--r--games/symbolistic/style.css1
6 files changed, 308 insertions, 0 deletions
diff --git a/games/symbolistic/click.mp3 b/games/symbolistic/click.mp3
new file mode 100644
index 0000000..53949c0
--- /dev/null
+++ b/games/symbolistic/click.mp3
Binary files differ
diff --git a/games/symbolistic/css/charms.css b/games/symbolistic/css/charms.css
new file mode 100644
index 0000000..f73490b
--- /dev/null
+++ b/games/symbolistic/css/charms.css
@@ -0,0 +1,166 @@
+body {
+font-family:Segoe UI;
+margin:0px;
+padding:0px;
+}
+img, a {
+ outline:none;
+ border:none;
+}
+#splashscreen {
+margin:0;
+position:fixed;
+width:100%;
+height:100%;
+color:#FFFFFF;
+background-image:url('../splashscreen.png');
+background-position:center;
+background-color:#1E7FE8;
+background-repeat:no-repeat;
+animation:splash 4s;
+-ms-animation:splash 4s;
+-webkit-animation:splash 4s;
+-o-animation:splash 4s;
+opacity:0;
+z-index:-1;
+}
+@keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-webkit-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-ms-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-o-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+#hoverarea {
+ position:fixed;
+ top:0px;
+ right:0px;
+ width:15px;
+ height:15px;
+}
+#bottomhoverarea {
+ position:fixed;
+ bottom:0px;
+ right:0px;
+ width:15px;
+ height:15px;
+}
+#starthoverarea {
+ position:fixed;
+ bottom:0px;
+ left:0px;
+ width:15px;
+ height:15px;
+}
+#charmsbar {
+ display:none;
+ background-color:#111111;
+ position:fixed;
+ padding:5% 0;
+ top:0px;
+ right:0px;
+ height:100%;
+ width: 86px;
+
+}
+#settingscharms {
+ padding : 40px;
+ display:none;
+ background-color:#3B66AD;
+ position:fixed;
+ top:0px;
+ right:0px;
+ height:100%;
+ width: 345px;
+
+}
+#startbutton {
+ display:none;
+ position:fixed;
+ left:0px;
+ bottom:0px;
+}
+#iconnetwork {
+ position:absolute;
+ top:35px;
+ left:25px;
+}
+#iconbattery {
+ position:absolute;
+ bottom:35px;
+ left:32px;
+}
+#datetime {
+ display:none;
+ position:fixed;
+ left:50px;
+ bottom:50px;
+ width:490px;
+ height:139px;
+ background-color: rgba(17,17,17,1);
+}
+#time {
+ position:absolute;
+ left:70px;
+ bottom:19px;
+ font-family: Segoe UI Light;
+ font-size: 64pt;
+ color:#FFFFFF;
+}
+#date {
+ margin-top:20px;
+ margin-right:20px;
+ float:right;
+ font-size:24pt;
+ font-family: Segoe UI;
+ color:#FFFFFF;
+}
diff --git a/games/symbolistic/index.html b/games/symbolistic/index.html
new file mode 100644
index 0000000..4b8882a
--- /dev/null
+++ b/games/symbolistic/index.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html manifest="manifest.appcache">
+<head>
+ <meta charset=utf-8>
+ <title>Symbolistic!</title>
+
+
+ <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
+ <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+
+
+ <meta name=apple-mobile-web-app-capable content=yes />
+
+
+
+ <link rel=stylesheet href='style.css'>
+ <!--Stylesheet that styles the charms bar and the startbutton -->
+ <link rel="stylesheet" href="css/charms.css"/>
+
+ <!--Script that powers the charms bar-->
+ <script>
+function charms(){
+ document.getElementById('charmsbar').style.display='block';
+ document.getElementById('datetime').style.display='block';
+ document.getElementById('time').style.display='block';
+}
+function destroycharms() {
+ document.getElementById('charmsbar').style.display='none';
+ document.getElementById('datetime').style.display='none';
+ document.getElementById('time').style.display='none';
+}
+function start(){
+ document.getElementById('startbutton').style.display='block';
+}
+function destroystart() {
+ document.getElementById('startbutton').style.display='none';
+}
+ </script>
+
+</head>
+
+<body class=s-w>
+<div id="splashscreen"></div>
+ <div id=start class=modal>
+ <p class=sp></p>
+ <div>
+ <h1>Symbolistic!</h1>
+ <p>Match the shape by selecting correct symbols.<br/>
+ Each correct match gives you points and additional time, so be quick!</p>
+ <button id=bS>Click to Start</button>
+ </div>
+ </div>
+ <div id=gameover class=modal>
+ <p class=sp></p>
+ <div>
+
+ <h2>You symbolistic, you! \o/</h2>
+ <p>
+ In total, you got <strong><span id=goPoints></span> points</strong> and survived for <strong><span id=goSeconds></span> seconds</strong>!
+ <span id=goHigh><br/>Your highest score so far has been <span id=goHighPoints></span> points</span>
+ </p>
+ <button id=bA>Play again</button>
+ or <a id=twBrag href="" target=_blank>Twitter brag »</a>
+ </div>
+ </div>
+
+ <header>
+ <span>Look for</span><span id=answer>?</span>
+ <span>Time</span><span id=stopwatch>00:00:00</span>
+ <span>Points</span><span id=points>00</span>
+ </header>
+ <div id=tiles>
+ </div>
+
+ <footer>
+
+ </footer>
+
+
+
+ <audio id=sClick>
+ <source src="click.mp3">
+ </audio>
+
+ <!-- CHARMS BAR CODE -->
+<div id="hoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="charmsbar" onmouseover="charms()" onmouseout="destroycharms()">
+<img src="../../common/img/charmsbar/search.png" onmouseover="this.src='../../common/img/charmsbar/search-hover.png'" onmouseout="this.src='../../common/img/charmsbar/search.png'"/><br/>
+<img src="../../common/img/charmsbar/share.png" onmouseover="this.src='../../common/img/charmsbar/share-hover.png'" onmouseout="this.src='../../common/img/charmsbar/share.png'"/><br/>
+<a href="../../start/index.html"><img src="../../common/img/charmsbar/start.png" onmouseover="this.src='../../common/img/charmsbar/start-hover.png'" onmouseout="this.src='../../common/img/charmsbar/start.png'"/></a><br/>
+<img src="../../common/img/charmsbar/devices.png" onmouseover="this.src='../../common/img/charmsbar/devices-hover.png'" onmouseout="this.src='../../common/img/charmsbar/devices.png'"/><br/>
+<img src="../../common/img/charmsbar/settings.png" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'" onclick="settingsc()"/><br/>
+</div>
+<div id="datetime">
+<img src="../../common/img/network.png" id="iconnetwork" height="24px" width="24px"/>
+<img src="../../common/img/battery.png" id="iconbattery"/>
+<span id="time"></span>
+<script language="javascript" type="text/javascript">
+<!-- Begin
+function clock() {
+var digital = new Date();
+var hours = digital.getHours();
+var minutes = digital.getMinutes();
+var seconds = digital.getSeconds();
+var amOrPm = "AM";
+if (hours > 11) amOrPm = "PM";
+if (hours > 12) hours = hours - 12;
+if (hours == 0) hours = 12;
+if (minutes <= 9) minutes = "0" + minutes;
+if (seconds <= 9) seconds = "0" + seconds;
+dispTime = hours + ":" + minutes ;
+document.getElementById('time').innerHTML = dispTime;
+setTimeout("clock()", 1000);
+}
+window.onload=clock;
+// End -->
+</script>
+<div id="date"><script language="Javascript">
+
+ var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
+
+ var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
+
+ var now = new Date
+
+ document.write("" + dayName[now.getDay()] + "<br/>" +"<span id=month>" + monName[now.getMonth()] + " "+now.getDate() +"")
+ </script>
+</div>
+</div>
+<div id="bottomhoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="starthoverarea" onmouseover="start()" class="hotcorner">
+</div>
+<div id="startbutton" onmouseout="destroystart()">
+<a href="../../start/index.html"><img src="../../common/img/start.png"/></a>
+</div>
+ <script defer src='script.js'></script>
+
+</body>
+</html> \ No newline at end of file
diff --git a/games/symbolistic/script.js b/games/symbolistic/script.js
new file mode 100644
index 0000000..c16a73f
--- /dev/null
+++ b/games/symbolistic/script.js
Binary files differ
diff --git a/games/symbolistic/splashscreen.png b/games/symbolistic/splashscreen.png
new file mode 100644
index 0000000..3766e0d
--- /dev/null
+++ b/games/symbolistic/splashscreen.png
Binary files differ
diff --git a/games/symbolistic/style.css b/games/symbolistic/style.css
new file mode 100644
index 0000000..3183633
--- /dev/null
+++ b/games/symbolistic/style.css
@@ -0,0 +1 @@
+html,body{margin:0;padding:0;height:100%}body{margin:0;font:20px "Segoe UI",Arial,sans-serif;font-weight:400;background:#fff;color:#212121}a,a:visited{color:#1e7fe8}a:hover{color:#196ec4}header,#tiles,h1,h2,h3{text-shadow:0 -1px 1px rgba(0,0,0,0.1)}.modal{display:block;visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;min-height:100%;text-align:center;background-color:rgba(0,0,0,0.7);z-index:4}.modal .sp{height:50%;font-size:0}.modal div{padding:10px 0 30px 0;margin:0 auto;background:#fff;-moz-box-shadow:0 1px 20px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 20px rgba(0,0,0,0.7);box-shadow:0 1px 20px rgba(0,0,0,0.7)}.modal h3{margin:20px 0}.modal button{display:block;margin:20px auto}.s-w #start{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}.s-p #start{-webkit-animation-name:fadeout;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadeout;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}@-webkit-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@-moz-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}.s-go #gameover{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}#gameover a{text-decoration:none;color:rgba(0,0,0,0.5)}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadein{0%{opacity:0}100%{opacity:1}}#goHigh{display:none;color:rgba(0,0,0,0.5)}.localstorage #goHigh{display:inline!important}#notification{padding:10px 0;text-align:center;background:#ffc000;z-index:999}#notification span{font-weight:bold}header{text-align:center;font-size:70px}header span{position:relative;top:-30px;margin-right:10px;font-size:20px}#answer,#answer span,#stopwatch,#points{top:0;font-size:70px!important}#answer{display:inline-block;position:relative;top:-0.1em;width:1em;height:1em;margin-right:30px;margin-left:-5px}#answer span{position:absolute;text-align:center;width:inherit}#stopwatch{margin-right:30px;letter-spacing:-0.06em;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;-ms-transition:color .5s ease-in-out;transition:color .5s ease-in-out}#stopwatch.moar{color:#36bc09!important}#stopwatch.low,#stopwatch.gameover{color:#aa0d0d}.s-p #stopwatch.low{-webkit-animation-name:pulsate;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-moz-animation-name:pulsate;-moz-animation-duration:1s;-moz-animation-timing-function:ease-in-out;-moz-animation-iteration-count:infinite}@-webkit-keyframes pulsate{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}@-moz-keyframes pulsate{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}#points{letter-spacing:-0.06em;text-shadow:0 -1px 1px rgba(0,0,0,0.1)}#tiles{margin:20px auto;font-size:70px;text-align:center;-webkit-text-size-adjust:none;-webkit-user-select:none;-webkit-touch-callout:none}#tiles:before,.tiles:after{content:"";display:table}#tiles:after{clear:both}#tiles.correct .selected{background:#53cc43}button{display:inline-block;width:150px;height:150px;padding:0;margin:5px;color:#fff;font:1em "Open Sans",Arial,sans-serif;text-align:center;line-height:150px;text-shadow:0 -1px 1px rgba(0,0,0,0.1);background:#1e7fe8;border:0;border:0 solid white;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out;-o-transition:background .2s ease-in-out;-ms-transition:background .2s ease-in-out;transition:background .2s ease-in-out;cursor:pointer}button:hover{background:#196ec4}button:active,button.selected{line-height:145px;font-size:90%;background:#6aaaf0;border:5px solid #fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}footer{margin:70px 10px 10px 10px;padding:10px;text-align:center;font-size:16px;color:rgba(0,0,0,0.4);text-shadow:0 1px 1px rgba(255,255,255,0.2);border-top:1px dashed rgba(0,0,0,0.1)} \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-06-04 05:45:49 +0000