-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
117 lines (115 loc) · 7.58 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
115
116
117
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="title" content="ModernFlyouts">
<meta property="og:title" content="ModernFlyouts">
<meta property="og:site_name" content="ModernFlyouts">
<meta name="description" content="An open source, modern, and Fluent Design-based replacement for the old Metro-themed flyouts present in Windows 10.">
<meta property="og:description" content="An open source, modern, and Fluent Design-based replacement for the old Metro-themed flyouts present in Windows 10.">
<!-- commenting this out until we get a better banner :))
<meta property="og:image" content="ModernFlyouts_heroart.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="1080">
-->
<meta name="theme-color" content="#1e2327">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="styles/bootstrap-reboot.min.css">
<link rel="stylesheet" href="styles/style.css">
<script>
// Check for preferes-reduced-motion
const reducedMotion_query = window.matchMedia('(prefers-reduced-motion: reduce)');
function getPrefersReducedMotion(query) {
if (!query.matches) {
document.write('<script defer type="text/javascript" src="scripts/vanilla-tilt.min.js"></' + 'script>');
}
}
getPrefersReducedMotion(reducedMotion_query);
</script>
<script defer type="text/javascript" src="scripts/range-slider.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<title>ModernFlyouts</title>
</head>
<body class="theme-light">
<div class="backdrop-overlay">
<!--div hell incoming-->
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="backdrop">
<div class="acrylic-material"></div>
<div class="backdrop-image"></div>
</div>
<a href="https://github.com/ModernFlyouts-Community/ModernFlyouts" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgba(var(--primary-color-invert), .95); color: var(--page-background); position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<main class="hero">
<aside id="preview">
<div class="flyout" data-tilt-max="7.5" data-tilt-scale="1.025" data-tilt-speed="1000" data-tilt>
<div class="flyout-main">
<button class="mute-button">
<span class="mdl2-icon"></span>
</button>
<input type="range" class="slider" min="0" max="100">
<div class="volume">00</div>
</div>
</div>
<div class="flyout" data-tilt-max="7.5" data-tilt-scale="1.025" data-tilt-speed="1000" data-tilt>
<div class="flyout-media">
<div class="media-inner">
<div class="media-info">
<div class="media-application">
<img src="./assets/spotify_32px.png">
<span>Spotify</span>
</div>
<h5>Never Gonna Give You Up</h5>
<p>Rick Astley</p>
</div>
<a href="https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC">
<img class="media-thumbnail" src="./assets/RickAstleyNeverGonnaGiveYouUp7InchSingleCover.jpg">
</a>
</div>
<div class="media-controls">
<button id="toggle-theme" title="Toggle Dark Mode">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 33.063 35.982">
<path fill="currentColor" d="M67.669,33.009a18.007,18.007,0,0,0,30.41,1.221,1.35,1.35,0,0,0-.657-2.036c-6.78-2.427-10.412-5.239-12.519-9.261C82.684,18.7,82.111,14.058,83.663,7.7a1.35,1.35,0,0,0-1.384-1.668A18.006,18.006,0,0,0,67.669,33.009Zm15.02-8.917c2.3,4.4,6.112,7.431,12.426,9.907a15.5,15.5,0,1,1-14.7-25.231l.469-.08C79.689,14.655,80.291,19.516,82.688,24.092Z" fill="#212121" transform="translate(-65.254 -6.03)"/>
</svg>
</button>
<div class="controls-inner">
<button title="Previous">
<span class="mdl2-icon"></span>
</button>
<button title="Pause">
<span class="mdl2-icon"></span>
</button>
<button title="Next">
<span class="mdl2-icon"></span>
</button>
</div>
</div>
</div>
</div>
</aside>
<aside id="details">
<h1>ModernFlyouts</h1>
<p>An open source, modern, and Fluent Design-based replacement for the old Metro-themed flyouts present in Windows 10.</p>
<div class="button-container">
<a id="store-link" href="https://www.microsoft.com/en-us/p/modernflyouts-preview/9mt60qv066rp&mode=mini">
<button class="button accent">
<span>Get it from Microsoft</span>
</button>
</a>
<a id="direct-download" target="_blank" href="https://github.com/ModernFlyouts-Community/ModernFlyouts/releases/latest">
<button class="button">
<span>GitHub Releases</span>
</button>
</a>
</div>
</aside>
</main>
</body>
</html>