MelodyMind/index.html at main · powerstone666/MelodyMind · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="theme-color" content="#000000">
  <meta name="description" content="Enjoy free music and lyrics with Melody Minds. Discover personalized recommendations, mood-based playlists, and more.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Enjoy free music and lyrics with Melody Minds. Discover personalized recommendations, mood-based playlists, and more.">
  <meta name="author" content="Your Name or Company">
  <meta name="keywords" content="free music, free music player, lyrics, playlists, mood analyzer, song recommendations, Melody Minds, music playback">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://melodyminds.netlify.app">
  <meta name="theme-color" content="#ffffff">

  <!-- Open Graph Tags -->
  <meta property="og:title" content="Melody Minds - Free Music and Lyrics Player">
  <meta property="og:description" content="Enjoy free music and lyrics with Melody Minds. Discover personalized recommendations, mood-based playlists, and more.">
  <meta property="og:url" content="https://melodyminds.netlify.app">
  <meta property="og:image" content="https://melodyminds.netlify.app/music icon2.png">
  <meta property="og:type" content="website">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Melody Minds - Free Music and Lyrics Player">
  <meta name="twitter:description" content="Enjoy free music and lyrics with Melody Minds. Discover personalized recommendations, mood-based playlists, and more.">
  <meta name="twitter:image" content="https://melodyminds.netlify.app/music icon2.png">


  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="MelodyMind">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="MelodyMind">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-TileImage" content="/music icon.jfif">
  <meta name="google-site-verification" content="IeTp_OOCkS3XoI-ebJim74gbdl-jfKfNErwReTL3IAs" />
  <meta name="msapplication-starturl" content="/index.html">
  <meta name="msapplication-navbutton-color" content="#000000">
  <meta name="msapplication-tooltip" content="MelodyMind">
  <meta name="msapplication-window" content="width=800;height=600">
  <meta name="msapplication-task" content="name=MelodyMind;action-uri=/;icon-uri=/music icon.jfif">

  <!-- Set theme color for Safari -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <!-- Hide browser bars -->
  <script>
    window.addEventListener('load', () => {
      setTimeout(() => {
        window.scrollTo(0, 1); // Scrolls the page down to hide the address bar on mobile browsers
      }, 0);
    });
  </script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2914201371636948"
crossorigin="anonymous"></script>
<meta name="google-adsense-account" content="ca-pub-2914201371636948">
  <link rel="icon" type="image/svg+xml+jfif" href="/music icon.jfif" />
  <link rel="manifest" href="/manifest.json" />
  <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=Bangers&family=Oxanium:wght@200..800&family=VT323&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Melody Minds - Free Music and Lyrics Player</title>


</head>
<body>
  <div id="root"></div>
  <div id="loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #1A1A1A; display: flex; justify-content: center; align-items: center; z-index: 9999;">
      <style>
        .spinner {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          padding: 7px;
          background: conic-gradient(from 1turn, #FF6B6B00 10%, #FF6B6B) content-box,
                      linear-gradient(#FF6B6B40 0 0) padding-box,
                      linear-gradient(#FF6B6B20 0 0) border-box;
          animation: l12 .8s infinite linear;
        }
        @keyframes l12 {
          100% {transform: rotate(1turn)}
        }
      </style>
      <div class="spinner"></div>
    </div>  <script type="module" src="/src/main.jsx"></script>

  <!-- Register Service Worker for PWA functionality -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', async () => {
        try {
          const registration = await navigator.serviceWorker.register('/sw.js', {
            scope: '/'
          });

          console.log('Service Worker registered successfully:', registration);

          // Listen for updates
          registration.addEventListener('updatefound', () => {
            const newWorker = registration.installing;
            if (newWorker) {
              newWorker.addEventListener('statechange', () => {
                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                  // New service worker installed, notify user about update
                  console.log('New service worker installed. Refresh to get the latest version.');
                }
              });
            }
          });

        } catch (error) {
          console.error('Service Worker registration failed:', error);
        }
      });
    } else {
      console.log('Service Worker is not supported in this browser');
    }
  </script>
</body>
</html>