Skip to content

Commit 2088b39

Browse files
LoupesDEVLoupesDEV
authored
🔀 Merge pull request #9 from LoupesDEV/errorHandler
Added back Errors handler
2 parents 705c431 + 804144c commit 2088b39

5 files changed

Lines changed: 246 additions & 2 deletions

File tree

‎css/error.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap');
2+
3+
html,
4+
body {
5+
height: 100%;
6+
}
7+
8+
body {
9+
font-family: 'Outfit', sans-serif;
10+
background: var(--color-bg);
11+
color: var(--color-text);
12+
display: grid;
13+
place-items: center;
14+
margin: 0;
15+
min-height: 100dvh;
16+
overflow-x: hidden;
17+
}
18+
19+
body::before,
20+
body::after {
21+
content: '';
22+
position: fixed;
23+
inset: auto;
24+
width: 60vmin;
25+
height: 60vmin;
26+
border-radius: 50%;
27+
filter: blur(80px);
28+
opacity: 0.25;
29+
pointer-events: none;
30+
z-index: 0;
31+
}
32+
33+
body::before {
34+
top: -10vmin;
35+
left: -10vmin;
36+
background: radial-gradient(closest-side, rgba(220, 38, 38, 0.35), transparent 70%);
37+
animation: float-a 18s ease-in-out infinite;
38+
}
39+
40+
body::after {
41+
bottom: -12vmin;
42+
right: -12vmin;
43+
background: radial-gradient(closest-side, rgba(220, 38, 38, 0.25), transparent 70%);
44+
animation: float-b 22s ease-in-out infinite;
45+
}
46+
47+
@keyframes float-a {
48+
49+
0%,
50+
100% {
51+
transform: translate(0, 0) scale(1);
52+
}
53+
54+
50% {
55+
transform: translate(30px, -30px) scale(1.08);
56+
}
57+
}
58+
59+
@keyframes float-b {
60+
61+
0%,
62+
100% {
63+
transform: translate(0, 0) scale(1);
64+
}
65+
66+
50% {
67+
transform: translate(-35px, 25px) scale(1.06);
68+
}
69+
}
70+
71+
.container {
72+
position: relative;
73+
z-index: 1;
74+
width: min(92vw, 680px);
75+
padding: 3rem 2rem;
76+
text-align: center;
77+
background: var(--glass-bg);
78+
backdrop-filter: blur(var(--glass-blur));
79+
-webkit-backdrop-filter: blur(var(--glass-blur));
80+
border: 1px solid var(--glass-border);
81+
box-shadow: var(--glass-shadow);
82+
border-radius: 1.25rem;
83+
animation: fadeInUp 0.7s ease-out both;
84+
}
85+
86+
@keyframes fadeInUp {
87+
from {
88+
opacity: 0;
89+
transform: translateY(16px);
90+
}
91+
92+
to {
93+
opacity: 1;
94+
transform: translateY(0);
95+
}
96+
}
97+
98+
.logo {
99+
width: 96px;
100+
height: 96px;
101+
object-fit: contain;
102+
display: block;
103+
margin: 0 auto 1.25rem auto;
104+
filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.35));
105+
}
106+
107+
h1+.error-message,
108+
.code-badge+h1 {
109+
margin-top: 0.5rem;
110+
}
111+
112+
.code-badge {
113+
display: inline-block;
114+
margin: 0.25rem auto 0.25rem auto;
115+
padding: 0.35rem 0.65rem;
116+
border-radius: 999px;
117+
font-size: 0.75rem;
118+
font-weight: 900;
119+
text-transform: uppercase;
120+
letter-spacing: 0.12em;
121+
color: #fff;
122+
background: rgba(220, 38, 38, 0.15);
123+
border: 1px solid var(--glass-border);
124+
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.15);
125+
}
126+
127+
h1 {
128+
margin: 0 0 0.75rem 0;
129+
font-size: clamp(2rem, 4.5vw, 3rem);
130+
line-height: 1.05;
131+
font-weight: 900;
132+
letter-spacing: -0.02em;
133+
background: linear-gradient(135deg, #fff, #c7c7c7 60%);
134+
-webkit-background-clip: text;
135+
background-clip: text;
136+
color: transparent;
137+
}
138+
139+
.error-message {
140+
margin: 0 auto 1.5rem auto;
141+
max-width: 48ch;
142+
color: var(--color-text-muted);
143+
font-size: 1rem;
144+
line-height: 1.6;
145+
}
146+
147+
.back-btn {
148+
display: inline-flex;
149+
align-items: center;
150+
justify-content: center;
151+
gap: 0.5rem;
152+
padding: 0.9rem 1.35rem;
153+
border-radius: 0.9rem;
154+
font-weight: 800;
155+
letter-spacing: 0.02em;
156+
text-decoration: none;
157+
background: #ffffff;
158+
color: #000000;
159+
border: 1px solid rgba(255, 255, 255, 0.08);
160+
box-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
161+
transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
162+
}
163+
164+
.back-btn:hover {
165+
background: var(--color-primary);
166+
color: #ffffff;
167+
transform: translateY(-2px) scale(1.02);
168+
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
169+
}
170+
171+
.back-btn:active {
172+
transform: translateY(0) scale(0.99);
173+
}
174+
175+
@media (max-width: 480px) {
176+
.container {
177+
padding: 2.25rem 1.5rem;
178+
}
179+
180+
.logo {
181+
width: 84px;
182+
height: 84px;
183+
}
184+
}

‎error.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<body>
4646
<div class="container">
4747
<img src="medias/logo.png" alt="StreamIt Logo" class="logo" />
48+
<div class="code-badge" id="error-code" aria-label="Code d'erreur">404</div>
4849
<h1>Erreur!</h1>
4950
<div id="error-message" class="error-message"></div>
5051
<a href="index.html" class="back-btn">Revenir à l'accueil</a>
@@ -57,6 +58,6 @@ <h1>Erreur!</h1>
5758
});
5859
}
5960
</script>
60-
<script src="js/error.js"></script>
61+
<script type="module" src="js/errorHandler.js"></script>
6162
</body>
6263
</html>

‎index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,18 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>StreamIt</title>
8+
<link href="medias/logo.png" rel="icon" />
89

10+
<meta name="description" content="Organisez, explorez et regardez vos films et séries préférés avec StreamIt." />
11+
<meta name="keywords" content="movies, series, streaming, StreamIt, films, TV shows" />
12+
<meta name="author" content="LoupesDEV" />
13+
<meta name="theme-color" content="#181818" />
14+
15+
<meta property="og:title" content="StreamIt" />
16+
<meta property="og:description" content="Organisez, explorez et regardez vos films et séries préférés avec StreamIt." />
917
<meta property="og:image" content="https://www.matheo-pichotmoise.fr/StreamIt/medias/logo.png" />
18+
<meta property="og:type" content="website" />
19+
<meta property="og:url" content="https://www.matheo-pichotmoise.fr/StreamIt/" />
1020

1121
<script src="https://cdn.tailwindcss.com"></script>
1222

@@ -345,6 +355,7 @@ <h3 class="text-3xl font-bold flex items-center gap-3">
345355
</div>
346356

347357
<script type="module" src="js/main.js"></script>
358+
<script type="module" src="js/errorHandler.js"></script>
348359
</body>
349360

350361
</html>

‎js/errorHandler.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const msg = localStorage.getItem("streamit_404_error");
2+
const errorMessageEl = document.getElementById("error-message");
3+
const errorCodeEl = document.getElementById("error-code");
4+
const urlParams = new URLSearchParams(window.location.search);
5+
const paramCode = urlParams.get("code");
6+
7+
if (msg && errorMessageEl) {
8+
errorMessageEl.textContent = msg;
9+
localStorage.removeItem("streamit_404_error");
10+
} else if (msg && !errorMessageEl) {
11+
localStorage.removeItem("streamit_404_error");
12+
}
13+
14+
if (errorCodeEl) {
15+
errorCodeEl.textContent = (paramCode || "404").toString();
16+
}
17+
18+
function handleErrorAndRedirect(message, code = 404) {
19+
localStorage.setItem("streamit_404_error", message);
20+
const safeCode = (typeof code === "number" || typeof code === "string") ? code : 404;
21+
window.location.href = `error.html?code=${encodeURIComponent(safeCode)}`;
22+
}
23+
24+
document.addEventListener("contextmenu", (e) => e.preventDefault());
25+
26+
document.addEventListener("keydown", (e) => {
27+
if (
28+
e.key === "F12" ||
29+
(e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "i") ||
30+
(e.ctrlKey && e.key.toLowerCase() === "u")
31+
) {
32+
e.preventDefault();
33+
handleErrorAndRedirect(
34+
"L'utilisation des outils de développement est interdite sur cette page.", 403
35+
);
36+
}
37+
});
38+
39+
(function detectDevTools() {
40+
const start = Date.now();
41+
debugger;
42+
if (Date.now() - start > 100) {
43+
handleErrorAndRedirect(
44+
"L'utilisation des outils de développement est interdite sur cette page.", 403
45+
);
46+
}
47+
setTimeout(detectDevTools, 1000);
48+
})();

‎sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const CACHE_NAME = "streamit-cache-v1";
2-
const urlsToCache = ["/", "/index.html", "/error.html", "/css/base.css", "/css/components.css", "/css/error.css", "/css/forms.css", "/css/layout.css", "/css/responsive.css", "/css/styles.css", "/css/tokens.css", "/css/variables.css", "/js/add.js", "/js/dataLoader.js", "/js/display.js", "/js/error.js", "/js/filters.js", "/js/init.js", "/js/modal.js", "/js/scripts.js", "/js/search.js", "/js/stats.js", "/js/storage.js", "/js/utils.js", "/medias/logo.png", "/data/films_data.json", "/data/series_data.json", "/data/collections.json"];
2+
const urlsToCache = ["/", "/index.html", "/error.html", "/css/error.css", "/css/responsive.css", "/css/style.css", "/css/variables.css", "/js/dataLoader.js", "/js/display.js", "/js/errorHandler.js", "/js/main.js", "/js/utils.js", "/medias/logo.png", "/data/films_data.json", "/data/series_data.json", "/data/collections.json"];
33

44
self.addEventListener("install", (event) => {
55
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache)));

0 commit comments

Comments
 (0)