-
Notifications
You must be signed in to change notification settings - Fork 2
/
home.html
381 lines (337 loc) · 22.9 KB
/
home.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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="landing page with application information" />
<meta name="keywords" content="WYDRN, home" />
<title>Home - WYDRN</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway&display=swap">
<link rel="stylesheet" href="css/styles.min.css">
<link rel="shortcut icon" href="images/website/favicons/favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/idd0zbe.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script>
document.documentElement.className = "js";
var supportsCssVars = function supportsCssVars() {
var e,
t = document.createElement("style");
return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
};
</script>
</head>
<body style="background: #0e0f11;" class="loading">
<!---------------
NAVBAR
------------------>
<nav class="navbar navbar-dark navbar-expand-md fixed-top navbar-shrink py-3" id="mainNav" style="height: 61.6px;background: #181a1c;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle
navigation</span><span class="navbar-toggler-icon"></span></button>
<a href="">
<div class="collapse navbar-collapse" id="navcol-1"><img src="images/website/logo.png" style="width: 50px;"></a>
<span class="full-form">WHAT YOU DOIN' RIGHT NOW</span>
<div class="btn-group btn-group-sm ms-auto" role="group" style="font-family: Montserrat, sans-serif;font-weight: bold;">
<!--Login Button-->
<button onclick="window.location.href='login.php'" class="btn btn-primary" type="button" style="margin: 4px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;background: #3d3e40;border-color: #3d3e40;font-family: Montserrat, sans-serif;">Log In</button>
<!--SignUp Button-->
<button onclick="window.location.href='login.php'" class="btn btn-primary" type="button" style="margin: 4px;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;font-family: Montserrat, sans-serif;background: #5bb2ff;">Sign Up</button>
</div>
</div>
</div>
</nav>
<header class="bg-dark pt-5" style="background: #0e0f11;"></header>
<!---------------
DUMMY LINKS
------------------>
<!--Top Container for Animation and website title-->
<section>
<main class="intro">
<div class="content">
<div class="grid">
<div class="grid__item grid__item--a" style="background-image:url(images/website/landing-page/3.jpg)"></div>
<div class="grid__item grid__item--b" style="background-image:url(images/website/landing-page/2.jpg)"></div>
<div class="grid__item grid__item--c" style="background-image:url(images/website/landing-page/10.jpg)"></div>
<div class="grid__item grid__item--d" style="background-image:url(images/website/landing-page/5.jpg)"></div>
<div class="grid__item grid__item--e" style="background-image:url(images/website/landing-page/8.jpg)"></div>
<div class="grid__item grid__item--f" style="background-image:url(images/website/landing-page/6.jpg)"></div>
</div>
<!--Text-->
<nav class="menu">
<a class="menu__item">
<h2 class="menu__item-title">Socialize</h2>
<p class="menu__item-subtitle">Dreampie, share mutual taste!</p>
</a>
<a class="menu__item menu__item--current">
<h2 class="menu__item-title">WYDRN</h2>
<p class="menu__item-subtitle">What You Doin' Right Now?</p>
</a>
<a class="menu__item">
<h2 class="menu__item-title">Catalog</h2>
<p class="menu__item-subtitle">Showcase your superb medias!</p>
</a>
</nav>
</div>
<div class="layers">
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/1.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/2.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/3.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/4.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/9.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/6.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/7.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/8.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/5.jpg)"></div>
</div>
<div class="layers__item">
<div class="layers__item-img" style="background-image: url(images/website/landing-page/10.jpg)"></div>
</div>
</div>
</main>
<svg class="cursor" width="220" height="220" viewBox="0 0 220 220">
<defs>
<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1" result="warp"></feTurbulence>
<feOffset dx="-30" result="warpOffset"></feOffset>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset"></feDisplacementMap>
</filter>
</defs>
<circle class="cursor__inner" cx="110" cy="110" r="60"></circle>
</svg>
</section>
<!-- <video src="images/website/assets/videos/14.mp4" autoplay loop playsinline muted></video> -->
<!---------------
FEATURE CARDS
------------------>
<section>
<div class="container py-5">
<div class="mx-auto" style="max-width: 900px;">
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
<div class="col mb-4">
<div class="card bg-primary-light">
<div class="card-body text-center px-4 py-5 px-md-5" style="border-radius: 10px;">
<p class="fw-bold text-primary card-text mb-2" style="font-family: Montserrat, sans-serif;font-size: 30px;font-weight: bold;">BROWSE</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;">
<br>Instantaneously catalog your favorite medias (Books, Movies, TV, Albums, Videogames) with a the click of a button.
</h5>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card bg-secondary-light">
<div class="card-body text-center px-4 py-5 px-md-5" style="border-radius: 10px;">
<p class="fw-bold text-secondary card-text mb-2" style="font-family: Montserrat, sans-serif;font-size: 30px;">FANCY PROFILE</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;">
<br>Customize your Banner and Profile along with a impressive list of activities you are doing and see what your friends are upto.
</h5>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card bg-info-light">
<div class="card-body text-center px-4 py-5 px-md-5" style="border-radius: 10px;">
<p class="fw-bold text-info card-text mb-2" style="font-family: Montserrat, sans-serif;font-size: 30px;">DISCOVER</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;"><br>Get personalized recommendations across all medias. Keep growing your entertainment media library.</h5>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="card-body text-center border-1 px-4 py-5 px-md-5" style="background: #56291b;border-radius: 10px;">
<p class="fw-bold text-danger card-text mb-2" style="font-family: Montserrat, sans-serif;font-size: 30px;color: rgb(60,148,159);">SOCIAL FEED</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;">
<br>Socialize and check out what recent media items have been logged by your friends in a stylish Social Feed.
</h5>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card"></div>
<div class="card">
<div class="card-body text-center px-4 py-5 px-md-5" style="border-radius: 10px;">
<p class="fw-bold text-muted card-text mb-2" style="font-size: 30px;font-family: Montserrat, sans-serif;">MUTUAL VIEW</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;"><br>Get a mutual view and for Books, Movies, TV, Albums, Videogames you share with other members.</h5>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="card-body text-center px-4 py-5 px-md-5" style="border-radius: 10px;background: #746121;">
<p class="fw-bold card-text mb-2" style="font-size: 30px;font-family: Montserrat, sans-serif;color: rgb(242,203,101);">IMPORT & EXPORT
</p>
<h5 class="fw-bold card-title mb-3" style="font-size: 16px;font-family: Montserrat, sans-serif;">
<br>Instantly export & import back all your activity. You can import data from popular services to WYDRN.
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!---------------
MOVIE BOX -> LEFT TO RIGHT
------------------>
<section class="py-5">
<div class="container">
<div class="bg-dark border rounded border-dark d-flex flex-column justify-content-between align-items-center flex-lg-row p-4 p-lg-5" id="movieBox">
<div class="text-center text-lg-start py-3 py-lg-1">
<h1 class="fw-bold text-start d-inline-block mb-2 myHeading">
Maintain A <br><span class="movieHeading">Movie</span> Catalog
</h1>
<p class="text-start " style=" margin: 40px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500px; ">
You no longer need to rely on five different websites to track and catalogue your <b>Movies, TV Shows, Videogames, Albums, and Books</b> because WYDRN gives you a single platform for all of your entertainment needs. In addition
to adding your favourite content and seeing what your friends are currently watching, you can browse other media on WYDRN. You can match your preferences with other community members using our remarkable <b>Mutual View</b> feature,
and you can follow them to keep up with their activities. You really do not want to miss out on this.
<br/>
</p>
</div>
<img src="images/website/assets/movies/bg-remove-4.png" style="width: 500px; height: 300px" class="shake" />
</div>
</div>
</section>
<!---------------
BOOK BOX -> RIGHT TO LEFT
------------------>
<section class="py-5">
<div class="container">
<div class="bg-dark border rounded border-dark d-flex flex-column justify-content-between align-items-center flex-lg-row p-4 p-lg-5" id="bookBox">
<img src="images/website/assets/books/bg-removed-4.png" style="width: 450px; height: 325px" class="shake" />
<div class="text-center text-lg-start py-3 py-lg-1">
<h1 class="fw-bold text-end d-inline-block mb-2 myHeading">
Showcase Your Favorite <span class="bookHeading">Books</span>
</h1>
<p class="text-end" style=" margin: 40px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500px; ">
Since we give users complete control over their data, we also offer an <b>Export</b> feature that allows you to immediately download all of the videogame, movie, TV show, book, and music data that has been stored in our database.
You can export all of your data in both a very user-friendly PDF format and a CSV format. Naturally, you can use our <b>Import</b> feature to re-import the same data using the same CSV if you so choose. You can find a few walkthroughs
on how to import data into WYDRN from services like <b>Goodreads, IMDB, Steam, Letterboxd, TraktTV, and RateYourMusic</b> on our Import and Export page after logging in. Become a member today! <br />
</p>
</div>
</div>
</div>
</section>
<!---------------
MUSIC BOX -> LEFT TO RIGHT
------------------>
<section class="py-5">
<div class="container">
<div class="bg-dark border rounded border-dark d-flex flex-column justify-content-between align-items-center flex-lg-row p-4 p-lg-5" id="musicBox">
<div class="text-center text-lg-start py-3 py-lg-1">
<h1 class="fw-bold text-start d-inline-block mb-2 myHeading">
Build A <br><span class="musicHeading">Music</span> Library
</h1>
<p class="text-start" style=" margin: 40px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500px; ">
Having trouble recalling the name of that one song you heard once? Be at ease; WYDRN has you covered. You can keep track of all your media activity at any time with the help of our incredible <b>DIARY</b> feature. We have created
the <b>STATS</b> feature, which displays your activity in tabular form, to further provide you with comprehensive statistics of your activity. You also get rewarded for your media activity with <b>BADGES</b>. You can earn badges
for different media types, be it books, movies or TV shows! What are you waiting for? Join our fantastic crowd.<br />
</p>
</div>
<img src="images/website/assets/music/bg-remove-2.png " style="width: 700px; height: 500px " class="shake" />
</div>
</div>
</section>
<!---------------
VIDEOGAME BOX -> RIGHT TO LEFT
------------------>
<section class="py-5">
<div class="container">
<div class="bg-dark border rounded border-dark d-flex flex-column justify-content-between align-items-center flex-lg-row p-4 p-lg-5" id="gameBox">
<img src="images/website/assets/games/bg-removed-2.png" style="width: 430px; height: 300px; margin-bottom: -335px;" />
<div class="text-center text-lg-start py-3 py-lg-1">
<h1 class="fw-bold text-end d-inline-block mb-2 myHeading">
Cherish Your <span class="gameHeading">Videogames</span>
</h1>
<p class="text-end" style=" margin: 40px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500px;">
You can create a fancy profile on WYDRN as well! Additionally, you can edit your profile picture and your banner to suit your style and stand out! <b>SOCIALIZE</b> much? Look them up, look at their profiles, and follow or unfollow
them! There is always competition because we also have leaderboards for most active users and most followed users. No matter what, WYDRN has you covered! To top it all off, with our premiere <b>MUTUAL VIEW</b> feature, you can
discover things your followers have in common with you. You can view shared music collections, TV shows, movies, books, and videogames. Discover new content and new friends! <br />
</p>
</div>
</div>
</div>
</section>
<!---------------
TV BOX -> LEFT TO RIGHT
------------------>
<section class="py-5">
<div class="container">
<div class="bg-dark border rounded border-dark d-flex flex-column justify-content-between align-items-center flex-lg-row p-4 p-lg-5" id="tvBox">
<div class="text-center text-lg-start py-3 py-lg-1">
<h1 class="fw-bold text-start d-inline-block mb-2 myHeading">
Share Your <br><span class="tvHeading">TV Shows</span>
</h1>
<p class="text-start" style=" margin: 40px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 500px; ">
Unsure about the mood? Our <b>RECOMMENDATIONS</b> feature comes handy, so you don't have to scratch your head and enjoy curated items just for you. Our instantaneous BROWSE section is sure to help you do quick searches across any
media type. Delete your account with the <b>WIPE DATA</b> feature or clear your current activity using the clear profile feature. Read more about our <b>PRIVACY POLICY</b> and feel free to support this project if you like this
initiative because we care about your data and want you to be worry-free about data security. Join a certified classic community! See you on the other side, player. <br />
</p>
</div>
<img src="images/website/assets/movies/tv-bg-remove-2.png " style="width: 490px; height: 350px; margin-bottom: -306px;" />
</div>
</div>
</section>
<!---------------
FOOTER
------------------>
<footer class="bg-dark ">
<div class="container py-4 py-lg-5 ">
<div class="row justify-content-center ">
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column item ">
<h3 class="fs-6 fw-bold " style="font-family: Montserrat, sans-serif; ">WYDRN</h3>
<ul class="list-unstyled ">
<li style="font-family: Montserrat, sans-serif;font-size: 14px; "><a href="login.php ">Become a Member</a>
</li>
<li style="font-family: Montserrat, sans-serif;font-size: 14px; "><a href="about/index.html ">Meet the
Team</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column item ">
<h3 class="fs-6 fw-bold " style="font-family: Montserrat, sans-serif; ">LEGAL</h3>
<ul class="list-unstyled ">
<li style="font-family: Montserrat, sans-serif;font-size: 14px; "><a href="privacy_policy.php ">Privacy
Policy</a></li>
</ul>
</div>
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last item social ">
<div class="fw-bold d-flex align-items-center mb-2 "><span style="font-size: 14px;font-family: Montserrat, sans-serif; "><img src="images/website/logo.png "
style="width: 26px; "><span></span> WYDRN</span>
</div>
<p class="text-muted copyright " style="font-family: Montserrat, sans-serif;font-size: 14px; ">What You Doin' Right
<br>Now.
</p>
</div>
</div>
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3 ">
<p class="mb-0 " style="font-family: Montserrat, sans-serif;font-size: 12px; ">© 2022 WYDRN. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/index.js "></script>
<script src="js/jquery.min.js "></script>
<script src="css/bootstrap/js/bootstrap.min.js "></script>
<script src="js/script.min.js "></script>
</body>
</html>