509 lines
22 KiB
HTML
509 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Option 4 - Color Variations & Game Palettes</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
|
font-family: Arial, sans-serif;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.intro {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.intro h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.color-option {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid #333;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin: 30px 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.option-number {
|
|
display: inline-block;
|
|
background: #e74c3c;
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-bottom: 20px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.title {
|
|
font-family: 'Audiowide', cursive;
|
|
font-size: 2.8rem;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tagline {
|
|
font-family: 'Audiowide', cursive;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.palette-section h3 {
|
|
margin-bottom: 20px;
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.color-palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.color-swatch {
|
|
text-align: center;
|
|
padding: 15px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.color-swatch .color-name {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.color-swatch .color-code {
|
|
font-size: 10px;
|
|
opacity: 0.8;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.usage-info {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 3px solid;
|
|
}
|
|
|
|
/* Color Scheme 1 - Original Pink/Orange */
|
|
.scheme-1 .title {
|
|
background: linear-gradient(45deg, #ff0080, #ff8000);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(255, 0, 128, 0.7);
|
|
animation: glow1 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-1 .tagline { color: #ff4d4d; }
|
|
.scheme-1 .usage-info { border-left-color: #ff0080; }
|
|
|
|
@keyframes glow1 {
|
|
from { filter: drop-shadow(0 0 5px rgba(255, 0, 128, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.9)); }
|
|
}
|
|
|
|
/* Color Scheme 2 - Electric Blue/Cyan */
|
|
.scheme-2 .title {
|
|
background: linear-gradient(45deg, #00bfff, #1e90ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(0, 191, 255, 0.7);
|
|
animation: glow2 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-2 .tagline { color: #4db8ff; }
|
|
.scheme-2 .usage-info { border-left-color: #00bfff; }
|
|
|
|
@keyframes glow2 {
|
|
from { filter: drop-shadow(0 0 5px rgba(0, 191, 255, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.9)); }
|
|
}
|
|
|
|
/* Color Scheme 3 - Purple/Violet */
|
|
.scheme-3 .title {
|
|
background: linear-gradient(45deg, #8a2be2, #da70d6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(138, 43, 226, 0.7);
|
|
animation: glow3 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-3 .tagline { color: #ba55d3; }
|
|
.scheme-3 .usage-info { border-left-color: #8a2be2; }
|
|
|
|
@keyframes glow3 {
|
|
from { filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.9)); }
|
|
}
|
|
|
|
/* Color Scheme 4 - Green/Lime */
|
|
.scheme-4 .title {
|
|
background: linear-gradient(45deg, #00ff00, #32cd32);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(0, 255, 0, 0.7);
|
|
animation: glow4 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-4 .tagline { color: #7fff00; }
|
|
.scheme-4 .usage-info { border-left-color: #00ff00; }
|
|
|
|
@keyframes glow4 {
|
|
from { filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.9)); }
|
|
}
|
|
|
|
/* Color Scheme 5 - Red/Crimson */
|
|
.scheme-5 .title {
|
|
background: linear-gradient(45deg, #dc143c, #ff6347);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(220, 20, 60, 0.7);
|
|
animation: glow5 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-5 .tagline { color: #ff4757; }
|
|
.scheme-5 .usage-info { border-left-color: #dc143c; }
|
|
|
|
@keyframes glow5 {
|
|
from { filter: drop-shadow(0 0 5px rgba(220, 20, 60, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(220, 20, 60, 0.9)); }
|
|
}
|
|
|
|
/* Color Scheme 6 - Gold/Amber */
|
|
.scheme-6 .title {
|
|
background: linear-gradient(45deg, #ffd700, #ffa500);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
|
|
animation: glow6 2s ease-in-out infinite alternate;
|
|
}
|
|
.scheme-6 .tagline { color: #ffb347; }
|
|
.scheme-6 .usage-info { border-left-color: #ffd700; }
|
|
|
|
@keyframes glow6 {
|
|
from { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
|
|
to { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.color-option {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
.title {
|
|
font-size: 2rem !important;
|
|
}
|
|
.color-palette {
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="intro">
|
|
<h1>Option 4: Gaming Aesthetic - Color Variations</h1>
|
|
<p>Audiowide font with different color schemes and complete game palettes</p>
|
|
</div>
|
|
|
|
<!-- Color Scheme 1 - Original Pink/Orange -->
|
|
<div class="color-option scheme-1">
|
|
<div class="title-section">
|
|
<div class="option-number">A</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>🌈 Pink/Orange Gaming Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #ff0080; color: white;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#ff0080</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff8000; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#ff8000</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff4d4d; color: white;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#ff4d4d</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #2d2d2d; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#2d2d2d</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1a1a1a; color: white;">
|
|
<div class="color-name">Darker BG</div>
|
|
<div class="color-code">#1a1a1a</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff0080; opacity: 0.1; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(255,0,128,0.1)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> High-energy gaming vibe with pink primary for buttons/highlights, orange for progress bars/completion states, dark backgrounds for contrast. Perfect for an intense, exciting gaming experience.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Scheme 2 - Electric Blue/Cyan -->
|
|
<div class="color-option scheme-2">
|
|
<div class="title-section">
|
|
<div class="option-number">B</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>💙 Electric Blue/Cyan Tech Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #00bfff; color: white;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#00bfff</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1e90ff; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#1e90ff</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #4db8ff; color: white;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#4db8ff</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #0f2027; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#0f2027</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #203a43; color: white;">
|
|
<div class="color-name">Mid BG</div>
|
|
<div class="color-code">#203a43</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #00ffff; opacity: 0.15; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(0,255,255,0.15)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> Professional tech aesthetic with blue primary for navigation/buttons, cyan for active states/progress, dark blue-grey backgrounds. Creates a sophisticated, high-tech training environment feel.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Scheme 3 - Purple/Violet -->
|
|
<div class="color-option scheme-3">
|
|
<div class="title-section">
|
|
<div class="option-number">C</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>💜 Purple/Violet Luxe Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #8a2be2; color: white;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#8a2be2</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #da70d6; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#da70d6</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ba55d3; color: white;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#ba55d3</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1a0d26; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#1a0d26</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #2d1b3d; color: white;">
|
|
<div class="color-name">Mid BG</div>
|
|
<div class="color-code">#2d1b3d</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #8a2be2; opacity: 0.12; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(138,43,226,0.12)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> Luxurious, premium feel with purple primary for main actions, orchid for highlights/hover states, deep purple backgrounds. Creates an exclusive, high-end academy atmosphere.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Scheme 4 - Green/Lime -->
|
|
<div class="color-option scheme-4">
|
|
<div class="title-section">
|
|
<div class="option-number">D</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>💚 Green/Lime Matrix Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #00ff00; color: black;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#00ff00</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #32cd32; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#32cd32</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #7fff00; color: black;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#7fff00</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #0d1a0d; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#0d1a0d</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1b2d1b; color: white;">
|
|
<div class="color-name">Mid BG</div>
|
|
<div class="color-code">#1b2d1b</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #00ff00; opacity: 0.08; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(0,255,0,0.08)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> Matrix/hacker aesthetic with bright green primary for success states/progress, lime for active elements, very dark green backgrounds. Perfect for a digital training simulation vibe.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Scheme 5 - Red/Crimson -->
|
|
<div class="color-option scheme-5">
|
|
<div class="title-section">
|
|
<div class="option-number">E</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>❤️ Red/Crimson Power Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #dc143c; color: white;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#dc143c</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff6347; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#ff6347</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ff4757; color: white;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#ff4757</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1a0a0a; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#1a0a0a</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #2d1515; color: white;">
|
|
<div class="color-name">Mid BG</div>
|
|
<div class="color-code">#2d1515</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #dc143c; opacity: 0.1; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(220,20,60,0.1)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> Bold, intense atmosphere with crimson primary for warnings/important actions, coral for completion states, dark red backgrounds. Creates a powerful, commanding training environment.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Scheme 6 - Gold/Amber -->
|
|
<div class="color-option scheme-6">
|
|
<div class="title-section">
|
|
<div class="option-number">F</div>
|
|
<h1 class="title">GOONER TRAINING ACADEMY</h1>
|
|
<p class="tagline">Master Your Dedication</p>
|
|
</div>
|
|
<div class="palette-section">
|
|
<h3>🏆 Gold/Amber Elite Palette</h3>
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #ffd700; color: black;">
|
|
<div class="color-name">Primary</div>
|
|
<div class="color-code">#ffd700</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ffa500; color: white;">
|
|
<div class="color-name">Secondary</div>
|
|
<div class="color-code">#ffa500</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ffb347; color: black;">
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-code">#ffb347</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #1a1a0d; color: white;">
|
|
<div class="color-name">Dark BG</div>
|
|
<div class="color-code">#1a1a0d</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #2d2d1b; color: white;">
|
|
<div class="color-name">Mid BG</div>
|
|
<div class="color-code">#2d2d1b</div>
|
|
</div>
|
|
<div class="color-swatch" style="background: #ffd700; opacity: 0.08; color: white;">
|
|
<div class="color-name">Glow</div>
|
|
<div class="color-code">rgba(255,215,0,0.08)</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<strong>Game Implementation:</strong> Premium, achievement-focused design with gold primary for rewards/completion, orange for progress indicators, warm dark backgrounds. Perfect for highlighting accomplishments and elite status.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: rgba(0, 0, 0, 0.6); border: 2px solid #444; border-radius: 15px; padding: 30px; margin: 40px 0; text-align: center;">
|
|
<h2 style="margin-bottom: 15px; font-size: 24px;">🎨 Choose Your Academy's Identity!</h2>
|
|
<p style="font-size: 16px; line-height: 1.6; color: #ccc;">Each color scheme creates a completely different atmosphere for your training academy. Consider what mood and personality best fits your vision:</p>
|
|
<ul style="text-align: left; max-width: 600px; margin: 20px auto; color: #bbb;">
|
|
<li><strong>A - Pink/Orange:</strong> High-energy gaming excitement</li>
|
|
<li><strong>B - Blue/Cyan:</strong> Professional tech sophistication</li>
|
|
<li><strong>C - Purple/Violet:</strong> Luxurious premium experience</li>
|
|
<li><strong>D - Green/Lime:</strong> Matrix-style digital simulation</li>
|
|
<li><strong>E - Red/Crimson:</strong> Bold commanding intensity</li>
|
|
<li><strong>F - Gold/Amber:</strong> Elite achievement-focused</li>
|
|
</ul>
|
|
<p style="margin-top: 20px;"><strong>Just tell me which letter you prefer!</strong></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |