-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
86 lines (84 loc) · 4.77 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
<!DOCTYPE html>
<html class="pt-3 h-100" style="background-color: #ef4f91;">
<head>
<title>Bubblify for Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="title" content="Bubblify for Spotify">
<meta name="description" content="Visualize your most listened artists, albums and genres on Spotify in stylized bubble charts">
<meta name="keywords" content="spotify, data visualization, bubble chart, music, circle chart, top tracks, top artists, top albums">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="Özgür Akın">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inter+Tight" rel="stylesheet" type="text/css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8220604161222100" crossorigin="anonymous"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-8220604161222100",
enable_page_level_ads: true,
overlays: {bottom: true}
});
</script>
<style>
* {
font-family: 'Inter Tight', sans-serif;
}
.custom-shape-divider-bottom-1684803446 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1684803446 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 154px;
}
.custom-shape-divider-bottom-1684803446 .shape-fill {
fill: #4d1b7b;
}
</style>
</head>
<body class="bg-black h-100">
<section>
<div class="container py-3 py-lg-5">
<div class="row text-center px-5 py-5 py-lg-5">
<h1 class="display-1 text-white z-1" data-aos="fade-down" data-aos-delay="0">Bubblify</h1>
<h2 class="lead fs-3 fw-bold z-1" style="color:#ef4f91;" data-aos="fade-up" data-aos-delay="100">for Spotify</h2>
<div class="d-flex justify-content-center my-4">
<p style="max-width: 500px;" class ="lead text-white-50 z-1" data-aos="fade-up" data-aos-delay="200">Visualize your most listened artists, albums and genres on Spotify in stylized bubble charts!</p>
</div>
<button style="max-width:300px" class="btn btn-success btn-lg mx-auto z-1" onclick="loginWithSpotify()" data-aos="fade-up" data-aos-delay="300"><i class="bi bi-spotify me-3"></i>Login with Spotify</button>
</div>
</div>
</section>
<section>
<div class="container-fluid">
<div class="custom-shape-divider-bottom-1684803446">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" data-aos="fade-down" data-aos-delay="200">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</div>
</div>
</section>
<script src="js/auth.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>