Skip to content

Commit

Permalink
Update splash screen
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphiiko committed Sep 28, 2024
1 parent d75d3fc commit 21bb8d1
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 130 deletions.
2 changes: 1 addition & 1 deletion src-ui/app/globals.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FLAVOUR } from '../build';

export const SPLASH_MIN_DURATION = 2000;
export const SPLASH_MIN_DURATION = 3000;
export const SETTINGS_KEY_AUTOMATION_CONFIGS = 'AUTOMATION_CONFIGS';
export const SETTINGS_KEY_VRCHAT_API = 'VRCHAT_API';
export const SETTINGS_KEY_APP_SETTINGS = 'APP_SETTINGS';
Expand Down
Binary file modified src-ui/assets/splashscreen/splash.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 14 additions & 12 deletions src-ui/assets/splashscreen/splashscreen.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ body {
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 50px rgba(255, 255, 255, 1) inset;
/*box-shadow: 0 0 100px rgba(0, 0, 0, 0.5) inset;*/
/*box-shadow: 0 0 50px rgba(255, 255, 255, 1) inset;*/
box-shadow: 0 0 100px rgba(0, 0, 0, 0.5) inset;
}

.splashscreen {
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.5);
0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.5);
margin: 100px;
position: relative;
border-radius: 0.5em;
Expand All @@ -68,8 +68,8 @@ body {
position: absolute;
top: 0;
left: 0;
transform: translateY(-24px);
opacity: 1;
transform: translateY(-24px);
}

.splash-image {
Expand All @@ -78,6 +78,7 @@ body {
position: absolute;
top: 0;
left: 0;
transform: translateY(-24px);
}

img {
Expand All @@ -95,17 +96,17 @@ img[data-src]:not(.no-fade) {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2em 17em 1em 3em;
padding: 2em 19em 1em 3em;
z-index: 10;
}

.logo-container {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 1em;
padding-bottom: 2em;
text-shadow: 0 0 4px #00000066;
transition: all 0.6s;
transition: opacity 0.6s, transform 0.6s;
transform: translate(0.5em, -1em);
}

Expand All @@ -124,10 +125,10 @@ img[data-src]:not(.no-fade) {
}

.logo-image img {
width: 5em;
height: 5em;
width: 4em;
height: 4em;
margin-bottom: 1.5em;
border-radius: 1.4em;
border-radius: 1.0em;
filter: drop-shadow(0 0 4px #00000066);
}

Expand Down Expand Up @@ -165,15 +166,15 @@ img[data-src]:not(.no-fade) {
}

#status {
padding-bottom: 1em;
padding-bottom: 2em;
text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.loader {
display: block;
--height-of-loader: 4px;
--loader-color: #ffffff;
width: 130px;
width: 110px;
height: var(--height-of-loader);
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.2);
Expand Down Expand Up @@ -209,6 +210,7 @@ img[data-src]:not(.no-fade) {
}
}


.bottom-bar {
background: var(--color-surface-1);
display: flex;
Expand Down
234 changes: 117 additions & 117 deletions src-ui/assets/splashscreen/splashscreen.html
Original file line number Diff line number Diff line change
@@ -1,129 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,700;1,200;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="splashscreen.css" />
<link rel="stylesheet" type="text/css" href="splash-blurhash.css" />
</head>
<body>
<div class="splashscreen">
<div class="splash-blurhash"></div>
<img class="splash-image" data-src="splash.jpg" />
<div class="vignette"></div>
<div class="info-container">
<div class="logo-container pending-child">
<div class="logo-image">
<img
class="no-fade"
draggable="false"
data-src="../img/icon_150x150.png"
alt="OyasumiVR Icon"
/>
</div>
<div class="logo-text">
<div class="main">Oyasumi<b>VR</b></div>
<div class="tag-line">VR Sleeping Utilities</div>
</div>
</div>
<div id="version">&nbsp;</div>
<div class="loader"></div>
<div id="status">Initializing...</div>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,700;1,200;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="splashscreen.css" />
<link rel="stylesheet" type="text/css" href="splash-blurhash.css" />
</head>
<body>
<div class="splashscreen">
<div class="splash-blurhash"></div>
<img class="splash-image" data-src="splash.jpg" />
<div class="vignette"></div>
<div class="info-container">
<div class="logo-container pending-child">
<div class="logo-image">
<img
class="no-fade"
draggable="false"
data-src="../img/icon_150x150.png"
alt="OyasumiVR Icon"
/>
</div>
<div class="bottom-bar">
<div class="left">
<span class="author">oyasumivr.raphii.co</span>
</div>
<div class="right">
<span class="author">By Raphiiko</span>
</div>
<div class="logo-text">
<div class="main">Oyasumi<b>VR</b></div>
<div class="tag-line">VR Sleeping Utilities</div>
</div>
</div>
<script>
const buildId = '1234567';
[].forEach.call(document.querySelectorAll('img[data-src]'), function (img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function () {
img.removeAttribute('data-src');
let parent = img;
for (let i = 0; i < 2; i++) {
parent = parent.parentElement;
if (!parent) break;
parent.classList.remove('pending-child');
}
};
});
const version = window.__TAURI__
? window.__TAURI__.app.getVersion().then(function (version) {
return version === '0.0.0' ? 'DEV' : version;
})
: Promise.resolve('0.0.0');
version.then(
(version) => (document.getElementById('version').innerHTML = `v${version} [${buildId}]`)
);
</script>
<!--AMBILIGHT-->
<svg width="0" height="0">
<filter
id="ambilight"
width="1000%"
height="1000%"
x="-1"
y="-3"
color-interpolation-filters="sRGB"
>
<feOffset in="SourceGraphic" result="source-copy" />
<feColorMatrix in="source-copy" type="saturate" values="1" result="saturated-copy" />
<feColorMatrix
in="saturated-copy"
type="matrix"
values="1 0 0 0 0
<div id="version">&nbsp;</div>
<div class="loader"></div>
<div id="status">Initializing...</div>
</div>
<div class="bottom-bar">
<div class="left">
<span class="author">oyasumivr.raphii.co</span>
</div>
<div class="right">
<span class="author">By Raphiiko</span>
</div>
</div>
</div>
<script>
const buildId = '1234567';
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
let parent = img;
for (let i = 0; i < 2; i++) {
parent = parent.parentElement;
if (!parent) break;
parent.classList.remove('pending-child');
}
};
});
const version = window.__TAURI__
? window.__TAURI__.app.getVersion().then(function(version) {
return version === '0.0.0' ? 'DEV' : version;
})
: Promise.resolve('0.0.0');
version.then(
(version) => (document.getElementById('version').innerHTML = `v${version} [${buildId}]`),
);
</script>
<!--AMBILIGHT-->
<svg width="0" height="0">
<filter
id="ambilight"
width="1000%"
height="1000%"
x="-1"
y="-3"
color-interpolation-filters="sRGB"
>
<feOffset in="SourceGraphic" result="source-copy" />
<feColorMatrix in="source-copy" type="saturate" values="1" result="saturated-copy" />
<feColorMatrix
in="saturated-copy"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
33 33 33 101 -132"
result="bright-colors"
/>
<feMorphology in="bright-colors" operator="dilate" radius="10" result="spread" />
<feGaussianBlur in="spread" stdDeviation="30" result="ambilight-light" />
<feOffset in="SourceGraphic" result="source" />
<feComposite in="source" in2="ambilight-light" operator="over" />
</filter>
</svg>
<svg width="0" height="0">
<filter
id="ambilight2"
width="1000%"
height="1000%"
x="-0.75"
y="-5"
color-interpolation-filters="sRGB"
>
<feOffset in="SourceGraphic" result="source-copy" />
<feColorMatrix in="source-copy" type="saturate" values="3" result="saturated-copy" />
<feColorMatrix
in="saturated-copy"
type="matrix"
values="1 0 0 0 0
result="bright-colors"
/>
<feMorphology in="bright-colors" operator="dilate" radius="10" result="spread" />
<feGaussianBlur in="spread" stdDeviation="30" result="ambilight-light" />
<feOffset in="SourceGraphic" result="source" />
<feComposite in="source" in2="ambilight-light" operator="over" />
</filter>
</svg>
<svg width="0" height="0">
<filter
id="ambilight2"
width="1000%"
height="1000%"
x="-0.75"
y="-5"
color-interpolation-filters="sRGB"
>
<feOffset in="SourceGraphic" result="source-copy" />
<feColorMatrix in="source-copy" type="saturate" values="3" result="saturated-copy" />
<feColorMatrix
in="saturated-copy"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
33 33 33 101 -132"
result="bright-colors"
/>
<feMorphology in="bright-colors" operator="dilate" radius="10" result="spread" />
<feGaussianBlur in="spread" stdDeviation="30" result="ambilight-light" />
<feOffset in="SourceGraphic" result="source" />
<feComposite in="source" in2="ambilight-light" operator="over" />
</filter>
</svg>
</body>
result="bright-colors"
/>
<feMorphology in="bright-colors" operator="dilate" radius="10" result="spread" />
<feGaussianBlur in="spread" stdDeviation="30" result="ambilight-light" />
<feOffset in="SourceGraphic" result="source" />
<feComposite in="source" in2="ambilight-light" operator="over" />
</filter>
</svg>
</body>
</html>

0 comments on commit 21bb8d1

Please sign in to comment.