diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 160 |
1 files changed, 60 insertions, 100 deletions
@@ -1,100 +1,60 @@ -<div class="container"> - - <header><big>🛠️ WebIF 2.0</big></header> - <main> - <nav> - <label for="showmenu"><big>≡ Меню</big></label> - <input type="checkbox" id="showmenu" /> - - <a class="active" href="#home">Начало</a> - <a href="#network">Мрежа</a> - <a href="#config">Настройки</a> - <a href="#tools">Инструменти</a> - </nav> - - <section> - <h2>Lorem Ipsum</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> - <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - <h3>Ipsum Lorem</h3> - <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> - <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> - </section> - </main> -</div> - - -<style> -body { - margin: 0; - font-family: "Lato", sans-serif; -} - -.container { - width: 900px; - margin: 0 auto; -} - -main, nav, section, nav a, nav label { - box-sizing: border-box; -} - -header, section, footer { - padding: 0.5em; -} - -main { - display: flex; -} - -nav { - display: inline-block; - background-color: #f1f1f1; - width: 250px; -} - -nav a, nav label { - width: 100%; - display: block; - color: #000; - padding: 16px; - text-decoration: none; - user-select: none; -} - -nav label { - font-size: 1.2em; - background-color: #000; - color: #fff; - cursor: pointer; -} - -nav input, nav label { - display: none; -} - -nav a.active { - background-color: #07a2a0; - color: #fff; -} - -nav a:hover:not(.active) { - background-color: #555; - color: white; -} - -@media screen and (max-width: 900px) { - .container, nav {width: 100%} - main { - flex-direction: column; - } - nav label {display: block; } - nav, nav a, nav label {width:100%;} - nav > input:not(:checked) ~ a:not(.active) { - display: none; - } -} -</style> - +<!DOCTYPE html> +<html lang="en"> +<head> + <title>WebIF 2.0</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <div class="container"> + <header><big>🛠️ WebIF 2.0</big></header> + <main> + <nav> + <label for="showmenu"><big>≡ Меню</big></label> + <input type="checkbox" id="showmenu" /> + + <a class="active" href="#">Данни</a> + <a href="#/network">Мрежа</a> + <a href="#/config">Настройки</a> + <a href="#/tools">Инструменти</a> + <a href="#/waiting">Пуйчи</a> + </nav> + <section id="app"> + <div class="grid center middle"> + <div> + <div class="loadspin"></div> + <p>Зарежда...</p> + </div> + </div> + </section> + </main> + </div> + <script src="ka.js"></script> + <script> + const waiting = app.children[0]; + const routes = { + "/": () => div( + h2("Lorem Ipsum"), + p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "), + p("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), + + h2("Ipsum Lorem"), + p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), + p("Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), + p("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), + p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "), + ), + //"/network": () => div(), + //"/config": () => div(), + "/waiting": () => waiting, + "": () => div( + h1("Несъществуваща страница"), + p("Страницата не е намерена.") + ), + }; + const onchange = () => { + doc.querySelectorAll('nav a').forEach(x => x.setAttribute('class',(location.href===x.href)?"active":"")); + }; + router(app, routes, onchange); + </script> +</body> +</html> |