summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorStas Medvedev <medvedevsa97@gmail.com>2024-06-11 00:43:21 +0300
committerStas Medvedev <medvedevsa97@gmail.com>2024-06-11 00:43:21 +0300
commit59fc7a0a5b28068002f62749502f7eaa1871c055 (patch)
tree30bdb3dcf3720681e989fb06e367ec65965aceda /templates
parent13c7979cfa42b9bccdbad0eba8a4315f6885af9c (diff)
Накидал html
Diffstat (limited to 'templates')
-rw-r--r--templates/index.html90
-rw-r--r--templates/partials/about.html36
-rw-r--r--templates/partials/avatars.html29
-rw-r--r--templates/partials/header.html5
-rw-r--r--templates/partials/palette.html7
-rw-r--r--templates/partials/services.html14
-rw-r--r--templates/style.css57
7 files changed, 163 insertions, 75 deletions
diff --git a/templates/index.html b/templates/index.html
index 6d05087..87145fd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,7 +9,13 @@
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 href="/static/style.css" rel="stylesheet" />
+ <link
+ id="favicon"
+ rel="icon"
+ type="image/x-icon"
+ href="static/favicon.ico"
+ />
<link
rel="stylesheet"
@@ -20,84 +26,18 @@
<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>
+ <body
+ class="w-screen flex flex-col gap-4 items-center bg-stone-50 source-code-pro-500"
+ >
+ {% include 'partials/palette.html' %}
- <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>
+ {% include 'partials/header.html' %}
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- </div>
- </div>
+ {% include 'partials/about.html' %}
- <script>
- const swiper = new Swiper(".swiper", {
- direction: "horizontal",
- loop: true,
+ {% include 'partials/avatars.html' %}
- 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;
- }
+ {% include 'partials/services.html' %}
- .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>
diff --git a/templates/partials/about.html b/templates/partials/about.html
new file mode 100644
index 0000000..b53a127
--- /dev/null
+++ b/templates/partials/about.html
@@ -0,0 +1,36 @@
+<div class="about relative">
+ <p>Привет, меня зовут Стас</p>
+ <p>
+ Я
+ <a class="text-interactive group" href="https://habr.com/ru/companies/ruvds/articles/488340/">
+ backend
+ <span class="hidden z-10 group-hover:inline-block absolute text-black bg-neutral-100 border-2 border-neutral-500 inset-x-0 my-10 p-2">
+ Если говорить академично, то бэкенд-разработчик — это программист,
+ который отвечает за внутреннюю и вычислительную логику веб-сайта или
+ веб-приложения, а также иного программного обеспечения и информационных
+ систем. Строго говоря, бэкенд бывает не только у веб-решений, он есть и
+ у десктопа, и у мобильных приложений, т.к. по сути бэкенд — это всё, что
+ относится к программно-аппаратной части сервиса.©
+ <span class="block text-sm text-secondary-400">
+ Цитата из статьи с habr.com
+ </span>
+ </span>
+ </a>
+ разработчик
+ </p>
+ <p>
+ В основном пишу на
+ <a href="https://python.org" class="text-interactive">python</a>
+ </p>
+ <p>Вычислил тебя по ip: {{client_geo['query']}}</p>
+
+ {% if 'city' in client_geo %}
+ <p>{{client_geo['country']}}</p>
+ <p>{{client_geo['city']}}</p>
+ {% endif %}
+ <p>
+ <span class="text-sm"
+ >(Шутка в том что такая возможность есть у любого сайта)</span
+ >
+ </p>
+</div>
diff --git a/templates/partials/avatars.html b/templates/partials/avatars.html
new file mode 100644
index 0000000..fd2c247
--- /dev/null
+++ b/templates/partials/avatars.html
@@ -0,0 +1,29 @@
+<div class="flex justify-around">
+ <div class="swiper">
+ <div class="swiper-wrapper">
+ {% for url in avatar_urls %}
+ <img src="{{url}}" alt="" class="swiper-slide"/>
+ {% endfor %}
+ </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: 30%;
+ }
+</style>
diff --git a/templates/partials/header.html b/templates/partials/header.html
new file mode 100644
index 0000000..83fb77a
--- /dev/null
+++ b/templates/partials/header.html
@@ -0,0 +1,5 @@
+<div class="header">
+ <a href="https://yetsam.ru" class="m-auto hover:text-secondary-300 text-3xl"
+ >yetsam.ru</a
+ >
+</div> \ No newline at end of file
diff --git a/templates/partials/palette.html b/templates/partials/palette.html
new file mode 100644
index 0000000..6efa551
--- /dev/null
+++ b/templates/partials/palette.html
@@ -0,0 +1,7 @@
+<div>
+ <div class="primary color-box"></div>
+ <div class="secondary color-box"></div>
+ <div class="complementary-yellow color-box"></div>
+ <div class="complementary-rose color-box"></div>
+ <div class="complementary-blue color-box"></div>
+</div> \ No newline at end of file
diff --git a/templates/partials/services.html b/templates/partials/services.html
new file mode 100644
index 0000000..8209cc0
--- /dev/null
+++ b/templates/partials/services.html
@@ -0,0 +1,14 @@
+<div class="about text-2xl">
+ <p>Так же на этом сервере:</p>
+ <ul class="marker:text-secondary-300 list-outside list-disc ml-6 gap-2">
+ <li>
+ <a href="https://wg.yetsam.ru">VPN с турецким ip</a>
+ </li>
+ <li>
+ <a href="https://t.me/chatgpt_yetsam_bot">ChatGPT telegram бот</a>
+ </li>
+ <li>
+ <a href="http://cgit.yetsam.ru">Git сервер</a>
+ </li>
+ </ul>
+</div> \ No newline at end of file
diff --git a/templates/style.css b/templates/style.css
new file mode 100644
index 0000000..6e43c21
--- /dev/null
+++ b/templates/style.css
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+
+:root {
+ --color-primary-500: #d946ef;
+ --color-secondary-500: #14b8a6;
+ --color-complementary-yellow-400: #facc15;
+ --color-complementary-rose-500: #f43f5e;
+ --color-complementary-blue-500: #3b82f6;
+}
+.primary {
+ background-color: var(--color-primary-500);
+}
+.secondary {
+ background-color: var(--color-secondary-500);
+}
+.complementary-yellow {
+ background-color: var(--color-complementary-yellow-400);
+}
+.complementary-rose {
+ background-color: var(--color-complementary-rose-500);
+}
+.complementary-blue {
+ background-color: var(--color-complementary-blue-500);
+}
+.color-box {
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ display: inline-block;
+}
+div {
+ @apply rounded-md;
+}
+.text-interactive {
+ @apply text-secondary-500 hover:text-fuchsia-600;
+}
+.header {
+ @apply w-2/3 bg-primary-300 flex p-2;
+}
+.about {
+ @apply border-4 border-fuchsia-200 border-dashed p-2 justify-items-center;
+}
+.about p {
+ @apply text-2xl;
+}
+.about li a {
+ @apply underline decoration-secondary-500 hover:decoration-primary-400;
+}
+.source-code-pro-500 {
+ font-family: "Source Code Pro", monospace;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+}
+
+@tailwind utilities;
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-05 22:00:41 +0000