573 lines
21 KiB
HTML
573 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Color Palette Template - Review</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #0a0a0a;
|
|
color: #fff;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
font-size: 2.5rem;
|
|
background: linear-gradient(135deg, #8386f5, #ff124f);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.palette-section {
|
|
margin-bottom: 60px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.palette-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.palette-title {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.palette-number {
|
|
font-size: 1rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.color-card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.color-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.color-swatch {
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.color-swatch::after {
|
|
content: 'Click to copy';
|
|
position: absolute;
|
|
bottom: 10px;
|
|
font-size: 0.75rem;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.color-swatch:hover::after {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.color-info {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 15px;
|
|
}
|
|
|
|
.color-name {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.color-hex {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.85rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.color-usage {
|
|
font-size: 0.75rem;
|
|
margin-top: 8px;
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
.preview-section {
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
border: 2px solid;
|
|
}
|
|
|
|
.preview-title {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.preview-elements {
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border: 2px solid;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: #1afe49;
|
|
color: #041348;
|
|
padding: 15px 25px;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.variable-table {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.variable-table th,
|
|
.variable-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.variable-table th {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.variable-table code {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toast" class="toast">Color copied to clipboard!</div>
|
|
|
|
<div class="container">
|
|
<h1>🎨 Cyberpunk Color Palette Collection</h1>
|
|
|
|
<!-- PALETTE 1: Electric Violet -->
|
|
<div class="palette-section">
|
|
<div class="palette-header">
|
|
<div>
|
|
<div class="palette-title" style="color: #8386f5;">Electric Violet</div>
|
|
<div class="palette-number">Palette 01</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-grid">
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #8386f5;" onclick="copyColor('#8386f5')">
|
|
<span>#8386F5</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Light Violet</div>
|
|
<div class="color-hex">#8386F5</div>
|
|
<div class="color-usage">Primary accent, highlights</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #3d43b4;" onclick="copyColor('#3d43b4')">
|
|
<span>#3D43B4</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Deep Violet</div>
|
|
<div class="color-hex">#3D43B4</div>
|
|
<div class="color-usage">Secondary accent, buttons</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #041348;" onclick="copyColor('#041348')">
|
|
<span style="color: #8386f5;">#041348</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Midnight Blue</div>
|
|
<div class="color-hex">#041348</div>
|
|
<div class="color-usage">Background dark, containers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #083e12;" onclick="copyColor('#083e12')">
|
|
<span style="color: #1afe49;">#083E12</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Dark Forest</div>
|
|
<div class="color-hex">#083E12</div>
|
|
<div class="color-usage">Success states, dark accents</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #1afe49;" onclick="copyColor('#1afe49')">
|
|
<span style="color: #041348;">#1AFE49</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Neon Green</div>
|
|
<div class="color-hex">#1AFE49</div>
|
|
<div class="color-usage">Success, active states, CTAs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="variable-table">
|
|
<thead>
|
|
<tr>
|
|
<th>CSS Variable</th>
|
|
<th>Value</th>
|
|
<th>Usage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>--color-primary</code></td>
|
|
<td><code>#8386f5</code></td>
|
|
<td>Main brand color, primary UI elements</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-secondary</code></td>
|
|
<td><code>#3d43b4</code></td>
|
|
<td>Secondary accents, hover states</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--bg-primary</code></td>
|
|
<td><code>#041348</code></td>
|
|
<td>Main background color</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-success</code></td>
|
|
<td><code>#1afe49</code></td>
|
|
<td>Success messages, confirmations</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--bg-success-dark</code></td>
|
|
<td><code>#083e12</code></td>
|
|
<td>Success state backgrounds</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="preview-section" style="background: linear-gradient(135deg, #041348, #083e12); border-color: #8386f5;">
|
|
<div class="preview-title" style="color: #8386f5;">Preview Components</div>
|
|
<div class="preview-elements">
|
|
<button class="btn" style="border-color: #8386f5; color: #8386f5;">Primary Button</button>
|
|
<button class="btn" style="border-color: #3d43b4; color: #3d43b4;">Secondary Button</button>
|
|
<button class="btn" style="background: #1afe49; border-color: #1afe49; color: #041348;">Success Button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PALETTE 2: Magenta Dream -->
|
|
<div class="palette-section">
|
|
<div class="palette-header">
|
|
<div>
|
|
<div class="palette-title" style="color: #f887ff;">Magenta Dream</div>
|
|
<div class="palette-number">Palette 02</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-grid">
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #f887ff;" onclick="copyColor('#f887ff')">
|
|
<span style="color: #321450;">#F887FF</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Light Magenta</div>
|
|
<div class="color-hex">#F887FF</div>
|
|
<div class="color-usage">Primary accent, highlights</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #de004e;" onclick="copyColor('#de004e')">
|
|
<span>#DE004E</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Deep Rose</div>
|
|
<div class="color-hex">#DE004E</div>
|
|
<div class="color-usage">Secondary accent, warnings</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #860029;" onclick="copyColor('#860029')">
|
|
<span>#860029</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Dark Crimson</div>
|
|
<div class="color-hex">#860029</div>
|
|
<div class="color-usage">Error states, danger</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #321450;" onclick="copyColor('#321450')">
|
|
<span style="color: #f887ff;">#321450</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Deep Purple</div>
|
|
<div class="color-hex">#321450</div>
|
|
<div class="color-usage">Background, containers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #29132e;" onclick="copyColor('#29132e')">
|
|
<span style="color: #f887ff;">#29132E</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Void Purple</div>
|
|
<div class="color-hex">#29132E</div>
|
|
<div class="color-usage">Dark backgrounds, overlays</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="variable-table">
|
|
<thead>
|
|
<tr>
|
|
<th>CSS Variable</th>
|
|
<th>Value</th>
|
|
<th>Usage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>--color-primary</code></td>
|
|
<td><code>#f887ff</code></td>
|
|
<td>Main brand color, primary UI elements</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-secondary</code></td>
|
|
<td><code>#de004e</code></td>
|
|
<td>Secondary accents, hover states</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--bg-primary</code></td>
|
|
<td><code>#29132e</code></td>
|
|
<td>Main background color</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--bg-secondary</code></td>
|
|
<td><code>#321450</code></td>
|
|
<td>Card backgrounds, containers</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-danger</code></td>
|
|
<td><code>#860029</code></td>
|
|
<td>Error messages, danger states</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="preview-section" style="background: linear-gradient(135deg, #29132e, #321450); border-color: #f887ff;">
|
|
<div class="preview-title" style="color: #f887ff;">Preview Components</div>
|
|
<div class="preview-elements">
|
|
<button class="btn" style="border-color: #f887ff; color: #f887ff;">Primary Button</button>
|
|
<button class="btn" style="border-color: #de004e; color: #de004e;">Secondary Button</button>
|
|
<button class="btn" style="background: #860029; border-color: #860029; color: #fff;">Danger Button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PALETTE 3: Hot Pink Fury -->
|
|
<div class="palette-section">
|
|
<div class="palette-header">
|
|
<div>
|
|
<div class="palette-title" style="color: #ff124f;">Hot Pink Fury</div>
|
|
<div class="palette-number">Palette 03</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-grid">
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #ff124f;" onclick="copyColor('#ff124f')">
|
|
<span>#FF124F</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Hot Pink</div>
|
|
<div class="color-hex">#FF124F</div>
|
|
<div class="color-usage">Primary accent, CTAs</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #ff00a0;" onclick="copyColor('#ff00a0')">
|
|
<span>#FF00A0</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Neon Magenta</div>
|
|
<div class="color-hex">#FF00A0</div>
|
|
<div class="color-usage">Secondary accent, highlights</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #fe75fe;" onclick="copyColor('#fe75fe')">
|
|
<span style="color: #120458;">#FE75FE</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Light Pink</div>
|
|
<div class="color-hex">#FE75FE</div>
|
|
<div class="color-usage">Soft accents, hover states</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #7a04eb;" onclick="copyColor('#7a04eb')">
|
|
<span>#7A04EB</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Electric Purple</div>
|
|
<div class="color-hex">#7A04EB</div>
|
|
<div class="color-usage">Tertiary accent, borders</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: #120458;" onclick="copyColor('#120458')">
|
|
<span style="color: #fe75fe;">#120458</span>
|
|
</div>
|
|
<div class="color-info">
|
|
<div class="color-name">Deep Void</div>
|
|
<div class="color-hex">#120458</div>
|
|
<div class="color-usage">Background, dark areas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="variable-table">
|
|
<thead>
|
|
<tr>
|
|
<th>CSS Variable</th>
|
|
<th>Value</th>
|
|
<th>Usage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>--color-primary</code></td>
|
|
<td><code>#ff124f</code></td>
|
|
<td>Main brand color, primary UI elements</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-secondary</code></td>
|
|
<td><code>#ff00a0</code></td>
|
|
<td>Secondary accents, active states</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-tertiary</code></td>
|
|
<td><code>#7a04eb</code></td>
|
|
<td>Tertiary accents, borders</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--bg-primary</code></td>
|
|
<td><code>#120458</code></td>
|
|
<td>Main background color</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--color-accent-light</code></td>
|
|
<td><code>#fe75fe</code></td>
|
|
<td>Light highlights, subtle accents</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="preview-section" style="background: linear-gradient(135deg, #120458, #7a04eb); border-color: #ff124f;">
|
|
<div class="preview-title" style="color: #ff124f;">Preview Components</div>
|
|
<div class="preview-elements">
|
|
<button class="btn" style="border-color: #ff124f; color: #ff124f;">Primary Button</button>
|
|
<button class="btn" style="border-color: #ff00a0; color: #ff00a0;">Secondary Button</button>
|
|
<button class="btn" style="background: #7a04eb; border-color: #7a04eb; color: #fff;">Tertiary Button</button>
|
|
<button class="btn" style="border-color: #fe75fe; color: #fe75fe;">Soft Button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function copyColor(color) {
|
|
navigator.clipboard.writeText(color).then(() => {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = `${color} copied to clipboard!`;
|
|
toast.classList.add('show');
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
}, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |