-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
169 lines (143 loc) · 9.91 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!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">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="./assets/css/style.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600&display=swap" rel="stylesheet">
<title>Destressing Homepage</title>
</head>
<body>
<header>
<nav class="flex justify-between items-start md:items-center mx-11 my-5">
<button type="button" name="home-btn" class="home-btn" id="logo-btn"><i class="fas fa-home fa-lg"></i></button>
<div class="flex justify-between items-end md:items-center flex-col md:flex-row">
<!-- Wrapping the sound input for layout purposes -->
<div class="sound-btn"><i class="fas fa-music fa-lg"></i></div>
<div class="flex flex-row">
</div>
<!-- absolute -->
<div class="dropdown-container mt-5 ml-7 md:mt-0">
<label for="content-options" class="pr-1">Show me a...</label>
<select name="content-options" id="content-options" class="pl-2 rounded-sm">
<option value="" selected disabled hidden>choose</option>
<option value="gif">gif</option>
<option value="painting">painting</option>
<option value="quote">quote</option>
<option value="joke">joke</option>
</select>
</div>
<button type="button" id="surprise-btn"
class="ml-7 bg-transparent border-2 p-2 surprise-button show mt-5 md:mt-0">Surprise</button>
</div>
</nav>
</header>
<main>
<div id="error-modal" class="modal-backdrop">
<div id="error-modal-content" class="modal-content p-4 rounded shadow-lg">
<div class="flex flex-col">
<p>There was a problem loading the content. Returning you to the homepage.</p>
<button type="click" name="ok" id="ok-btn" class="bg-transparent border-2 p-2">Ok</button>
</div>
</div>
</div>
<!-- Modal for Search -->
<div id="search-modal" class="modal-backdrop">
<div id="search-modal-content" class="modal-content p-4 rounded shadow-lg">
<div class="flex flex-col">
<button id="close-modal-btn" class="close-modal-btn self-end">
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12.7170716,9.90872897 L18.9415025,16.1331599 C19.7225511,16.9142085 19.7225511,18.1805384 18.9415025,18.961587 C18.1604539,19.7426356 16.894124,19.7426356 16.1130754,18.961587 L9.88864448,12.7371561 L3.66421356,18.961587 C2.88316498,19.7426356 1.61683502,19.7426356 0.835786438,18.961587 C0.0547378541,18.1805384 0.0547378541,16.9142085 0.835786438,16.1331599 L7.06021736,9.90872897 L1.01288391,3.86139553 C0.231835329,3.08034695 0.231835329,1.81401699 1.01288391,1.0329684 C1.7939325,0.25191982 3.06026245,0.25191982 3.84131104,1.0329684 L9.88864448,7.08030185 L15.9359779,1.0329684 C16.7170265,0.25191982 17.9833565,0.25191982 18.764405,1.0329684 C19.5454536,1.81401699 19.5454536,3.08034695 18.764405,3.86139553 L12.7170716,9.90872897 Z" fill="" fill-rule="nonzero">
</path>
</svg>
</button>
<h5 class="text-left">Search For A <span id="search-category"></span> or Choose For Me!</h5>
</div>
<!-- Search Modal Content Body -->
<form onsubmit="return false" class="pt-4" id="modal-search-form">
<div class="flex flex-col">
<label for="modal-search"></label>
<input type="text" placeholder="Search Here..." id="modal-search-input" name="modal-search"
class="text-black p-2 rounded-sm" autocomplete="off"/>
<button type="submit" class="modal-search-btn p-2 mt-3 rounded-sm"
id="modal-search-btn">Search<i class="ml-2 fas fa-search"></i></button>
</div>
<p class="warning-text hide">Please enter a search tag!</p>
<span class="modal-or py-4 flex flex-row">or</span>
<button type="button" id="modal-choose-btn" class="p-2 rounded-sm">Choose For Me</button>
</form>
</div>
</div>
<!-- Sound Modal -->
<div id="sound-modal" class="modal-backdrop">
<!-- Sound Modal Content Header -->
<div id="sound-modal-content" class="modal-content p-4 rounded shadow-lg">
<h5 class="text-center">Sound Mixer</h5>
<div class="flex flex-col mt-8">
<div class="flex flex-col lg:flex-row justify-between">
<div class="flex flex-row justify-center mb-4 lg:mb-0">
<label for="preset-options" class="mr-4 mt-2">Select a </label>
<select name="preset-options" id="preset-select" class="pl-2 py-2 mr-3 rounded-sm">
<option value="" selected disabled hidden>preset</option>
</select>
</div>
<div class="flex flex-row justify-center">
<input type="text" name="preset-name" id="preset-name-input"
placeholder="Enter Preset Name" autocomplete="off" class="pl-2" />
<button type="button" name="save-preset" id="save-preset-btn" class="p-2 rounded-sm">Save
Preset</button>
</div>
</div>
<p id="preset-warning" class="mt-4 text-center warning-text"></p>
</div>
<div id="sound-options-wrapper"
class="h-64 mt-8 grid grid-cols-1 lg:grid-cols-2 gap-y-8 justify-items-center overflow-y-auto">
</div>
<div class="flex flex-col mt-8">
<button type="button" name="reset-sound-modal" id="reset-sound-modal-btn"
class="p-2 rounded-sm ">Reset</button>
<button type="button" name="clear-presets" id="clear-preset-btn" class="p-2 rounded-sm mt-3">Clear
Presets</button>
<button type="button" name="close-sound-modal" id="close-sound-modal-btn"
class="p-2 rounded-sm mt-3">Close</button>
</div>
<p class="text-center mt-8 italic text-sm">All sounds from Zapsplat</p>
</div>
</div>
</div>
<section id="content" class="flex flex-col items-center">
<!-- Dynamically generate your content here -->
</section>
<section id="navigation-options" class="flex justify-center px-5 w-full md:w-auto md:px-0">
<!-- Shows your next version of content -->
<button type="button" id="next-btn" class="bg-transparent border-2 p-2 w-full md:w-auto another-button">Show
another!</button>
<button type="button" id="search-btn"
class="ml-4 bg-transparent border-2 p-2 search-button w-full md:w-auto">Search<i
class="ml-2 fas fa-search"></i></button>
</section>
<!-- Blobs -->
<div class="blob-container show" id="blobContainer">
<svg class="blob1" width="700px" height="740px" viewBox="0 0 700 780" fill"none" xmlns="http://www.w3.org/2000/svg">
<path id="blob1" d="M504.328993,179.01371 C568.644604,232.163416 651.718934,278.166943 667.3512,339.356101 C682.536831,400.991894 630.280397,477.366681 565.51815,551.061652 C500.755904,624.756622 424.381116,695.325139 337.733697,705.151135 C251.086277,714.977131 155.059497,664.060606 100.123247,590.365636 C45.6336322,516.670666 21.4820588,457.578412 32.6811828,324.17047 C56.3857948,41.7927142 251.532913,15.9915033 322.548066,41.0031296 C393.56322,66.4613921 439.566746,126.310641 504.328993,179.01371 Z">
</path>
</svg>
<svg class="blob2" width="700px" height="740px" viewBox="0 0 700 780" fill"none" xmlns="http://www.w3.org/2000/svg">
<path id="blob2" d="M504.328993,179.01371 C568.644604,232.163416 651.718934,278.166943 667.3512,339.356101 C682.536831,400.991894 630.280397,477.366681 565.51815,551.061652 C500.755904,624.756622 424.381116,695.325139 337.733697,705.151135 C251.086277,714.977131 155.059497,664.060606 100.123247,590.365636 C45.6336322,516.670666 21.4820588,457.578412 32.6811828,324.17047 C56.3857948,41.7927142 251.532913,15.9915033 322.548066,41.0031296 C393.56322,66.4613921 439.566746,126.310641 504.328993,179.01371 Z">
</path>
</svg>
</div>
</main>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script type="text/module" src="./assets/js/spline.js"></script>
<script type="text/module" src="./assets/js/pointsInPath.js"></script>
<script type="text/module" src="./assets/js/createCoordsTransformer.js"></script>
<script type="module" src="./assets/js/script.js"></script>
</body>
</html>