ProgramLearn/templates/base.html - master - OtherName/Projects

ProgramLearn/templates/base.html
228 строк7 KB
NikitaChernomor
upload files
09 фев 2026, 00:29
09 фев 2026, 00:29bdab9b5
<!DOCTYPE html>
<html lang="ru">
<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>{% block title%}{% endblock %}</title>
    <link rel="apple-touch-icon" sizes="57x57" href="{{url_for('static', filename='cofemap1/apple-icon-57x57.png')}}">
    <link rel="apple-touch-icon" sizes="60x60" href="{{url_for('static', filename='cofemap1/apple-icon-60x60.png')}}">
    <link rel="apple-touch-icon" sizes="72x72" href="{{url_for('static', filename='cofemap1/apple-icon-72x72.png')}}">
    <link rel="apple-touch-icon" sizes="76x76" href="{{url_for('static', filename='cofemap1/apple-icon-76x76.png')}}">
    <link rel="apple-touch-icon" sizes="114x114" href="{{url_for('static', filename='cofemap1/apple-icon-114x114.png')}}">
    <link rel="apple-touch-icon" sizes="120x120" href="{{url_for('static', filename='cofemap1/apple-icon-120x120.png')}}">
    <link rel="apple-touch-icon" sizes="144x144" href="{{url_for('static', filename='cofemap1/apple-icon-144x144.png')}}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{url_for('static', filename='cofemap1/apple-icon-152x152.png')}}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static', filename='cofemap1/apple-icon-180x180.png')}}">
    <link rel="icon" type="image/png" sizes="192x192"  href="{{url_for('static', filename='cofemap1/android-icon-192x192.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static', filename='cofemap1/favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="96x96" href="{{url_for('static', filename='cofemap1/favicon-96x96.png')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static', filename='cofemap1/favicon-16x16.png')}}">
    <!-- <link rel="manifest" href="manifest.json"> -->
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>

  <style>
    ::-webkit-scrollbar{
      width: 15px
    }
    ::-webkit-scrollbar-thumb{
      background: black;
      border-radius: 5px;
      border:3px solid #7f17cb;
      box-shadow: 0 0 15px;
    }
    .text_gradient{
      color: #000000;
      background: -webkit-linear-gradient(90deg, red, orange, yellow, green, LightBlue, blue, magenta)
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  body{
    background: #031321;
    display: block;
  }
  .block{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    background: #031321;
    z-index: 1;
    box-shadow: 15px;
  }

  .link{
    text-decoration: none;
  }
  .text{
    font-family: sans-serif;
    font-weight: bold;
    text-shadow: 0 0 10px #00b3ff
  }
  .nonono {
    font-family: sans-serif;
    font-weight: bolder;
    position: absolute;
    left:1%;
    top: 12px;
    background: -webkit-linear-gradient(360deg, #f12711 ,#f5af19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px orange;
    transition: 2s;
  }
  .nonono:hover{
    text-shadow: 0 0 15px orange,
                 0 0 20px orange,
                 0 0 25px orange,
                 0 0 30px orange,
                 0 0 35px orange;
  }
  .rainbow{
    font-family: sans-serif;
    font-weight: bolder;
    position: absolute;
    left:1%;
    background: -webkit-linear-gradient(360deg, red, orange, yellow, green, LightBlue, Blue, magenta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .white_link{
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    text-shadow: 0 0 15px;
    transition: 2s
  }
  .white_link:hover{
    text-shadow: 0 0 15px,
                 0 0 20px,
                 0 0 25px,
                 0 0 30px,
                 0 0 35px;
  }
  .text_white:hover{
    text-shadow: 0 0 15px,
                 0 0 20px,
                 0 0 25px,
                 0 0 30px,
                 0 0 35px;
  }
  #space1{
    position: absolute;
    right: 10px;
    color: #FFFFFF;
    transition: 2s;
  }
  #space2{
    position: absolute;
    right: 85px;
  }
  #space3{
    position: absolute;
    right: 165px;
  }
  #space1:hover{
    background: white;
    color: #031321;
    text-shadow: 0 0 15px white,
                     0 0 20px white,
                     0 0 25px white,
                     0 0 30px white,
                     0 0 35px white;
    border-radius: 5px;
  }
  #space2:hover{
    background: white;
    color: #031321;
    text-shadow: 0 0 15px white,
                     0 0 20px white,
                     0 0 25px white,
                     0 0 30px white,
                     0 0 35px white;
    border-radius: 5px;
  }
  #space3:hover{
    background: white;
    color: #031321;
    text-shadow: 0 0 15px white,
                     0 0 20px white,
                     0 0 25px white,
                     0 0 30px white,
                     0 0 35px white;
    border-radius: 5px;
  }
  .text_white{
    color: #2196f3;
    font-family: sans-serif;
    text-shadow: 0 0 15px #2196f3;
    font-weight: bolder;
    transition: 2s
  }
  .text_mega_white{
    font-size: 10px;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    z-index: 1;
  }
  .cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #2196f3;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .1s;
    z-index: 18;
    box-shadow: 0 0 15px #2196f3;
  }

  .cursor2{
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .15s;
    z-index: 19;
    border: 1px solid #2196f3;
    box-shadow: 0 0 15px #2196f3;
  }
  </style>
  <div class="block"><a href="/home" class="link"><h3><span class="nonono">ProgramLearn</span></h3></a>

  <nav>
  <a class="white_link" id="space1" href="/lesson" style="font-size: 20px">Уроки</a>
  <a class="white_link" id="space2" href="/articles" style="font-size: 20px">Статьи</a>
  <a class="white_link" id="space3" href="/create_articles" style="font-size: 20px">Создать</a>
  </nav>
  </div>
  <div class="shadow"></div>
  <br>
  <br>
  <br>
  <div class="cursor"></div>
<div class="cursor2"></div>
<script type="text/javascript">
  var cursor = document.querySelector(".cursor");
  var cursor2 = document.querySelector(".cursor2");
  document.addEventListener("mousemove",function(e){
    cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
  });
</script>
  {% block body%}{% endblock %}
</body>
</html>