/
index.html
99 lines (82 loc) · 4.62 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
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign of the Times</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<!--Since class names are going to be used for tailwind. I'll label things very specifically with my ID's so you guys know what that element is.
Query Selector in JS will be pointless I think with tailwind, we'll have to use getElementByID -->
<body class="h-screen bg-gradient-to-t from-slate-600 to-slate-800">
<header id="WebsiteHeading" class="">
<div id="" class="flex flex-col justify-center items-center">
<h1 id="heading"
class="text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 drop-shadow-1xl pb-10 mt-10 ">
<span class="">Sign of the Times.</span>
</h1>
<p id="subHeading" class="my-6 text-lg font-bold text-white drop-shadow-md">Enter your birthday to get your
horoscope and then find out who you share a birthday with!</p>
</div>
</header>
<form id="calenderForm" class="flex flex-col justify-center items-center mt-10 drop-shadow-xl">
<h2 id="" class="my-4 text-lg font-bold text-white drop-shadow-md">Enter your Birthday here:</h2>
<div class="relative" id="">
<div class="">
</div>
<input id="calendarSelector" datepicker datepicker-autohide type="text"
class="bg-gray-200 border-b-8 border-lime-500 text--900 sm:text-sm rounded-lg focus:border-blue-500 block w-full pl-10 p-2.5"
placeholder="Select date">
</div>
<div id="submitBtn" class="">
<button id="btn"
class="text-white font-bold py-2 px-4 rounded-2xl mt-6 bg-cyan-500 shadow-md shadow-teal-600/80 hover:bg-fuchsia-500 hover:shadow-md hover:shadow-purple-600/80 hover:scale-125">
Submit
</button>
</div>
</form>
<div class="flex flex-row justify-center items-center mt-10">
<section id="horoscopeCard"
class="bg-gradient-to-b from-fuchsia-400 to-fuchsia-600 w-1/3 min-h-96 rounded-3xl m-10 drop-shadow-xl border-b-8 border-t-8 border-fuchsia-500">
<div>
<h2 id="horoCardHeading" class="flex flex-col justify-center items-center p-2 mt-3 font-bold text-2xl text-gray-800">
Your Horoscope:</h2>
</div>
<div class="min-h-96" id="">
<h2 id="horoscopeMonth"
class="flex flex-col justify-center items-center text-2xl font-bold text-5xl text-white drop-shadow-lg">
</h3>
<div id="horoscopeInfo" class="flex flex-col justify-center items-center text-slate-300 font-medium text-lg mb-20 mr-10 ml-10"></div>
</div>
<div id="saveBtn" class="flex flex-col justify-items items-center fixed bottom-5 w-full">
<button id="btn"
class="text-white font-bold py-2 px-4 rounded-2xl bg-emerald-500 shadow-md shadow-teal-600/80 hover:bg-stone-500 hover:shadow-md hover:shadow-green-600/80 hover:scale-125">
Save
</button>
</div>
</section>
<section id="savedData" class="flex flex-col justify-center items-center bg-gradient-to-t from-indigo-400 to-indigo-500 rounded-3xl w-1/3 h-auto min-h-96 m-20 drop-shadow-xl border-r-8 border-l-8 border-indigo-500">
<div id="" class="flex flex-col justify-center items-center">
<h2 id="" class="flex flex-col justify-center items-center text-gray-800 pt-1 m-5 w-96 font-bold text-2xl">Your saved horoscopes.</h2>
<p id="dataHere1" class=" flex flex-col justify-center items-center m-10 break-normal text-lg font-medium text-slate-300"></p>
</div>
</section>
<section id="birthdayCard"
class="bg-gradient-to-b from-amber-300 to-amber-500 w-1/3 h-aut0 min-h-96 m-10 rounded-3xl drop-shadow-2xl border-b-8 border-t-8 border-amber-400">
<div>
<h2 id="bdayCardHeading" class="flex flex-col justify-center items-center p-2 mt-3 font-bold text-gray-800 text-2xl">You
share a birthday with:</h2>
</div>
<ul class="flex flex-col justify-center items-start m-10 font-medium text-2xl text-slate-800 drop-shadow-lg" id="bdayList">
</ul>
</section>
</div>
</body>
<script src="https://unpkg.com/flowbite@1.5.3/dist/datepicker.js"></script>
<script src="search.js"></script>
</html>