added a page with an 8ball for strike ideas. the ideas are still rudimentary
parent
901cdafc10
commit
a7a47497a3
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@
|
||||
Subproject commit 9484953a773fb0ca48c8cf019ae1825b2e3cd980
|
||||
@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&display=swap');
|
||||
body{
|
||||
background: linear-gradient(-45deg, #ffaef6, #dbd2ff);
|
||||
border: 2px solid rgb(0, 0, 0);
|
||||
width: 98vw;
|
||||
height: 97vh;
|
||||
background-size: 400% 400%;
|
||||
animation: gradientanimation 15s ease infinite;
|
||||
}
|
||||
@keyframes gradientanimation {
|
||||
0%{
|
||||
background-position: 0%, 50%;
|
||||
}
|
||||
50%{
|
||||
background-position: 100%, 50%;
|
||||
}
|
||||
100%{
|
||||
background-position: 0%, 50%;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
top: 2rem;
|
||||
left: 4rem;
|
||||
position: absolute;
|
||||
font-family: 'Rubik Glitch Pop', system-ui;
|
||||
font-size: 4rem;
|
||||
background-image: linear-gradient(180deg, rgb(0, 0, 0), #350707);
|
||||
background-size: 100%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-moz-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-text-fill-color: transparent;
|
||||
}
|
||||
p{
|
||||
top: 15rem;
|
||||
left: 4rem;
|
||||
position: absolute;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.5rem;
|
||||
color: #350707;
|
||||
}
|
||||
.circle{
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
right: 5rem;
|
||||
height: 35vw;
|
||||
width: 35vw;
|
||||
background-color: #000000;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
align-items: baseline;
|
||||
}
|
||||
.rectangle{
|
||||
position: absolute;
|
||||
top: 14vw;
|
||||
left: 7vw;
|
||||
height: 6rem;
|
||||
width: 20vw;
|
||||
background-color: #d7ffde;
|
||||
display: inline-block;
|
||||
z-index: 10;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
span{
|
||||
top: 0.2rem;
|
||||
color: #570000;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Magic 8 Ball <br> of Cloud Strike Ideas</h1>
|
||||
<p> Click the ball for ideas</p>
|
||||
|
||||
<div id="8ball" class="circle" onclick="displayAnswer()">
|
||||
<div class="rectangle">
|
||||
<span id="answer">
|
||||
What kind of strike do you want?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// getElementById("8ball") .effect( "shake" );
|
||||
|
||||
var magicBall= document.getElementById("8ball");
|
||||
|
||||
magicBall.addEventListener("click", function() {
|
||||
console.log("Hello visitor");
|
||||
|
||||
});
|
||||
|
||||
let answers = [
|
||||
'Host a die-in in front of the Van Nelle data center',
|
||||
'Don\'t use a credit card',
|
||||
'Organise mesh network',
|
||||
'Displace X',
|
||||
'Arson'
|
||||
]
|
||||
|
||||
let displayAnswer = function()
|
||||
{
|
||||
let index = Math.floor(Math.random() * answers.length);
|
||||
let answer = answers[index];
|
||||
let element = document.getElementById( 'answer' );
|
||||
element.style.display = 'inline-block';
|
||||
element.innerHTML = '<br><br>' + answer;
|
||||
}
|
||||
|
||||
// window.onload = function(){
|
||||
// function shakeBall(){
|
||||
// document.getElementById("#8ball");
|
||||
// console.log("Hello visitor");
|
||||
// // Ball.effect("shake");
|
||||
// }
|
||||
// }
|
||||
// Ball.onclick = shakeBall();
|
||||
|
||||
|
||||
// function shakeBall(answer){
|
||||
|
||||
// Ball.effect("shake");
|
||||
// }
|
||||
// shakeBall();
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Reference in New Issue