<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPR Motions 一 Home</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link type="text/css" rel="stylesheet" href="css/style.css"> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/gif" href="storage/spr.ico">
<!-- script -->
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script scr="js/iziToast.js"></script>
<script src="js/iziToast.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
</head>
<body>
<div id="application">
<header id="header">
<img style="width: 180px;left: 40px;" loading="lazy" src="storage/header__svg/sprmotion.png" alt="" style="width: 180px;" href="sprmotion.xyz">
<!-- <li class="HeaderSerach">
<div id="searchpointer" action="http://localhost/sprmotions.xyz/">
<input type="search" style="background-color: #edeef0;height: 25px;" placeholder="Поиск" autocomplete="off" name="q">
<input type="submit" value="Найти">
</div>
</li> -->
<nav id="user">
<div class="header__notifications">
<div id="checknotifi">
<div class="header__count-notifications">0</div>
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2"><path d="M1.17078 15.6519L2.31543 13.8631C2.84409 13.0375 3.12343 12.0919 3.12343 11.1294V9.5625C3.12343 7.58438 4.53143 5.91126 6.45678 5.37188V4.25001C6.45678 3.56063 7.05478 3 7.79012 3C8.52546 3 9.12346 3.56063 9.12346 4.25001V5.37188C11.0488 5.91126 12.4568 7.58438 12.4568 9.5625V11.1294C12.4568 12.0919 12.7361 13.0369 13.2641 13.8625L14.4088 15.6513C14.4708 15.7482 14.4721 15.8682 14.4128 15.9663C14.3534 16.0644 14.2434 16.125 14.1234 16.125H1.45678C1.33678 16.125 1.22612 16.0644 1.16678 15.9669C1.10743 15.8694 1.10943 15.7481 1.17078 15.6519Z" fill="white"></path><path d="M9.8894 16.7499C9.5134 17.4862 8.7174 17.9999 7.79009 17.9999C6.86278 17.9999 6.06675 17.4862 5.69075 16.7499H9.8894Z" fill="white"></path></g></svg>
</div>
<div class="notification-wrapper">
<img class="notify-snow" src="https://cloud.cybershoke.net/img/newyear/notify-snow.png" alt="">
<div class="notifications__header"><div class="notifications__title">Уведомления</div>
<div class="notifications__toggler">
<input id="toggle-notify" type="checkbox"><label for="toggle-notify"></label>
</div>
</div>
<div class="notifications__main">
<div class="notify-item">
<img src="" alt="">
<div>
<span class="notification-title">Новогодний конкурс</span>
<span class="notification-text">Участвуй и выигрывай призы</span>
<span class="notification-time">8 дней назад</span>
</div>
</div>
<div class="notify-item">
<img src="#" alt="">
<div>
<span class="notification-title">2x акция началась</span>
<span class="notification-text"></span>
<span class="notification-time">8 дней назад</span>
</div>
</div>
<div class="notify-item">
<img src="#" alt="">
<div>
<span class="notification-title">2x акция началась</span>
<span class="notification-text"></span>
<span class="notification-time">8 дней назад</span>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- <div class="select-theme">
<select id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div> -->
</header>
<aside id="aside">
<nav class="header-side-left">
<a href="#" data-tippy-placement="right" id="play"><img src="" alt=""></a>
<a href="#" class="premium" data-tippy-placement="right" id="premium"><img src="" alt=""></a>
<a href="#" data-tippy-placement="right" id="trophy"><img src="storage\image\analytics-outline.svg" alt=""></a>
<a href="#" data-tippy-placement="right" id="learn"><img src="storage\header__svg\trophy-outline.svg" alt=""></a>
<a href="#" data-tippy-placement="right" id="link"><img src="storage\header__svg\school-outline.svg" alt=""></a>
</nav>
</aside>
<main id="main">
<div class="wrap">
<div id="pages">
</div>
</div>
</main>
<a id="cookie-policy" href="/policy" style="display: block;"><span><div href="/policy">Мы используем cookies для быстрой и удобной работы сайта. Продолжая пользоваться сайтом, вы принимаете условия пользовательского соглашения и политику конфиденциальности</div><button>✕</button></span></a>
</div>#cookie-policy {
/* display: none; */
}
#cookie-policy {
position: fixed;
z-index: 100000;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
pointer-events: none;
}
#cookie-policy span, #cookie-policy span a {
font-family: Roboto Condensed;
font-weight: 500;
}
#cookie-policy span {
display: inline-block;
margin: 0 15px 15px;
padding: 9px 43px 9px 14px;
font-size: 12px;
text-align: left;
border-radius: 6px;
background-color: rgba(25,31,35,.419608)!important;
pointer-events: auto;
backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#cookie-policy button {
margin: 0;
padding: 0;
background: 0 0;
border: 0;
font: inherit;
cursor: pointer;
position: absolute;
top: 7px;
right: 9px;
display: inline-block;
width: 28px;
color: #878686;
text-align: center;
}
/* 2 part */
.header__notifications>div:first-of-type {
position: relative;
cursor: pointer;
}
.header__count-notifications {
border: 1px solid #030b12;
}
.header__count-notifications {
position: absolute;
top: -4px;
right: -2px;
width: 13px;
height: 13px;
background: #6080ff;
border-radius: 50%;
z-index: 5;
font-weight: 700;
font-size: 8px;
text-transform: uppercase;
}
.header__count-notifications, .header__notifications svg {
display: flex;
align-items: center;
justify-content: center;
}
.notification-wrapper {
background: #191e2b;
border-radius: 12px;
width: 254px;
padding-bottom: 20px;
position: absolute!important;
top: 110%;
right: 0;
display: none;
}
.notify-snow {
position: absolute;
right: 0;
bottom: -2px;
}
header img {
vertical-align: middle;
}
.notifications__header {
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.notifications__title {
font-family: Roboto;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
color: #e7eeff;
font-family: var(--font-family-1);
}
#toggle-notify {
display: none;
}
input {
box-shadow: unset;
}
input {
color: #fff!important;
}
.notifications__toggler label {
width: 29px;
height: 15px;
background: #252c40;
border-radius: 7.5px;
display: block;
cursor: pointer;
}
.notifications__toggler input[type=checkbox]:checked+label:before {
right: 3px;
left: auto;
background: #6080ff;
}
.notifications__toggler input+label:before {
content: "";
width: 11px;
height: 11px;
display: block;
position: absolute;
top: 50%;
left: 3px;
transform: translateY(-50%);
background: #3d496b;
border-radius: 7.5px;
}
.notifications__main {
max-height: 272px;
overflow-y: scroll;
}
.notify-item {
display: flex;
align-items: flex-start;
padding: 18px;
border-top: 1px solid rgba(97,106,130,.1);
}
.notify-item>div {
display: flex;
flex-direction: column;
margin-left: 13px;
}
.notification-title {
font-family: var(--font-family-1);
font-weight: 700;
font-size: 14px;
letter-spacing: .02em;
color: #f7f9ff;
}
.notification-text {
font-family: var(--font-family-1);
font-size: 12px;
color: #bcbfc8;
padding: 4px 0 5px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-time {
font-family: Roboto;
font-size: 11px;
line-height: 13px;
color: #a8b6d9;
}
.notifications__toggler input+label:before {
content: "";
width: 11px;
height: 11px;
display: block;
position: absolute;
top: 50%;
left: 3px;
transform: translateY(-50%);
background: #3d496b;
border-radius: 7.5px;
}
.notifications__toggler label {
width: 29px;
height: 15px;
background: #252c40;
border-radius: 7.5px;
display: block;
cursor: pointer;
}
body{
background-color: #edeef0;
width: 100%;
height: 100%;
color: #000000;
}
*, :after, :before{
transition: .4s;
box-sizing: border-box;
position: relative;
margin: 0;
padding: 0;
outline: none;
color: #ffffff;
text-shadow: none;
box-shadow: none;
border: 0;
font-family: Roboto;
}
header{
width: 100%;
/* display: flex; */
position: fixed;
background-color: #fff;
height: 48px;
font-family: 'Roboto', sans-serif;
left: 64px;
}
li{
list-style: none;
transition: none;
}
.HeaderSerach{
border-radius: 4px;
display: inline-block;
bottom: 15px;
padding: 5px;
}
input[type="search"]::clear{display: none;}
header ul{
display: block;
}
header ul li{
display: inline-block;
}
aside#aside {
background: #ffffff;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 64px;
z-index: 1199;
}
nav#user {
padding-right: 30px;
}
nav#user, nav#user>* {
display: flex;
height: 100%;
align-items: center;
}
nav#user {
flex-direction: row;
}
nav#user {
top: 0;
float: right;
margin-right: 100px;
}
#user {
display: flex;
flex-direction: row-reverse;
}
aside#aside a {
vertical-align: middle;
display: block;
text-align: center;
font-size: 0;
height: 64px;
width: 64px;
line-height: 64px;
}
aside#aside nav {
position: absolute;
top: 50%;
margin-top: -200px;
bottom: 0;
height: 400px;
}
#theme{
display: inline-block;
background-color: #edeef0;
height: 25px;
}
select{
outline: none;
}
.select-theme{
margin-right: 82px;
display: inline-block;
bottom: 15px;
float: right;
margin-top: 27px;
border-radius: 5px;
}
#searchpointer.theme-dark{
background-color: #444446;
border: 1px solid #444446;
color: #ffffff;
}
#searchpointer.theme-light{
border: 1px solid #efefef;
background-color: #edeef0;
color: #000000;
}
#searchpointer{
padding: 5px;
border-radius: 5px;
bottom: 5px;
left: 150px;
}
#searchpointer input{
color: #000000;
}
:root{
--dark-background-color: #0a0f14;
--dark-text-color: #eeeeee;
}
body.theme-dark {
background-color: #141822;
color: #ffffff!important;
}
header.theme-dark {
background-color: #191d27;
color: #ffffff;
}
aside#aside.theme-dark {
background-color: #191d27;
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
body.theme-auto {
--background-color: var(--dark-background-color);
--text-color: var(--dark-text-color);
}
}
aside#aside.theme-dark{
background: #191d27;
}
.wrap {
height: unset;
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wrap {
margin: 0 auto;
}
#pages {
width: 100%;
display: block;
flex-grow: 1;
overflow: hidden;
}
#application {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
html {
min-height: 100%;
height: 100%;
width: 100%;
overflow: hidden;
font-family: roboto condensed,sans-serif;
font-family: var(--font-family-0);
}
main {
margin-left: 64px!important;
height: 100%;
margin-top: 48px!important;
display: block;
margin-right: 2px;
overflow-y: auto;
}
input {outline:none;}.someinput::clear{display: none;}.disabled{background-color: #efefef;cursor: wait;}.hide{display: none;}
/* */
aside#aside nav a img:hover {
transform: scale(1.3);
}
aside#aside nav a img {
width: 24px;
vertical-align: middle;
}
::scrollbar, ::scrollbar-track {
background: 0 0;
}
::scrollbar {
width: 8px;
}
::scrollbar-corner {
background: 0 0;
}
::scrollbar-thumb {
background: rgba(0,0,0,.55);
border-radius: 10px;
border: 1px solid hsla(0,0%,100%,.1)!important;
}
::scrollbar, ::scrollbar-track {
background: 0 0;
}function applyTheme(theme) {
document.body.classList.remove("theme-light", "theme-dark");
$("#header").removeClass(); $("#aside").removeClass();
document.body.classList.add(`theme-${theme}`);
$("#header").addClass(`theme-${theme}`);
$("#aside").addClass(`theme-${theme}`);
$("#theme").addClass(`theme-${theme}`);
$("#searchpointer").addClass(`theme-${theme}`);
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#theme").addEventListener("change", function() {
applyTheme(this.value);
});
});
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "auto";
applyTheme(savedTheme);
for (const optionElement of document.querySelectorAll("#theme option")) {
optionElement.selected = savedTheme === optionElement.value;
}
document.querySelector("#theme").addEventListener("change", function () {
localStorage.setItem("theme", this.value);
applyTheme(this.value);
});
});
tippy('.select-theme', {
content: "Выбор темы",
placement: "bottom",
});
$('#checknotifi').click(function(){
$(".notification-wrapper").fadeToggle(50);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.