https://pastein.ru/t/7sZ
Загрузка данных
<?php
session_start();
$is_logged_in = isset($_SESSION['user']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Axioma</title>
<meta name="description"
content="Студия Axioma. Разрабатываем сайты и веб-приложения. Инженерный минимализм, современные технологии и продуманный интерфейс.">
<meta name="keywords" content="Axioma, разработка сайтов, создание веб-приложений на заказ, web разработка, ui/ux">
<meta name="theme-color" content="#0d0d0d">
<link rel="stylesheet" href="scss/TESTmain.css">
</head>
<body>
<div id="large-header" class="large-header"><canvas id="demo-canvas"></canvas></div>
<header>
<nav>
<div class="NAVlogo">
<img src="photo/лого.svg" alt="Axioma Logo" class="logo1">
<h1>Axioma</h1>
</div>
<div class="NAVnav">
<a href="#section2">Портфолио</a>
<a href="">О нас</a>
<a href="index.php">Главная</a>
<?php if ($is_logged_in): ?>
<a class="navimg" style="cursor: pointer;" id="openAccountsBtn"><img src="icons/icon-icons-profil-white.svg" alt="Профиль"></a>
<?php else: ?>
<a class="navimg" href="register.html"><img src="icons/icon-icons-profil-white.svg" alt="Регистрация"></a>
<?php endif; ?>
<a><img src="icons/icon-icons-nastroiki-white.svg" alt="Настройки" id="openModalBtn"></a>
</div>
</nav>
<div id="myModal" class="modal">
<div class="modal-content">
<button id="closeModalBtn" class="close-btn">×</button>
<div class="modal-content-div">
<h3>Настройки</h3>
<div class="settings-section">
<h5>Тема сайта</h5>
<button id="theme-toggle" class="theme-toggle-btn">
<span class="light-icon"><img class="dark-light" src="icons/weather_sun_sunny_sunshine_icon_124153.svg"> Светлая</span>
<span class="dark-icon"><img class="dark-light" src="icons/icon-icons-profil.svg"> Темная</span>
</button>
</div>
<div class="settings-section">
<h5>Язык</h5>
<div class="dropdown">
<button class="dropbtn"><span id="languageText">RU</span></button>
<div class="dropdown-content">
<a href="#" data-lang="RU">Русский</a>
<a href="#" data-lang="EN">English</a>
<a href="#" data-lang="DE">Deutsch</a>
</div>
</div>
</div>
<div class="settings-section">
<h5>Эффект фона</h5>
<select id="bg-effect-select" class="theme-toggle-btn" style="width: 100%;">
<option value="network">Гипер-Сеть</option>
<option value="sparkles">Звездная пыль</option>
<option value="matrix">Цифровой поток</option>
<option value="orbit">Гравитация</option>
<option value="none">Чистый фон</option>
</select>
</div>
<div class="settings-section" style="margin-top: 20px;">
<h5>Интенсивность:</h5>
<div>
<input type="number" id="bg-intensity-input" min="0" max="200" value="100" class="intensity">
<span style="margin-left: 5px;">%</span>
</div>
<input type="range" id="bg-intensity-range" min="0" max="200" value="100" class="intensity-slider">
</div>
</div>
</div>
</div>
<div id="accountsModal" class="modal">
<div class="modal-content">
<button id="closeAccountsBtn" class="close-btn">×</button>
<div class="modal-content-div">
<h3>Ваши аккаунты</h3>
<div class="accounts-list">
<div class="account-item active">
<div class="account-info">
<div class="acc-avatar placeholder">A</div>
<div>
<h5>Основной аккаунт</h5>
<small class="neon-text">В сети</small>
</div>
</div>
<button class="btn-go" onclick="window.location.href='profil.php'">В профиль</button>
</div>
<div class="account-item">
<div class="account-info">
<div class="acc-avatar placeholder" style="background: #333;">C</div>
<div>
<h5>Компания ООО</h5>
<small>Офлайн</small>
</div>
</div>
<button class="btn-delete" title="Удалить аккаунт">×</button>
</div>
</div>
<button class="btn-add-account" onclick="window.location.href='register_copy.html'">+ Добавить аккаунт</button>
<button class="btn-logout" onclick="window.location.href='vendor/logout.php'">Выйти из системы</button>
</div>
</div>
</div>
</header>
<main>
<section class="section1">
<div class="mainsection1">
<div class="maininfo">
<h1> <span>Axioma</span> - ваш верный выбор</h1>
<p>
В Axioma мы создаем инновационные и эффективные веб-решения, которые помогут вашему бизнесу достичь
новых высот. Наша команда опытных разработчиков, дизайнеров и аналитиков работает в тесном
сотрудничестве с клиентами, чтобы создать индивидуальные решения, полностью соответствующие их
потребностям.
</p>
<a href="" class="zakaz" class="button">Заказать разработку</a>
</div>
<img src="photo/лого (1).svg" alt="Axioma Logo" class="logo2">
</div>
</section>
<section class="section2" id="section2">
<div class="hexagon-border">
<div class="hexagon-content">
<h2>Наше портфолио</h2>
</div>
</div>
<div class="carousel-container">
<div class="carousel-viewport">
<div class="carousel-track" id="track">
<div class="slide clone">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
<h2>lamoda</h2>
<p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
проекта</p>
<button class="button">Подробнее</button>
</div>
<div class="slide">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
<h2>lamoda</h2>
<p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
проекта</p>
<button class="button">Подробнее</button>
</div>
<div class="slide">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя" > </div>
<h2>lamoda</h2>
<p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
проекта</p>
<button class="button">Подробнее</button>
</div>
<div class="slide">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя" id="openModalBtn-img"> </div>
<div class="slide-text">
<p>Lamoda — маркетплейс в России и СНГ, специализирующийся на премиум-сегменте fashion-индустрии</p>
</div>
<button class="button" id="openModalBtn-more">Подробнее</button>
</div>
<div class="slide">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
<div class="slide-text">
<h2>lamoda</h2>
</div>
<button class="button">Подробнее</button>
</div>
<div class="slide">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
<h2>lamoda</h2>
<p>Краткое описание проекта Краткое описание проекта Краткое описание проекта Краткое описание
проекта</p>
<button class="button">Подробнее</button>
</div>
<div class="slide clone">
<div class="slide-img"> <img src="photo/Без названия.jpeg" alt="фоточка крутвя"> </div>
<h2>lamoda</h2>
<button class="button">Подробнее</button>
</div>
</div>
</div>
<button class="nav-btn prev" onclick="moveSlide(-1)"></button>
<button class="nav-btn next" onclick="moveSlide(1)"></button>
</div>
<div id="myModal-img" class="modal-img">
<div class="modal-content-img">
<button id="closeModalBtn-img" class="close-btn-img">×</button>
<img src="photo/Без названия.jpeg" alt="фоточка крутвя">
</div>
</div>
<div id="myModal-more" class="modal-more">
<div class="modal-content-more">
<button id="closeModalBtn-more" class="close-btn-more">×</button>
<div class="more">
<div class="more-blocks1">
<H3>Детали</H3>
<ul>
<li>Современный интерфейс</li>
<li>Регистрация/вход</li>
<li>Корзина</li>
<li>Фильтры</li>
</ul>
</div>
<div class="more-blocks2">
<H3>lamoda</H3>
<p>Lamoda — маркетплейс в России и СНГ, специализирующийся на премиум-сегменте fashion-индустрии. Как мы уже говорили, в Lamoda задействовано огромное количество различных технологий и инструментов. И это не случайно. Иначе нам не справиться с нагрузкой! У нас большой автоматизированный склад. Наш call-center обслуживают 500 сотрудников, а выстроенные нами процессы позволяют перезвонить клиенту в течение 5 минут после оформления заказа. Наша служба доставки работает по 15-минутным интервалам. А ведь кроме собственных систем, у нас есть B2B интеграция с другими интернет-магазинами. С таким многообразием решаемых задач и требованиями такого динамичного бизнеса, как e-commerce, неизбежно разрастание технического стека, ведь каждую задачу мы хотим решать наиболее подходящими технологиями. Разнообразие неизбежно. Об основных представителях нашего стека мы расскажем далее. Но начнем с механизмов, позволяющих не «заблудиться» в этом многообразии.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section3">
</section>
</main>
<footer class="footer">
<div class="div1">
<h1> <span>Axioma</span> - это не просто компания по разработки</h1>
<p>
В Axioma мы создаем инновационные и эффективные веб-решения, которые помогут вашему бизнесу достичь
новых высот. Наша команда опытных разработчиков, дизайнеров и аналитиков работает в тесном
сотрудничестве с клиентами, чтобы создать индивидуальные решения, полностью соответствующие их
потребностям.
</p>
</div>
<div class="div3">
<h4>Меню</h4>
<ul>
<li><a href="#section2">Портфолио</a></li>
<li><a href="#">Заказ</a></li>
<li><a href="<?= $is_logged_in ? 'profil.php' : 'register_copy.html' ?>">Профиль</a></li>
</ul>
</div>
<div class="div2">
<h4>Соц.сети</h4>
<ul>
<li><a href="#">ВКонтакте</a></li>
<li><a href="#">Max</a></li>
<li><a href="#">Telegram</a></li>
</ul>
</div>
</footer>
<script src="js/theme.js"></script>
<script src="js/glav.js"></script>
<script src="js/fon.js"></script>
<script src="js/modal.js"></script>
</body>
</html>
@charset "UTF-8";
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
--accent-color: #3b82f6;
--card-bg: #f3f4f6;
--border-color: #e5e7eb;
--accent-shadow: 0 0 50px rgba(0, 174, 239, 1);
--bg-glass: rgba(13, 13, 13, 0.65);
--borderborder-color: rgba(0, 174, 239, 1);
--borderborder-color-botton: rgba(13, 13, 13, 0.65);
}
[data-theme=dark] {
--bg-color: #0D0D0D;
--text-color: #f8fafc;
--accent-color: #0ea5e9;
--card-bg: #1e293b;
--border-color: #334155;
--accent-shadow: 0 0 50px rgba(0, 174, 239, 1);
--bg-glass: rgba(13, 13, 13, 0.85);
--borderborder-color: rgba(100, 100, 100, 0.85);
--borderborder-color-botton: #0D0D0D;
}
html {
font-size: 20px;
}
/*---------------------------------------------*/
nav {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100vw;
align-items: center;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
color: var(--text-color);
background-color: var(--bg-glass);
border-bottom: 10px solid var(--borderborder-color);
z-index: 1000;
padding: 1vw 5vw;
}
nav a {
display: flex;
color: #ffffff;
text-decoration: none;
font-size: 1.5rem;
margin-left: 2vw;
transition: all 0.5s;
}
nav a:hover {
color: rgb(0, 174, 239);
}
nav navimg {
padding: 0;
margin-left: 2vw;
align-items: center;
}
nav img {
width: 3rem;
cursor: pointer;
}
.NAVlogo {
display: flex;
align-items: center;
align-content: center;
padding: 0;
color: rgb(0, 174, 239);
font-size: 2vw;
}
.NAVlogo h1 {
margin: 0 0 0 1vw;
}
.NAVnav {
display: flex;
align-items: center;
align-content: center;
}
.logo1 {
width: 3rem;
}
.open-btn {
cursor: pointer;
border: none;
outline: none;
background: none;
}
/*---------------------------------------------*/
footer {
z-index: 100;
left: 0;
display: flex;
color: #ffffff;
background-color: var(--bg-glass);
border-top: 10px solid var(--borderborder-color);
}
footer a {
color: #ffffff;
text-decoration: none;
font-size: 1.5vw;
transition: all 0.5s;
}
footer a:hover {
color: rgb(0, 174, 239);
}
footer h4 {
color: #ffffff;
text-decoration: none;
font-size: 2vw;
margin: 1vw;
}
.footer {
z-index: 100;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
padding: 0 5vw;
align-items: baseline;
}
.footer .div1 {
grid-area: 1/1/2/4;
padding-right: 5vw;
}
.footer .div1 p {
font-size: 1.5vw;
}
.footer .div2 {
grid-area: 1/4/2/5;
}
.footer .div3 {
grid-area: 1/5/2/6;
}
span {
color: rgb(0, 174, 239);
font-size: 3vw;
}
/*---------------------------------------------*/
.large-header {
position: fixed;
top: 0;
left: 0;
z-index: -10000;
overflow: hidden;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
background: var(--bg-color);
}
.section1 {
display: flex;
color: var(--text-color);
padding-top: 10vw;
margin: 0 7vw;
}
.section1 h1 {
font-size: 2vw;
margin: 0;
}
.section1 h1 span {
color: rgb(0, 174, 239);
font-size: 3vw;
}
.section1 p {
text-indent: 3vw;
margin: 3vw 0;
font-size: 1.25vw;
}
.logo2 {
height: 50vw;
}
.mainsection1 {
display: flex;
}
.maininfo {
display: flex;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
margin-top: 5.5vw;
}
.zakaz {
text-align: center;
font-size: 2.5vw;
text-decoration: none;
color: #ffffff;
background-color: var(--bg-glass);
border: 5px solid rgb(0, 174, 239);
box-sizing: border-box;
padding: 1vw;
width: 30vw;
transition: all 0.5s ease;
}
.zakaz:hover {
color: var(--bg-color);
background-color: rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
}
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section2 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 2vw;
}
.section2 h2 {
color: var(--text-color);
font-size: 1.5rem;
}
.hexagon-border {
width: 22vw;
height: 6vw;
background-color: rgb(0, 174, 239);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display: flex;
align-items: center;
justify-content: center;
}
.hexagon-content {
width: 20vw;
height: 5vw;
background-color: var(--bg-color);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display: flex;
align-items: center;
justify-content: center;
}
/* КАРУСЕЛЬ */
:root {
--gap: 30px;
--slide-width: calc((100vw - (var(--gap) * 2)) / 3);
}
.carousel-container {
position: relative;
width: 90%;
max-width: 1800px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-viewport {
width: 100%;
overflow: hidden;
padding: 40px 0;
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.carousel-track {
display: flex;
gap: var(--gap);
align-items: center;
}
.slide {
flex: 0 0 var(--slide-width);
padding: 2vw;
height: 27vw;
border: 5px solid rgb(0, 174, 239);
aspect-ratio: 16/20;
background: #1f2a34;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: var(--text-color);
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
opacity: 0.15;
transform: scale(0.8);
}
.slide p {
margin: 0;
font-size: 1rem;
text-indent: 2rem;
}
.slide img {
width: 20vw;
border: 5px solid rgb(100, 100, 100);
transition: all 0.5s ease;
margin: 0.1vw;
}
.slide img:hover {
transform: scale(1.1);
}
.slide img:hover {
border: 5px solid rgb(0, 174, 239);
}
.slide.active {
opacity: 1;
transform: scale(1.05);
background-color: var(--bg-color);
border: 5px solid rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
}
.slide-text{
display: flex;
width: 23vw;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 10px 0px;
}
/*---------------------------------------------*/
.nav-btn {
position: absolute;
width: 3.5vw;
height: 3.5vw;
background-color: var(--borderborder-color-botton);
border: 5px solid rgb(0, 174, 239);
box-sizing: border-box;
cursor: pointer;
rotate: 45deg;
z-index: 100;
transition: all 0.3s;
padding: 0;
}
.nav-btn:hover {
background-color: rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
transform: scale(1.25);
}
.nav-btn.prev {
left: +30px;
}
.nav-btn.next {
right: +30px;
}
.button {
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 2vw;
background-color: var(--bg-glass);
border: 5px solid rgb(0, 174, 239);
box-sizing: border-box;
padding: 0.5vw;
width: 100%;
transition: all 0.5s ease;
}
.button:hover {
color: var(--bg-color);
background-color: rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
}
.modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
justify-content: flex-end;
background-color: transparent;
visibility: hidden;
pointer-events: none;
transition: background-color 0.5s ease, visibility 0.5s;
}
.modal.open {
visibility: visible;
pointer-events: auto;
background-color: var(--bg-glass);
}
.modal.open .modal-content {
transform: translateX(0);
}
.modal-content {
width: 50vw;
height: 100vh;
background-color: var(--bg-color);
color: var(--text-color);
border-left: 5px solid var(--border-color);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 30px;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-content-div{
padding: 50px;
}
.modal-content h3 {
font-size: 3rem;
margin: 0;
font-weight: 300;
}
.modal-content h5 {
font-size: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 10px;
opacity: 0.8;
}
.modal .close-btn {
align-self: flex-end;
position: absolute;
background: none;
border: none;
font-size: 5rem;
color: var(--text-color);
cursor: pointer;
line-height: 1;
padding: 20px;
padding-right: 37px;
transition: opacity 0.2s, transform 0.2s;
}
.modal .close-btn:hover {
opacity: 0.7;
transform: scale(1.25);
}
.modal .theme-toggle-btn {
width: -moz-fit-content;
font-size: 1rem;
width: fit-content;
padding: 12px 24px;
background-color: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.modal .theme-toggle-btn:hover {
border-color: var(--accent-color);
box-shadow: var(--accent-shadow);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn {
background-color: var(--card-bg);
color: var(--text-color);
padding: 12px 24px;
font-size: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
min-width: 100px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown .dropbtn:hover {
border-color: var(--accent-color);
}
.dropdown-content {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
position: absolute;
top: 100%;
left: 0;
min-width: 140px;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
z-index: 10;
margin-top: 8px;
overflow: hidden;
transition: all 0.2s ease-out;
}
.dropdown-content.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content a {
color: var(--text-color);
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 0.9rem;
transition: background 0.2s;
}
.dropdown-content a:hover {
background-color: var(--accent-color);
color: #fff;
}/*# sourceMappingURL=main.css.map */
/*---------------------------------------------*/
.settings-section select {
margin-top: 10px;
background: var(--card-bg);
color: var(--text-color);
}
.settings-section div {
display: flex;
}
.intensity{
background: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 2px 5px;
text-align: center;
font-size: 3rem;
}
.intensity-slider {
width: 100%;
cursor: pointer;
accent-color: var(--accent-color);
background: var(--card-bg);
height: 6px;
border-radius: 5px;
appearance: none;
}
.intensity-slider::-webkit-slider-thumb {
appearance: none;
width: 15px;
height: 15px;
background: var(--accent-color);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-color);
}
.dark-light {
width: 3vw;
height: 3vw;;
}
.modal-img {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
visibility: hidden;
pointer-events: none;
}
.modal-img.open {
visibility: visible;
pointer-events: auto;
background-color: var(--bg-glass);
}
.modal-img.open .modal-content-img {
transform: translateX(0);
}
.modal-content-img {
width: 75vw;
height: 75vh;
padding: 40px;
background-color: var(--bg-color);
color: var(--text-color);
border: 5px solid rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
display: flex;
flex-direction: column;
gap: 30px;
transform: translateX(100%);
}
.modal-content-img img{
width: 100%;
height: 100%;
}
.modal-img .close-btn-img {
align-self: flex-end;
background: none;
border: none;
font-size: 5rem;
color: var(--text-color);
cursor: pointer;
line-height: 1;
padding: 10px;
transition: opacity 0.2s, transform 0.2s;
position: absolute;
}
.modal-img .close-btn-img:hover {
opacity: 0.7;
transform: scale(1.25);
}
.modal-more {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
visibility: hidden;
pointer-events: none;
}
.modal-more.open {
visibility: visible;
pointer-events: auto;
background-color: var(--bg-glass);
}
.modal-more.open .modal-content-more {
transform: translateX(0);
}
.modal-content-more {
width: 70vw;
height: 70vh;
background-color: var(--bg-color);
color: var(--text-color);
border: 5px solid rgb(0, 174, 239);
box-shadow: 0 0 50px rgb(0, 174, 239);
display: flex;
flex-direction: column;
transform: translateX(100%);
}
.modal-more .close-btn-more {
align-self: flex-end;
background: none;
border: none;
font-size: 5rem;
color: var(--text-color);
cursor: pointer;
line-height: 1;
padding: 10px;
padding-right: 27px;
transition: opacity 0.2s, transform 0.2s;
position: absolute;
}
.modal-more .close-btn-more:hover {
opacity: 0.7;
transform: scale(1.25);
}
.more {
display: flex;
margin: 40px;
height: 100%;
}
.more h3{
font-size: 2rem;
margin: 0;
margin-bottom: 1.5vw;
text-align: center;
}
.more p{
font-size: 1rem;
text-align: center;
margin: 0;
}
.more-blocks1{
display: flex;
flex-direction: column;
padding-right: 2vw;
border-right: 1px solid rgb(0, 174, 239);
width: 20vw;
}
.more-blocks1 li{
font-size: 1.5rem;
}
.more-blocks1 ul{
margin: 0;
}
.more-blocks2{
display: flex;
flex-direction: column;
margin-left: 2vw;
width: 100%;
}
/* Стили для модалки аккаунтов */
.accounts-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.account-item {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.3s;
}
.account-item.active {
border-color: #00ffcc; /* Тот самый неоновый цвет */
box-shadow: 0 0 10px rgba(0, 255, 204, 0.1);
}
.account-info {
display: flex;
align-items: center;
gap: 15px;
}
.acc-avatar.placeholder {
width: 40px;
height: 40px;
border-radius: 50%;
background: #00ffcc;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.btn-go {
background: transparent;
color: #00ffcc;
border: 1px solid #00ffcc;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.btn-go:hover {
background: #00ffcc;
color: #000;
}
.btn-delete {
background: transparent;
color: #ff4b4b;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
font-size: 1.5rem;
}
.btn-delete:hover {
color: #ff0000;
}
.btn-add-account {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-add-account:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #00ffcc;
}
.btn-logout {
margin-top: 15px;
width: 100%;
border: 1px solid #ff4b4b;
color: #ff4b4b;
background: transparent;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.btn-logout:hover {
background: #ff4b4b;
color: #fff;
}