Skip to content

Instantly share code, notes, and snippets.

@seaofclouds

seaofclouds/appcache.manifest

Forked from autioch/index.html
Last active February 22, 2017 17:47
Show Gist options
  • Save seaofclouds/edde4ea187adc555ddfb336212487f81 to your computer and use it in GitHub Desktop.
Save seaofclouds/edde4ea187adc555ddfb336212487f81 to your computer and use it in GitHub Desktop.
Download ZIP
Charades - JS example.
Raw
appcache.manifest
CACHE MANIFEST
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
index.html
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
http://domain.com/charades/
Raw
index.html
<!DOCTYPE html>
<html manifest="appcache.manifest">
<head>
<title>Charades</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
* {
margin: 0 none !important;
padding: 0 none !important;
}
body {
background-color: #000;
font-family: Helvetica, sans-serif;
color: #fff;
}
section {
text-align: center;
position: absolute;
left:0;
height: 100vh;
}
section header {
height:75vh;
display: table;
}
section header h1 {
font-size: 6vh;
word-wrap: break-word;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
section footer {
position: absolute;
width: 100vw;
bottom: 1vh;
}
button,
input {
line-height: 8vh;
border: none;
width: 90vw;
border-radius: 0;
display: inline-block;
font-size: 2.5vh;
font-weight: bold;
text-align: center;
}
button {
background-color: #aaa;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
button, #charades {
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.js-add {
background-color: #00E67A;
}
.js-reload {
margin-top:10vh;
}
footer button {
text-transform: uppercase;
background-color: #00E67A;
}
footer p {
color: #777;
width: 90vw;
display: inline-block;
position: relative;
font-size: 2vh;
line-height: 4vh;
margin: 0;
}
#toggle {
display: inline-block;
position: absolute;
left: 5vw;;
top:0;
cursor: pointer;
color: #777;
font-size: 2vh;
line-height: 3vh;
}
#settings {
position: absolute;
left: -100vw;
width: 100vw;
height:100vh;
padding-top: 6vh;
background-color: #000;
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
}
#settings.menu-active {
left: 0;
}
</style>
</head>
<body>
<section id="charades">
<header>
<h1 class="js-result">Charades</h1>
</header>
<footer>
<button class="js-random">Next</button>
<p>
<span class="js-total"></span> <span>Remaining Words</span>
</p>
</footer>
</section>
<section id="settings" class="menu-inactive">
<article id="add">
<input class="js-new" type="text" value="">
<button class="js-add">Add New Word</button>
</article>
<article id="reset">
<button class="js-clear">Clear</button>
<button class="js-reload" onclick="location.reload();">Reload</button>
</article>
<footer>
</footer>
</section>
<p id="toggle" onclick="slide();">Menu</p>
<script type="text/javascript">
passwords = [
"Apple",
"Baby",
"Backpack",
"Balance",
"Ball",
"Ballet",
"Balloon",
"Baseball",
"Bed",
"Bell",
"Bicycle",
"Bird",
"Blanket",
"Boat",
"Book",
"Boots",
"Bowl",
"Brady Bunch",
"Butterfly",
"Cake",
"Camera",
"Candy",
"Cape",
"Car",
"Cards",
"Catapillar",
"Chair",
"Chop Sticks",
"Clean",
"Coffee",
"Cold",
"Cook",
"Cow",
"Crown",
"Dance",
"Diamond",
"Disneyland",
"Doll",
"Drawing",
"Dress",
"Drum",
"Duck",
"Earthquake",
"Elephant",
"Fire",
"Flip-Flops",
"Flower",
"Fork",
"Frisbee",
"Giant",
"Guitar",
"Hamburger",
"Hat",
"Hawaii",
"Heavy",
"Hike",
"Home",
"Horse",
"Hot",
"Hug",
"Job",
"Kitten",
"Knife",
"Lava",
"Legos",
"Light",
"Magic Wand",
"Mail",
"Marshmallow",
"Meditate",
"Mirror",
"Moana",
"Moon",
"Movie",
"Music",
"Orange",
"Origami",
"Oven",
"Painting",
"Pancakes",
"Pants",
"Party",
"Pebble",
"Pen",
"Phone",
"Pig",
"Pirate",
"Popcorn",
"Portrait",
"Power",
"Puppy",
"Quiet",
"Rain",
"Rapunzel",
"Road Trip",
"Run",
"Scarf",
"See-Saw",
"Shoes",
"Shot",
"Shovel",
"Shower",
"Skiing",
"Sky",
"Sleep",
"Smoke",
"Snow",
"Socks",
"Spider",
"Spoon",
"Star Wars",
"Stars",
"Stuffed Animals",
"Sun",
"Sunglasses",
"Swim",
"Swing",
"Table",
"Teacher",
"Tennis",
"Toilet",
"Tornado",
"Tree",
"TV",
"Umbrella",
"Weight",
"Wet",
"Window",
"Witch",
"Yo-Yo",
"Yoga",
];
var el = ['random', 'result', 'clear', 'add', 'new', 'total'].reduce(function(obj, item) {
obj[item] = document.querySelector(`.js-${item}`);
return obj;
}, {});
function updateTotal() {
el.total.textContent = passwords.length;
}
el.random.addEventListener('click', function() {
el.result.textContent = passwords.splice(Math.round(Math.random() * passwords.length), 1)[0];
updateTotal();
});
el.clear.addEventListener('click', function() {
el.result.textContent = '';
});
el.add.addEventListener('click', function() {
passwords.push(el.new.value);
el.new.value = '';
updateTotal();
});
window.save = JSON.stringify.bind(null, passwords);
updateTotal();
var toggle = function() {
var settings = document.getElementById('settings');
if (settings.style.display === 'block' || settings.style.display === '')
settings.style.display = 'none';
else
settings.style.display = 'block'
}
var slide = function() {
var settings = document.getElementById('settings');
if (settings.className === 'menu-inactive' || settings.className === '')
settings.className = 'menu-active'
else
settings.className = 'menu-inactive'
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment