Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
160 lines (151 loc) · 8.91 KB
/
Copy pathindex.html
File metadata and controls
160 lines (151 loc) · 8.91 KB
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
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World FM Radio - Modern</title>
<link rel="icon" type="image/png" href="images/1.png">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Added for icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Keeping for grid/utilities if still used, can be removed if fully custom -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="player-styles.css"> <!-- Modern player styles -->
</head>
<body> <div class="container">
<header class="app-header">
<div class="header-content">
<div class="logo-container">
<div class="app-logo">
<i class="fas fa-broadcast-tower logo-icon"></i>
<h1 class="app-title">World FM Radio</h1>
</div>
<p class="app-tagline">Listen to radio stations from around the world</p>
</div>
<div class="header-actions">
<div class="theme-selector-container">
<label for="themeSelector" class="theme-label">
<i class="fas fa-palette"></i> Theme:
</label>
<select id="themeSelector" style="display: none;">
<!-- This will be replaced by the modern theme selector -->
</select>
</div>
</div>
</div>
</header>
<main> <section class="player-section">
<div class="player">
<h3>Now Playing: <span id="nowPlaying">None</span></h3> <!-- Custom Audio Player -->
<div class="custom-player">
<audio id="radioPlayer" preload="auto" crossorigin="anonymous"></audio>
<div class="player-controls">
<button id="playPauseBtn" class="control-btn">
<i class="fas fa-play"></i>
</button>
<div class="volume-control">
<button id="muteBtn" class="control-btn">
<i class="fas fa-volume-up"></i>
</button>
<div class="volume-slider-container">
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80">
</div>
</div>
<div class="station-info">
<div class="station-logo pulse-animation">
<i class="fas fa-broadcast-tower"></i>
</div>
<div class="now-playing-text">
<span id="stationDisplayName">No station selected</span>
</div>
</div>
</div>
<!-- Audio visualization -->
<div class="audio-visualization">
<canvas id="audioVisualization"></canvas>
</div>
</div>
</div>
</section> <section id="country-selection">
<div class="section-header">
<h2>Select a Country</h2>
<div class="filter-controls">
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="regionFilterBtn">
<i class="fas fa-globe"></i> All Regions
</button>
<div class="dropdown-menu" id="regionFilterMenu">
<a class="dropdown-item active" href="#" data-region="all">All Regions</a>
<a class="dropdown-item" href="#" data-region="africa">Africa</a>
<a class="dropdown-item" href="#" data-region="americas">Americas</a>
<a class="dropdown-item" href="#" data-region="asia">Asia</a>
<a class="dropdown-item" href="#" data-region="europe">Europe</a>
<a class="dropdown-item" href="#" data-region="oceania">Oceania</a>
</div>
</div>
</div>
</div>
<div class="search-container">
<div class="search-input-wrapper">
<i class="fas fa-search search-icon"></i>
<input type="text" id="countrySearch" class="search-input" placeholder="Search Country...">
<button id="clearCountrySearch" class="clear-search-btn"><i class="fas fa-times"></i></button>
</div>
</div>
<div id="countryList" class="country-grid">
<!-- Country items will be dynamically populated here -->
</div>
</section> <section id="station-list" style="display: none;">
<div class="section-header with-actions">
<button id="backToCountries" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> Back
</button>
<h2>Stations in <span id="selectedCountry"></span></h2>
<div class="station-actions">
<button id="refreshStations" class="btn btn-outline-secondary" title="Refresh Station List">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
<div class="search-container"> <div class="search-input-wrapper">
<i class="fas fa-search search-icon"></i>
<input type="text" id="stationSearch" class="search-input" placeholder="Search Stations...">
<button id="clearStationSearch" class="clear-search-btn"><i class="fas fa-times"></i></button>
</div>
</div>
<div id="stationListContainer" class="station-list">
<!-- Station items will be dynamically populated here -->
</div>
</section> </main>
<footer class="app-footer">
<div class="footer-content">
<div class="footer-branding">
<img src="images/1.png" alt="Radio Logo" class="footer-logo">
<div class="footer-info">
<p class="footer-tagline">Discover the world through radio</p>
<p class="copyright">World FM Radio © 2025</p>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h4>About</h4>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h4>Connect</h4>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div> </footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>