Add Base

2026-05-04 13:19:39 +02:00
parent f5184be676
commit bf10bc1f4b
5 changed files with 269 additions and 0 deletions
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenPlanetsMaps</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="bg-animated"></div>
+
+    <header>
+        <div class="menu-icon" onclick="toggleSidebar()">☰</div>
+        <h1>Title</h1>
+        <button class="help-btn">?</button>
+    </header>
+
+    <nav id="sidebar" class="sidebar">
+        <ul>
+            <li onclick="showLayer('home')">Accueil</li>
+            <li onclick="showLayer('theme')">Thème</li>
+        </ul>
+    </nav>
+
+    <main id="content-area">
+        <section id="layer-home" class="layer active">
+            <div class="main-img">IMG/LOGO</div>
+            <div class="flex-row">
+                <div class="box">jsp</div>
+                <div class="box">txt</div>
+            </div>
+            <div class="ticker-wrap">
+                <div class="ticker">Texte qui défile vers la droite...</div>
+            </div>
+            <div class="desc-box">TXT desc / Potentiellement un form</div>
+        </section>
+
+        <section id="layer-theme" class="layer">
+            <div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
+            <div class="main-img">IMG THEME (Ptet anim)</div>
+            <div class="desc-box">DESCR THEME</div>
+            <div class="ticker-wrap">
+                <div class="ticker">Autre texte défilant différent...</div>
+            </div>
+            <div class="table-container">Tableau dates & data</div>
+        </section>
+    </main>
+
+    <footer class="site-footer">
+        &copy; 2026 OpenPlanetsMaps. Libre de droits.
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>