Загрузить файлы в «/»

2025-10-02 16:53:50 +02:00
parent a9554902c5
commit 0e7695350d
3 changed files with 302 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>treywisp</title>
+    <link rel="icon" type="image/png" href="/assets/icon.png">
+    <link rel="apple-touch-icon" href="/assets/icon.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <a href="/frogs">FROGS</a>
+            <a href="/serega">SEREGA</a>
+            <a href="https://t.me/treywisp" target="_blank">TELEGRAM</a>
+            <a href="/git/treywisp" class="button">GIT</a>
+        </nav>
+    </header>
+
+    <div class="particles"></div>
+
+    <section class="hero">
+        <h1>TREYWISP</h1>
+        <p>Проснулась утром, и, как всегда, я проспала!<br>Я губы крашу, а солнце светит мне в глаза...</p>
+        <a href="javascript:void(0);" id="hitButton" class="hit-button">СЛУШАТЬ ХИТ 2007</a>
+        <audio id="winxAudio" src="assets/winx.mp3"></audio>
+    </section>
+
+    <script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,46 @@
+function createParticles(containerSelector, count = 60, baseHue = 180) {
+    const container = document.querySelector(containerSelector);
+    for (let i = 0; i < count; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+
+        const size = Math.random() * 8 + 2;
+        const posX = Math.random() * 100;
+        const posY = Math.random() * 100;
+        const duration = Math.random() * 5 + 5;
+        const variation = Math.random() * 10 - 5;
+
+        particle.style.background = `hsl(${baseHue + variation}, 100%, 50%)`;
+        particle.style.width = size + 'px';
+        particle.style.height = size + 'px';
+        particle.style.left = posX + '%';
+        particle.style.top = posY + '%';
+        particle.style.animationDuration = `${duration}s`;
+
+        container.appendChild(particle);
+    }
+}
+
+createParticles('.particles', 60, 180);
+
+const hitButton = document.getElementById('hitButton');
+const audio = document.getElementById('winxAudio');
+
+hitButton.addEventListener('click', () => {
+    if (audio.paused) {
+        audio.play();
+        hitButton.classList.add('playing');
+        hitButton.textContent = 'БОЛЬШЕ НЕ СЛУШАТЬ ХИТ 2007';
+    } else {
+        audio.pause();
+        audio.currentTime = 0;
+        hitButton.classList.remove('playing');
+        hitButton.textContent = 'СЛУШАТЬ ХИТ 2007';
+    }
+});
+
+audio.addEventListener('ended', () => {
+    hitButton.classList.remove('playing');
+    hitButton.textContent = 'СЛУШАТЬ ХИТ 2007';
+    audio.currentTime = 0;
+});
--- a/style.css
+++ b/style.css
@@ -0,0 +1,224 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: Arial, sans-serif;
+    color: white;
+    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+    overflow-x: hidden;
+    overflow-y: hidden;
+    position: relative;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    z-index: 10;
+    background: transparent;
+}
+
+nav {
+    display: flex;
+    gap: 30px;
+}
+
+nav a, nav .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    height: 40px;
+    opacity: 0.65;
+    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+nav a:hover,
+nav .button:hover {
+    opacity: 1;
+}
+
+.button {
+    padding: 0 20px;
+    border: 2px solid white;
+    border-radius: 5px;
+}
+
+.hero {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 5rem;
+    margin-bottom: 20px;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: slideIn 1s ease-out forwards;
+}
+
+.hero p {
+    font-size: 1.5rem;
+    max-width: 600px;
+    margin-bottom: 30px;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: slideIn 1.5s ease-out forwards;
+}
+
+.hit-button {
+    padding: 15px 30px;
+    border: 2px solid white;
+    border-radius: 8px;
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: slideIn 1.5s ease-out forwards;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.hit-button:hover {
+    background-color: white;
+    color: #24243e;
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(255,255,255,0.4);
+}
+
+.hit-button.playing {
+    border-width: 2px;
+}
+
+@keyframes slideIn {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+.particles {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.particle {
+    position: absolute;
+    border-radius: 50%;
+    animation-name: float;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes float {
+    0% { transform: translateY(0) translateX(0); opacity: 0.5; }
+    50% { transform: translateY(-50px) translateX(20px); opacity: 1; }
+    100% { transform: translateY(0) translateX(0); opacity: 0.5; }
+}
+
+.content {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 60px 20px;
+    text-align: center;
+    font-size: 1.3rem;
+    max-width: 900px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.typewriter span {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.typewriter span.visible {
+    opacity: 1;
+}
+
+#frog-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.frog {
+    position: absolute;
+    height: auto;
+    opacity: 0;
+    transition: opacity linear;
+    z-index: 2;
+}
+
+#start-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.3rem;
+    font-weight: normal;
+    color: white;
+    text-align: center;
+    z-index: 999;
+    pointer-events: none;
+    white-space: pre-wrap;
+}
+
+#start-text span {
+    opacity: 0;
+    transition: opacity 0.05s linear;
+}
+
+.particles, #frog-container { pointer-events: none; }
+
+@media (max-width: 768px) {
+    .hero h1 { font-size: 2.5rem; }
+    .hero p { font-size: 1rem; }
+    nav a, nav .button { height: 30px; font-size: 0.9rem; }
+    nav { gap: 20px; }
+    .hit-button { font-size: 0.9rem; padding: 8px 15px; }
+    .content { padding: 30px 10px; font-size: 1rem; }
+    #start-text { font-size: 1rem; padding: 0 10px; }
+    .frog { width: 13vw !important; }
+}
+
+@media (max-width: 480px) {
+    .hero h1 { font-size: 2rem; }
+    .hero p { font-size: 0.9rem; }
+    nav a, nav .button { height: 25px; font-size: 0.8rem; }
+    nav { gap: 15px; }
+    .hit-button { font-size: 0.8rem; padding: 6px 12px; }
+    .content { padding: 20px 5px; font-size: 0.9rem; }
+    #start-text { font-size: 0.9rem; padding: 0 5px; }
+    .frog { width: 10vw !important; }
+}