Skip to content

L
landing
Commit 21d78546 authored by Roman Alifanov's avatar Roman Alifanov
Browse files
Options

Landing page Geass Password

parents
Hide whitespace changes
Inline Side-by-side
Showing with 415 additions and 0 deletions
gp-logo.png 0 → 100644
View file @ 21d78546
gp-logo.png

11.9 KB

gp-logo.svg 0 → 100644
View file @ 21d78546
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<linearGradient id="blade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f0f0f5"/>
<stop offset="50%" stop-color="#8b9cf2"/>
<stop offset="100%" stop-color="#3a3f6e"/>
</linearGradient>
<linearGradient id="wingL" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c8d0f0"/>
<stop offset="100%" stop-color="#4a50a0"/>
</linearGradient>
<linearGradient id="wingR" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#c8d0f0"/>
<stop offset="100%" stop-color="#4a50a0"/>
</linearGradient>
<linearGradient id="prongL" x1="0" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#7080c0"/>
<stop offset="100%" stop-color="#2a2e58"/>
</linearGradient>
<linearGradient id="prongR" x1="1" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#7080c0"/>
<stop offset="100%" stop-color="#2a2e58"/>
</linearGradient>
<linearGradient id="gem" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#a8b8ff"/>
<stop offset="50%" stop-color="#5865f2"/>
<stop offset="100%" stop-color="#2a2e58"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="flashGlow">
<feGaussianBlur stdDeviation="8"/>
</filter>
</defs>
<g stroke-width="0.5" stroke-linejoin="miter">
<!-- Central spike — drops straight down -->
<g>
<animateTransform attributeName="transform" type="translate" values="0,-100;0,-100;0,0;0,0;0,-100" keyTimes="0;0.06;0.15;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.25 0.1 0.25 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.06;0.09;0.875;1" dur="5s" repeatCount="indefinite"/>
<polygon points="100,8 104,92 100,192 96,92" fill="url(#blade)" stroke="#6070b0"/>
</g>
<!-- Left upper prong — flies in + slashes -->
<g>
<animateTransform attributeName="transform" type="translate" values="-90,-60;-90,-60;0,0;0,0;-90,-60" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.09;0.12;0.875;1" dur="5s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="rotate" values="40,97,87;40,97,87;0,97,87;0,97,87;40,97,87" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<polygon points="98,80 15,34 96,94" fill="url(#wingL)" stroke="#6070b0"/>
</g>
</g>
<!-- Right upper prong — flies in + slashes -->
<g>
<animateTransform attributeName="transform" type="translate" values="90,-60;90,-60;0,0;0,0;90,-60" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.09;0.12;0.875;1" dur="5s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="rotate" values="-40,103,87;-40,103,87;0,103,87;0,103,87;-40,103,87" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<polygon points="102,80 185,34 104,94" fill="url(#wingR)" stroke="#6070b0"/>
</g>
</g>
<!-- Left lower prong — flies in + slashes up -->
<g>
<animateTransform attributeName="transform" type="translate" values="-80,70;-80,70;0,0;0,0;-80,70" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.12;0.15;0.875;1" dur="5s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="rotate" values="-40,97,109;-40,97,109;0,97,109;0,97,109;-40,97,109" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<polygon points="96,102 35,170 98,116" fill="url(#prongL)" stroke="#4a5090"/>
</g>
</g>
<!-- Right lower prong — flies in + slashes up -->
<g>
<animateTransform attributeName="transform" type="translate" values="80,70;80,70;0,0;0,0;80,70" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.12;0.15;0.875;1" dur="5s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="rotate" values="40,103,109;40,103,109;0,103,109;0,103,109;40,103,109" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
<polygon points="104,102 165,170 102,116" fill="url(#prongR)" stroke="#4a5090"/>
</g>
</g>
</g>
<!-- Center diamond — on top -->
<polygon points="100,78 110,98 100,118 90,98" fill="url(#gem)" stroke="#8090d0" stroke-width="0.5" filter="url(#glow)"/>
<!-- Flash on impact -->
<circle cx="100" cy="98" r="0" fill="#8b9cf2" opacity="0" filter="url(#flashGlow)">
<animate attributeName="r" values="0;0;35;0;0" keyTimes="0;0.18;0.21;0.24;1" dur="5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.5;0;0" keyTimes="0;0.18;0.21;0.24;1" dur="5s" repeatCount="indefinite"/>
</circle>
</svg>
index.html 0 → 100644
View file @ 21d78546
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geass Password — творческое объединение</title>
<meta name="description" content="Geass Password — творческое объединение. Стихи, музыка, код.">
<meta property="og:type" content="website">
<meta property="og:title" content="Geass Password — творческое объединение">
<meta property="og:description" content="Стихи, музыка, код.">
<meta property="og:url" content="https://geasspassword.ru">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Geass Password — творческое объединение">
<meta name="twitter:description" content="Стихи, музыка, код.">
<link rel="icon" type="image/svg+xml" href="gp-logo.svg">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, 'Inter', 'Segoe UI', sans-serif;
background: #0a0a0f;
color: #e0e0e0;
min-height: 100vh;
overflow-x: hidden;
}
.bg-glow {
position: fixed;
top: -40%;
left: -20%;
width: 70%;
height: 70%;
background: radial-gradient(ellipse, rgba(88, 101, 242, 0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.bg-glow-2 {
position: fixed;
bottom: -40%;
right: -20%;
width: 70%;
height: 70%;
background: radial-gradient(ellipse, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 60px 24px;
position: relative;
z-index: 1;
}
.header {
text-align: center;
margin-bottom: 48px;
}
.logo {
font-size: 3rem;
margin-bottom: 16px;
letter-spacing: 4px;
font-weight: 800;
background: linear-gradient(135deg, #5865f2, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-size: 1.1rem;
color: #888;
line-height: 1.5;
}
.section {
margin-bottom: 36px;
}
.section-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #555;
margin-bottom: 16px;
font-weight: 600;
}
.card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 20px;
margin-bottom: 12px;
transition: border-color 0.2s, background 0.2s;
text-decoration: none;
color: inherit;
display: block;
}
a.card:hover {
border-color: rgba(88, 101, 242, 0.3);
background: rgba(255, 255, 255, 0.06);
}
.card-title {
font-size: 1.05rem;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
}
.card-desc {
font-size: 0.9rem;
color: #888;
line-height: 1.5;
}
.card-meta {
margin-top: 10px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.tag {
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 6px;
background: rgba(88, 101, 242, 0.15);
color: #8b9cf2;
font-weight: 500;
}
.members {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.member-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px 20px;
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
transition: border-color 0.2s, background 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.member-card:hover {
border-color: rgba(88, 101, 242, 0.3);
background: rgba(255, 255, 255, 0.06);
}
.member-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(88, 101, 242, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #8b9cf2;
flex-shrink: 0;
overflow: hidden;
}
.member-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.link-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px 20px;
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
transition: border-color 0.2s, background 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.link-card:hover {
border-color: rgba(88, 101, 242, 0.3);
background: rgba(255, 255, 255, 0.06);
}
.link-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.gp-logo {
width: 200px;
height: 200px;
filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.6)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.3));
animation: logoPulse 12s ease-in-out infinite;
}
@keyframes logoPulse {
0%, 100% { filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.6)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.3)); }
50% { filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.8)) drop-shadow(0 0 45px rgba(139, 92, 246, 0.5)); }
}
footer {
text-align: center;
margin-top: 60px;
padding: 20px;
color: #333;
font-size: 0.8rem;
}
@media (max-width: 500px) {
.members { grid-template-columns: 1fr; }
.links { grid-template-columns: 1fr; }
.container { padding: 40px 16px; }
.logo { font-size: 2rem; }
}
</style>
</head>
<body>
<div class="bg-glow"></div>
<div class="bg-glow-2"></div>
<div class="container">
<div class="header">
<div class="logo"><img src="gp-logo.svg" alt="GP" class="gp-logo"></div>
<h1 style="font-size: 1.6rem; margin-bottom: 8px;">Geass Password</h1>
<p class="subtitle">Творческое объединение</p>
</div>
<div class="section">
<div class="section-title">Проекты</div>
<div class="card" style="opacity: 0.5;">
<div class="card-title">Мод на Бесконечное лето</div>
<div class="card-desc">Скоро.</div>
<div class="card-meta">
<span class="tag">Бесконечное лето</span>
</div>
</div>
<a class="card" href="https://poems.geasspassword.ru/">
<div class="card-title">Стихи</div>
<div class="card-desc">Анонимная площадка для публикации стихов. Реакции, комментарии, рекомендации.</div>
<div class="card-meta">
<span class="tag">Поэзия</span>
<span class="tag">Творчество</span>
</div>
</a>
<a class="card" href="https://audio-merge.geasspassword.ru/">
<div class="card-title">Audio Merge</div>
<div class="card-desc">Склейка аудиофайлов прямо в браузере.</div>
<div class="card-meta">
<span class="tag">Утилита</span>
<span class="tag">Web Audio</span>
</div>
</a>
</div>
<div class="section">
<div class="section-title">Участники</div>
<div class="members">
<a class="member-card" href="https://ximper.members.geasspassword.ru/">
<div class="member-icon"><img src="https://ximper.members.geasspassword.ru/avatar.jpg" alt="Ximper"></div>
Ximper
</a>
<a class="member-card" href="https://vanomj.members.geasspassword.ru/">
<div class="member-icon"><img src="https://vanomj.members.geasspassword.ru/avatar.jpg" alt="VanoMJ"></div>
VanoMJ
</a>
<a class="member-card" href="#">
<div class="member-icon">Z</div>
Zetix
</a>
</div>
</div>
<div class="section">
<div class="section-title">Ссылки</div>
<div class="links">
<a class="link-card" href="https://t.me/ximper" target="_blank">
<span class="link-icon">TG</span> Telegram
</a>
</div>
</div>
<footer>geasspassword.ru</footer>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment