Emilia/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated css and loading screen + vhs and crt fix

Browse Source
This commit is contained in:
fatmeatwsl 2025-04-22 20:59:38 +02:00
parent 6c3380709d
commit 7fee8ea735
11 changed files with 348 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sleepeesoftware.fr/assets/RpdC.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

3
sleepeesoftware.fr/assets/RpdC.gif:Zone.Identifier Normal file
View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://i.gifer.com/embedded/download/RpdC.gif

23
sleepeesoftware.fr/css/background.css Normal file
View File

@ -0,0 +1,23 @@
.grid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to right,
rgba(0, 255, 255, 0.1) 0px,
rgba(0, 255, 255, 0.1) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
to bottom,
rgba(0, 255, 255, 0.1) 0px,
rgba(0, 255, 255, 0.1) 1px,
transparent 1px,
transparent 40px
);
background-color: var(--background-color);
z-index: -4;
}

50
sleepeesoftware.fr/css/base.css Normal file
View File

@ -0,0 +1,50 @@
body {
margin: 0;
font-family: 'Orbitron', sans-serif;
color: var(--text-color);
background: var(--background-color);
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
background: url('/assets/RpdC.gif') repeat;
opacity: 0.05;
mix-blend-mode: screen;
}
body::after {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background:
repeating-linear-gradient(
0deg,
--scanline-color 0px,
--scanline-color 1px,
transparent 1px,
transparent 4px
);
animation: scanlines 0.1s linear infinite;
}
main section h2 {
color: var(--terminal-border);
text-shadow: 0 0 5px var(--terminal-border);
margin-top: 2rem;
text-align: center;
}
.hidden {
display: none;
}

54
sleepeesoftware.fr/css/effects.css Normal file
View File

