-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (93 loc) · 2.17 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>🎶</title>
<link href="https://fonts.googleapis.com/css?family=Acme|Lato&display=swap" rel="stylesheet">
<style>
* {
font-family: 'KC Wookie Script', 'Vulf Mono Demo', 'Vulf Mono Code', 'Vulf Sans Demo', 'Lato', sans-serif;
-webkit-user-select: none;
-webkit-app-region: drag;
}
#info {
width:100%;
position:fixed;
bottom:0;
left:0;
z-index:2;
padding:5vh;
padding-bottom:.2vh;
transition-property: opacity;
transition-duration: .5s;
transition-timing-function: ease;
max-height: 50vh;
}
body:hover #info{
opacity: 0;
}
#info > p {
margin: 1vh;
padding: 0;
max-width: calc(100vw - 12vh);
}
#song {
font-family: 'KC Heirobrick Inked', 'Vulf Mono Demo', 'Vulf Mono Code', 'Vulf Sans Demo', 'Helvetica', sans-serif;
font-size: 7vh;
font-weight: bold;
font-style: italic;
}
#artist {
font-size: 5vh;
margin-bottom: 2vh;
font-weight: lighter;
/*font-style: italic;*/
}
#cover {
position:fixed;
top:0;
left:0;
height:100vmax;
width:100vmax;
z-index:1;
}
.control {
-webkit-app-region: no-drag;
position: fixed;
z-index:2;
/*border: dashed;*/
}
#play {
top:25vmax;
left:25vmax;
height:50vmax;
width:50vmax;
}
#left, #right {
top:25vmax;
height:50vmax;
width:25vmax;
}
#left {
left:0vmax;
}
#right {
left:75vmax;
}
</style>
</head>
<body>
<section id="info">
<p id="song"></p>
<p id="artist">gimme a sec..</p>
</section>
<img id="cover"/>
<div id="left" class="control"></div>
<div id="play" class="control"></div>
<div id="right" class="control"></div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>