init
This commit is contained in:
PIVODEVAT
commit
7f4567dfe0
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/settings.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Svelte</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
jsconfig.json
Normal file
32
jsconfig.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "bundler",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
/**
|
||||
* svelte-preprocess cannot figure out whether you have
|
||||
* a value or a type, so tell TypeScript to enforce using
|
||||
* `import type` instead of `import` for Types.
|
||||
*/
|
||||
"verbatimModuleSyntax": true,
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* To have warnings / errors of the Svelte compiler at the
|
||||
* correct position, enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable this if you'd like to use dynamic types.
|
||||
*/
|
||||
"checkJs": true
|
||||
},
|
||||
/**
|
||||
* Use global.d.ts instead of compilerOptions.types
|
||||
* to avoid limiting type declarations.
|
||||
*/
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
1248
package-lock.json
generated
Normal file
1248
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"svelte": "^5.15.0",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
}
|
||||
13
public/selected_profile.svg
Normal file
13
public/selected_profile.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Created using Krita: https://krita.org -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:krita="http://krita.org/namespaces/svg/krita"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
width="122.904pt"
|
||||
height="122.904pt"
|
||||
viewBox="0 0 122.904 122.904">
|
||||
<defs/>
|
||||
<path id="shape0" transform="translate(14.6129261015271, 28.0787413638113)" fill="#f795be" fill-rule="evenodd" stroke-opacity="0" stroke="#ffffff" stroke-width="0.72" stroke-linecap="square" stroke-linejoin="bevel" d="M0 0L96.6968 0.00281917L48.3524 84.2408Z" sodipodi:nodetypes="cccc"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 797 B |
13
public/settings.svg
Normal file
13
public/settings.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
13
public/settings:pressed.svg
Normal file
13
public/settings:pressed.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
13
public/settings_hover.svg
Normal file
13
public/settings_hover.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
13
public/vite1.svg
Normal file
13
public/vite1.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Created using Krita: https://krita.org -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:krita="http://krita.org/namespaces/svg/krita"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
width="122.904pt"
|
||||
height="122.904pt"
|
||||
viewBox="0 0 122.904 122.904">
|
||||
<defs/>
|
||||
<path id="shape0" transform="translate(14.6129261015271, 28.0787413638113)" fill="#f795be" fill-rule="evenodd" stroke-opacity="0" stroke="#ffffff" stroke-width="0.72" stroke-linecap="square" stroke-linejoin="bevel" d="M0 0L96.6968 0.00281917L48.3524 84.2408Z" sodipodi:nodetypes="cccc"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 797 B |
15
src/App.svelte
Normal file
15
src/App.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import Auth from './pages/auth-dynamic.svelte';
|
||||
import Profile from './pages/profile.svelte';
|
||||
import Servers from './pages/servers.svelte';
|
||||
|
||||
let currentPage = 'auth'; // Для переключения страниц
|
||||
</script>
|
||||
|
||||
{#if currentPage === 'auth'}
|
||||
<Auth />
|
||||
{:else if currentPage === 'profile'}
|
||||
<Profile />
|
||||
{:else if currentPage === 'servers'}
|
||||
<Servers />
|
||||
{/if}
|
||||
79
src/app.css
Normal file
79
src/app.css
Normal file
@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@ -0,0 +1,9 @@
|
||||
import { mount } from 'svelte'
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
154
src/pages/auth-dynamic.svelte
Normal file
154
src/pages/auth-dynamic.svelte
Normal file
@ -0,0 +1,154 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let windowWidth;
|
||||
let windowHeight;
|
||||
|
||||
// Функция для обновления размеров окна
|
||||
function updateDimensions() {
|
||||
windowWidth = window.innerWidth;
|
||||
windowHeight = window.innerHeight;
|
||||
}
|
||||
|
||||
// Устанавливаем начальные размеры
|
||||
onMount(() => {
|
||||
updateDimensions(); // Получаем начальные размеры
|
||||
window.addEventListener('resize', updateDimensions); // Добавляем обработчик события
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateDimensions); // Убираем обработчик при размонтировании
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%; /* Устанавливает высоту на 100% */
|
||||
margin: 0; /* Убирает отступы */
|
||||
overflow: hidden; /* Отключает прокрутку */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #808080; /* Серый фон */
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
position: fixed; /* Фиксирует контейнер */
|
||||
top: 50%; /* Центрирует по вертикали */
|
||||
left: 50%; /* Центрирует по горизонтали */
|
||||
transform: translate(-50%, -50%); /* Сдвигает контейнер на половину его высоты и ширины */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 90vh; /* Убедитесь, что контейнер занимает 90% высоты окна */
|
||||
width: 90vw; /* Убедитесь, что контейнер занимает 90% ширины окна */
|
||||
min-width: 600px; /* Устанавливаем минимальную ширину */
|
||||
margin: auto; /* Центрирует контейнер */
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
display: flex;
|
||||
width: 100%; /* Динамическая ширина */
|
||||
height: 100%; /* Динамическая высота */
|
||||
max-width: 1400px; /* Максимальная ширина */
|
||||
max-height: 650px; /* Максимальная высота */
|
||||
background-color: #3d3d3d; /* Серый цвет окна */
|
||||
border: 1px solid #717171; /* Светло-серая рамка */
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
padding: 2%; /* Устанавливаем padding в процентах */
|
||||
}
|
||||
|
||||
.auth-box .left, /* поля */
|
||||
.auth-box .right {
|
||||
flex: 1; /* Позволяет обеим частям занимать равное пространство */
|
||||
padding: 5%; /* Используем относительные единицы для отступов */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 2%; /* Устанавливаем margin в процентах для равномерного сжатия */
|
||||
}
|
||||
|
||||
.auth-box .left {
|
||||
border-right: 1px solid #717171; /* Разделительная линия */
|
||||
}
|
||||
|
||||
.auth-box h2 {
|
||||
margin-bottom: 5%; /* Уменьшено пространство под заголовком */
|
||||
font-size: 28px; /* Увеличен размер шрифта заголовка */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-box input {
|
||||
margin-bottom: 5%; /* Увеличено пространство между полями */
|
||||
padding: 5%; /* Увеличено внутреннее отступы */
|
||||
font-size: 18px; /* Увеличен размер шрифта */
|
||||
border: 1px solid #717171;
|
||||
border-radius: 4px;
|
||||
width: 100%; /* Устанавливаем ширину на 100% */
|
||||
box-sizing: border-box; /* Учитываем отступы и границы в ширине */
|
||||
}
|
||||
|
||||
.auth-box button { /* кнопки зарегистр и войти */
|
||||
padding: 5%; /* Увеличено внутреннее отступы */
|
||||
font-size: 20px; /* Увеличен размер шрифта кнопок */
|
||||
background-color: #ff1d1d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 5%; /* Увеличено пространство над кнопками */
|
||||
}
|
||||
|
||||
.auth-box button:hover {
|
||||
background-color: #db2222;
|
||||
}
|
||||
|
||||
.auth-box button:focus {
|
||||
outline: none; /* Отключает обводку при фокусе */
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5%; /* Увеличено расстояние между полем пароля и чекбоксом */
|
||||
margin-bottom: 5%; /* Увеличено расстояние между чекбоксом и кнопкой "Войти" */
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container input {
|
||||
transform: scale(1.7); /* Увеличивает размер чекбокса */
|
||||
margin-right: 2%; /* Уменьшено расстояние справа от чекбокса */
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container label {
|
||||
font-size: 18px; /* увеличен размер шрифта для меток */
|
||||
margin-top: 0; /* Убираем все отступы у метки */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-box">
|
||||
<!-- Левая часть: Регистрация -->
|
||||
<div class="left">
|
||||
<h2>Регистрация</h2>
|
||||
<input type="email" placeholder="Почта" />
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<input type="password" placeholder="Подтверждение пароля" />
|
||||
<button>Зарегистрироваться</button>
|
||||
</div>
|
||||
|
||||
<!-- Правая часть: Вход -->
|
||||
<div class="right">
|
||||
<h2>Вход</h2>
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<div class="checkbox-container">
|
||||
<input type="checkbox" id="remember-me" />
|
||||
<label for="remember-me">Запомнить меня</label>
|
||||
</div>
|
||||
<button>Войти</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
124
src/pages/auth.svelte
Normal file
124
src/pages/auth.svelte
Normal file
@ -0,0 +1,124 @@
|
||||
<script>
|
||||
// Пока логика не добавлена
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%; /* Устанавливает высоту на 100% */
|
||||
margin: 0; /* Убирает отступы */
|
||||
overflow: hidden; /* Отключает прокрутку */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #808080; /* Серый фон */
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
position: fixed; /* Фиксирует контейнер */
|
||||
top: 50%; /* Центрирует по вертикали */
|
||||
left: 50%; /* Центрирует по горизонтали */
|
||||
transform: translate(-50%, -50%); /* Сдвигает контейнер на половину его высоты и ширины */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh; /* Убедитесь, что контейнер занимает 100% высоты */
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
display: flex;
|
||||
width: 1400px; /* Увеличенная ширина */
|
||||
height: 650px; /* Увеличенная высота */
|
||||
background-color: #3d3d3d; /* Серый цвет окна */
|
||||
border: 1px solid #717171; /* Светло-серая рамка */
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-box .left, /* поля */
|
||||
.auth-box .right {
|
||||
flex: 1;
|
||||
padding: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-box .left {
|
||||
border-right: 1px solid #717171; /* Разделительная линия */
|
||||
}
|
||||
|
||||
.auth-box h2 {
|
||||
margin-bottom: 40px; /* Увеличено пространство под заголовком */
|
||||
font-size: 28px; /* Увеличен размер шрифта заголовка */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-box input {
|
||||
margin-bottom: 25px; /* Увеличено пространство между полями */
|
||||
padding: 20px; /* Увеличено внутреннее отступы */
|
||||
font-size: 18px; /* Увеличен размер шрифта */
|
||||
border: 1px solid #717171;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.auth-box button { /* кнопки зарегистр и войти */
|
||||
padding: 20px; /* Увеличено внутреннее отступы */
|
||||
font-size: 22px; /* Увеличен размер шрифта кнопок */
|
||||
background-color: #ff1d1d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 50px; /* Увеличено пространство над кнопками */
|
||||
}
|
||||
|
||||
.auth-box button:hover {
|
||||
background-color: #db2222;
|
||||
}
|
||||
|
||||
.auth-box button:focus {
|
||||
outline: none; /* Отключает обводку при фокусе */
|
||||
}
|
||||
.auth-box .checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px; /* Уменьшено расстояние между полем пароля и чекбоксом */
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container input {
|
||||
transform: scale(1.7); /* Увеличивает размер чекбокса */
|
||||
margin-right: 10px; /* Уменьшено расстояние справа от чекбокса */
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container label {
|
||||
font-size: 18px; /* увеличен размер шрифта для меток */
|
||||
margin-top: -20px; /* Убираем все отступы у метки */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-box">
|
||||
<!-- Левая часть: Регистрация -->
|
||||
<div class="left">
|
||||
<h2>Регистрация</h2>
|
||||
<input type="email" placeholder="Почта" />
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<input type="password" placeholder="Подтверждение пароля" />
|
||||
<button>Зарегистрироваться</button>
|
||||
</div>
|
||||
|
||||
<!-- Правая часть: Вход -->
|
||||
<div class="right">
|
||||
<h2>Вход</h2>
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<div class="checkbox-container">
|
||||
<input type="checkbox" id="remember-me" />
|
||||
<label for="remember-me">Запомнить меня</label>
|
||||
</div>
|
||||
<button>Войти</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
117
src/pages/auth.svelte-old
Normal file
117
src/pages/auth.svelte-old
Normal file
@ -0,0 +1,117 @@
|
||||
<script>
|
||||
// Пока логика не добавлена
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #808080; /* Серый фон */
|
||||
overflow: hidden; /* Отключает прокрутку */
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
transform: scale(1.5); /* Увеличивает размер на 50% */
|
||||
transform-origin: top center; /* Устанавливает точку отсчета для масштабирования */ display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin-top: -450px; /* Установите отрицательное значение для сдвига вверх */
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
display: flex;
|
||||
width: 900px;
|
||||
height: 400px;
|
||||
background-color: #3d3d3d; /* Серый цвет окна */
|
||||
border: 1px solid #717171; /* Светло-серая рамка */
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-box .left, /* поля */
|
||||
.auth-box .right {
|
||||
flex: 1;
|
||||
padding: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-box .left {
|
||||
border-right: 1px solid #717171; /* Разделительная линия */
|
||||
}
|
||||
|
||||
.auth-box h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-box input {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #717171;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.auth-box button { /* кнопки зарегистр и войти */
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
background-color: #ff1d1d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 30px; /* Добавлено пространство над кнопками */
|
||||
}
|
||||
|
||||
.auth-box button:hover {
|
||||
background-color: #db2222;
|
||||
}
|
||||
|
||||
.auth-box button:focus {
|
||||
outline: none; /* Отключает обводку при фокусе */
|
||||
}
|
||||
.auth-box .checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.auth-box .checkbox-container input {
|
||||
transform: scale(1.5); /* Увеличивает размер чекбокса в 1.5 раза */
|
||||
margin-top: 15px; /* Увеличьте значение для большего отступа */
|
||||
margin-right: 10px;
|
||||
}
|
||||
.auth-box .checkbox-container label {
|
||||
font-size: 12px; /* Установите желаемый размер шрифта */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-box">
|
||||
<!-- Левая часть: Регистрация -->
|
||||
<div class="left">
|
||||
<h2>Регистрация</h2>
|
||||
<input type="email" placeholder="Почта" />
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<input type="password" placeholder="Подтверждение пароля" />
|
||||
<button>Зарегистрироваться</button>
|
||||
</div>
|
||||
|
||||
<!-- Правая часть: Вход -->
|
||||
<div class="right">
|
||||
<h2>Вход</h2>
|
||||
<input type="text" placeholder="Логин" />
|
||||
<input type="password" placeholder="Пароль" />
|
||||
<div class="checkbox-container">
|
||||
<input type="checkbox" id="remember-me" />
|
||||
<label for="remember-me">Запомнить меня</label>
|
||||
</div>
|
||||
<button>Войти</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
181
src/pages/profile.svelte
Normal file
181
src/pages/profile.svelte
Normal file
@ -0,0 +1,181 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isCrazyMode = false;
|
||||
let terminalText = "root@linux:~$ ";
|
||||
let glitchEffect = false;
|
||||
let cursorVisible = true;
|
||||
|
||||
// Функция для запуска "бешеного" режима
|
||||
function toggleCrazyMode() {
|
||||
isCrazyMode = !isCrazyMode;
|
||||
|
||||
if (isCrazyMode) {
|
||||
startTerminalMadness();
|
||||
startGlitchEffect();
|
||||
startCursorBlink();
|
||||
} else {
|
||||
terminalText = "root@linux:~$ ";
|
||||
glitchEffect = false;
|
||||
cursorVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Эмуляция бешеного терминала
|
||||
function startTerminalMadness() {
|
||||
const commands = [
|
||||
"Абстракции ФНТНДТ...",
|
||||
"Инициализация безумия...",
|
||||
"Запуск ядра Linux...",
|
||||
"Ошибка: всё сломалось!",
|
||||
"Перезагрузка...",
|
||||
"Вход в бесконечный цикл...",
|
||||
"Абстракции ФНТНДТ!",
|
||||
];
|
||||
|
||||
let index = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (!isCrazyMode) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
terminalText = `root@linux:~$ ${commands[index]}\n${terminalText}`;
|
||||
index = (index + 1) % commands.length;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Glitch-эффект
|
||||
function startGlitchEffect() {
|
||||
const interval = setInterval(() => {
|
||||
if (!isCrazyMode) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
glitchEffect = true;
|
||||
setTimeout(() => (glitchEffect = false), 100);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Мигающий курсор
|
||||
function startCursorBlink() {
|
||||
const interval = setInterval(() => {
|
||||
if (!isCrazyMode) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
cursorVisible = !cursorVisible;
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Основные стили */
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
font-family: "Courier New", monospace;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: lime;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
color: lime;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
width: 80%;
|
||||
height: 300px;
|
||||
background-color: black;
|
||||
color: lime;
|
||||
border: 2px solid lime;
|
||||
padding: 20px;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 1.2em;
|
||||
overflow-y: scroll;
|
||||
white-space: pre-wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 1.2em;
|
||||
background-color: lime;
|
||||
opacity: 1;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
}
|
||||
|
||||
.glitch {
|
||||
position: relative;
|
||||
animation: glitch 0.2s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
padding: 15px 30px;
|
||||
font-size: 1.2em;
|
||||
color: black;
|
||||
background-color: lime;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-family: "Courier New", monospace;
|
||||
text-transform: uppercase;
|
||||
transition: transform 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #00ff00;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<main class:glitch={glitchEffect}>
|
||||
<h1>Абстракции ФНТНДТ</h1>
|
||||
<div class="terminal">
|
||||
{terminalText}
|
||||
{#if cursorVisible}
|
||||
<span class="cursor"> </span>
|
||||
{/if}
|
||||
</div>
|
||||
<button on:click={toggleCrazyMode}>
|
||||
{isCrazyMode ? "Остановить безумие" : "Запустить безумие"}
|
||||
</button>
|
||||
</main>
|
||||
|
||||
24
src/pages/profile.svelte7
Normal file
24
src/pages/profile.svelte7
Normal file
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
// Пока логика не добавлена
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
Страница профиля
|
||||
</div>
|
||||
24
src/pages/servers.svelte
Normal file
24
src/pages/servers.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
// Пока логика не добавлена
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
Страница серверов
|
||||
</div>
|
||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
7
svelte.config.js
Normal file
7
svelte.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user