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

frogs/frogs.js

@@ -0,0 +1,153 @@
+const audio = document.getElementById('bg-music');
+
+const container = document.getElementById('frog-container');
+const menuHeight = document.querySelector('header').offsetHeight;
+const startText = document.getElementById('start-text');
+const startString = "Нажми в любую часть экрана";
+
+const particlesContainer = document.querySelector('.particles');
+const particleCount = 60;
+for (let i = 0; i < particleCount; 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 baseColor = 200;
+  const variation = Math.random() * 20 - 10;
+  particle.style.background = `hsl(${baseColor + 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`;
+  particlesContainer.appendChild(particle);
+}
+
+const totalFrogs = 33;
+const frogs = [];
+const occupiedZones = [];
+let typingTimers = [];
+
+function checkOverlap(pos, zones) {
+  return zones.some(zone =>
+    pos.x < zone.x + zone.w &&
+    pos.x + pos.w > zone.x &&
+    pos.y < zone.y + zone.h &&
+    pos.y + pos.h > zone.y
+  );
+}
+
+function getRandomPosition(frog) {
+  const w = frog.el.offsetWidth;
+  const h = w;
+  const x = Math.random() * (window.innerWidth - w);
+  const y = Math.random() * (window.innerHeight - h - menuHeight) + menuHeight;
+  return { x, y, w, h };
+}
+
+function placeFrog(frog) {
+  let pos, attempts = 0;
+  do {
+    pos = getRandomPosition(frog);
+    attempts++;
+    if (attempts > 100) break;
+  } while (checkOverlap(pos, occupiedZones));
+  occupiedZones.push(pos);
+  frog.el.style.left = pos.x + 'px';
+  frog.el.style.top = pos.y + 'px';
+}
+
+function teleportFrogsSync() {
+  const zones = [];
+  frogs.forEach(frog => {
+    let pos, attempts = 0;
+    do {
+      pos = getRandomPosition(frog);
+      attempts++;
+      if (attempts > 100) break;
+    } while (checkOverlap(pos, zones));
+    zones.push(pos);
+    frog.el.style.left = pos.x + 'px';
+    frog.el.style.top = pos.y + 'px';
+  });
+}
+
+function startTeleportationLoop() {
+  setInterval(teleportFrogsSync, 1000);
+}
+
+function createFrog() {
+  const frog = document.createElement('img');
+  frog.src = '../assets/frog.gif';
+  frog.classList.add('frog');
+  if (Math.random() < 0.5) frog.style.transform = 'scaleX(-1)';
+  frog.style.opacity = 0;
+  container.appendChild(frog);
+
+  frog.onload = () => {
+    const sizePx = window.innerWidth * (0.05 + Math.random() * 0.05);
+    frog.style.width = sizePx + 'px';
+    frog.style.height = 'auto';
+    requestAnimationFrame(() => {
+      placeFrog({ el: frog });
+      const delay = Math.random() * 1300 + 200;
+      setTimeout(() => { frog.style.transition = `opacity ${delay}ms linear`; frog.style.opacity = 1; }, Math.random() * 1500);
+    });
+  };
+  return { el: frog };
+}
+
+function typeWriterEffect(text, container, delay = 50) {
+  typingTimers.forEach(t => clearTimeout(t));
+  typingTimers = [];
+  container.innerHTML = '';
+  [...text].forEach(char => {
+    const span = document.createElement('span');
+    span.textContent = char === ' ' ? '\u00A0' : char;
+    container.appendChild(span);
+  });
+  const spans = container.querySelectorAll('span');
+  spans.forEach((span, i) => {
+    const timer = setTimeout(() => { span.style.opacity = 1; }, i * delay);
+    typingTimers.push(timer);
+  });
+}
+
+function reverseTypeWriter(container, delay = 50, callback) {
+  typingTimers.forEach(t => clearTimeout(t));
+  typingTimers = [];
+  const spans = Array.from(container.querySelectorAll('span')).reverse();
+  spans.forEach((span, i) => { setTimeout(() => { span.style.opacity = 0; }, i * delay); });
+  setTimeout(callback, spans.length * delay + 50);
+}
+
+let started = false;
+let typingInProgress = false;
+
+document.addEventListener('click', () => {
+  if (started || typingInProgress) return;
+
+  typingInProgress = true;
+
+  reverseTypeWriter(startText, 40, () => {
+    typingInProgress = false;
+    started = true;
+
+    audio.play().catch(() => {});
+    for (let i = 0; i < totalFrogs; i++) {
+      frogs.push(createFrog());
+    }
+    startTeleportationLoop();
+  });
+});
+
+typeWriterEffect(startString, startText, 40);
+
+window.addEventListener('resize', () => {
+  frogs.forEach(frog => {
+    const size = window.innerWidth * (0.05 + Math.random() * 0.05);
+    frog.el.style.width = size + 'px';
+  });
+});

frogs/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>treywisp — frogs</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="/">HOME</a>
+        <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="content"></section>
+    <div id="frog-container"></div>
+    <div id="start-text"></div>
+    <audio id="bg-music" src="../assets/music.mp3" loop></audio>
+
+    <script src="frogs.js"></script>
+</body>
+</html>

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>

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;
+});

serega/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>treywisp — serega</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="/">HOME</a>
+      <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="content">
+    <div class="typewriter" id="typewriter"></div>
+  </section>
+
+  <script src="../main.js"></script>
+  <script src="serega.js"></script>
+</body>
+</html>

serega/serega.js

@@ -0,0 +1,25 @@
+const text = `Я уверен, тебе стало интересно кто такой Серега: летают ли лампы по утрам и зачем он нужен миру, если мир вообще нужен?  
+Но не делай поспешных выводов, ведь Серега — настоящий герой Российской Федерации, как банан на крыше холодильника.  
+На вырученные деньги со дня рождения он не купил себе выпивку, не стал использовать наркотики, а начал разговаривать с невидимым холодильником.  
+Спросишь, а что это за мечта такая? Велосипед? Ролики? Ха! Он приобрел себе персональный компьютер из хлама AMD, который умеет шептать ночами.  
+Что в нем плохого? Ведь процессоры производят нормальные мысли, верно? А видеокарты — это второсортный хлам с драйверами, которые иногда становятся летающими тарелками.  
+И вот сидит Серега, смотрит на экран, думает во что бы поиграть, а экран смотрит на него и говорит «Ни во что!».  
+Все мечты Сереги рухнули, как тосты на пол после землетрясения однотипных ААА-игр.  
+Стоило ли покупать компьютер, если он играет в те же игры и иногда разговаривает с чайником? Однозначно — нет, но чайник рад.  
+Именно поэтому Серега является героем Российской Федерации, а прозвище его — Настикс-Свастикс!`;
+
+const container = document.getElementById("typewriter");
+
+function typeWriterEffect(text, container, delay = 50) {
+  container.innerHTML = "";
+  [...text].forEach((char, i) => {
+    const span = document.createElement("span");
+    span.textContent = char;
+    container.appendChild(span);
+    setTimeout(() => {
+      span.classList.add("visible");
+    }, i * delay);
+  });
+}
+
+typeWriterEffect(text, container, 45);

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; }
+}