313 lines
No EOL
9.6 KiB
HTML
313 lines
No EOL
9.6 KiB
HTML
<html>
|
|
<head>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135332-11"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-135332-11');
|
|
</script>
|
|
|
|
<meta name="viewport" content="initial-scale=.75, maximum-scale=.75, width=device-width">
|
|
<!-- Primary Meta Tags -->
|
|
<title>A QUICK FUN GAME FOR NEW TELEWORKERS</title>
|
|
<meta name="title" content="A QUICK FUN GAME FOR NEW TELEWORKERS">
|
|
<meta name="description" content="It's definitely quick, and almost 100% likely to be fun.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://click.spencerflagg.com/">
|
|
<meta property="og:title" content="A QUICK FUN GAME FOR NEW TELEWORKERS">
|
|
<meta property="og:description" content="It's definitely quick, and almost 100% likely to be fun.">
|
|
<meta property="og:image" content="https://click.spencerflagg.com/social.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://click.spencerflagg.com/">
|
|
<meta property="twitter:title" content="A QUICK FUN GAME FOR NEW TELEWORKERS">
|
|
<meta property="twitter:description" content="It's definitely quick, and almost 100% likely to be fun.">
|
|
<meta property="twitter:image" content="https://click.spencerflagg.com/social.png">
|
|
</head>
|
|
<main>
|
|
<section>
|
|
<div id="dom">
|
|
<div id="text1"></div>
|
|
<div id="counter">0</div>
|
|
</div>
|
|
<button id="click">
|
|
<div id="text2">Click to start the game!</div><div class='icon'></div>
|
|
</button>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
|
|
let domElement = document.getElementById('dom');
|
|
let text1Element = document.getElementById('text1');
|
|
let text2Element = document.getElementById('text2');
|
|
let buttonElement = document.getElementById('click');
|
|
let counterElement = document.getElementById('counter');
|
|
|
|
let thankyou = [
|
|
"YAAAAS!",
|
|
"Yes!",
|
|
"Woohoo!",
|
|
"Oh baby, that's the stuff.",
|
|
"Fuck yeah!",
|
|
"Bowchickawow-wow",
|
|
"Get it!",
|
|
"Dingleberries!",
|
|
"Fo' Sho'",
|
|
"Thankee kindly",
|
|
"Thaaaaaaaanks y'guys",
|
|
"Come get some!",
|
|
"Booyah!",
|
|
"Booyacasha!",
|
|
"Fliggity Diggity.",
|
|
"Hurrah!",
|
|
"Ole!",
|
|
"Yes now!",
|
|
"Who shot who in the what now?",
|
|
"Do what now?",
|
|
"Flibbertygibbit!",
|
|
"OOOOOooo Kelly Clarkson!",
|
|
"Yowzah!",
|
|
"Hachie Machie!",
|
|
"Golly!",
|
|
"Gee whiz!",
|
|
"Zoinks!",
|
|
"Make daddy proud",
|
|
"Yum.",
|
|
"You're SO attractive.",
|
|
"Cats, amiright?",
|
|
"Right meow!"
|
|
];
|
|
|
|
let clickit = [
|
|
"Click it!",
|
|
"Hit me again!",
|
|
"I said hit me!",
|
|
"MMMMMmmm.... Beep me again.",
|
|
"Thank you sir, may I have another!?",
|
|
"Again!",
|
|
"Do it again!",
|
|
"Another one!",
|
|
"I said open the pod bay doors, HAL!",
|
|
"Hit me baby one more time",
|
|
"CLICK CLICK CLICK",
|
|
"Clicky please with sugar on top",
|
|
"DEE BUTTON, BOSS, DEE BUTTON!",
|
|
"Do it!",
|
|
"Another!",
|
|
"One for the road?",
|
|
"Git er done!",
|
|
"GO! GO! GO!",
|
|
"clickity click",
|
|
"Click it good",
|
|
];
|
|
|
|
function getThankyou(){
|
|
|
|
var index = Math.floor(Math.random()*thankyou.length);
|
|
return thankyou[index];
|
|
|
|
}
|
|
|
|
function getClickit(){
|
|
|
|
var index = Math.floor(Math.random()*clickit.length);
|
|
return clickit[index];
|
|
|
|
}
|
|
|
|
function generateText1(){
|
|
|
|
var text = getThankyou();
|
|
return text;
|
|
|
|
}
|
|
|
|
function generateText2(){
|
|
|
|
var text = getClickit();
|
|
return text;
|
|
|
|
}
|
|
|
|
function generateCount(){
|
|
var number = parseInt(counterElement.innerHTML) + 1;
|
|
counterElement.innerHTML = number;
|
|
}
|
|
|
|
function generateDom(isFirstTime){
|
|
|
|
if(isFirstTime) return;
|
|
|
|
text1Element.innerHTML = generateText1();
|
|
text2Element.innerHTML = generateText2();
|
|
generateCount();
|
|
var imageNumber = Math.ceil(Math.random()*100)+400;
|
|
//domElement.style.backgroundImage = "url('"+imageNumber+".jpg'";
|
|
//domElement.style.backgroundImage = "url('https://loremflickr.com/640/" + imageNumber + "/kitty')";
|
|
domElement.style.backgroundImage = "url('https://placekitten.com/640/" + imageNumber + "')";
|
|
|
|
}
|
|
|
|
buttonElement.onclick = function() {generateDom()};
|
|
|
|
function docReady(fn) {
|
|
// see if DOM is already available
|
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
// call on next available tick
|
|
setTimeout(fn, 1);
|
|
} else {
|
|
document.addEventListener("DOMContentLoaded", fn);
|
|
}
|
|
}
|
|
|
|
docReady(function() {
|
|
generateDom(true);
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
@font-face{
|
|
font-family: 'Bebas';
|
|
src: url('Bebas.woff') format('woff');
|
|
}
|
|
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap');
|
|
body{
|
|
margin: 0;
|
|
}
|
|
main{
|
|
text-align: center;
|
|
}
|
|
section{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
#dom{
|
|
width:100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
background-size:cover;
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-position-y: bottom;
|
|
transition: all .3s;
|
|
}
|
|
#text1{
|
|
font-family: 'Bebas';
|
|
margin-top:40px;
|
|
text-align:center;
|
|
color:white;
|
|
font-size: 38px;
|
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
|
|
letter-spacing: -3px;
|
|
word-spacing: 20px;
|
|
line-height: 1.1;
|
|
}
|
|
aside{
|
|
position:fixed;
|
|
}
|
|
#counter{
|
|
font-size: 50vh;
|
|
text-transform: uppercase;
|
|
font-family: 'Abril Fatface', serif;
|
|
font-weight: 700;
|
|
color: #f5f5f5;
|
|
text-shadow: 1px 1px 1px #919191,
|
|
1px 2px 1px #919191,
|
|
1px 3px 1px #919191,
|
|
1px 4px 1px #919191,
|
|
1px 5px 1px #919191,
|
|
1px 6px 1px #919191,
|
|
1px 7px 1px #919191,
|
|
1px 8px 1px #919191,
|
|
1px 9px 1px #919191,
|
|
1px 10px 1px #919191,
|
|
1px 12px 1px #919191,
|
|
1px 13px 1px #919191,
|
|
1px 14px 1px #919191,
|
|
1px 15px 1px #919191,
|
|
1px 16px 1px #919191,
|
|
1px 17px 1px #919191,
|
|
1px 18px 1px #919191,
|
|
1px 19px 1px #919191,
|
|
1px 20px 1px #919191,
|
|
1px 28px 6px rgba(16,16,16,0.4),
|
|
1px 32px 10px rgba(16,16,16,0.2),
|
|
1px 35px 35px rgba(16,16,16,0.2),
|
|
1px 40px 60px rgba(16,16,16,0.4);
|
|
}
|
|
.tag{
|
|
font-family: sans-serif;
|
|
position: absolute;
|
|
right:6px;
|
|
bottom:6px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color:rgba(255,255,255,.85);
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
|
|
}
|
|
#img{
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
button{
|
|
z-index: 2;
|
|
margin-top:20px;
|
|
width:500px;
|
|
border:0;
|
|
outline: 0;
|
|
background:greenyellow;
|
|
border-radius: 20px;
|
|
font-family: sans-serif;
|
|
font-size: 50px;
|
|
padding:15px;
|
|
color:white;
|
|
text-transform: uppercase;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all .3s;
|
|
position:fixed;
|
|
bottom:20px;
|
|
}
|
|
button div{
|
|
text-align: left;
|
|
}
|
|
button:hover{
|
|
background-color: gold;
|
|
}
|
|
button:active{
|
|
background-color: red;
|
|
}
|
|
button:hover .icon{
|
|
|
|
animation: spin .3s linear 1;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotateZ(0deg) rotateY(360deg);
|
|
}
|
|
100% {
|
|
transform: rotateZ(360deg) rotateY(360deg);
|
|
}
|
|
}
|
|
button .icon{
|
|
background-image: url('cat.svg');
|
|
background-repeat: no-repeat;
|
|
height:50px;
|
|
width:50px;
|
|
min-width:50px;
|
|
display: inline-block;
|
|
transform: rotateY(360deg);
|
|
}
|
|
a{
|
|
display:block;
|
|
}
|
|
</style>
|
|
</html> |