-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (74 loc) · 4.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>🎶🤔 Gif it a try! 🤔🎶</title>
<!-- <link rel="stylesheet" href="./assets/css/style.css">-->
<link rel="stylesheet" href="./assets/css/tailwind-style.css">
</head>
<body class="bg-gradient-to-r from-pink-700 to-purple-700 min-h-screen font-mono font-bold">
<div class="heading">
<h1 class="p-2.5 pt-10 font-bold text-7xl text-green-500 text-center"><button onclick="window.location.reload()">🎶 Gif it a Try! 🎶</button></h1>
</div>
<div id="about" class="about p-2.5 m-5 flex flex-row flex-wrap justify-center">
<div class="box0 bg-whitesmoke w-64 h-96 p-2.5 m-5 rounded-lg shadow-3xl">
<img class="h-12" src="assets\images\thinking-face.238x256.png" alt="thinking-face">
<p class="leading-10 text-center"><em>To begin the game select an artist from the icons to your right ==> <br>
Guess the Song title based on the Gif!<br>You will have 10 sec per gif</em></p>
<a href="./score.html"><h4 class="text-center rounded-lg transition ease-in-out delay-150 bg-pink-200 hover:-translate-y-1 hover:scale-110 hover:duration-300">CLICK FOR HIGH SCORES</h4></a>
</div>
<div id="pic" class="box1 bg-whitesmoke w-64 h-96 p-2.5 m-5 rounded-lg shadow-3xl object-center">
<img class="rounded-lg w-64 h-96 pb-5" src="assets\images\f280af8fba3d95ed1370991169fb1c7d.jpg" alt="reccords">
</div>
<div id="menu" class="menubox ">
<div id = 'allbtns' class="box2 bg-whitesmoke w-64 h-96 p-2.5 m-5 rounded-lg shadow-3xl text-center">
<button id = 'michaelbtn' class="p-2.5 m-5 rounded-lg shadow-xl bg-purple-400 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:duration-300">
Michael Jackson
</button><br>
<button id ='adelebtn' class="p-2.5 m-5 rounded-lg shadow-xl bg-purple-400 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:duration-300">
Adele
</button><br>
<button id = 'beatlesbtn' class="p-2.5 m-5 rounded-lg shadow-xl bg-purple-400 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:duration-300">
The Beatles
</button><br>
<button id='queenbtn' class="p-2.5 m-5 rounded-lg shadow-xl bg-purple-400 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:duration-300">
Queen
</button>
</div>
</div>
<!--Alert Modal-->
<div class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<h3 id="alert-content" class="text-xl leading-6 font-medium py-2 text-black"></h3>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-1 bg-violet-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-300">
OK
</button>
</div>
</div>
</div>
</div>
<!--Initial Input Modal-->
<div class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="InitialSubmit-modal">
<div class="relative top-10 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<h3 id="userScore" class="text-lg leading-6 py-5 font-medium text-gray-900"></h3>
<label for="initial" class="lable block text-base font-medium leading-6 py-2 text-gray-900">Enter Your Initial</label>
<input type="text" name="initial" id="initial" class="block w-60 rounded-md border-0 py-1.5 mx-auto pl-20 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" placeholder="Initial">
<div class="items-center py-3">
<button
id="initialSubmit-btn"
class="px-4 py-1 bg-violet-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-300">
Submit
</button>
</div>
</div>
</div>
</div>
<footer class="footer relative bottom-0 left-0 w-full text-2xl text-white bg-black text-center sm:fixed">🎶 Made with ❤️ by Jenny, Fergus, Rachael & Ge. 🎶</footer>
<script src="./assets/js/script.js"></script>
</body>
</html>