@ -0,0 +1,54 @@
.crt-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: -1;
mix-blend-mode: screen;
animation: flicker 0.5s infinite;
border-radius: var(--border-radius);
box-shadow: inset 0 0 40px var(--glow-color);
}
.hidden {
display: none;
}
.fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scanlines {
0% { transform: translateY(0); }
50% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
@keyframes vhs-static {
0% { transform: translate(0, 0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -0.5px); }
75% { transform: translate(-0.5px, 0.5px); }
100% { transform: translate(0.5px, -1px); }
}
@keyframes flicker {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes rgb-split {
0%, 100% {
transform: translate(0px, 0px);
}
50% {
transform: translate(-0.5px, 0.5px);
}
}

70
sleepeesoftware.fr/css/loading_screen.css Normal file
View File

@ -0,0 +1,70 @@
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgb(0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
pointer-events: all; /* Ensure the user can click on the loading screen */
z-index: 9999;
mix-blend-mode: screen;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
animation: flicker 3.0s infinite;
}
#loading-screen::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/assets/RpdC.gif') repeat;
opacity: 0.05;
mix-blend-mode: screen;
z-index: -1;
}
#loading-screen::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.05) 0px,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px,
transparent 4px
);
animation: scanlines 0.1s linear infinite;
z-index: -2;
}
.loading-text {
color: var(--primary-color);
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
text-align: center;
text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
animation: pulse 1.5s infinite;
z-index: 10000;
cursor: pointer;
}
@keyframes flicker {
0%, 100% { opacity: 0.9; }
50% { opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}

15
sleepeesoftware.fr/css/palette.css Normal file
View File

@ -0,0 +1,15 @@
:root {
--primary-color: #00ffff;
--secondary-color: #ff00ff;
--background-color: #0d0d0d;
--text-color: #f0f0f0;
--overlay-background: rgba(0, 0, 0, 0.85);
--button-background: #ff00ff;
--button-hover-background: #00ffff;
--scanline-color: rgba(255, 255, 255, 0.05);
--glow-color: rgba(0, 255, 255, 0.3);
--terminal-background: rgba(0, 0, 0, 0.9);
--terminal-border: #ff00ff;
--border-radius: 1.5%;
}

200
sleepeesoftware.fr/css/style.css
View File

@ -1,200 +0,0 @@
body {
margin: 0;
font-family: 'Orbitron', sans-serif;
color: #f0f0f0;
background: #0d0d0d;
overflow-x: hidden;
}
.grid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to right,
rgba(0, 255, 255, 0.1) 0px,
rgba(0, 255, 255, 0.1) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
to bottom,
rgba(0, 255, 255, 0.1) 0px,
rgba(0, 255, 255, 0.1) 1px,
transparent 1px,
transparent 40px
);
background-color: #0d0d0d;
z-index: -2;
}
.crt-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.05) 0px,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px,
transparent 3px
);
pointer-events: none;
z-index: -1;
mix-blend-mode: overlay;
animation: flicker 0.2s infinite;
border-radius: 1.5% / 1%;
box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.1);
}
@keyframes flicker {
0%, 100% { opacity: 0.9; }
50% { opacity: 1; }
}
#loading-screen {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: #000;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
}
.loading-text {
color: #00ffff;
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
text-shadow: 0 0 10px #00ffff;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.foreground-container {
max-width: 960px;
aspect-ratio: 4 / 3;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.85);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
padding: 2rem;
position: relative;
border-radius: 2% / 1.5%;
box-shadow: 0 0 40px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid #ff00ff;
}
header h1 {
font-size: 2rem;
color: #ff00ff;
text-shadow: 0 0 5px #ff00ff;
}
nav ul {
display: flex;
gap: 1rem;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #00ffff;
padding: 0.5rem 1rem;
border: 1px solid #00ffff;
border-radius: 4px;
text-shadow: 0 0 3px #00ffff;
}
nav ul li a:hover {
background: #00ffff;
color: #0d0d0d;
}
.hidden {
display: none;
}
/* Terminal-style containers */
.terminal {
background: rgba(0, 0, 0, 0.9);
border: 2px solid #ff00ff;
padding: 2rem;
width: 300px;
margin: 2rem auto;
box-shadow: 0 0 10px #ff00ff;
}
.terminal input {
background: #1a1a1a;
border: 1px solid #00ffff;
color: #00ffff;
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
font-family: monospace;
}
.terminal button {
background: #ff00ff;
border: none;
color: #0d0d0d;
padding: 0.5rem 1rem;
cursor: pointer;
font-family: monospace;
text-shadow: 0 0 3px #ff00ff;
}
/* Section headings */
main section h2 {
color: #ff00ff;
text-shadow: 0 0 5px #ff00ff;
margin-top: 2rem;
text-align: center;
}
/* Placeholder styles for posts and news */
#posts p, #news-ticker p {
text-align: center;
font-style: italic;
padding: 1rem;
}
#music-player {
text-align: center;
margin-bottom: 2rem;
}
#now-playing {
font-family: monospace;
color: #00ffff;
margin-bottom: 1rem;
}
.controls button {
background: #1a1a1a;
border: 1px solid #00ffff;
color: #00ffff;
padding: 0.5rem 1rem;
margin: 0 0.5rem;
font-size: 1.2rem;
cursor: pointer;
font-family: 'Orbitron', sans-serif;
text-shadow: 0 0 3px #00ffff;
}
.controls button:hover {
background: #00ffff;
color: #0d0d0d;
}

104
sleepeesoftware.fr/css/ui.css Normal file
View File

