Pages Compétences, Contact et Qui suis-je
This commit is contained in:
parent
e06ad42369
commit
da05adede1
10 changed files with 1242 additions and 0 deletions
72
inc/error-template.php
Normal file
72
inc/error-template.php
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<?php
|
||||
/* Généré par ~/yb-erreurs/build.py : ne pas modifier à la main. Variables : $yb_code, $yb_title, $yb_msg (HTML sûr). */
|
||||
?><!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="theme-color" content="#0a0a0a">
|
||||
<title><?php echo esc_html($yb_code . ' · ' . $yb_title); ?> · Yasser Boulayoune</title>
|
||||
<script>try{var t=localStorage.getItem('yb-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
|
||||
<style>@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/wp-content/themes/yb2026/assets/fonts/Archivo-100-900-latin.woff2) format('woff2')}
|
||||
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url(/wp-content/themes/yb2026/assets/fonts/JetBrainsMono-400-latin.woff2) format('woff2')}
|
||||
:root{--bg:#0a0a0a;--ink:#f5f5f0;--lime:#d3fd50;--ink-rgb:245,245,240;--lime-rgb:211,253,80;--mut:rgba(245,245,240,.55);--b:rgba(245,245,240,.12);color-scheme:dark}
|
||||
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f3f2ed;--ink:#111;--lime:#4a7300;--ink-rgb:17,17,17;--lime-rgb:74,115,0;--mut:rgba(17,17,17,.55);--b:rgba(17,17,17,.12);color-scheme:light}}
|
||||
:root[data-theme="light"]{--bg:#f3f2ed;--ink:#111;--lime:#4a7300;--ink-rgb:17,17,17;--lime-rgb:74,115,0;--mut:rgba(17,17,17,.55);--b:rgba(17,17,17,.12);color-scheme:light}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{min-height:100%;background:var(--bg);overflow-x:clip}
|
||||
body{color:var(--ink);font:400 16px/1.6 'Archivo',system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh;padding:0 clamp(20px,4vw,44px);overflow-x:hidden}
|
||||
::selection{background:var(--lime);color:var(--bg)}
|
||||
a{color:inherit;text-decoration:none}
|
||||
.grain{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
|
||||
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--b);font:700 14px 'JetBrains Mono',monospace;letter-spacing:.05em}
|
||||
.top b{color:var(--lime);font-weight:700}
|
||||
.top span{font-weight:500;font-size:11.5px;letter-spacing:.18em;color:var(--mut)}
|
||||
main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px 0;position:relative;min-width:0}
|
||||
.ring{position:absolute;right:-6vw;top:50%;width:min(56vw,620px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;pointer-events:none;
|
||||
background:radial-gradient(circle,rgba(var(--lime-rgb),.10),transparent 62%);border:1px dashed rgba(var(--lime-rgb),.22);animation:spin 60s linear infinite}
|
||||
.ring::after{content:'';position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.08)}
|
||||
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
|
||||
.kick{font:700 12px 'JetBrains Mono',monospace;letter-spacing:.22em;color:var(--lime)}
|
||||
.code{font:900 clamp(110px,26vw,300px)/.82 'Archivo',sans-serif;font-stretch:118%;letter-spacing:-.05em;display:flex;gap:.04em;user-select:none}
|
||||
.code span:nth-child(odd){color:var(--ink)}
|
||||
.code span:nth-child(even){color:transparent;-webkit-text-stroke:2px var(--lime)}
|
||||
h1{font:800 clamp(28px,4.4vw,52px)/1.05 'Archivo',sans-serif;letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
|
||||
p.msg{max-width:52ch;color:rgba(var(--ink-rgb),.78);font-size:17px}
|
||||
.req{font:500 12.5px 'JetBrains Mono',monospace;color:var(--mut);display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:100%}
|
||||
.req code{font:inherit;color:var(--ink);background:rgba(var(--ink-rgb),.06);border:1px solid var(--b);padding:3px 8px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.req em{font-style:normal;color:var(--lime)}
|
||||
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
|
||||
.btn{font:700 12.5px 'JetBrains Mono',monospace;letter-spacing:.14em;padding:14px 20px;border-radius:99px;border:1px solid var(--b);transition:transform .25s cubic-bezier(.3,1.5,.5,1),border-color .2s,color .2s,background .2s;cursor:pointer;background:none;color:var(--ink)}
|
||||
.btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
|
||||
.btn.main{background:var(--lime);border-color:var(--lime);color:var(--bg)}
|
||||
.btn.main:hover{color:var(--bg)}
|
||||
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
|
||||
footer{padding:20px 0 26px;border-top:1px solid var(--b);font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--mut);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
|
||||
@media (max-width:640px){.ring{right:-30vw;width:90vw}.top span{display:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grain" aria-hidden="true"></div>
|
||||
<header class="top"><a href="/">YB<b>©</b>2026</a><span>YASSER BOULAYOUNE · PORTFOLIO</span></header>
|
||||
<main>
|
||||
<div class="ring" aria-hidden="true"></div>
|
||||
<p class="kick">ERREUR <?php echo esc_html($yb_code); ?></p>
|
||||
<div class="code" aria-hidden="true"><?php foreach (str_split((string) $yb_code) as $d) echo '<span>' . esc_html($d) . '</span>'; ?></div>
|
||||
<h1><?php echo esc_html($yb_title); ?></h1>
|
||||
<p class="msg"><?php echo $yb_msg; ?></p>
|
||||
<p class="req"><span>REQUÊTE</span><code id="yb-path">/</code><em>→ <?php echo esc_html($yb_code); ?></em></p>
|
||||
<div class="actions">
|
||||
<a class="btn main" href="/">ACCUEIL →</a>
|
||||
<button class="btn" type="button" id="yb-back">← RETOUR</button>
|
||||
<a class="btn" href="/contact/">CONTACT</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer><span>© 2026 YASSER BOULAYOUNE</span><span>RÉGION LYONNAISE</span></footer>
|
||||
<script>
|
||||
(function(){var p=document.getElementById('yb-path');if(p)p.textContent=location.pathname+location.search;
|
||||
var b=document.getElementById('yb-back');if(b){if(history.length<2)b.hidden=true;b.addEventListener('click',function(){history.back()});}})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue