-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
114 lines (114 loc) · 6.92 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cloudcre, download your music above the clouds. Hardcoded by delv</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<meta property="description" content="Save time downloading music without hassle and complex steps. cloudcre provides almost every songs you need.">
<meta property="twitter:description" content="Save time downloading music without hassle and complex steps. cloudcre provides almost every songs you need.">
<meta property="twitter:title" content="Cloudcre, download your music above the clouds. Hardcoded by delv">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:image" content="https://cloudcre.vercel.app/ico/thumbnail.png">
<meta property="og:url" content="https://cloudcre.vercel.app/">
<meta property="og:description" content="Save time downloading music without hassle and complex steps. cloudcre provides almost every songs you need." />
<meta property="og:title" content="Cloudcre, download your music above the clouds. Hardcoded by delv">
<meta property="og:site_name" content="cloudcre">
<meta property="og:image" content="https://cloudcre.vercel.app/ico/thumbnail.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cloudcre.vercel.app/ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cloudcre.vercel.app/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://cloudcre.vercel.app/ico/favicon-16x16.png">
<link rel="manifest" href="https://cloudcre.vercel.app/site.webmanifest">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="d-flex justify-content-center align-items-center w-100 h-100 position-fixed top-0 start-0" id="main-spinner">
<div class="spinner-border text-white m-3"></div>
</div>
<div class="justify-content-center align-items-center w-100 p-2 position-fixed bottom-0 start-0" id="main-alert">
<div id="alert" class="p-3 rounded d-flex justify-content-between align-items-center">
<p id="alert-text" class="m-0"></p>
<p onclick="hideAlert()" class="m-0"><i class="bi bi-x"></i></p>
</div>
</div>
<main>
<div class="position-fixed w-100" id="navbar-outer">
<div class="d-flex justify-content-center" id="navbar">
<div class="d-flex p-2 px-4 gap-3 container align-items-center">
<a href="https://cloudcre.vercel.app" class="text-white text-decoration-none d-flex align-items-center gap-1 fs-5 pointer"><i class="bi bi-cloudy-fill text-white fs-4"></i><small class="fs-6">cre</small></a>
<div class="d-flex rounded-5 flex-grow-1 d-flex align-items-center p-2 px-3 gap-2" id="navbar-search" onclick="openSearch()">
<small class="pointer-pass"><i class="bi bi-search text-white"></i></small>
<p class="m-0 text-fade-2 pointer-pass">Search songs</p>
</div>
</div>
</div>
</div><br><br><br><br>
<div class="d-flex justify-content-center"><div class="container">
<div id="page-home"><br>
<div class="d-flex flex-column align-items-center">
<p id="header-tag" class="p-1 px-2 rounded-3"> open source </p>
<p class="fs-1 text-white text-center mx-3 fw-bolder">Download your music above the clouds.</p>
<p class="text-center text-fade-3 mx-4 m-0">Save time downloading music without hassle and complex steps. cloudcre provides almost every songs you need.</p><br>
<div class="d-flex align-items-center gap-2">
<button class="btn-white p-2 px-3 rounded-4" onclick="openSearch()">Start Downloading</button>
<a href="https://github.com/creuserr/cloudcre" class="btn-black p-2 px-3 rounded-4 text-decoration-none text-white pro-btn">View on Github</a>
</div><br><br>
<p class="text-center mx-4 text-fade-1">Disclaimer: cloudcre does not host any files and solely uses third-party services. If any copyright is infringed, cloudcre is not liable.</p><br>
<p class="text-center text-fade-2 m-0"><small>Powered by</small></p>
<div id="hot-chart-50"></div>
<div class="d-flex justify-content-center gap-3 mt-2">
<i class="bi bi-youtube text-fade-1"></i>
<i class="bi bi-spotify text-fade-1"></i>
</div>
</div></div>
<div id="page-track">
<div class="d-flex justify-content-center">
<div class="spinner-border text-white m-3" id="track-spinner"></div>
</div>
<div id="track-body">
<div class="d-flex justify-content-center"><img src="" alt="" id="track-image" class="rounded"></div>
<p class="fs-5 fw-bold m-3 mb-0 text-white" id="track-title"><span id="track-title-text"></span> <small id="track-title-explicit"><i class="bi bi-explicit-fill"></i></small></p>
<p class="fs-5 m-3 mt-0 text-white" id="track-artist"></p>
<div class="justify-content-center" id="track-player-spinner">
<div class="spinner-border text-white"></div>
</div>
<div class="justify-content-center align-items-center p-3 w-100 gap-3" id="track-player">
<div id="player-slider-container">
<div id="player-slider"></div>
</div>
<a id="track-download" class="player-btn rounded-5 p-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/></svg></a>
</div>
<audio src="#" id="track-audio"></audio>
<div class="d-flex p-3 justify-content-center w-100">
<p id="track-lyrics" class="m-0"></p>
</div><br>
</div>
</div>
</div></div>
<div class="offcanvas offcanvas-bottom h-100" id="offcanvas-search">
<div class="offcanvas-body">
<div class="d-flex justify-content-center">
<div class="container d-flex justify-content-center align-items-center gap-3">
<div class="d-flex justify-content-center align-items-center gap-2 p-2 px-3 rounded-5 w-100" id="search-form">
<i class="bi bi-search text-white"></i>
<input type="text" id="search-input" class="w-100 flex-grow-1" placeholder="Search songs">
</div>
<p class="m-0 text-white fw-bold" data-bs-dismiss="offcanvas">Cancel</p>
</div>
</div><br>
<div class="d-flex justify-content-center">
<div class="container">
<div id="search-list"></div>
</div>
</div>
</div>
</div>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="utils.js"></script>
<script src="index.js"></script>
</html>