diff options
Diffstat (limited to 'templates/index.html')
| -rw-r--r-- | templates/index.html | 116 |
1 files changed, 101 insertions, 15 deletions
diff --git a/templates/index.html b/templates/index.html index a2e6d0b..6d05087 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,17 +1,103 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <script src="https://cdn.tailwindcss.com"></script> - <title>Document</title> -</head> -<body> - Привет - {% if 'city' in client_geo %} - <p>{{client_geo['country']}}</p> - <p>{{client_geo['city']}}</p> - <p>{{client_geo['query']}}</p> - {% endif %} -</body> -</html>
\ No newline at end of file + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" + rel="stylesheet" + /> + <script src="https://cdn.tailwindcss.com"></script> + + <link + rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" + /> + + <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> + + <title>Document</title> + </head> + <body class="w-screen flex flex-col bg-stone-100 source-code-pro-500"> + <div class="flex justify-between bg-teal-100 h-8 m-2 rounded-xl"> + <div class="w-1/3 flex content-center"> + <a href="https://yetsam.ru" class="mx-auto hover:text-fuchsia-400" + >yetsam.ru</a + > + </div> + <ul class="topmenu px-8"> + <li> + <a href="#" class="underline hover:decoration-fuchsia-400">Сервисы</a> + <ul class="submenu bg-teal-50 border-2 border-fuchsia-200 border-dashed rounded-lg"> + <li><a href="#">WireGuard Админка</a></li> + <li><a href="#">cGit</a></li> + </ul> + </li> + </ul> + </div> + <div class="flex justify-around"> + <div class="mx-auto text-2xl border-4 border-fuchsia-200 border-dashed p-2"> + <p>Привет, меня зовут Стас</p> + <p>Я вычислил тебя по ip: {{client_geo['query']}}</p> + + {% if 'city' in client_geo %} + <p>{{client_geo['country']}}</p> + <p>{{client_geo['city']}}</p> + {% endif %} + </div> + + <div class="swiper"> + <div class="swiper-wrapper"> + <div class="swiper-slide">Slide 1</div> + <div class="swiper-slide">Slide 2</div> + <div class="swiper-slide">Slide 3</div> + </div> + + <div class="swiper-button-prev"></div> + <div class="swiper-button-next"></div> + </div> + </div> + + <script> + const swiper = new Swiper(".swiper", { + direction: "horizontal", + loop: true, + + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + }); + </script> + <style> + .swiper { + width: 600px; + height: 300px; + } + .source-code-pro-500 { + font-family: "Source Code Pro", monospace; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + } + + .topmenu > li { + display: inline-block; + position: relative; + } + .topmenu > li:last-child { + margin-right: 0; + } + .submenu { + position: absolute; + z-index: 10; + display: none; + } + ul li:hover .submenu { + display: block; + } + </style> + </body> +</html> |