You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.4 KiB
HTML
138 lines
3.4 KiB
HTML
10 months ago
|
<!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>
|