-
Notifications
You must be signed in to change notification settings - Fork 0
/
components.html
581 lines (471 loc) · 25.8 KB
/
components.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
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta-->
<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>Components</title>
<!--StyleSheets-->
<link rel="stylesheet" href="css/setup.css">
<link rel="stylesheet" href="css/cursor.css">
<link rel="stylesheet" href="css/components.css">
<style>
body {
margin-inline: auto;
max-width: 85rem;
}
h1 {
text-align: center;
margin: 1em 0em;
}
.component_title {
color: hsl(var(--clr-light-gray, 0 0% 67%));
font-size: var(--fs-300);
border: 2px solid gray;
border-top: none;
padding: 0.5em;
margin-bottom: 1em;
}
.helper {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1em;
}
.section {
border: 2px solid hsl(0 0% 100% / 0.25);
justify-content: space-around;
align-items: center;
padding: 0em 2em 2em;
}
.main_wrap {
display: flex;
flex-direction: column;
gap: 2em;
}
</style>
<!--Favicon-->
<link rel="shortcut icon" href="../icons/gear-dark.ico" type="image/x-icon">
<!--CDN | Sharer.js-->
<script src="https://cdn.jsdelivr.net/npm/sharer.js@latest/sharer.min.js"></script>
<!--CDN | Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body onmousemove="cursorMove(event)">
<div class="heading_of_page flex container">
<a class="text-white link" href="index.html">
<i class="fs-300 fa-solid fa-home cursor-bigger"></i><span class="fs-300"> \</span>
</a>
<span class="fs-300">Components</span>
</div>
<h1 class="fs-700 text-accent uppercase">Components</h1>
<div class="main_wrap container">
<section class="button_section flex section">
<h3 class="component_title">Buttons</h3>
<div class="container buttons-container">
<!--Component | Navigation Button Yellow-->
<a href="#" class="fs-300 small-button yellow-button cursor-bigger">sign up</a>
<!--Component | Navigation Button Black-->
<a href="#" class="fs-300 small-button black-button cursor-bigger">sign in</a>
<!--Component | Tag-->
<div class="tag">Featured</div>
<!--Component | Body Buttons-->
<button class="fs-600 large-button black-button cursor-bigger" type="button">All</button>
</div>
</section>
<section class="share_and_like_section flex section">
<h3 class="component_title">Share and Like Buttons</h3>
<!--Component | Share and Like Buttons-->
<section class="share_and_like_component grid">
<!--FB Share Btn-->
<div class="fb_share_container cursor-bigger grid">
<button class="fb_share_button button grid" type="button" data-sharer="facebook"
data-title="Title of Article" data-hashtags="artist,album,genius"
data-url="https://genius.com/a/radio-personality-laura-stylez-talks-balancing-motherhood-and-her-career">
<i class="fa-brands fa-facebook-f text-white"></i>
<span class="sr-only">Facebook Share Button</span>
</button>
</div>
<!--Twitter Share Btn-->
<div class="twitter_share_container cursor-bigger grid">
<button class="twitter_share_button button grid" type="button" aria-label="Twitter Share Button"
data-sharer="twitter" data-title="Title of Article" data-hashtags="artist,album,genius"
data-url="https://genius.com/a/radio-personality-laura-stylez-talks-balancing-motherhood-and-her-career">
<i class="fa-brands fa-twitter text-white"></i>
<span class="sr-only">Twitter Share Button</span>
</button>
</div>
<!--Thumbs Up Button-->
<div class="thumbs_up_container cursor-bigger grid">
<button class="thumbs_up_button grid" type="button" aria-label="Upvote">
<i class="fs-400 fa-solid fa-thumbs-up text-white"></i>
<span class="sr-only">Downvote</span>
</button>
</div>
<!--Thumbs Down Button-->
<div class="thumbs_down_container cursor-bigger grid">
<button class="thumbs_down_button grid" type="button" aria-label="Downvote">
<i class="fs-400 text-white fa-solid fa-thumbs-down"></i>
<span class="sr-only">Downvote</span>
</button>
</div>
<!--Upvotes-->
<div class="upvotes grid fs-300"><span>+9 upvotes</span></div>
</section>
<div class="upvotes grid fs-300"><span>+9 upvotes</span></div>
</section>
<!--Music Player-->
<section class="music_player_section flex section">
<h3 class="component_title">Music Player</h3>
<!--Component | Music Player-->
<aside class="music_player_container">
<!--Music Player Left Side-->
<div class="music_player_white_side bg-white">
<!--Apple Music Logo-->
<div class="music_player_apple_music_logo">
<a href="https://music.apple.com/us/browse" target="_blank">
<img class="cursor-bigger" src="../icons/apple-music.svg" alt="Apple Music Logo">
</a>
</div>
<!--Music Player Album Cover-->
<div class="music_player_album_cover">
<img src="../images/come-home-the-kids-miss-you-jack-harlow-large.jpg"
alt="Jack Harlow Come Home The Kids Miss You Album Cover">
</div>
<!--Music Player Details (Artist Name & Album Name)-->
<div class="music_player_album_details text-dark">
<p class="fs-200">Jack Harlow</p>
<p class="album-name fs-400">Come Home The Kids...</p>
</div>
<!--Music Player CTA-->
<div class="music_player_cta grid">
<a class="apple_music_cta fs-500 medium-button text-accent black-button cursor-bigger"
href="https://music.apple.com/us/album/come-home-the-kids-miss-you/1618136433"
target="_blank">View in Apple Music</a>
</div>
</div>
<!--Music Player Right Side-->
<div class="music_player_yellow_side grid bg-accent">
<div class="music_player_currently_playing flex text-white bg-dark-gray">
<!--Current Song-->
<div class="current_song">
<div class="flex music_player_additional_info show_on_tablet fs-300">
<a ><i class="fa-brands fa-apple fs-300"></i> <span class="apple_music_link">View in Apple Music</span></a>
<span> |</span>
<span class="artist_name text-light-gray">Jack Harlow:</span>
</div>
<span class="fs-500">Come Home The Kids Miss You</span>
</div>
<!--Animating Level Bars-->
<div class="level_bars flex">
<span class="level_bar one"></span>
<span class="level_bar two"></span>
<span class="level_bar three"></span>
</div>
</div>
<!--Music Playlist-->
<div class="music_player_playlist_container ">
<div class="grid">
<ul class="music_player_playlist flex text-dark cursor-bigger">
<li class="playlist_song">
<span class="playlist_song_title">Talk Of The Town</span>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Young Harleezy</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">I'd Do Anything To Make You Smile</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">First Class</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Dua Lipa</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Side Piece</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Movie Star (ft. Pharrell Williams)</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Lil Secret</span>
</li>
<li class="playlist_song">
<span class="playlist_song_title">I Got A Shot</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Churchill Downs (ft. Drake)</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Like A Blade of Grass</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Parent Trap (ft. Justin Timberlake)</span>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Poison (ft. Lil Wayne)</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">Nail Tech</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
<li class="playlist_song">
<span class="playlist_song_title">State Fair</span>
<i class="fa-solid fa-e fs-200"></i>
</li>
</ul>
</div>
</div>
<!--Controls-->
<div class="controls_container grid text-white bg-dark-gray">
<div class="controls container fs-400 large-button grid cursor-bigger">
<!--Audio-->
<audio class="audio" preload="metadata">
<source class="audio-source" src="../sound/jack-harlow-talk-of-the-town.mp3">
</audio>
<!--Play Button-->
<div class="grid">
<button class="play_pause_btn flex">
<i class="fa text-white fa-play"></i>
<span class="sr-only">Play/Pause Button</span>
</button>
</div>
<!--Progress Container-->
<div class="progress_container">
<hr class="progress_track bg-white">
<hr class="progress bg-accent">
</div>
<!--Duration of Audio-->
<div class="grid">
<span class="full_time">0:00</span>
</div>
</div>
</div>
</div>
</aside>
</section>
<!--Comment Section-->
<section class="comment_section flex section">
<h3 class="component_title">Comment Section</h3>
<!---Component | Comment-->
<section class="comment_section_container grid">
<!--Comment Title and Subtitle-->
<div class="comment_heading_details flex">
<h2 class="comment_title text-accent">COMMENTS</h2>
<p class="comment_subtitle fs-300">Write down what you think about the song, express yourself!</p>
</div>
<!--Comment TextArea-->
<textarea class="comment_textarea text-white cursor-bigger" name="user-comment-on-song">
</textarea>
<!--Submit Button-->
<button class="submit_comment_btn large-button black-button uppercase cursor-bigger" type="submit"
onclick="submitComment();">Send</button>
<!--Template for Users' Comments-->
<section class="comments flex">
<div class="comment_container bg-dark grid">
<div class="comment_top_row flex">
<div class="profile_details flex">
<!--Profile Image-->
<a class='profile_picture_link' href="#">
<img class="profile_picture" src="../images/profile-pic-1.jpg"
alt="Picture of Man with glasses and beard">
</a>
<!--Account Name-->
<span class="account_name text-white fs-200">
James Raposo
</span>
</div>
<!--Time Past since post was typed out-->
<div class="time_past fs-200 text-white">
6 days ago
</div>
</div>
<!--User's Comment-->
<p class="user_comment fs-400 text-accent">
Love this tune!
</p>
<!--Upvote and Downvote Section-->
<div class="upvotes_downvotes">
<button class="upvote" type="button">
<i class="fa-solid fa-thumbs-up"></i>
<span class="sr-only">Upvote</span>
</button>
<span class="upvotesNum fs-200 text-gray">+3 upvotes</span>
<button class="downvote" type="button">
<i class="fa-solid fa-thumbs-down"></i>
<span class="sr-only">Downvote</span>
</button>
</div>
</div>
</section>
</section>
</section>
<!--Lyric Analysis-->
<section class=" lyric_analysis_section flex section">
<h3 class="component_title">Lyric Analysis Section</h3>
<!--Component| Lyrics Analysisi-->
<section class="lyric_analysis_component flex">
<!--Annotation Side-->
<div class="annotation_side">
<!--Template for Annotation-->
<section class="annotation">
<div class="annotation_top_row flex">
<span><strong>Genius Annotation</strong></span>
<i class="fa-solid fa-close text-accent cursor-bigger"></i>
<span class="sr-only">Close Annotations Button</span>
</div>
<!--Annotation Comment-->
<div class="annotation_edit_review fs-200 text-white">This edit will be reviewed before updating</div>
<textarea name="edit-annotation" class="annotation_edit_textarea fs-200"></textarea>
<p class="annotation_details fs-200">
<!--Figure for Comment (Image and Caption)-->
<figure>
<img class="annotation_img" src="/">
<figcaption class="annotation_figcaption fs-100"></figcaption>
</figure>
</p>
<button class="annotation_edit_btn small-button black-button fs-200" type="submit">Edit</button>
<!--Annotation Interactions (Upvotes/Downvote & Share)-->
<div class="annotation_interactions flex">
<!--Annotation Upvote-->
<div class="annotation_upvote_container">
<button type="button" class="annotation_upvote text-accent cursor-bigger">
<i class="fa-solid fa-thumbs-up"></i>
<span class="sr-only">Upvote</span>
</button>
<span class="fs-200">+91</span>
</div>
<!--Annotation Downvote-->
<button type="button" class="annotation_downvote text-accent cursor-bigger"><i
class="fa-solid fa-thumbs-down"></i><span class="sr-only">Downvote</span></button>
<!--Annotation Share-->
<button class="annotation_share_btn text-accent flex cursor-bigger" type="button">
<a class="annotation_share_link fs-200 text-white" href="#">Share</a>
<i class="fas fa-share"></i>
</button>
</div>
<div class="suggestion_container">
<input
class="suggestion_input_1 fs-300 bg-dark text-white suggestion_input_field cursor-bigger"
type="text" name="suggestions" placeholder="suggest an improvement to earn IQ">
</div>
</section>
</div>
<section class="lyrics_side">
<p class="fs-400 lyrics">
<h2 class="fs-500 lyrics_song_title">Face Off - Tech N9ne ft. Dwayne Johnson, King Iso & Joey Cool
</h2>
<p class="lyrics_type fs-200 uppercase">
[Verse 4: Dwayne Johnson & Tech N9ne]</p>
<p class="lyrics_part">
It's about drive, it's about power, we stay hungry, we devour
Put in the work, put in the hours and take what's ours
<span class="highlights">Black and Samoan in my veins, my culture bangin' with Strange</span>
I change the game so what's my m************' name? (Rock)
What they gonna get though?
Desecration, defamation, if you wanna bring it to the masses
<span class="highlights">Face to face now we escalatin' when I have to put boots to asses</span>
Mean on ya like a dream when I'm rumblin'
You're gonna scream, "Mama"
So bring drama to the king Brahma (Then what?)
Comin' at ya' with extreme mana (Ahoo, ahoo, ahoo)
<br>
</p>
<p class="lyrics_type fs-200 uppercase">[Outro: Dwayne Johnson]</p>
<p class="lyrics_part">
Thank you brother, Tech N9ne
<span class="highlights">Thank you, Teremana</span>
One take, that's a wrap
Face-off
</p>
</p>
</section>
</section>
</section>
<div class="verified_artists_section flex section">
<h3 class="component_title">Verified Artists Section</h3>
<section class="verified_artists_component grid container">
<h2 class="verified_artists_container text-accent ">Verified Artists
</h2>
<h3 class="most_popular_heading fs-600 line-break flex">Most
Popular A
Artists
on Genius
</h3>
<div class="tooltip-parent choose_letter_container flex cursor-bigger">
<ul class="choose_letter flex fs-900">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tooltip">Drag to navigate</div>
</div>
<ul class="verified_artists_list">
<li class="verified_artists_overflow">
<ul>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">A Boogie Wit Da Hoodie</span>
<span class="fs-400">Still Thinkin' About You</span>
</li>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">Billie Eilish</span>
<span class="fs-400">Bellyache</span>
</li>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">Cardi B</span>
<span class="fs-400">I Like it</span>
</li>
</ul>
</li>
<li class="verified_artists_overflow">
<ul>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">Andrea Bocelli</span>
<span class="fs-400">Con Te Partiro</span>
</li>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">Bob Marley</span>
<span class="fs-400">Buffalo Soldier</span>
</li>
<li class="verified_artist grid cursor-bigger">
<span class="fs-300">Conor Maynard</span>
<span class="fs-400">Turn Around (ft. Neyo)</span>
</li>
</ul>
</li>
</ul>
</section>
</div>
</div>
<footer class="fs-300 grid center text-gray">
<p>© Designed by <a href="https://www.behance.net/gallery/140483359/GENIUS-website-redesign?tracking_source=search_projects%7Cwebsite" class="link text-accent cursor-bigger">Pavel Korzh</a>. Coded by <a href="https://github.com/RichardOgujawa/" class="link text-accent cursor-bigger">Richard Ogujawa</a> | 2022</p>
</footer>
<!--Cursor-->
<div class="cursor_inner"><span class="cursor_text cursor_press">PRESS</span>
<span class="cursor_text cursor_drag">DRAG</span>
</div>
<div class="cursor_outer"></div>
</body>
<script src="script/components-message.js"></script>
<script src="script/new-variables.js"></script>
<script src="script/cursor.js"></script>
<script src="script/share.js"></script>
<script src="script/music-player.js"></script>
<script src="script/comment-section.js"></script>
<script src="script/lyrics-analysis.js"></script>
<script src="script/verified_artists.js"></script>
</html>