mirror of
https://github.com/jellyfin/jellyfin-vue.git
synced 2025-06-21 08:44:02 +00:00
119 lines
2.9 KiB
HTML
119 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-forced-scrollbar">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
|
<style>
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Light color scheme for splashscreen
|
|
*
|
|
*/
|
|
|
|
.light {
|
|
background: linear-gradient(
|
|
280deg,
|
|
#4f5b62,
|
|
#62727b,
|
|
#718792,
|
|
#819ca9,
|
|
#8eacbb
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Dark color scheme for splashscreen
|
|
*
|
|
*/
|
|
|
|
.dark {
|
|
background: linear-gradient(
|
|
280deg,
|
|
#111827,
|
|
#1c2741,
|
|
#332d41,
|
|
#4a2532,
|
|
#381e73,
|
|
#244415
|
|
);
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
.animation {
|
|
animation: gradient 30s linear infinite;
|
|
}
|
|
}
|
|
|
|
.splashBackground {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 400% 400%;
|
|
animation: gradient 2s linear infinite;
|
|
z-index: 99999999;
|
|
}
|
|
|
|
.splashLogo {
|
|
width: 30%;
|
|
height: 30%;
|
|
/* This file is in the 'public' folder, so it will be placed at the root when the client is built */
|
|
background-image: url(/icon.png);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* Class to apply when the load process is finished */
|
|
.loadFinished {
|
|
opacity: 0;
|
|
transition: opacity 0.75s linear;
|
|
}
|
|
</style>
|
|
<script type="module" src="src/main.ts"></script>
|
|
<title>Jellyfin Vue</title>
|
|
</head>
|
|
<body>
|
|
<div class="splashBackground">
|
|
<div class="splashLogo"></div>
|
|
</div>
|
|
<div id="app"></div>
|
|
<!-- Load splashcreen color scheme based on stored settings or user-agent preferences. -->
|
|
<script>
|
|
const store = localStorage.getItem('clientSettings') || '{}';
|
|
const storedMode = JSON.parse(store).darkMode;
|
|
const matchedDarkColorScheme = window.matchMedia(
|
|
'prefers-color-scheme: dark'
|
|
).matches;
|
|
const useDarkMode =
|
|
typeof storedMode === 'boolean' ? storedMode : matchedDarkColorScheme;
|
|
const classToApply = useDarkMode ? 'dark' : 'light';
|
|
const element = document.querySelector('.splashBackground');
|
|
|
|
if (element) {
|
|
element.classList.add(classToApply);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|