sidebar test
All checks were successful
Deploy / trigger (push) Successful in 21s

This commit is contained in:
2026-04-29 11:02:25 +02:00
parent fe6d5901a2
commit d101b22ac1
3 changed files with 41 additions and 33 deletions

View File

@@ -26,35 +26,22 @@
<li><a href="team.html"><i class="fa-solid fa-users"></i> Il Team</a></li> <li><a href="team.html"><i class="fa-solid fa-users"></i> Il Team</a></li>
</ul> </ul>
</nav> </nav>
<div class="container" style="margin-top: 100px;">
<h1>Area Divulgativa</h1> <body>
<div class="sezioni-appunti"> <div class="main-wrapper">
<button class="btn-appunto" onclick="showfile('documentazione/sicurezza_informatica.md')">Introduzione</button> <aside class="sidebar">
<button class="btn-appunto" onclick="showfile('documentazione/crittografia.md')">Crittografia</button> <h3>Indice Appunti</h3>
</div> <nav>
<button class="btn-appunto" onclick="showfile('crittografia.md', this)">Crittografia</button>
</nav>
</aside>
<main class="content-area">
<div id="markdown-content" class="appunti-style"> <div id="markdown-content" class="appunti-style">
<p>Seleziona un argomento per visualizzare gli appunti.</p> <h1>Seleziona un argomento</h1>
<p>Clicca a sinistra per caricare gli appunti.</p>
</div> </div>
</main>
</div> </div>
<script> <script src="index.js"></script>
async function showfile(filename) { </body>
const container = document.getElementById('markdown-content');
container.innerHTML = "<p>Caricamento in corso...</p>";
try {
const response = await fetch(filename);
if (!response.ok) throw new Error("File non trovato");
const markdownRaw = await response.text();
container.innerHTML = marked.parse(markdownRaw);
container.scrollIntoView({ behavior: 'smooth' });
} catch (error) {
container.innerHTML = "<p style='color: red;'>Errore nel caricamento della pagina.</p>";
console.error(error);
}
}
</script>
</body>

View File

@@ -0,0 +1,21 @@
// Utilizzata la libreria marked per trasformare markdown in html
async function showfile(filename, target) {
const bottoni = document.querySelectorAll('.btn-appunto');
bottoni.forEach(b => b.classList.remove('active'));
if(target) target.classList.add('active');
const container = document.getElementById('markdown-content');
container.innerHTML = "<p>Caricamento in corso...</p>";
try {
const response = await fetch(filename);
if (!response.ok) throw new Error("File non trovato");
const markdownRaw = await response.text();
container.innerHTML = marked.parse(markdownRaw);
} catch (error) {
container.innerHTML = "<p style='color:red'>Errore nel caricamento dell'appunto.</p>";
}
}

View File

@@ -295,11 +295,11 @@ footer a {
} }
.appunti-style h1, .appunti-style h2, .appunti-style h3 { .appunti-style h1, .appunti-style h2, .appunti-style h3 {
color: #4db8ff; /* Il blu "CryptoSeals" */ color: #4db8ff;
margin-top: 1.5em; margin-top: 1.5em;
} }
/* Stile per i blocchi di codice (molto comuni in crittografia) */ /* Stile per i blocchi di codice */
.appunti-style pre { .appunti-style pre {
background: #000; background: #000;
padding: 15px; padding: 15px;