139 lines
14 KiB
HTML
139 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="referrer" content="no-referrer">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'">
|
||
<title>Sanctuary — Blocodex, référence interactive</title>
|
||
<style>html{background:#171b16;color-scheme:dark}body{margin:0;padding:16px;max-width:1024px;margin-inline:auto}button,select{font-family:inherit}</style>
|
||
</head>
|
||
<body>
|
||
<div id="sanctuary-navigation" aria-label="Proposition de navigation du Blocodex">
|
||
<style>
|
||
#sanctuary-navigation {font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#ededed;color-scheme:dark;}
|
||
#sanctuary-navigation * {box-sizing:border-box;}
|
||
#sanctuary-navigation .mc-window {background:#232820;border:2px solid #121411;}
|
||
#sanctuary-navigation .mc-head {padding:14px 12px 10px;background:#20261e;border-bottom:2px solid #747b6e;}
|
||
#sanctuary-navigation .mc-title {text-align:center;font-size:20px;text-shadow:2px 2px #111;margin-bottom:12px;}
|
||
#sanctuary-navigation .mc-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
|
||
#sanctuary-navigation button {font:inherit;color:#f2f2f2;cursor:pointer;background:#626262;border:2px solid #121212;box-shadow:inset 2px 2px #9b9b9b,inset -2px -2px #373737;border-radius:0;padding:7px 9px;min-width:0;text-shadow:1px 1px #242424;}
|
||
#sanctuary-navigation button:hover {background:#787878;}
|
||
#sanctuary-navigation button[aria-pressed="true"] {background:#32382f;box-shadow:inset 1px 1px #192015;color:#b7d7a4;}
|
||
#sanctuary-navigation button:disabled {background:#343434;box-shadow:none;color:#aaa;cursor:default;}
|
||
#sanctuary-navigation .mc-preview {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#171b16;color:#c6cdc1;font-size:12px;}
|
||
#sanctuary-navigation select {font:inherit;background:#30362b;color:#fff;border:1px solid #92998c;border-radius:0;padding:5px;max-width:100%;}
|
||
#sanctuary-navigation .mc-local {display:flex;gap:5px;flex-wrap:wrap;padding:10px 12px 0;}
|
||
#sanctuary-navigation .mc-local button {padding:4px 9px;}
|
||
#sanctuary-navigation .mc-main {padding:18px 16px;min-height:300px;}
|
||
#sanctuary-navigation .mc-two {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
|
||
#sanctuary-navigation .mc-heading {font-size:16px;margin:0 0 10px;color:#b7d7a4;font-weight:400;}
|
||
#sanctuary-navigation .mc-caption {color:#c2c8be;font-size:12px;margin:5px 0 12px;}
|
||
#sanctuary-navigation .mc-name {font-size:21px;color:#87c7f0;}
|
||
#sanctuary-navigation .mc-list {display:grid;gap:6px;margin-bottom:12px;}
|
||
#sanctuary-navigation .mc-row {display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid #444b3e;}
|
||
#sanctuary-navigation .mc-row span:last-child {text-align:right;color:#c4cec1;font-size:12px;}
|
||
#sanctuary-navigation .mc-choice {display:block;margin:0 0 14px;}
|
||
#sanctuary-navigation .mc-choice select {display:block;width:100%;margin-top:5px;}
|
||
#sanctuary-navigation .mc-main p {margin:0 0 12px;}
|
||
#sanctuary-navigation .mc-link {width:100%;text-align:left;}
|
||
#sanctuary-navigation .mc-op {color:#f1cd82;border-bottom:1px solid #9c8150;padding:0 0 12px;margin-bottom:14px;}
|
||
#sanctuary-navigation .mc-footer {padding:14px;text-align:center;border-top:2px solid #747b6e;background:#20261e;}
|
||
#sanctuary-navigation .mc-footer button {width:min(240px,100%);}
|
||
#sanctuary-navigation .mc-detail {padding:12px;background:#181d16;border-left:2px solid #8aa579;}
|
||
#sanctuary-navigation .mc-lock {display:grid;gap:8px;max-width:360px;margin:25px auto;text-align:center;}
|
||
#sanctuary-navigation .mc-badge {color:#e2ce88;}
|
||
#sanctuary-navigation .mc-status {color:#b7d7a4;font-size:12px;}
|
||
@media(max-width:500px) {
|
||
#sanctuary-navigation .mc-nav {grid-template-columns:repeat(2,minmax(0,1fr));}
|
||
#sanctuary-navigation .mc-two {grid-template-columns:1fr;gap:16px;}
|
||
#sanctuary-navigation .mc-main {padding:14px 12px;min-height:280px;}
|
||
#sanctuary-navigation .mc-row {gap:8px;}
|
||
}
|
||
@media(pointer:coarse) {#sanctuary-navigation button {min-height:44px;}}
|
||
</style>
|
||
<div class="mc-window">
|
||
<div class="mc-preview">
|
||
<span>Maquette · données fictives</span>
|
||
<label>Vue d’essai <select data-role aria-label="Profil simulé"><option value="player">Joueur</option><option value="operator">Opérateur</option></select></label>
|
||
</div>
|
||
<div class="mc-head">
|
||
<div class="mc-title">Blocodex</div>
|
||
<nav class="mc-nav" aria-label="Rubriques du Blocodex">
|
||
<button type="button" data-tab="discovery" aria-pressed="false">Découvertes</button>
|
||
<button type="button" data-tab="progress" aria-pressed="false">Progression</button>
|
||
<button type="button" data-tab="world" aria-pressed="false">Monde</button>
|
||
<button type="button" data-tab="inhabitant" aria-pressed="true">Habitant</button>
|
||
</nav>
|
||
</div>
|
||
<nav class="mc-local" aria-label="Sous-rubriques"></nav>
|
||
<div class="mc-main" aria-live="polite"></div>
|
||
<div class="mc-footer"><button type="button" data-done>Terminé</button></div>
|
||
</div>
|
||
<script>
|
||
(() => {
|
||
const root=document.getElementById('sanctuary-navigation');
|
||
const content=root.querySelector('.mc-main');
|
||
const local=root.querySelector('.mc-local');
|
||
const nav=root.querySelector('.mc-nav');
|
||
const state={tab:'inhabitant',page:'',role:'player',favorite:'Loup',changed:false,trophy:'Des diamants !',constellation:'La Traversée',detail:'',worldLabel:'Monde'};
|
||
const pages={discovery:['Blocs','Objets','Créatures','Recettes'],progress:['Capacités','Exploits','Statistiques'],world:['Atlas','Constructions','Histoire'],inhabitant:[]};
|
||
const knowledge={Blocs:[['Pierre','Roche minée et déjà possédée.',true],['Bûche de chêne','Bois observé et récolté.',true],['Terre','Bloc observé et déjà possédé.',true],['Débris antiques','Aucune découverte personnelle.',false]],Objets:[['Pomme','Objet ramassé. Sa fiche décrit ses usages connus.',true],['Pioche en pierre','Outil fabriqué et déjà possédé.',true],['Élytre','Aucune découverte personnelle.',false]],Créatures:[['Loup','Créature observée. Peut être choisie comme favorite.',true],['Chat','Créature observée. Peut être choisie comme favorite.',true],['Renard','Aucune découverte personnelle.',false]]};
|
||
const esc=value=>String(value).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||
const row=(a,b)=>`<div class="mc-row"><span>${esc(a)}</span><span>${esc(b)}</span></div>`;
|
||
const button=(label,action)=>`<button type="button" data-action="${action}">${label}</button>`;
|
||
function go(tab,page=''){state.tab=tab;state.page=page||pages[tab][0]||'';state.detail='';render();}
|
||
function render(){
|
||
root.querySelector('[data-tab="world"]').textContent=state.worldLabel;
|
||
nav.querySelectorAll('button').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.tab===state.tab)));
|
||
local.innerHTML=pages[state.tab].map(p=>`<button type="button" data-page="${p}" aria-pressed="${p===state.page}">${p}</button>`).join('');
|
||
local.hidden=!pages[state.tab].length;
|
||
const op=state.role==='operator'?'<div class="mc-op">Vue opérateur · inspection sans découverte automatique</div>':'';
|
||
let body='';
|
||
if(state.tab==='inhabitant'){
|
||
body=`<div class="mc-two"><section><div class="mc-name">poupoutain</div><p class="mc-caption">Habitant de Sanctuary</p><p>Je construis des passages entre les îles.</p><div class="mc-heading">À l’honneur</div><div class="mc-detail"><span class="mc-badge">★ ${esc(state.trophy)}</span><div class="mc-caption">Exploit Minecraft accompli</div>${button('Choisir un exploit','achievements')}</div></section><section><label class="mc-choice">Constellation favorite<select data-constellation><option${state.constellation==='La Traversée'?' selected':''}>La Traversée</option><option${state.constellation==='Le Refuge'?' selected':''}>Le Refuge</option></select></label><label class="mc-choice">Créature favorite<select data-favorite ${state.changed?'disabled':''}><option${state.favorite==='Loup'?' selected':''}>Loup</option><option${state.favorite==='Chat'?' selected':''}>Chat</option></select></label><div class="mc-caption">Choix parmi les créatures découvertes.</div><p class="mc-status">${state.changed?'Favori modifié · prochain changement dans 24 h':'Changement disponible'}</p>${button('Ouvrir le bestiaire','creatures')}</section></div>`;
|
||
} else if(state.tab==='discovery'){
|
||
if(state.page==='Recettes') body=`<div class="mc-heading">Recettes révélées</div>${row('Pioche en pierre','Consultable')}${row('Planches de chêne','Consultable')}<p class="mc-caption">La fabrication manuelle reste libre.</p>`;
|
||
else {
|
||
const entries=knowledge[state.page];
|
||
const visible=entries.filter(e=>e[2]||state.role==='operator');
|
||
body=`${op}<div class="mc-heading">${state.page} · ${visible.length} ${state.role==='operator'?'entrées':'découvertes'}</div><div class="mc-two"><div class="mc-list">${visible.map(e=>`<button type="button" class="mc-link" data-entry="${esc(e[0])}">${esc(e[0])}${e[2]?'':' · Non découvert'}</button>`).join('')}</div><div class="mc-detail">${state.detail?esc(state.detail):'Sélectionner une découverte'}</div></div>`;
|
||
}
|
||
} else if(state.tab==='progress'){
|
||
if(state.page==='Capacités') body=`<div class="mc-two"><section><div class="mc-heading">Compétences</div>${row('Vie','3')}${row('Faim','3')}${row('Minage','À venir')}${row('Construction','À venir')}${row('Souffle','3')}${row('Inventaire','À venir')}</section><section><div class="mc-heading">Aptitudes</div>${row('Noms des mobs','Acquis')}${row('Minimap','À acquérir')}${row('Grande carte','À acquérir')}${row('Marqueurs','À acquérir')}</section></div>`;
|
||
if(state.page==='Exploits') body=`<div class="mc-heading">Minecraft</div><div class="mc-list"><button type="button" class="mc-link" data-trophy="Des diamants !">★ Des diamants ! · Épingler au passeport</button><button type="button" class="mc-link" data-trophy="L’âge de pierre">★ L’âge de pierre · Épingler au passeport</button></div><div class="mc-heading">Sanctuary · accomplissements du serveur</div><div class="mc-caption">Objectifs collectifs et ouvertures d’expansions.</div>`;
|
||
if(state.page==='Statistiques') body=`<div class="mc-heading">Mes statistiques Minecraft</div>${row('Blocs minés','248')}${row('Distance parcourue','3,2 km')}${row('Temps de jeu','2 h 14 min')}<div class="mc-caption">Accès aux compteurs vanilla depuis la progression.</div>`;
|
||
} else if(state.tab==='world'){
|
||
if(state.page==='Atlas') body=`<div class="mc-lock"><div class="mc-heading">Grande carte</div><p>Aptitude à acquérir</p>${button('Voir dans Progression','abilities')}<div class="mc-caption">Minimap, grande carte et marqueurs se débloquent séparément.</div></div>`;
|
||
if(state.page==='Constructions') body=`<div class="mc-heading">Mes plans</div><div class="mc-detail"><p>Passerelle en bois</p>${row('Planches de chêne','64')}${row('Barrières de chêne','24')}<div class="mc-caption">Plan d’exemple · matériaux déjà connus</div><button type="button" disabled>Projection Litematica · intégration à venir</button></div>`;
|
||
if(state.page==='Histoire') body=`<div class="mc-heading">Histoire du monde</div>${row('Chronique','Événements et découvertes')}${row('Gazette','Nouvelles et courrier')}${row('Archives','Documents révélés du Galactium')}<div class="mc-caption">Seules les histoires révélées apparaissent.</div>`;
|
||
}
|
||
content.innerHTML=body;
|
||
}
|
||
root.addEventListener('click',event=>{
|
||
const b=event.target.closest('button');if(!b||b.disabled)return;
|
||
if(b.dataset.tab){go(b.dataset.tab);return;}
|
||
if(b.dataset.page){go(state.tab,b.dataset.page);return;}
|
||
if(b.dataset.trophy){state.trophy=b.dataset.trophy;go('inhabitant');return;}
|
||
if(b.dataset.entry){const e=knowledge[state.page].find(e=>e[0]===b.dataset.entry);state.detail=e[0]+' — '+e[1];render();return;}
|
||
if(b.dataset.action==='achievements')go('progress','Exploits');
|
||
if(b.dataset.action==='creatures')go('discovery','Créatures');
|
||
if(b.dataset.action==='abilities')go('progress','Capacités');
|
||
if(b.hasAttribute('data-done')){content.innerHTML='<div class="mc-lock">Retour au jeu</div>';local.hidden=true;b.textContent='Rouvrir le Blocodex';b.removeAttribute('data-done');b.setAttribute('data-reopen','');}
|
||
else if(b.hasAttribute('data-reopen')){b.textContent='Terminé';b.removeAttribute('data-reopen');b.setAttribute('data-done','');render();}
|
||
});
|
||
root.addEventListener('change',event=>{
|
||
const e=event.target;
|
||
if(e.hasAttribute('data-role')){state.role=e.value;state.detail='';render();}
|
||
if(e.hasAttribute('data-favorite')&&!state.changed){state.favorite=e.value;state.changed=true;render();}
|
||
if(e.hasAttribute('data-constellation')){state.constellation=e.value;render();}
|
||
});
|
||
render();
|
||
if(globalThis.Tweak){const tweak=new Tweak({container:root,onChange:render});tweak.addSelect(state,'worldLabel',{label:'Nom de la troisième rubrique',options:['Monde','Histoire']});}
|
||
})();
|
||
</script>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|