adrien/tableau-vlans
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

flex

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-02 12:09:53 +02:00
parent 88228aedae
commit e74d49e34c
3 changed files with 155 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.php
View File

@ -1,18 +1,20 @@
<!DOCTYPE HTML>
<html lang='fr'>
<head>
<title>Schémas des VLANs</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Schémas des VLANs</h1>
<div class="file-list">
<ul>
<?php
$basedir = __DIR__ . "/confs";
function recursive_ls($path) {
function recursive_ls($path)
{
global $basedir;
if (substr(basename($path), 0, 1) == '.') {
@ -46,6 +48,6 @@
?>
</ul>
</div>
</div>
</body>
</html>

4
show.php
View File

@ -46,7 +46,6 @@
</head>
<body>
<div class="container">
<header>
<h1>
<div><?= $sysname[1] ?? "Switch sans nom" ?></div>
@ -117,12 +116,11 @@
</main>
<footer>
<label id="colorSliderLabel" for="colorSlider" class="no-print">Changer les couleurs</label>
<input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="15"
<input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="58.3"
oninput="document.documentElement.style.setProperty('--hue', this.value);" class="no-print" />
<a href="<?= str_replace(__DIR__ . "/", "", $path) ?>" target="_blank" class="link no-print">Télécharger la configuration</a>
<a href="index.php" class="link no-print">← Retour à la liste</a>
</footer>
</div>
</body>
</html>

32
style.css
View File

@ -1,5 +1,5 @@
:root {
--hue: 15;
--hue: 58.3;
--saturation: 80%;
--lightness: 65%;
}
@ -8,21 +8,19 @@
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: visible !important;
}
body {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
h1 {
color: #2c3e50;
margin-bottom: 1rem;
@ -97,8 +95,11 @@ h2 {
main {
display: flex;
flex-flow: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
row-gap: 1rem;
margin-bottom: 2rem;
width: 100%;
}
ul {
@ -109,10 +110,6 @@ details {
cursor: pointer;
}
main > table {
margin: auto;
}
td {
text-align: left;
}
@ -151,7 +148,6 @@ td {
vertical-align: middle;
min-width: 2em;
height: 2em;
mix-blend-mode: darken;
cursor: help;
transition: 0.2s background-color;
border: 2px inset #476079;
@ -223,7 +219,6 @@ td {
.poe::before {
content: "⚡";
font-size: 0.7em;
position: absolute;
top: -0.5em;
right: -0.5em;
@ -231,10 +226,9 @@ td {
.voice_vlan::after {
content: "📞";
font-size: 0.7em;
position: absolute;
bottom: -0.5em;
left: -0.5em;
bottom: -0.4em;
left: -0.3em;
}
.legend {
@ -256,10 +250,6 @@ footer {
}
@media print {
* {
overflow: visible !important;
}
.no-print {
display: none;
}