-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
80 lines (75 loc) · 5.71 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Unlock your ultimate music experience at 'BREATHE THE MUSIC'! Hit play and immerse yourself in the best tunes ever. Discover curated playlists and endless entertainment. Just play music, effortlessly.">
<link rel="shortcut icon" href="/assets/icons/favicon.ico" type="image/x-icon">
<link rel="manifest" href="./manifest.json">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>BREATHE THE MUSIC | Your Best Music Player Experience Ever...</title>
<meta property="og:title" content="BREATHE THE MUSIC | Your Best Music Player Experience Ever...">
<meta property="og:description" content="Unlock your ultimate music experience at 'BREATHE THE MUSIC'! Hit play and immerse yourself in the best tunes ever. Discover curated playlists and endless entertainment. Just play music, effortlessly.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://BreatheTheMusic.netlify.app/">
<meta property="og:image" content="https://BreatheTheMusic.netlify.app/src/assets/logo.jpeg">
<meta name="twitter:card" content="https://BreatheTheMusic.netlify.app/src/assets/screenshot.jpg">
<meta name="twitter:title" content="BREATHE THE MUSIC | Your Best Music Player Experience Ever...">
<meta name="twitter:description" content="Unlock your ultimate music experience at 'BREATHE THE MUSIC'! Hit play and immerse yourself in the best tunes ever. Discover curated playlists and endless entertainment. Just play music, effortlessly.">
<meta name="twitter:image" content="https://BreatheTheMusic.netlify.app/src/assets/logo.jpeg">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z0EXW28536"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z0EXW28536');
</script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "m5nekesb5d");
</script>
</head>
<body>
<video autoplay muted loop id="background-video"></video>
<audio src="/assets/songs/01 Believer.mp3"></audio>
<div class="preloader shown" style="display: none;">
<div class="preloader-inner">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="100" height="100" style="shape-rendering: auto; display: block; background: rgb(255, 255, 255);"><g><path fill="none" stroke="rgb(45, 118, 187)" stroke-width="8" stroke-dasharray="42.76482137044271 42.76482137044271" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.8);transform-origin:50px 50px">
<animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0;256.58892822265625"></animate>
</path><g></g></g></svg>
</div>
</div>
<div class="player-box" style="display: none;">
<div class="content">
<div class="cover">
<img width="300" height="300" src="/assets/covers/believer.webp" alt="" />
</div>
<div class="titles">
<div class="song-name">Believer</div>
<div class="artist-name">Imagine Dragons</div>
</div>
<div class="music-time">
<div class="times-information">
<div class="current-time">00:00</div>
<div class="song-time">03:23</div>
</div>
<div class="time-line">
<div class="filler"></div>
</div>
</div>
<div class="controls">
<svg width="40" height="40" viewBox="0 0 512 512" class="control-icon control-backward"><path d="M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3V256v41.7L459.5 440.6zM256 352V256 128 96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V352z"/></svg>
<svg width="40" height="40" viewBox="0 0 512 512" class="control-icon control-play"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"/></svg>
<svg width="40" height="40" viewBox="0 0 512 512" class="control-icon control-pause hide"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V192c0-17.7 14.3-32 32-32s32 14.3 32 32z"/></svg>
<svg width="40" height="40" viewBox="0 0 512 512" class="control-icon control-forward"><path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4L224 214.3V256v41.7L52.5 440.6zM256 352V256 128 96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4s-18.4-16.6-18.4-29V352z"/></svg>
</div>
</div>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>