-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (81 loc) · 4.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="index.js"></script>
<title>Spotify Album Cover ScreenShot Maker</title>
<!--Meta Tags for link embeds-->
<!-- Primary Meta Tags -->
<title>Spotify Album Cover Maker - Denzven</title>
<meta name="title" content="Spotify Album Cover ScreenShot Maker - Denzven" />
<meta name="description"
content="this website helps you to make silly screenshots of fake spotify albums and add PAL (Parental Advisory Label) to them and add custom song name and artist name and playlist name Inspired by the Album Cover Trend" />
<meta name="author" content="Denzven Vadakkan">
<meta name="keywords" content="spotify,spotify cover maker,album cover,anything can be an album cover,">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url"
content="https://raw.githubusercontent.com/denzven/Spotify_Album_Cover_ScreenShot_Maker/main/assets/Examples/Spotify_Album_Cover_Collage.png" />
<meta property="og:title" content="Spotify Album Cover ScreenShot Maker - Denzven" />
<meta property="og:description"
content="this website helps you to make silly screenshots of fake spotify albums and add PAL (Parental Advisory Label) to them and add custom song name and artist name and playlist name Inspired by the Album Cover Trend" />
<meta property="og:image"
content="https://raw.githubusercontent.com/denzven/Spotify_Album_Cover_ScreenShot_Maker/main/assets/Examples/Spotify_Album_Cover_Collage.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url"
content="https://raw.githubusercontent.com/denzven/Spotify_Album_Cover_ScreenShot_Maker/main/assets/Examples/Spotify_Album_Cover_Collage.png" />
<meta property="twitter:title" content="Spotify Album Cover ScreenShot Maker - Denzven" />
<meta property="twitter:description"
content="this website helps you to make silly screenshots of fake spotify albums and add PAL (Parental Advisory Label) to them and add custom song name and artist name and playlist name Inspired by the Album Cover Trend" />
<meta property="twitter:image"
content="https://raw.githubusercontent.com/denzven/Spotify_Album_Cover_ScreenShot_Maker/main/assets/Examples/Spotify_Album_Cover_Collage.png" />
</head>
<body>
<div id="preloader"></div>
<nav class="nav-bar">
<h1>Spotify Album Cover ScreenShot Maker</h1>
</nav>
<div class="wrapper">
<div class="options-wrapper">
<div class="options">
songName: <input type="text" id="songName" /> <br />
artistName: <input type="text" id="artistName" /> <br />
playlistName: <input type="text" id="playlistName" /><br />
isPAL (Parental Advisory label):
<input type="checkbox" id="isPAL" /> <br />
albumCover: <input type="file" id="albumCover" /> <br />
bgColor: <input type="color" id="bgColor" value="#191414" /><br />
<input type="button" id="submit" value="submit" />
<a id="downloadCanvas" download="Spotify_Album_Cover">Print drawing</a>
</div>
</div>
<div class="canvas-wrapper">
<canvas id="screenshotCanvas" width="414px" height="896px"></canvas>
</div>
</div>
<footer>
Made with Love By <a href="https://github.com/denzven">Denzven</a> 💜
<br /><br />
<a href="https://github.com/denzven/Spotify_Album_Cover_ScreenShot_Maker">
<i class="fa fa-github"></i> Source</a>
</footer>
<script type="text/javascript">
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
//preloader
var preloader = document.getElementById("preloader");
//preloader.style.display = "none";
window.addEventListener("load", function () {
sleep(Math.floor(Math.random() * 2000) + 500).then(() => {
console.log("Webpage Loaded");
preloader.style.display = "none";
});
});
</script>
</body>
</html>