Загрузить файлы в «/»
This commit is contained in:
32
index.html
Normal file
32
index.html
Normal file
@@ -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>
|
||||||
46
main.js
Normal file
46
main.js
Normal file
@@ -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;
|
||||||
|
});
|
||||||
224
style.css
Normal file
224
style.css
Normal file
@@ -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; }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user