-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
115 lines (84 loc) · 6.92 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./logos/logo-base-1200x1200.png">
<title>Music for Your Weather</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="stylemain.css">
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/b6fe51c8e7.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="nav-logo"><a href="index.html"><img class="logo-img" src="./logos/logo-base-1200x1200.png"><span class="logo-txt">Atmosonic</span></a></div>
<div class="nav-btn"><a href="https://x.com/RajveeerrSingh" target="_blank" class="social-btn">Twitter</a><a href="./index.html" class="cta">Go Home</a></div>
</nav>
<main class="hero-section">
<div class="emoji-container">
<img class="emoji e1" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud%20with%20Rain.png" alt="Cloud with Rain" />
<img class="emoji e2" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud%20with%20Lightning%20and%20Rain.png" alt="Cloud with Lightning and Rain" />
<img class="emoji e3" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud%20with%20Snow.png" alt="Cloud with Snow" />
<img class="emoji e7" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Sun%20Behind%20Small%20Cloud.png" alt="Sun Behind Small Cloud"/>
<img class="emoji e6" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Sun%20Behind%20Rain%20Cloud.png" alt="Sun Behind Rain Cloud" />
</div>
<div class="hero-content">
<p class="banner">Discover the perfect soundtrack for every weather.</p>
<h1 class="title">Find Your Perfect Playlist</h1>
<p class="description">Enter your city name and discover a playlist tailored to your weather.</p>
<div class="location-input-section">
<input type="text" id="location" class="location-inp" placeholder="Enter your City" required>
<button class="submit-btn" type="text" id="submit" href="./main.html" onclick=submit()><span><i class="fa-brands fa-spotify"></i></span>Find My Playlist</a>
</button>
</div>
</div>
</main>
<div class="container" id="scroll">
<div class="scroll-down" id="scrollText">Scroll Down For the Details.</div>
<div class="field">
<div class="mouse"></div>
</div>
</div>
<section class="display song-display-section" id="playlistDisplay">
<div class="weather-playlist-display">
<!-- Weather Information -->
<div class="weather-info">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Sun%20with%20Face.png" alt="Sun with Face" id="weatherIcon" class="weather-icon">
<div class="weather-details">
<h2 class="temperature" id="temperature">75°F</h2>
<p class="weather-description" id="weatherCondition">Sunny</p>
</div>
</div>
<!-- Playlist Recommendation -->
<div class="playlist-recommendation">
<h2 class="playlist-title" id="weatherDetails">Sunshine Vibes</h2>
<h3 class="city-display" id="cityDisplay" style="margin-top: 0;font-size: 1.4rem;color: rgb(182, 192, 219);">in Varanasi</h3>
<p class="playlist-description" id="weatherDescription">Feel the warmth with these upbeat tracks perfect for a sunny day.</p>
<p class="album-title">Songs for this Mood</p>
<a class="song-details" id="song1" target="_blank" href="https://open.spotify.com/track/451GvHwY99NKV4zdKPRWmv">
<div class="album-img"><img class="album-img" id="songImg1" src="" style="background-color: rgb(22,22,22);"></div>
<div class="album-details"><div class="album-name" id="songName1">-</div><div class="artist-name" id="artistName1">-</div></div>
</a>
<a class="song-details" id="song2" target="_blank" href="https://open.spotify.com/track/451GvHwY99NKV4zdKPRWmv">
<div class="album-img"><img class="album-img" id="songImg2" src="" style="background-color: rgb(22,22,22);"></div>
<div class="album-details"><div class="album-name" id="songName2">-</div><div class="artist-name" id="artistName2">-</div></div>
</a>
<a class="song-details" id="song3" target="_blank" href="https://open.spotify.com/track/451GvHwY99NKV4zdKPRWmv">
<div class="album-img"><img class="album-img" id="songImg3" src="" style="background-color: rgb(22, 22, 22);"></div>
<div class="album-details"><div class="album-name" id="songName3">-</div><div class="artist-name" id="artistName3">-</div></div>
</a>
<a class="song-details" id="song4" target="_blank" href="https://open.spotify.com/track/451GvHwY99NKV4zdKPRWmv">
<div class="album-img"><img class="album-img" id="songImg4" src="" style="background-color: rgb(22,22,22);"></div>
<div class="album-details"><div class="album-name" id="songName4">-</div><div class="artist-name" id="artistName4">-</div></div>
</a>
<a href="/" class="spotify-button" id="spotifyButton" target="_blank">Open in Spotify</a>
</div>
</div>
</section>
<footer>
<div class="footer-logo nav-logo"><a href="./index.html"><img class="logo-img" src="./logos/logo-base-1200x1200.png"><span class="footer-logo-txt logo-txt">Atmosonic</span></a></div>
<div class="footer-description">Built in<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud%20with%20Lightning%20and%20Rain.png" alt="Cloud with Lightning and Rain" width="25" height="25" />by <span class=creator>Rajveer Singh</span>, the mind behind <a href="https://codecraft-code-editor.netlify.app/" target="_blank" class="CodeCraft"> CodeCraft</a>. Follow me on <a class="footer-social" target="_blank" href="https://x.com/RajveeerrSingh">X</a> and <a href="https://github.com/rajveeerr" target="_blank" class="github">GitHub</a>.</div>
</footer>
</body>
</html>