-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
249 lines (240 loc) · 13.7 KB
/
index.html
File metadata and controls
249 lines (240 loc) · 13.7 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script defer src="/js/cookie-consent.js"></script>
<script>
window.dataLayer = window.dataLayer || [];
window.gtag = function () {
if (window.analyticsAllowed) dataLayer.push(arguments);
};
</script> -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-94X80FV4W3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-94X80FV4W3');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
<title>FONY – Web3 Music Player | Free Internet Radio</title>
<meta name="description" content="FONY is a next-gen Web3 music player combining internet radio streaming with NFT-based audio content. Listen, AI support, and explore the future of audio.">
<meta name="keywords" content="Web3 music player, NFT music, internet radio, streaming platform, crypto audio, blockchain music, digital collectibles, FONY">
<meta property="og:title" content="FONY – Web3 Music Player & NFT Internet Radio">
<meta property="og:description" content="Stream music from around the world, discover NFT audio collectibles — all in one futuristic player.">
<meta property="og:image" content="https://fony.space/preview.png">
<meta property="og:url" content="https://fony.space">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="FONY – Web3 Music Streaming & NFT Audio Player">
<meta name="twitter:description" content="Experience the evolution of streaming with FONY. Powered by Web3, built for audio lovers.">
<meta name="twitter:image" content="https://fony.space/preview.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "FONY",
"url": "https://fony.space",
"description": "Web3-based internet radio and NFT music player for streaming audio across genres.",
"inLanguage": "en",
"publisher": {
"@type": "Organization",
"name": "FONY"
}
}
</script>
<link rel="apple-touch-icon" sizes="180x180" href="/img/ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/ico/favicon-16x16.png">
<link rel="manifest" href="/img/ico/site.webmanifest">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/player.css">
<link rel="stylesheet" href="/css/chat.css">
<link rel="stylesheet" href="/css/mobile.css">
<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=Ruda:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<script type="module" src="/js/preloader.js"></script>
<div class="container" style="opacity: 0;">
<div class="left-panel">
<div class="top-bar">
<span class="logo">FONY</span>
</div>
<div class="screen-and-diods">
<div class="screen">
<div class="left-group">
<img src="/img/stream_icon.svg" alt="Stream Icon" class="stream-icon">
<span id="stationLabel" class="station-label">
<span class="scrolling-text">Radiostation Name</span>
</span>
</div>
<div class="center-group">
<span id="playTimer" class="play-timer">0:00</span>
</div>
<div class="right-group">
<img src="/img/track_icon.svg" alt="Track Icon" class="track-icon">
<span id="currentTrack" class="track-name">
<span class="scrolling-text">Artist - Track</span>
</span>
</div>
</div>
<div class="diods-row"></div>
</div>
<div class="player-controls">
<div class="left-stack">
<img src="/img/shuffle.svg" alt="Shuffle" id="shuffleBtn" class="player-btn">
<img src="/img/rr.svg" alt="Previous" id="rrBtn" class="player-btn">
<img src="/img/random_button.svg" alt="Random playlist" id="randomBtn" class="player-btn">
</div>
<div class="center-circle">
<img src="/img/play_ellipse.svg" alt="Ellipse" class="play-ellipse">
<img src="/img/play_button.svg" alt="Play/Pause" id="playPauseBtn" class="player-btn play-btn">
</div>
<div class="right-stack">
<img src="/img/fav.svg" alt="Favorite" id="favBtn" class="player-btn">
<img src="/img/ff.svg" alt="Next" id="ffBtn" class="player-btn">
<div class="volume-container">
<svg class="volume-scale" width="104" height="34" viewBox="0 0 104 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="vol" opacity="0.2">
<rect id="1" y="31.3917" width="6.46045" height="2.53478" fill="#3C3C3C"/>
<rect id="2" x="9.69067" y="28.8568" width="6.46045" height="5.06956" fill="#3C3C3C"/>
<rect id="3" x="19.3813" y="26.3221" width="6.46045" height="7.60434" fill="#3C3C3C"/>
<rect id="4" x="29.072" y="24.6321" width="6.46045" height="9.29419" fill="#3C3C3C"/>
<rect id="5" x="38.7627" y="22.0975" width="6.46045" height="11.829" fill="#3C3C3C"/>
<rect id="6" x="48.4533" y="20.4075" width="6.46045" height="13.5188" fill="#3C3C3C"/>
<rect id="7" x="58.144" y="17.8728" width="6.46045" height="16.0536" fill="#3C3C3C"/>
<rect id="8" x="67.8347" y="14.493" width="6.46045" height="19.4333" fill="#3C3C3C"/>
<rect id="9" x="77.5253" y="11.1134" width="6.46045" height="22.813" fill="#3C3C3C"/>
<rect id="10" x="87.216" y="7.73364" width="6.46045" height="26.1927" fill="#3C3C3C"/>
<rect id="11" x="96.9067" y="0.974243" width="6.46045" height="32.9521" fill="#3C3C3C"/>
</g>
</svg>
<div class="volume-slider">
<img src="/img/volume_line.svg" alt="Volume line" class="volume-line">
<img src="/img/volume_knob.svg" alt="Volume knob" class="volume-knob">
</div>
</div>
</div>
</div>
<audio id="audioPlayer" volume="1"></audio>
<button id="mobileChatToggleBtn" aria-label="Toggle Chat">>_</button>
<div class="chat-container mobile-chat-container" id="mobileChatContainer" style="display:none;">
<div id="mobileChatHeader" class="chat-header">
<span id="mobileChatGenre"></span>
<button id="mobileChatCloseBtn" aria-label="Close Chat">¯</button>
</div>
<div id="mobileChatMessages" class="chat-messages"></div>
<div id="mobileChatInputContainer" class="chat-input-box">
<input type="text" id="mobileChatInput" placeholder="Enter message...">
<button id="mobileChatSendBtn" class="chat-send-btn">
<img src="/img/send.svg" alt="Send">
</button>
</div>
</div>
<div class="chat-container" id="chat">
<div id="chatHeader" class="chat-header">
<span id="chatGenre"></span>
<div id="chatUsernameContainer" class="chat-username-box">
—
</div>
</div>
<div id="chatMessages" class="chat-messages"></div>
<div id="chatInputContainer" class="chat-input-box">
<input type="text" id="chatInput" placeholder="Enter message...">
<button id="chatSendBtn" class="chat-send-btn">
<img src="/img/send.svg" alt="Send">
</button>
</div>
</div>
</div>
<div id="resizer"></div>
<div class="right-panel">
<div class="genre-box">
<img src="/img/fav_list.svg" id="favoritesFilterBtn" class="favorites-filter-icon">
<label for="customGenreSelect">Genre:</label>
<div class="favorites-sort" id="favoritesSortContainer">
<label for="favoritesSortSelect">⇅</label>
<select id="favoritesSortSelect">
<option value="custom">Custom order</option>
<option value="date">Date added</option>
<option value="genre">Genre</option>
<option value="alpha">Alphabetical</option>
</select>
</div>
<div class="custom-genre-select" id="customGenreSelect">
<div class="genre-select-header" id="genreSelectHeader">
<span class="genre-select-icon" id="genreSelectIcon"></span>
<span class="genre-select-text" id="genreSelectText">Select Genre</span>
</div>
<div class="genre-select-dropdown" id="genreSelectDropdown">
<ul class="genre-select-list" id="genreSelectList"></ul>
</div>
</div>
<div class="search-wrapper">
<input type="text" id="searchInput" class="genre-search" placeholder="Search across all genres">
<span id="clearSearch">×</span>
</div>
<img src="/img/wallet.svg" alt="Connect Wallet" id="connectWalletBtn" style="cursor: pointer; width: 28px; height: 28px;">
<img src="/img/radio.svg" alt="Radio Mode" id="radioModeBtn" style="cursor: pointer; width: 28px; height: 28px; display: none;">
</div>
<div class="playlist-area" id="playlistContent">
<div id="playlistLoader" class="hidden"></div>
<ul id="playlist"></ul>
</div>
</div>
</div>
<button id="manifestoBtn" class="manifesto-button">
<img src="/img/about_icon.svg" alt="About">
</button>
<div id="manifestoModal" class="manifesto-modal">
<div class="manifesto-content">
<div class="manifesto-icons">
<a href="#" id="settingsIcon">
<img src="/img/settings.svg" alt="Settings Icon" width="24" height="24">
</a>
<a href="#" id="gitbookIcon" title="Open GitBook">
<img src="/img/gitbook_icon.svg" alt="Gitbook Icon" width="24" height="24" />
</a>
<a href="https://x.com/fonyspace" target="_blank" rel="noopener noreferrer">
<img src="/img/x_icon.svg" alt="X Icon" width="24" height="24">
</a>
<a href="https://github.com/wadadawadada/fony" target="_blank" rel="noopener noreferrer">
<img src="/img/github_icon.svg" alt="GitHub Icon" width="24" height="24">
</a>
</div>
<p class="disclaimer" style="font-style: italic; color: #07F2B8;">This web app is still under development and continuous improvement. We strive to make it fast and user-friendly so you can enjoy it on any device.</p>
<button class="manifesto-close">×</button>
<h1>The Next-Gen Music Player</h1>
<p><strong>FONY</strong> is more than just a music player — it's a revolutionary <strong>Web3 platform</strong> designed for infinite global music streaming, blending freedom, decentralization, and cutting-edge technology.</p>
<p><strong>Unlimited Free Music Streaming</strong><br>Enjoy your favorite tracks and discover new genres with no subscriptions, no restrictions, and no ads. <strong>FONY</strong> offers seamless 24/7 streaming — anytime, anywhere, for everyone.</p>
<p><strong>An Interface That Works for You</strong><br>Our mission is to make access to music <strong>fast</strong>, <strong>intuitive</strong>, and <strong>diverse</strong>. The carefully crafted interface ensures you dive into the world of music effortlessly, right from the start.</p>
<p><strong>Web3 & NFT Integration</strong><br>In the near future, you'll be able to connect your <strong>NFT audio tracks</strong> and play the music you truly own. <strong>FONY</strong> bridges collectible digital audio with the convenience of modern streaming.</p>
<p><strong>Decentralized Audio Without Limits</strong><br><strong>FONY</strong> breaks the barriers of traditional platforms and opens the door to a new kind of music experience — fair, open, and built for the people.</p>
<p><strong>Internet Radio & Music Discovery Tools</strong><br>Tune into curated radio stations and explore sound like never before with AI-powered music advisors and innovative discovery tools designed to expand your sonic horizons.</p>
<a href="https://wadada.cool" target="_blank">Created by w3dada </a>♫<a href="https://blockarkstudios.com" target="_blank"> Powered by Block Ark Studios © 2025 v1.0</a>
</div>
</div>
<button id="themeToggle">
<img src="/img/moon.svg" alt="Toggle Theme">
</button>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script type="module" src="/js/main.js"></script>
<script type="module" src="/js/theme.js"></script>
<script type="module" src="/js/equalizer.js"></script>
<script type="module" src="/js/utils/eq-adjust.js"></script>
<script type="module" src="/js/settings.js"></script>
<script type="module" src="/js/gitbook.js"></script>
<script type="module" src="/js/nowplaying.js"></script>
<script type="module" src="/js/utils/toggle-state.js"></script>
<script type="module" src="/js/utils/favbutton.js"></script>
<div id="cookieBanner" style="position: fixed; bottom: 0; left: 0; right: 0; background: #171C2B; color: #00F2B8; padding: 16px; font-family: 'Ruda', sans-serif; font-size: 0.9rem; z-index: 9999; display: none; box-shadow: 0 -4px 8px rgba(0,0,0,0.2);">
<div style="max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;">
<span style="margin-right: 12px;">We use cookies for basic functionality and analytics. Do you agree?</span>
<button id="acceptCookies" style="background-color: #00F2B8; color: #171C2B; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold;">Accept</button>
</div>
</div>
</body>
</html>