@ -0,0 +1,104 @@
.foreground-container {
max-width: 960px;
aspect-ratio: 4 / 3;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.85);
box-shadow: 0 0 20px var(--secondary-color);
padding: 2rem;
position: relative;
z-index: 1;
border-radius: 2% / 1.5%;
box-shadow: 0 0 40px var(--glow-color), inset 0 0 20px rgba(0, 255, 255, 0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid var(--secondary-color);
}
header h1 {
font-size: 2rem;
color: var(--secondary-color);
text-shadow: 0 0 5px var(--secondary-color);
}
nav ul {
display: flex;
gap: 1rem;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: var(--primary-color);
padding: 0.5rem 1rem;
border: 1px solid var(--primary-color);
border-radius: 4px;
text-shadow: 0 0 3px var(--primary-color);
}
nav ul li a:hover {
background: var(--primary-color);
color: var(--background-color);
}
.terminal {
background: var(--terminal-background);
border: 2px solid var(--terminal-border);
padding: 2rem;
width: 300px;
margin: 2rem auto;
box-shadow: 0 0 10px var(--terminal-border);
}
.terminal input {
background: #1a1a1a;
border: 1px solid var(--primary-color);
color: var(--primary-color);
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
font-family: monospace;
}
.terminal button {
background: var(--secondary-color);
border: none;
color: var(--background-color);
padding: 0.5rem 1rem;
cursor: pointer;
font-family: monospace;
text-shadow: 0 0 3px var(--secondary-color);
}
#music-player {
text-align: center;
margin-bottom: 2rem;
}
#now-playing {
font-family: monospace;
color: var(--primary-color);
margin-bottom: 1rem;
}
.controls button {
background: #1a1a1a;
border: 1px solid var(--primary-color);
color: var(--primary-color);
padding: 0.5rem 1rem;
margin: 0 0.5rem;
font-size: 1.2rem;
cursor: pointer;
font-family: 'Orbitron', sans-serif;
text-shadow: 0 0 3px var(--primary-color);
}
.controls button:hover {
background: var(--primary-color);
color: var(--background-color);
}

12
sleepeesoftware.fr/index.html
View File

@ -7,8 +7,14 @@
<title>Sleepee Software</title> <title>Sleepee Software</title>
<!-- Google Font --> <!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
<!-- style --->
<link rel="stylesheet" href="css/palette.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/effects.css">
<link rel="stylesheet" href="css/loading_screen.css">
<link rel="stylesheet" href="css/ui.css">
<!-- icon --> <!-- icon -->
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/icon/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon/favicon.svg" />
<link rel="shortcut icon" href="/icon/favicon.ico" /> <link rel="shortcut icon" href="/icon/favicon.ico" />
@ -21,7 +27,7 @@
</div> </div>
<div class="grid-bg"></div> <div class="grid-bg"></div>
<div class="crt-overlay"></div> <div class="crt-overlay"></div>
<div class="foreground-container"> <div class="foreground-container hidden">
<header> <header>
<h1>Sleepee Software</h1> <h1>Sleepee Software</h1>
<nav><ul> <nav><ul>
@ -34,7 +40,7 @@
</ul></nav> </ul></nav>
</header> </header>
<div id="music-player" class="terminal"> <div id="music-player" class="terminal">
<div id="now-playing">🎵 Loading music...</div> <div id="now-playing"></div>
<div class="controls"> <div class="controls">
<button id="prev-btn">⏮️</button> <button id="prev-btn">⏮️</button>
<button id="play-pause-btn">▶️</button> <button id="play-pause-btn">▶️</button>

21
sleepeesoftware.fr/js/index.js
View File

@ -47,7 +47,7 @@ const playlist = [
let currentTrack = 0; let currentTrack = 0;
const audio = new Audio(); const audio = new Audio();
audio.loop = true; audio.loop = false;
audio.volume = 0.2; audio.volume = 0.2;
const nowPlaying = document.getElementById('now-playing'); const nowPlaying = document.getElementById('now-playing');
@ -90,6 +90,8 @@ document.getElementById('loading-screen')?.addEventListener('click', () => {
loadTrack(0); loadTrack(0);
}); });
document.getElementById('now-playing').textContent = '🎵 Now Playing: Song Title';
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
const loadingScreen = document.getElementById('loading-screen'); const loadingScreen = document.getElementById('loading-screen');
const music = new Audio(); // your audio logic might be handled elsewhere now const music = new Audio(); // your audio logic might be handled elsewhere now
@ -101,3 +103,20 @@ window.addEventListener('DOMContentLoaded', () => {
}); });
} }
}); });
document.addEventListener("DOMContentLoaded", function() {
const loadingScreen = document.getElementById('loading-screen');
const loadingText = document.querySelector('.loading-text');
loadingScreen.addEventListener('click', function() {
loadingScreen.style.display = 'none';
document.querySelector('.foreground-container').style.display = 'block';
});
});
document.getElementById("loading-screen").addEventListener("click", () => {
document.getElementById("loading-screen").style.display = "none";
const container = document.querySelector(".foreground-container");
container.classList.remove("hidden");
container.classList.add("fade-in");
});