updated unified color palette and changed to a theme selector
This commit is contained in:
dilgenfritz
parent
e9fbb2b427
commit
616237c642
|
|
@ -0,0 +1,573 @@
|
|||
<!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>
|
||||
|
|
@ -144,3 +144,60 @@
|
|||
- Dark backgrounds: `rgba(0, 0, 0, 0.7-0.9)`
|
||||
- Text: `#ffffff`, `#e8e8e8`, `#ecf0f1`
|
||||
- Borders: Various with `rgba` transparency
|
||||
|
||||
- color palette 1
|
||||
#8386f5
|
||||
#3d43b4
|
||||
#041348
|
||||
#083e12
|
||||
#1afe49
|
||||
|
||||
- color palette 2
|
||||
#f887ff
|
||||
#de004e
|
||||
#860029
|
||||
#321450
|
||||
#29132e
|
||||
|
||||
- color palette 3
|
||||
#ff124f
|
||||
#ff00a0
|
||||
#fe75fe
|
||||
#7a04eb
|
||||
#120458
|
||||
|
||||
- color palette 4
|
||||
#7700a6
|
||||
#fe00fe
|
||||
#defe47
|
||||
#00b3fe
|
||||
#0016ee
|
||||
|
||||
- color palette 5
|
||||
#ff2a6d
|
||||
#f70e0eff
|
||||
#aa477eff
|
||||
#005678
|
||||
#01012b
|
||||
|
||||
- color palette 6
|
||||
#fff69f
|
||||
#fdd870
|
||||
#d0902f
|
||||
#a15501
|
||||
#351409
|
||||
|
||||
- color palette 7
|
||||
#b0acb0
|
||||
#e2dddf
|
||||
#85ebd9
|
||||
#3d898d
|
||||
#2f404d
|
||||
|
||||
- color palette 8
|
||||
#ff184c
|
||||
#ff577d
|
||||
#ffccdc
|
||||
#0a9cf5
|
||||
#003062
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
129
index.html
129
index.html
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file: blob: http://localhost:* https:; connect-src 'self' http://localhost:* https: ws://localhost:*; img-src 'self' data: file: blob:; media-src 'self' data: file: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:;">
|
||||
<title>Gooner Training Academy - Master Your Dedication</title>
|
||||
<link rel="stylesheet" href="src/styles/color-variables.css">
|
||||
<link rel="stylesheet" href="src/styles/styles.css">
|
||||
<link rel="stylesheet" href="src/styles/base-video-player.css">
|
||||
<link rel="stylesheet" href="src/styles/overlay-video-player.css">
|
||||
|
|
@ -12,20 +13,20 @@
|
|||
<style>
|
||||
/* Verification Photo Styles */
|
||||
.verification-photo-info {
|
||||
border-left: 4px solid #ff6b6b;
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border-left: 4px solid var(--color-error);
|
||||
background: var(--bg-primary-overlay-10);
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.verification-type {
|
||||
color: #ff6b6b;
|
||||
color: var(--color-error);
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.verification-message {
|
||||
color: #ff4757;
|
||||
color: var(--color-error);
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
margin: 4px 0;
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
}
|
||||
|
||||
.verification-timestamp {
|
||||
color: #666;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -51,21 +52,21 @@
|
|||
}
|
||||
|
||||
.verification-message-display {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid #ff6b6b;
|
||||
background: var(--bg-primary-overlay-10);
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.verification-message-display h4 {
|
||||
color: #ff6b6b;
|
||||
color: var(--color-error);
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.verification-message-display p {
|
||||
color: #ff4757;
|
||||
color: var(--color-error);
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
|
|
@ -74,30 +75,30 @@
|
|||
|
||||
/* Gallery Verification Photo Styles */
|
||||
.verification-photo-item {
|
||||
border: 2px solid #ff6b6b;
|
||||
border: 2px solid var(--color-error);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
background: var(--bg-primary-overlay-10);
|
||||
}
|
||||
|
||||
.verification-photo-container {
|
||||
background: rgba(255, 107, 107, 0.05);
|
||||
background: var(--bg-primary-overlay-10);
|
||||
}
|
||||
|
||||
.verification-photo-info {
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
border-top: 1px solid #ff6b6b;
|
||||
background: var(--bg-primary-overlay-20);
|
||||
border-top: 1px solid var(--color-error);
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.verification-photo-info .photo-type {
|
||||
color: #ff6b6b;
|
||||
color: var(--color-error);
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.verification-photo-info .verification-message {
|
||||
display: block;
|
||||
color: #ff4757;
|
||||
color: var(--color-error);
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
margin-top: 4px;
|
||||
|
|
@ -107,8 +108,8 @@
|
|||
}
|
||||
|
||||
.verification-photo-select:checked + .checkbox-label {
|
||||
background-color: #ff6b6b;
|
||||
border-color: #ff6b6b;
|
||||
background-color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
</style>
|
||||
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js" crossorigin="anonymous"></script>
|
||||
|
|
@ -370,9 +371,9 @@
|
|||
<div class="options-section">
|
||||
<button id="options-menu-btn" class="btn btn-tertiary">⚙️ Options</button>
|
||||
<div id="options-menu" class="options-menu" style="display: none;">
|
||||
<!-- Theme Selector -->
|
||||
<!-- Image Theme Selector -->
|
||||
<div class="option-item theme-selector">
|
||||
<label for="theme-dropdown" class="option-label">Choose Your Theme:</label>
|
||||
<label for="theme-dropdown" class="option-label">Choose Your Image Theme:</label>
|
||||
<select id="theme-dropdown" class="theme-dropdown">
|
||||
<option value="hentai" selected>🎭 Hentai</option>
|
||||
<option value="pornstars">⭐ Pornstars</option>
|
||||
|
|
@ -382,6 +383,22 @@
|
|||
<option value="none">🚫 None</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Color Theme Selector -->
|
||||
<div class="option-item theme-selector">
|
||||
<label for="color-theme-dropdown" class="option-label">🎨 Choose Your Color Theme:</label>
|
||||
<select id="color-theme-dropdown" class="theme-dropdown">
|
||||
<option value="electric-blue">⚡ Electric Blue</option>
|
||||
<option value="electric-violet">💜 Electric Violet</option>
|
||||
<option value="magenta-dream">💖 Magenta Dream</option>
|
||||
<option value="hot-pink-fury">🔥 Hot Pink Fury</option>
|
||||
<option value="purple-neon-dream">🌈 Purple Neon Dream</option>
|
||||
<option value="crimson-passion">❤️ Crimson Passion</option>
|
||||
<option value="golden-ember">✨ Golden Ember</option>
|
||||
<option value="aqua-mist">🌊 Aqua Mist</option>
|
||||
<option value="coral-blaze">🔴 Coral Blaze</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Debug Controls -->
|
||||
<div class="option-item debug-controls">
|
||||
|
|
@ -622,12 +639,12 @@
|
|||
<!-- Upload Section -->
|
||||
<div class="upload-section">
|
||||
<h3>🎥 Video Library Management</h3>
|
||||
<p style="color: #ccc; font-size: 12px; margin-bottom: 15px;">
|
||||
<p style="color: var(--text-dim); font-size: 12px; margin-bottom: 15px;">
|
||||
Link external directories to build your video library. All videos are scanned recursively (including subdirectories).
|
||||
</p>
|
||||
|
||||
<!-- Directory Management Section -->
|
||||
<div class="directory-management-section" style="margin-bottom: 20px; padding: 15px; background: #2a2a3a; border-radius: 8px;">
|
||||
<div class="directory-management-section" style="margin-bottom: 20px; padding: 15px; background: var(--bg-secondary); border-radius: 8px;">
|
||||
<h4><EFBFBD> Linked Directories</h4>
|
||||
<div class="directory-controls" style="margin-bottom: 15px;">
|
||||
<button id="add-video-directory-btn" class="btn btn-primary">➕ Add Directory</button>
|
||||
|
|
@ -640,9 +657,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Video Count Display -->
|
||||
<div class="video-stats-section" style="padding: 10px; background: #1a1a2a; border-radius: 4px; text-align: center;">
|
||||
<div class="video-stats-section" style="padding: 10px; background: var(--bg-tertiary); border-radius: 4px; text-align: center;">
|
||||
<strong id="total-video-count">0 videos total</strong>
|
||||
<span id="directory-count" style="color: #aaa; margin-left: 10px;">0 directories linked</span>
|
||||
<span id="directory-count" style="color: var(--text-muted); margin-left: 10px;">0 directories linked</span>
|
||||
</div>
|
||||
<div class="upload-info desktop-feature">
|
||||
<span>💻 Desktop: Native file dialogs • Supports MP4, WebM, OGV, MOV formats</span>
|
||||
|
|
@ -1234,6 +1251,9 @@
|
|||
<!-- Backup System -->
|
||||
<script src="src/utils/backupManager.js"></script>
|
||||
|
||||
<!-- Theme Manager -->
|
||||
<script src="src/utils/themeManager.js"></script>
|
||||
|
||||
<!-- Legacy Data (will be phased out) -->
|
||||
<script src="src/data/gameData.js"></script>
|
||||
|
||||
|
|
@ -1951,7 +1971,7 @@
|
|||
|
||||
const modalContent = document.createElement('div');
|
||||
modalContent.style.cssText = `
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-secondary);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
max-width: 600px;
|
||||
|
|
@ -1988,6 +2008,19 @@
|
|||
await applyTheme(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize color theme dropdown
|
||||
const colorThemeDropdown = document.getElementById('color-theme-dropdown');
|
||||
if (colorThemeDropdown && window.themeManager) {
|
||||
// Load current theme
|
||||
const currentTheme = window.themeManager.getCurrentTheme();
|
||||
colorThemeDropdown.value = currentTheme;
|
||||
|
||||
// Handle color theme changes
|
||||
colorThemeDropdown.addEventListener('change', (e) => {
|
||||
window.themeManager.applyTheme(e.target.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Game Guide Toggle
|
||||
|
|
@ -2385,18 +2418,18 @@
|
|||
const directories = window.desktopFileManager.getDirectoriesInfo();
|
||||
|
||||
if (directories.length === 0) {
|
||||
listContainer.innerHTML = '<p style="color: #666; text-align: center; padding: 20px;">No directories linked yet. Click "Add Directory" to get started.</p>';
|
||||
listContainer.innerHTML = '<p style="color: var(--text-dim); text-align: center; padding: 20px;">No directories linked yet. Click "Add Directory" to get started.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
listContainer.innerHTML = directories.map(dir => `
|
||||
<div class="directory-item" style="display: flex; justify-content: space-between; align-items: center; padding: 8px; margin-bottom: 5px; background: #333; border-radius: 4px;">
|
||||
<div class="directory-item" style="display: flex; justify-content: space-between; align-items: center; padding: 8px; margin-bottom: 5px; background: var(--bg-tertiary); border-radius: 4px;">
|
||||
<div>
|
||||
<strong>${dir.name}</strong>
|
||||
<br><small style="color: #aaa;">${dir.path}</small>
|
||||
<br><small style="color: #888;">${dir.videoCount} videos</small>
|
||||
<br><small style="color: var(--text-muted);">${dir.path}</small>
|
||||
<br><small style="color: var(--text-dim);">${dir.videoCount} videos</small>
|
||||
</div>
|
||||
<button class="btn btn-small btn-outline" onclick="removeDirectory(${dir.id})" style="color: #ff6b6b;">Remove</button>
|
||||
<button class="btn btn-small btn-outline" onclick="removeDirectory(${dir.id})" style="color: var(--color-error);">Remove</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
|
@ -2450,8 +2483,8 @@
|
|||
<div class="video-details">
|
||||
<div class="video-title" title="${video.title}">${video.title}</div>
|
||||
<div class="video-meta">
|
||||
<small style="color: #888;">📁 ${video.directoryName || 'Unknown'}</small>
|
||||
${video.size ? `<small style="color: #888;"> • ${formatFileSize(video.size)}</small>` : ''}
|
||||
<small style="color: var(--text-dim);">📁 ${video.directoryName || 'Unknown'}</small>
|
||||
${video.size ? `<small style="color: var(--text-dim);"> • ${formatFileSize(video.size)}</small>` : ''}
|
||||
</div>
|
||||
<button class="btn btn-small" onclick="previewVideo('${video.url}', '${video.title}')" style="margin-top: 8px;">▶️ Preview</button>
|
||||
</div>
|
||||
|
|
@ -2464,7 +2497,7 @@
|
|||
return `
|
||||
<div class="video-item" data-video-index="${index}" data-video-name="${video.name}" data-video-url="${video.url}">
|
||||
<div class="video-thumbnail lazy-thumbnail" data-video-url="${video.url}" data-video-type="${video.type || 'video/mp4'}">
|
||||
<div class="thumbnail-placeholder" style="width: 100%; height: 100%; background: #333; display: flex; align-items: center; justify-content: center; color: #666;">
|
||||
<div class="thumbnail-placeholder" style="width: 100%; height: 100%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; color: var(--text-dim);">
|
||||
<span>🎬</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2473,10 +2506,10 @@
|
|||
<div class="video-details">
|
||||
<div class="video-title" title="${video.title}">${video.title}</div>
|
||||
<div class="video-meta">
|
||||
<small style="color: #888;">📁 ${video.directoryName || 'Unknown'}</small>
|
||||
${video.size ? `<small style="color: #888;"> • ${formatFileSize(video.size)}</small>` : ''}
|
||||
<small style="color: var(--text-dim);">📁 ${video.directoryName || 'Unknown'}</small>
|
||||
${video.size ? `<small style="color: var(--text-dim);"> • ${formatFileSize(video.size)}</small>` : ''}
|
||||
</div>
|
||||
<button class="btn btn-small" onclick="previewVideo('${video.url}', '${video.title}')" style="margin-top: 8px;background: linear-gradient(135deg, #4a90e2, #357abd) !important;color: #ffffff !important;border: 1px solidabd !important;">▶️ Preview</button>
|
||||
<button class="btn btn-small" onclick="previewVideo('${video.url}', '${video.title}')" style="margin-top: 8px;background: var(--color-primary) !important;color: #ffffff !important;border: 1px solid var(--color-primary) !important;">▶️ Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3242,7 +3275,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, #1a0033, #330066, #8a2be2);
|
||||
background: var(--color-background-gradient);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 3s ease infinite;
|
||||
display: flex;
|
||||
|
|
@ -4766,7 +4799,7 @@
|
|||
onmouseout="this.querySelector('.video-play-overlay').style.opacity='0'">
|
||||
${video.thumbnail ?
|
||||
`<img src="${video.thumbnail}" alt="Video Thumbnail" style="width: 100%; height: 120px; object-fit: cover; border-radius: 8px;">` :
|
||||
`<div style="width: 100%; height: 120px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff;">📹</div>`
|
||||
`<div style="width: 100%; height: 120px; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff;">📹</div>`
|
||||
}
|
||||
<div class="video-play-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; border-radius: 8px;">
|
||||
<div class="play-icon-small" style="color: white; font-size: 24px;">▶️</div>
|
||||
|
|
@ -5193,22 +5226,22 @@
|
|||
`;
|
||||
|
||||
overlay.innerHTML = `
|
||||
<div style="position: relative; max-width: 90%; max-height: 90%; padding: 20px; background: #222; border-radius: 10px; border: 2px solid #ff6b6b;">
|
||||
<div style="position: relative; max-width: 90%; max-height: 90%; padding: 20px; background: var(--bg-secondary); border-radius: 10px; border: 2px solid var(--color-error);">
|
||||
<div style="text-align: center; margin-bottom: 15px;">
|
||||
<h3 style="color: #ff6b6b; margin: 0 0 10px 0;">${title}</h3>
|
||||
<h3 style="color: var(--color-error); margin: 0 0 10px 0;">${title}</h3>
|
||||
<div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 10px;">
|
||||
<span style="color: #ff6b6b; font-weight: bold;">${photoType}</span>
|
||||
<span style="color: #999; font-size: 0.9em;">${photoDate}</span>
|
||||
<span style="color: var(--color-error); font-weight: bold;">${photoType}</span>
|
||||
<span style="color: var(--text-muted); font-size: 0.9em;">${photoDate}</span>
|
||||
</div>
|
||||
<div style="background: rgba(255, 107, 107, 0.1); border: 1px solid #ff6b6b; border-radius: 5px; padding: 10px; margin-bottom: 15px;">
|
||||
<h4 style="color: #ff6b6b; margin: 0 0 8px 0; font-size: 1.1em;">Degrading Message:</h4>
|
||||
<p style="color: #ff4757; font-style: italic; margin: 0; font-size: 1.1em;">"${message}"</p>
|
||||
<div style="background: var(--bg-primary-overlay-10); border: 1px solid var(--color-error); border-radius: 5px; padding: 10px; margin-bottom: 15px;">
|
||||
<h4 style="color: var(--color-error); margin: 0 0 8px 0; font-size: 1.1em;">Degrading Message:</h4>
|
||||
<p style="color: var(--color-error); font-style: italic; margin: 0; font-size: 1.1em;">"${message}"</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="${imageData}" alt="${title}"
|
||||
style="width: 100%; height: auto; max-width: 800px; max-height: 600px; object-fit: contain; border-radius: 5px;">
|
||||
<button onclick="this.parentElement.parentElement.remove()"
|
||||
style="position: absolute; top: 10px; right: 10px; background: #ff6b6b; border: none; color: white;
|
||||
style="position: absolute; top: 10px; right: 10px; background: var(--color-error); border: none; color: white;
|
||||
width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px;">✖</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -6686,7 +6719,7 @@
|
|||
infoElement.className = 'gallery-item info-item';
|
||||
infoElement.innerHTML = `
|
||||
<div class="video-thumbnail-container">
|
||||
<div class="video-fallback" style="display: flex; width: 100%; height: 150px; background: #2a2a2a; align-items: center; justify-content: center;">
|
||||
<div class="video-fallback" style="display: flex; width: 100%; height: 150px; background: var(--bg-secondary); align-items: center; justify-content: center;">
|
||||
<div class="video-icon" style="font-size: 2em;">📁</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6695,7 +6728,7 @@
|
|||
<div class="video-directory">Saved to: ${savedDirectory}</div>
|
||||
</div>
|
||||
<div class="video-actions" style="text-align: center; padding: 10px;">
|
||||
<small style="color: #888;">Recorded videos are saved to your selected directory.</small>
|
||||
<small style="color: var(--text-dim);">Recorded videos are saved to your selected directory.</small>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -87,7 +87,7 @@
|
|||
<p>Configure your session for optimal training</p>
|
||||
<div class="setup-instructions">
|
||||
<div class="instruction-box">
|
||||
<p style="margin: 0; color: #ccc; line-height: 1.6;">
|
||||
<p style="margin: 0; color: var(--text-muted); line-height: 1.6;">
|
||||
Quick Play offers a streamlined training experience with customizable tasks, multimedia enhancements, and progress tracking. Configure your session duration, choose which tasks to include, enable optional features like videos and messages, and start your session instantly. All settings can be saved as presets for future use.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -8009,7 +8009,7 @@
|
|||
}
|
||||
|
||||
.instruction-box {
|
||||
background: var(--bg-primary-overlay-10);
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), var(--bg-primary-overlay-20);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
|
|
@ -8226,8 +8226,9 @@
|
|||
|
||||
.time-preset.active, .difficulty-preset.active {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: 0 0 20px var(--color-primary-transparent);
|
||||
background: var(--bg-primary-overlay-20);
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.preset-value, .difficulty-name {
|
||||
|
|
@ -9913,7 +9914,7 @@
|
|||
/* Message Management Styles */
|
||||
.quick-play-message-management {
|
||||
display: none;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
|
||||
background: var(--color-background-gradient);
|
||||
min-height: 100vh;
|
||||
padding: 80px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -65,6 +65,9 @@
|
|||
--gradient-red: linear-gradient(135deg, var(--color-accent-red), var(--color-accent-red-dark));
|
||||
--gradient-dark: linear-gradient(135deg, #2c3e50, #34495e);
|
||||
|
||||
/* Page background gradient */
|
||||
--color-background-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -203,82 +206,210 @@
|
|||
|
||||
/* ===== THEME VARIANTS ===== */
|
||||
|
||||
/* Neon Pink Theme */
|
||||
[data-theme="neon-pink"] {
|
||||
--color-primary: #ff006e;
|
||||
--color-primary-dark: #cc0058;
|
||||
--color-primary-light: #ff3385;
|
||||
--color-secondary: #ff69b4;
|
||||
--color-secondary-dark: #ff1493;
|
||||
--color-secondary-light: #ffb6d9;
|
||||
--header-title-color: #ff006e;
|
||||
--header-border: #ff006e;
|
||||
--border-primary: #ff006e;
|
||||
--btn-primary-border: #ff006e;
|
||||
--shadow-glow-primary: 0 0 15px rgba(255, 0, 110, 0.4);
|
||||
--bg-primary-overlay-10: rgba(255, 0, 110, 0.1);
|
||||
--bg-primary-overlay-20: rgba(255, 0, 110, 0.2);
|
||||
/* Electric Violet Theme */
|
||||
[data-theme="electric-violet"] {
|
||||
--color-primary: #8386f5;
|
||||
--color-primary-dark: #3d43b4;
|
||||
--color-primary-light: #a5a8f7;
|
||||
--color-secondary: #1afe49;
|
||||
--color-secondary-dark: #083e12;
|
||||
--color-secondary-light: #4ffe75;
|
||||
--bg-primary: #041348;
|
||||
--bg-secondary: #041348;
|
||||
--bg-tertiary: #083e12;
|
||||
--header-title-color: #8386f5;
|
||||
--header-border: #8386f5;
|
||||
--border-primary: #8386f5;
|
||||
--btn-primary-border: #8386f5;
|
||||
--shadow-glow-primary: 0 0 15px rgba(131, 134, 245, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(26, 254, 73, 0.5);
|
||||
--bg-primary-overlay-10: rgba(131, 134, 245, 0.1);
|
||||
--bg-primary-overlay-20: rgba(131, 134, 245, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(26, 254, 73, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(26, 254, 73, 0.2);
|
||||
--color-success: #1afe49;
|
||||
--status-success: #1afe49;
|
||||
--color-background-gradient: linear-gradient(135deg, #041348 0%, #083e12 50%, #041348 100%);
|
||||
}
|
||||
|
||||
/* Deep Purple Theme */
|
||||
[data-theme="deep-purple"] {
|
||||
--color-primary: #9b59b6;
|
||||
--color-primary-dark: #8e44ad;
|
||||
--color-primary-light: #c29bd6;
|
||||
--color-secondary: #667eea;
|
||||
--color-secondary-dark: #5a6fd8;
|
||||
--color-secondary-light: #8fa4f1;
|
||||
--header-title-color: #9b59b6;
|
||||
--header-border: #9b59b6;
|
||||
--border-primary: #9b59b6;
|
||||
--btn-primary-border: #9b59b6;
|
||||
--shadow-glow-primary: 0 0 15px rgba(155, 89, 182, 0.4);
|
||||
--bg-primary-overlay-10: rgba(155, 89, 182, 0.1);
|
||||
--bg-primary-overlay-20: rgba(155, 89, 182, 0.2);
|
||||
/* Magenta Dream Theme */
|
||||
[data-theme="magenta-dream"] {
|
||||
--color-primary: #f887ff;
|
||||
--color-primary-dark: #de004e;
|
||||
--color-primary-light: #faa8ff;
|
||||
--color-secondary: #de004e;
|
||||
--color-secondary-dark: #860029;
|
||||
--color-secondary-light: #ff3378;
|
||||
--bg-primary: #29132e;
|
||||
--bg-secondary: #321450;
|
||||
--bg-tertiary: #29132e;
|
||||
--header-title-color: #f887ff;
|
||||
--header-border: #f887ff;
|
||||
--border-primary: #f887ff;
|
||||
--btn-primary-border: #f887ff;
|
||||
--shadow-glow-primary: 0 0 15px rgba(248, 135, 255, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(222, 0, 78, 0.5);
|
||||
--bg-primary-overlay-10: rgba(248, 135, 255, 0.1);
|
||||
--bg-primary-overlay-20: rgba(248, 135, 255, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(222, 0, 78, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(222, 0, 78, 0.2);
|
||||
--color-error: #860029;
|
||||
--color-accent-red: #860029;
|
||||
--status-error: #860029;
|
||||
--color-background-gradient: linear-gradient(135deg, #29132e 0%, #321450 50%, #29132e 100%);
|
||||
}
|
||||
|
||||
/* Matrix Green Theme */
|
||||
[data-theme="matrix-green"] {
|
||||
--color-primary: #00ff41;
|
||||
--color-primary-dark: #00cc33;
|
||||
--color-primary-light: #33ff66;
|
||||
--color-secondary: #00ff88;
|
||||
--color-secondary-dark: #00cc6a;
|
||||
--color-secondary-light: #33ffa0;
|
||||
--header-title-color: #00ff41;
|
||||
--header-border: #00ff41;
|
||||
--border-primary: #00ff41;
|
||||
--btn-primary-border: #00ff41;
|
||||
--shadow-glow-primary: 0 0 15px rgba(0, 255, 65, 0.4);
|
||||
--bg-primary-overlay-10: rgba(0, 255, 65, 0.1);
|
||||
--bg-primary-overlay-20: rgba(0, 255, 65, 0.2);
|
||||
/* Hot Pink Fury Theme */
|
||||
[data-theme="hot-pink-fury"] {
|
||||
--color-primary: #ff124f;
|
||||
--color-primary-dark: #ff00a0;
|
||||
--color-primary-light: #ff4575;
|
||||
--color-secondary: #7a04eb;
|
||||
--color-secondary-dark: #120458;
|
||||
--color-secondary-light: #a136ff;
|
||||
--bg-primary: #120458;
|
||||
--bg-secondary: #120458;
|
||||
--bg-tertiary: #7a04eb;
|
||||
--header-title-color: #ff124f;
|
||||
--header-border: #ff124f;
|
||||
--border-primary: #ff124f;
|
||||
--btn-primary-border: #ff124f;
|
||||
--shadow-glow-primary: 0 0 15px rgba(255, 18, 79, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(122, 4, 235, 0.5);
|
||||
--bg-primary-overlay-10: rgba(255, 18, 79, 0.1);
|
||||
--bg-primary-overlay-20: rgba(255, 18, 79, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(122, 4, 235, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(122, 4, 235, 0.2);
|
||||
--bg-secondary-overlay-30: rgba(122, 4, 235, 0.3);
|
||||
--color-accent-pink: #fe75fe;
|
||||
--color-background-gradient: linear-gradient(135deg, #120458 0%, #7a04eb 50%, #120458 100%);
|
||||
}
|
||||
|
||||
/* Blood Red Theme */
|
||||
[data-theme="blood-red"] {
|
||||
--color-primary: #e74c3c;
|
||||
--color-primary-dark: #c0392b;
|
||||
--color-primary-light: #ec7063;
|
||||
--color-secondary: #ff4757;
|
||||
--color-secondary-dark: #ee5a6f;
|
||||
--color-secondary-light: #ff6b81;
|
||||
--header-title-color: #e74c3c;
|
||||
--header-border: #e74c3c;
|
||||
--border-primary: #e74c3c;
|
||||
--btn-primary-border: #e74c3c;
|
||||
--shadow-glow-primary: 0 0 15px rgba(231, 76, 60, 0.4);
|
||||
--bg-primary-overlay-10: rgba(231, 76, 60, 0.1);
|
||||
--bg-primary-overlay-20: rgba(231, 76, 60, 0.2);
|
||||
/* Purple Neon Dream Theme */
|
||||
[data-theme="purple-neon-dream"] {
|
||||
--color-primary: #fe00fe;
|
||||
--color-primary-dark: #7700a6;
|
||||
--color-primary-light: #ff4dff;
|
||||
--color-secondary: #defe47;
|
||||
--color-secondary-dark: #00b3fe;
|
||||
--color-secondary-light: #f4ff85;
|
||||
--bg-primary: #0016ee;
|
||||
--bg-secondary: #7700a6;
|
||||
--bg-tertiary: #0016ee;
|
||||
--header-title-color: #fe00fe;
|
||||
--header-border: #fe00fe;
|
||||
--border-primary: #fe00fe;
|
||||
--btn-primary-border: #fe00fe;
|
||||
--shadow-glow-primary: 0 0 15px rgba(254, 0, 254, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(222, 254, 71, 0.5);
|
||||
--bg-primary-overlay-10: rgba(254, 0, 254, 0.1);
|
||||
--bg-primary-overlay-20: rgba(254, 0, 254, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(222, 254, 71, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(222, 254, 71, 0.2);
|
||||
--color-accent-blue: #00b3fe;
|
||||
--color-background-gradient: linear-gradient(135deg, #0016ee 0%, #7700a6 50%, #0016ee 100%);
|
||||
}
|
||||
|
||||
/* Electric Blue Theme */
|
||||
[data-theme="electric-blue"] {
|
||||
--color-primary: #00d4ff;
|
||||
--color-primary-dark: #00a3cc;
|
||||
--color-primary-light: #33ddff;
|
||||
--color-secondary: #3498db;
|
||||
--color-secondary-dark: #2980b9;
|
||||
--color-secondary-light: #5dade2;
|
||||
/* This is the default theme */
|
||||
/* Crimson Passion Theme */
|
||||
[data-theme="crimson-passion"] {
|
||||
--color-primary: #ff2a6d;
|
||||
--color-primary-dark: #f70e0e;
|
||||
--color-primary-light: #ff5c8a;
|
||||
--color-secondary: #aa477e;
|
||||
--color-secondary-dark: #005678;
|
||||
--color-secondary-light: #c96b9d;
|
||||
--bg-primary: #01012b;
|
||||
--bg-secondary: #005678;
|
||||
--bg-tertiary: #aa477e;
|
||||
--header-title-color: #ff2a6d;
|
||||
--header-border: #ff2a6d;
|
||||
--border-primary: #ff2a6d;
|
||||
--btn-primary-border: #ff2a6d;
|
||||
--shadow-glow-primary: 0 0 15px rgba(255, 42, 109, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(170, 71, 126, 0.5);
|
||||
--bg-primary-overlay-10: rgba(255, 42, 109, 0.1);
|
||||
--bg-primary-overlay-20: rgba(255, 42, 109, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(170, 71, 126, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(170, 71, 126, 0.2);
|
||||
--color-accent-red: #f70e0e;
|
||||
--color-background-gradient: linear-gradient(135deg, #01012b 0%, #005678 50%, #01012b 100%);
|
||||
}
|
||||
|
||||
/* Golden Ember Theme */
|
||||
[data-theme="golden-ember"] {
|
||||
--color-primary: #fdd870;
|
||||
--color-primary-dark: #d0902f;
|
||||
--color-primary-light: #fff69f;
|
||||
--color-secondary: #a15501;
|
||||
--color-secondary-dark: #351409;
|
||||
--color-secondary-light: #c97503;
|
||||
--bg-primary: #351409;
|
||||
--bg-secondary: #351409;
|
||||
--bg-tertiary: #a15501;
|
||||
--header-title-color: #fdd870;
|
||||
--header-border: #fdd870;
|
||||
--border-primary: #fdd870;
|
||||
--btn-primary-border: #fdd870;
|
||||
--shadow-glow-primary: 0 0 15px rgba(253, 216, 112, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(161, 85, 1, 0.5);
|
||||
--bg-primary-overlay-10: rgba(253, 216, 112, 0.1);
|
||||
--bg-primary-overlay-20: rgba(253, 216, 112, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(161, 85, 1, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(161, 85, 1, 0.2);
|
||||
--color-accent-gold: #fff69f;
|
||||
--color-warning: #d0902f;
|
||||
--color-background-gradient: linear-gradient(135deg, #351409 0%, #a15501 50%, #351409 100%);
|
||||
}
|
||||
|
||||
/* Aqua Mist Theme */
|
||||
[data-theme="aqua-mist"] {
|
||||
--color-primary: #85ebd9;
|
||||
--color-primary-dark: #3d898d;
|
||||
--color-primary-light: #a8f0e2;
|
||||
--color-secondary: #e2dddf;
|
||||
--color-secondary-dark: #b0acb0;
|
||||
--color-secondary-light: #f0ebed;
|
||||
--bg-primary: #2f404d;
|
||||
--bg-secondary: #3d898d;
|
||||
--bg-tertiary: #2f404d;
|
||||
--header-title-color: #85ebd9;
|
||||
--header-border: #85ebd9;
|
||||
--border-primary: #85ebd9;
|
||||
--btn-primary-border: #85ebd9;
|
||||
--shadow-glow-primary: 0 0 15px rgba(133, 235, 217, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(61, 137, 141, 0.5);
|
||||
--bg-primary-overlay-10: rgba(133, 235, 217, 0.1);
|
||||
--bg-primary-overlay-20: rgba(133, 235, 217, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(226, 221, 223, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(226, 221, 223, 0.2);
|
||||
--text-muted: #b0acb0;
|
||||
--color-background-gradient: linear-gradient(135deg, #2f404d 0%, #3d898d 50%, #2f404d 100%);
|
||||
}
|
||||
|
||||
/* Coral Blaze Theme */
|
||||
[data-theme="coral-blaze"] {
|
||||
--color-primary: #ff184c;
|
||||
--color-primary-dark: #003062;
|
||||
--color-primary-light: #ff577d;
|
||||
--color-secondary: #0a9cf5;
|
||||
--color-secondary-dark: #003062;
|
||||
--color-secondary-light: #5cb8f7;
|
||||
--bg-primary: #003062;
|
||||
--bg-secondary: #003062;
|
||||
--bg-tertiary: #0a9cf5;
|
||||
--header-title-color: #ff184c;
|
||||
--header-border: #ff184c;
|
||||
--border-primary: #ff184c;
|
||||
--btn-primary-border: #ff184c;
|
||||
--shadow-glow-primary: 0 0 15px rgba(255, 24, 76, 0.4);
|
||||
--shadow-glow-secondary: 0 0 20px rgba(10, 156, 245, 0.5);
|
||||
--bg-primary-overlay-10: rgba(255, 24, 76, 0.1);
|
||||
--bg-primary-overlay-20: rgba(255, 24, 76, 0.2);
|
||||
--bg-secondary-overlay-10: rgba(10, 156, 245, 0.1);
|
||||
--bg-secondary-overlay-20: rgba(10, 156, 245, 0.2);
|
||||
--color-accent-pink: #ffccdc;
|
||||
--color-accent-blue: #0a9cf5;
|
||||
--color-background-gradient: linear-gradient(135deg, #003062 0%, #0a9cf5 50%, #003062 100%);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ body.cinema-mode {
|
|||
}
|
||||
|
||||
.cinema-header {
|
||||
background: linear-gradient(135deg, #2a2a3a, #1e1e2e);
|
||||
border-bottom: 1px solid #404050;
|
||||
background: var(--color-background-gradient);
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -157,8 +157,8 @@ body.cinema-mode {
|
|||
|
||||
/* ===== RIGHT SIDEBAR ===== */
|
||||
.cinema-sidebar {
|
||||
background: linear-gradient(180deg, #1e1e2e, #2a2a3a);
|
||||
border-left: 1px solid #404050;
|
||||
background: var(--color-background-gradient);
|
||||
border-left: 1px solid var(--bg-tertiary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
|
@ -166,7 +166,7 @@ body.cinema-mode {
|
|||
|
||||
.sidebar-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #404050;
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
@ -175,7 +175,7 @@ body.cinema-mode {
|
|||
padding: 12px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a0a0a0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -207,7 +207,7 @@ body.cinema-mode {
|
|||
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #404050;
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +230,7 @@ body.cinema-mode {
|
|||
border-radius: 4px;
|
||||
background: var(--color-secondary-transparent);
|
||||
border: 1px solid var(--color-secondary-border);
|
||||
color: #e0e0e0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.playlist-controls .btn-mini:hover {
|
||||
|
|
@ -257,7 +257,7 @@ body.cinema-mode {
|
|||
|
||||
.playlist-empty {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
color: var(--text-dim);
|
||||
padding: 30px 10px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
|
|
@ -306,7 +306,7 @@ body.cinema-mode {
|
|||
}
|
||||
|
||||
.playlist-item-meta {
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -379,13 +379,13 @@ body.cinema-mode {
|
|||
|
||||
/* ===== PLAYLIST MODAL STYLES ===== */
|
||||
.playlist-modal-content {
|
||||
background: linear-gradient(135deg, #2a2a3a, #1e1e2e);
|
||||
background: var(--color-background-gradient);
|
||||
border-radius: 12px;
|
||||
max-width: 500px;
|
||||
width: 90vw;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
border: 1px solid #404050;
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -394,7 +394,7 @@ body.cinema-mode {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #404050;
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -128,16 +128,16 @@ body {
|
|||
@keyframes neonFlicker {
|
||||
0%, 18%, 22%, 25%, 53%, 57%, 100% {
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 80px #ff00ff,
|
||||
0 0 20px var(--color-primary),
|
||||
0 0 40px var(--color-primary),
|
||||
0 0 80px var(--color-primary),
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
20%, 24%, 55% {
|
||||
text-shadow:
|
||||
0 0 10px #ff00ff,
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 10px var(--color-primary),
|
||||
0 0 20px var(--color-primary),
|
||||
0 0 40px var(--color-primary),
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
|
@ -145,22 +145,22 @@ body {
|
|||
@keyframes textGlow {
|
||||
from {
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 20px var(--color-primary),
|
||||
0 0 40px var(--color-primary),
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
to {
|
||||
text-shadow:
|
||||
0 0 30px #ff00ff,
|
||||
0 0 60px #ff00ff,
|
||||
0 0 90px #ff00ff,
|
||||
0 0 30px var(--color-primary),
|
||||
0 0 60px var(--color-primary),
|
||||
0 0 90px var(--color-primary),
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Hero Section */
|
||||
.hero-header {
|
||||
background: linear-gradient(45deg, #0a0015 0%, #1a0030 25%, #2d0060 50%, #1a0030 75%, #0a0015 100%);
|
||||
background: var(--color-background-gradient);
|
||||
padding: var(--space-xxl) var(--space-xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -187,7 +187,7 @@ body {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #00ffff, transparent);
|
||||
background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
|
||||
/* REMOVED: scanline animation - causing performance issues */
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -200,8 +200,8 @@ body {
|
|||
height: 120%;
|
||||
transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg);
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 0, 255, 0.15) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 0, 255, 0.15) 1px, transparent 1px);
|
||||
linear-gradient(var(--bg-primary-overlay-20) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--bg-primary-overlay-20) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
/* REMOVED: gridFloat animation for performance */
|
||||
z-index: 1;
|
||||
|
|
@ -271,10 +271,10 @@ body {
|
|||
font-family: 'Michroma', monospace;
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
font-weight: 400;
|
||||
color: #ff00ff;
|
||||
color: var(--color-primary);
|
||||
text-shadow:
|
||||
0 0 10px #ff00ff,
|
||||
0 0 20px #ff00ff;
|
||||
0 0 10px var(--color-primary),
|
||||
0 0 20px var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 8px;
|
||||
animation: neonFlicker 6s ease-in-out infinite, vhsGlitch 20s ease-in-out infinite;
|
||||
|
|
@ -302,8 +302,8 @@ body {
|
|||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 20px var(--color-primary),
|
||||
0 0 40px var(--color-primary),
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 6px;
|
||||
|
|
@ -315,12 +315,12 @@ body {
|
|||
.tagline-subtitle {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
color: #00ffff;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
text-shadow: 0 0 10px var(--color-secondary);
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
|
|
@ -331,9 +331,9 @@ body {
|
|||
}
|
||||
|
||||
.hero-feature {
|
||||
background: linear-gradient(135deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%);
|
||||
background: var(--bg-primary-overlay-10);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
|
||||
border-image: linear-gradient(45deg, var(--color-primary), var(--color-secondary)) 1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -343,9 +343,9 @@ body {
|
|||
|
||||
.hero-feature:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
border-image: linear-gradient(45deg, #ff00ff, #00ffff, #ff0080) 1;
|
||||
border-image: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-primary)) 1;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(255, 0, 255, 0.3),
|
||||
var(--shadow-glow-primary),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
|
@ -6813,28 +6813,28 @@ button#start-mirror-btn:disabled {
|
|||
}
|
||||
|
||||
.neon-edge.top {
|
||||
top: -2px;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
height: 8px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
animation: neon-flow-horizontal 3s linear infinite;
|
||||
}
|
||||
|
||||
.neon-edge.bottom {
|
||||
bottom: -2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
height: 8px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
animation: neon-flow-horizontal-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
.neon-edge.left {
|
||||
left: -2px;
|
||||
left: -4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
width: 8px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: linear-gradient(0deg,
|
||||
rgba(0, 255, 255, 0.8) 0%,
|
||||
|
|
@ -6847,10 +6847,10 @@ button#start-mirror-btn:disabled {
|
|||
}
|
||||
|
||||
.neon-edge.right {
|
||||
right: -2px;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
width: 8px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: linear-gradient(0deg,
|
||||
rgba(0, 255, 255, 0.8) 0%,
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@ class ThemeManager {
|
|||
this.defaultTheme = 'electric-blue';
|
||||
this.availableThemes = [
|
||||
{ id: 'electric-blue', name: 'Electric Blue', emoji: '⚡' },
|
||||
{ id: 'neon-pink', name: 'Neon Pink', emoji: '💖' },
|
||||
{ id: 'deep-purple', name: 'Deep Purple', emoji: '🔮' },
|
||||
{ id: 'matrix-green', name: 'Matrix Green', emoji: '💚' },
|
||||
{ id: 'blood-red', name: 'Blood Red', emoji: '🔴' }
|
||||
{ id: 'electric-violet', name: 'Electric Violet', emoji: '💜' },
|
||||
{ id: 'magenta-dream', name: 'Magenta Dream', emoji: '💖' },
|
||||
{ id: 'hot-pink-fury', name: 'Hot Pink Fury', emoji: '🔥' },
|
||||
{ id: 'purple-neon-dream', name: 'Purple Neon Dream', emoji: '🌈' },
|
||||
{ id: 'crimson-passion', name: 'Crimson Passion', emoji: '❤️' },
|
||||
{ id: 'golden-ember', name: 'Golden Ember', emoji: '✨' },
|
||||
{ id: 'aqua-mist', name: 'Aqua Mist', emoji: '🌊' },
|
||||
{ id: 'coral-blaze', name: 'Coral Blaze', emoji: '🔴' }
|
||||
];
|
||||
|
||||
this.init();
|
||||
|
|
|
|||
Loading…
Reference in New Issue