template html & css

css/interface_base.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Interface base </title>
+	<style>
+		/* Le conteneur parent pour toute l'application */
+		.app-layout {
+			display: grid;
+			/* Définit une grille de 2 colonnes (250px et le reste) */
+			grid-template-columns: 250px 1fr;
+			/* Définit 3 lignes de haut en bas */
+			grid-template-rows: auto 1fr auto;
+
+			/* Attribue un nom à chaque zone de la grille */
+			grid-template-areas:
+				"header header"
+				"sidebar content"
+				"footer footer";
+
+			/* Assure que la grille prend toute la hauteur visible */
+			min-height: 100vh;
+		}
+
+		/* 1. Placement des zones */
+		.header {
+			grid-area: header;
+			background-color: #333;
+			color: white;
+			padding: 10px;
+		}
+
+		.sidebar {
+			grid-area: sidebar;
+			background-color: #f4f4f4;
+			padding: 15px;
+			border-right: 1px solid #ccc;
+		}
+
+		.content-area {
+			grid-area: content;
+			padding: 20px;
+			/* Le défilement se produit ici si le contenu dépasse la hauteur */
+			overflow-y: auto;
+		}
+
+		.footer {
+			grid-area: footer;
+			background-color: #333;
+			color: white;
+			padding: 10px;
+			text-align: center;
+		}
+
+		/* Styles pour les éléments internes (textes, boutons, etc.) */
+		.content-area button {
+			padding: 10px 15px;
+			background-color: #007bff;
+			color: white;
+			border: none;
+			cursor: pointer;
+		}
+	</style>
+
+	<script>
+
+	</script>
+</head>
+
+<body>
+ 	<div class="app-layout">
+		<header class="header">
+			Votre bandeau du haut
+		</header>
+
+		<aside class="sidebar">
+			Panneau latéral (ici, votre "panneau haut")
+		</aside>
+
+		<main class="content-area" >
+			<h1>Conteneur Principal</h1>
+			<p>Ici vous ajoutez vos éléments : textes, boutons, etc.</p>
+			<button>Un bouton</button>
+		</main>
+
+		<footer class="footer">
+			Bandeau du bas / Pied de page
+		</footer>
+	</div>
+</body>
+
+</html>