tezcat/OpenPlanetsMaps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add base coms for index.html

Browse Source
This commit is contained in:
tezcat
2026-05-18 00:00:51 +02:00
parent 828f2d1127
commit 93456c555a
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/index.html
+18
View File
@@ -11,6 +11,7 @@
<body class="theme-home"> <body class="theme-home">
<div class="bg-animated"></div> <div class="bg-animated"></div>
<!-- HEADER -->
<header> <header>
<div class="menu-icon" onclick="toggleSidebar()">☰</div> <div class="menu-icon" onclick="toggleSidebar()">☰</div>
<h1>Open Planets Maps</h1> <h1>Open Planets Maps</h1>
@@ -20,6 +21,7 @@
</div> </div>
</header> </header>
<!-- SIDEBAR -->
<nav id="sidebar" class="sidebar"> <nav id="sidebar" class="sidebar">
<ul> <ul>
<li onclick="showLayer('home')">Home</li> <li onclick="showLayer('home')">Home</li>
@@ -40,7 +42,9 @@
</ul> </ul>
</nav> </nav>
<!-- MAIN CONTENT -->
<main id="content-area"> <main id="content-area">
<!-- HOME SECTION -->
<section id="layer-home" class="layer active"> <section id="layer-home" class="layer active">
<div class="main-img"> <div class="main-img">
<iframe title="Solar System animation" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/b7c69a6b655b47c99f871d5ec5aee854/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe> <iframe title="Solar System animation" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/b7c69a6b655b47c99f871d5ec5aee854/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
@@ -61,6 +65,7 @@
<div class="desc-box">Ready for launch? Open the side menu (☰) and select a destination to begin your journey.</div> <div class="desc-box">Ready for launch? Open the side menu (☰) and select a destination to begin your journey.</div>
</section> </section>
<!-- MERCURY SECTION -->
<section id="layer-mercury" class="layer"> <section id="layer-mercury" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -86,6 +91,7 @@
</div> </div>
</section> </section>
<!-- VENUS SECTION -->
<section id="layer-venus" class="layer"> <section id="layer-venus" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -111,6 +117,7 @@
</div> </div>
</section> </section>
<!-- EARTH SECTION -->
<section id="layer-earth" class="layer"> <section id="layer-earth" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -136,6 +143,7 @@
</div> </div>
</section> </section>
<!-- MARS SECTION -->
<section id="layer-mars" class="layer"> <section id="layer-mars" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -161,6 +169,7 @@
</div> </div>
</section> </section>
<!-- JUPITER SECTION -->
<section id="layer-jupiter" class="layer"> <section id="layer-jupiter" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -186,6 +195,7 @@
</div> </div>
</section> </section>
<!-- SATURN SECTION -->
<section id="layer-saturn" class="layer"> <section id="layer-saturn" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -211,6 +221,7 @@
</div> </div>
</section> </section>
<!-- URANUS SECTION -->
<section id="layer-uranus" class="layer"> <section id="layer-uranus" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -236,6 +247,7 @@
</div> </div>
</section> </section>
<!-- NEPTUNE SECTION -->
<section id="layer-neptune" class="layer"> <section id="layer-neptune" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -261,6 +273,7 @@
</div> </div>
</section> </section>
<!-- SUN SECTION -->
<section id="layer-sun" class="layer"> <section id="layer-sun" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -289,6 +302,7 @@
</div> </div>
</section> </section>
<!-- MOON SECTION -->
<section id="layer-moon" class="layer"> <section id="layer-moon" class="layer">
<div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
@@ -317,6 +331,7 @@
</div> </div>
</section> </section>
<!-- QUIZ SECTION -->
<section id="layer-Quiz" class="layer"> <section id="layer-Quiz" class="layer">
<div class="desc-box">Test your knowledge of the solar system! Answer the questions below to see if you are a true space expert.</div> <div class="desc-box">Test your knowledge of the solar system! Answer the questions below to see if you are a true space expert.</div>
@@ -339,10 +354,12 @@
</section> </section>
</main> </main>
<!-- FOOTER -->
<footer class="site-footer" onclick="openCredits()" title="Credits & About"> <footer class="site-footer" onclick="openCredits()" title="Credits & About">
&copy; 2026 OpenPlanetsMaps. Royalty-free. <span class="footer-credits-hint">— Credits ↗</span> &copy; 2026 OpenPlanetsMaps. Royalty-free. <span class="footer-credits-hint">— Credits ↗</span>
</footer> </footer>
<!-- CREDITS MODAL -->
<div id="credits-overlay"></div> <div id="credits-overlay"></div>
<div id="credits-panel"> <div id="credits-panel">
<button class="credits-close" onclick="closeCredits()">✕</button> <button class="credits-close" onclick="closeCredits()">✕</button>
@@ -390,6 +407,7 @@
</div> </div>
</div> </div>
<!-- SCRIPTS -->
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>