progress
This commit is contained in:
IndyDevDan
parent
f0e0b44b1c
commit
3e98c89590
|
|
@ -0,0 +1,69 @@
|
|||
# Infinite Agentic Loop POC
|
||||
|
||||
An experimental project demonstrating infinite agentic loop in a two prompt system using Claude Code.
|
||||
|
||||
## Overview
|
||||
|
||||
This project uses a custom Claude Code slash command (`/project:infinite`) to orchestrate multiple AI agents in parallel, generating evolving iterations of content based on specifications.
|
||||
|
||||
## Usage
|
||||
|
||||
Read `.claude/settings.json` to see the permissions and commands allowed.
|
||||
|
||||
Start Claude Code: `claude`
|
||||
|
||||
Type slash command `/project:infinite` to start the infinite agentic loop.
|
||||
|
||||
The infinite command takes three arguments:
|
||||
```
|
||||
/project:infinite <spec_file> <output_dir> <count>
|
||||
```
|
||||
|
||||
### 4 Command Variants
|
||||
|
||||
#### 1. Single Generation
|
||||
```bash
|
||||
/project:infinite specs/invent_new_ui_v3.md src 1
|
||||
```
|
||||
Generate one new iteration using the UI specification.
|
||||
|
||||
#### 2. Small Batch (5 iterations)
|
||||
```bash
|
||||
/project:infinite specs/invent_new_ui_v3.md src_new 5
|
||||
```
|
||||
Deploy 5 parallel agents to generate 5 unique iterations simultaneously.
|
||||
|
||||
#### 3. Large Batch (20 iterations)
|
||||
```bash
|
||||
/project:infinite specs/invent_new_ui_v3.md src_new 20
|
||||
```
|
||||
Generate 20 iterations in coordinated batches of 5 agents for optimal resource management.
|
||||
|
||||
#### 4. Infinite Mode
|
||||
```bash
|
||||
/project:infinite specs/invent_new_ui_v3.md infinite_src_new/ infinite
|
||||
```
|
||||
Continuous generation in waves until context limits are reached, with progressive sophistication.
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Specification Analysis**: Reads and understands the spec file requirements
|
||||
2. **Directory Reconnaissance**: Analyzes existing iterations to determine starting point
|
||||
3. **Parallel Coordination**: Deploys Sub Agents with unique creative directions
|
||||
4. **Quality Assurance**: Ensures each iteration is unique and spec-compliant
|
||||
5. **Wave Management**: For infinite mode, manages successive waves of agents
|
||||
|
||||
## File Structure
|
||||
|
||||
- `ai_docs/` - Claude Code documentation
|
||||
- `specs/` - Markdown specification files defining generation requirements
|
||||
- `.claude/commands/infinite.md` - The custom slash command implementation
|
||||
- `.claude/commands/prime.md` - Setup claude code for the project
|
||||
|
||||
## Requirements
|
||||
|
||||
- Claude Code
|
||||
- Project with `.claude/commands/` directory structure
|
||||
- Specification files in markdown format in `specs/`
|
||||
|
||||
This experimental approach demonstrates advanced AI coordination patterns for scalable content generation.
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
# Themed Hybrid UI Component Specification
|
||||
|
||||
## Core Challenge
|
||||
Create a **uniquely themed UI component** that combines multiple existing UI elements into one elegant solution. Apply a distinctive design language while solving multiple interface problems in a single, cohesive component - achieving "two birds with one stone" efficiency.
|
||||
Create a **uniquely themed UI component** that combines multiple existing UI elements into one elegant solution.
|
||||
|
||||
Apply a distinctive design language while solving multiple interface problems in a single, cohesive component - achieving "two birds with one stone" efficiency.
|
||||
|
||||
## Output Requirements
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,868 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Playful Animation Content Card</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@400;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background: linear-gradient(135deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FECA57);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 8s ease infinite;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
margin-bottom: 3rem;
|
||||
animation: bounce 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% { transform: translateY(0px); }
|
||||
100% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 25px;
|
||||
padding: 2rem;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0,0,0,0.1),
|
||||
0 0 0 1px rgba(255,255,255,0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: perspective(1000px) rotateX(2deg);
|
||||
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.hybrid-component:hover {
|
||||
transform: perspective(1000px) rotateX(0deg) translateY(-10px);
|
||||
box-shadow:
|
||||
0 30px 60px rgba(0,0,0,0.15),
|
||||
0 0 0 1px rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.content-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 3px solid #FF6B6B;
|
||||
border-image: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1) 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
font-size: 1.8rem;
|
||||
color: #2C3E50;
|
||||
animation: wiggle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(1deg); }
|
||||
75% { transform: rotate(-1deg); }
|
||||
}
|
||||
|
||||
.favorite-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.favorite-btn:hover {
|
||||
animation: heartBeat 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.favorite-btn.favorited {
|
||||
color: #FF6B6B;
|
||||
animation: favoriteExplosion 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes heartBeat {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
}
|
||||
|
||||
@keyframes favoriteExplosion {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.5) rotate(10deg); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-preview::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 20%, transparent 21%);
|
||||
background-size: 30px 30px;
|
||||
animation: floatPattern 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes floatPattern {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(30px, 30px); }
|
||||
}
|
||||
|
||||
.content-preview:hover {
|
||||
transform: scale(1.05) rotateZ(1deg);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
animation: colorShift 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes colorShift {
|
||||
0%, 100% { color: #fff; }
|
||||
33% { color: #FFE066; }
|
||||
66% { color: #FF6B6B; }
|
||||
}
|
||||
|
||||
.preview-description {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.metadata-item {
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.metadata-item:nth-child(1) { animation-delay: 0s; }
|
||||
.metadata-item:nth-child(2) { animation-delay: 0.5s; }
|
||||
.metadata-item:nth-child(3) { animation-delay: 1s; }
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 25px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 50%;
|
||||
transition: all 0.5s ease;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.action-btn:hover::before {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-5px) scale(1.05);
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: translateY(-2px) scale(0.98);
|
||||
animation: squeeze 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes squeeze {
|
||||
0%, 100% { transform: scale(0.98); }
|
||||
50% { transform: scale(0.95); }
|
||||
}
|
||||
|
||||
.share-section {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.share-btn.twitter { background: linear-gradient(135deg, #1DA1F2, #0d8bd9); color: white; }
|
||||
.share-btn.facebook { background: linear-gradient(135deg, #4267B2, #365899); color: white; }
|
||||
.share-btn.linkedin { background: linear-gradient(135deg, #0077B5, #005885); color: white; }
|
||||
.share-btn.email { background: linear-gradient(135deg, #FF6B6B, #ee5a52); color: white; }
|
||||
|
||||
.share-btn:hover {
|
||||
transform: scale(1.2) rotateZ(10deg);
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.share-btn:active {
|
||||
animation: shareWiggle 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes shareWiggle {
|
||||
0%, 100% { transform: scale(1.2) rotateZ(10deg); }
|
||||
25% { transform: scale(1.3) rotateZ(-5deg); }
|
||||
75% { transform: scale(1.1) rotateZ(15deg); }
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 25px;
|
||||
padding: 3rem;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
transform: scale(0.5) rotateY(180deg);
|
||||
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal.active .modal-content {
|
||||
transform: scale(1) rotateY(0deg);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 3px solid #FF6B6B;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: 'Fredoka One', cursive;
|
||||
font-size: 2rem;
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: #FF6B6B;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
transform: scale(1.2) rotate(90deg);
|
||||
background: #ee5a52;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.bounce-in {
|
||||
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% { transform: scale(0.3); opacity: 0; }
|
||||
50% { transform: scale(1.05); }
|
||||
70% { transform: scale(0.9); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
h1 { font-size: 2rem; }
|
||||
.hybrid-component { padding: 1rem; margin: 0 1rem; }
|
||||
.action-buttons { flex-direction: column; }
|
||||
.action-btn { width: 100%; }
|
||||
.share-buttons { justify-content: center; }
|
||||
.card-title { font-size: 1.4rem; }
|
||||
}
|
||||
|
||||
/* Success/Error Messages */
|
||||
.message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
z-index: 2000;
|
||||
transform: translateX(400px);
|
||||
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.message.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background: linear-gradient(135deg, #96CEB4, #79a88a);
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: linear-gradient(135deg, #FF6B6B, #ee5a52);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Content Card - Playful Animation Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Amazing Adventure Story</h2>
|
||||
<button class="favorite-btn" id="favoriteBtn" aria-label="Add to favorites">🤍</button>
|
||||
</div>
|
||||
|
||||
<div class="content-preview" id="contentPreview">
|
||||
<div class="preview-content">
|
||||
<h3 class="preview-title">🎪 The Magical Carousel</h3>
|
||||
<p class="preview-description">
|
||||
Join Luna and her enchanted friends as they discover a mysterious carousel
|
||||
that comes to life at midnight, leading them on an extraordinary adventure
|
||||
through wonderland where dreams become reality...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metadata">
|
||||
<div class="metadata-item">📚 Fantasy</div>
|
||||
<div class="metadata-item">⏱️ 15 min read</div>
|
||||
<div class="metadata-item">⭐ 4.8/5</div>
|
||||
<div class="metadata-item">👥 1.2k readers</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn" id="readBtn">📖 Read Full Story</button>
|
||||
<button class="action-btn" id="previewBtn">👀 Quick Preview</button>
|
||||
<button class="action-btn" id="downloadBtn">💾 Download</button>
|
||||
<button class="action-btn" id="bookmarkBtn">🔖 Save for Later</button>
|
||||
</div>
|
||||
|
||||
<div class="share-section">
|
||||
<h3 class="share-title">🎉 Share the Magic!</h3>
|
||||
<div class="share-buttons">
|
||||
<button class="share-btn twitter" data-platform="twitter" aria-label="Share on Twitter">🐦</button>
|
||||
<button class="share-btn facebook" data-platform="facebook" aria-label="Share on Facebook">📘</button>
|
||||
<button class="share-btn linkedin" data-platform="linkedin" aria-label="Share on LinkedIn">💼</button>
|
||||
<button class="share-btn email" data-platform="email" aria-label="Share via Email">📧</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal" id="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modalTitle">Story Preview</h3>
|
||||
<button class="close-btn" id="closeBtn" aria-label="Close modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modalBody">
|
||||
<p>The old carousel stood silent in the moonlight, its painted horses frozen mid-gallop. Luna pressed her face against the cold iron gates of the abandoned amusement park, her breath forming small clouds in the chilly night air.</p>
|
||||
|
||||
<p>"They say it comes alive at midnight," whispered her friend Marcus, adjusting his glasses nervously. "My grandmother told me stories about children who rode the carousel and never came back... or came back changed."</p>
|
||||
|
||||
<p>Luna's eyes sparkled with curiosity rather than fear. She had always been drawn to mysteries, to the spaces between what was real and what was possible. As the clock tower in the distance began to chime twelve, something extraordinary happened...</p>
|
||||
|
||||
<p>The carousel began to glow with a soft, ethereal light. The painted horses started to move, their wooden bodies transforming into living, breathing creatures of starlight and dreams. Music filled the air - not the tinny mechanical tune of an old music box, but a symphony of wonder that seemed to come from the very heart of magic itself.</p>
|
||||
|
||||
<p><em>Click "Read Full Story" to continue this magical adventure and discover what happens when Luna and Marcus step through the gates into a world where anything is possible...</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Global state
|
||||
const state = {
|
||||
isFavorited: false,
|
||||
isShared: false,
|
||||
modalOpen: false
|
||||
};
|
||||
|
||||
// DOM elements
|
||||
const favoriteBtn = document.getElementById('favoriteBtn');
|
||||
const contentPreview = document.getElementById('contentPreview');
|
||||
const modal = document.getElementById('modal');
|
||||
const closeBtn = document.getElementById('closeBtn');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalBody = document.getElementById('modalBody');
|
||||
|
||||
// Action buttons
|
||||
const readBtn = document.getElementById('readBtn');
|
||||
const previewBtn = document.getElementById('previewBtn');
|
||||
const downloadBtn = document.getElementById('downloadBtn');
|
||||
const bookmarkBtn = document.getElementById('bookmarkBtn');
|
||||
|
||||
// Share buttons
|
||||
const shareButtons = document.querySelectorAll('.share-btn');
|
||||
|
||||
// Favorite functionality
|
||||
favoriteBtn.addEventListener('click', function() {
|
||||
state.isFavorited = !state.isFavorited;
|
||||
|
||||
if (state.isFavorited) {
|
||||
this.textContent = '❤️';
|
||||
this.classList.add('favorited');
|
||||
showMessage('Added to favorites! 💖', 'success');
|
||||
|
||||
// Create floating hearts effect
|
||||
createFloatingHearts();
|
||||
} else {
|
||||
this.textContent = '🤍';
|
||||
this.classList.remove('favorited');
|
||||
showMessage('Removed from favorites', 'error');
|
||||
}
|
||||
|
||||
// Add bounce animation
|
||||
this.classList.add('bounce-in');
|
||||
setTimeout(() => this.classList.remove('bounce-in'), 600);
|
||||
});
|
||||
|
||||
// Content preview click - open modal
|
||||
contentPreview.addEventListener('click', function() {
|
||||
openModal('Story Preview', modalBody.innerHTML);
|
||||
this.classList.add('bounce-in');
|
||||
setTimeout(() => this.classList.remove('bounce-in'), 600);
|
||||
});
|
||||
|
||||
// Action button functionality
|
||||
readBtn.addEventListener('click', function() {
|
||||
showMessage('Opening full story... 📖✨', 'success');
|
||||
addButtonBounce(this);
|
||||
|
||||
setTimeout(() => {
|
||||
openModal('The Magical Carousel - Full Story', `
|
||||
<div style="text-align: center; padding: 2rem;">
|
||||
<h3 style="color: #FF6B6B; font-family: 'Fredoka One', cursive; margin-bottom: 1rem;">🎪 Chapter 1: The Midnight Discovery</h3>
|
||||
<p>In a full version, you would read the complete magical adventure story here. This would include all chapters, beautiful illustrations, and interactive elements that bring the story to life!</p>
|
||||
<div style="margin-top: 2rem;">
|
||||
<button class="action-btn" onclick="showMessage('Feature coming soon! 🚀', 'success')" style="margin: 0.5rem;">📖 Continue Reading</button>
|
||||
<button class="action-btn" onclick="showMessage('Bookmarked! 📚', 'success')" style="margin: 0.5rem;">🔖 Bookmark Page</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
previewBtn.addEventListener('click', function() {
|
||||
showMessage('Loading preview... 👀✨', 'success');
|
||||
addButtonBounce(this);
|
||||
openModal('Quick Preview', modalBody.innerHTML);
|
||||
});
|
||||
|
||||
downloadBtn.addEventListener('click', function() {
|
||||
showMessage('Download started! 💾🎉', 'success');
|
||||
addButtonBounce(this);
|
||||
|
||||
// Simulate download
|
||||
setTimeout(() => {
|
||||
showMessage('Story downloaded successfully! 📚✨', 'success');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
bookmarkBtn.addEventListener('click', function() {
|
||||
showMessage('Saved for later! 🔖💫', 'success');
|
||||
addButtonBounce(this);
|
||||
|
||||
// Change button text temporarily
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '✅ Saved!';
|
||||
this.style.background = 'linear-gradient(135deg, #96CEB4, #79a88a)';
|
||||
|
||||
setTimeout(() => {
|
||||
this.textContent = originalText;
|
||||
this.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Share functionality
|
||||
shareButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const platform = this.dataset.platform;
|
||||
const title = 'Amazing Adventure Story - The Magical Carousel';
|
||||
const url = window.location.href;
|
||||
|
||||
addButtonBounce(this);
|
||||
|
||||
switch(platform) {
|
||||
case 'twitter':
|
||||
showMessage('Shared on Twitter! 🐦💙', 'success');
|
||||
// In real app: window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`);
|
||||
break;
|
||||
case 'facebook':
|
||||
showMessage('Shared on Facebook! 📘💙', 'success');
|
||||
// In real app: window.open(`https://facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`);
|
||||
break;
|
||||
case 'linkedin':
|
||||
showMessage('Shared on LinkedIn! 💼✨', 'success');
|
||||
// In real app: window.open(`https://linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`);
|
||||
break;
|
||||
case 'email':
|
||||
showMessage('Email composer opened! 📧💌', 'success');
|
||||
// In real app: window.location.href = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`;
|
||||
break;
|
||||
}
|
||||
|
||||
// Create share explosion effect
|
||||
createShareExplosion(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Modal functionality
|
||||
function openModal(title, content) {
|
||||
modalTitle.textContent = title;
|
||||
if (typeof content === 'string') {
|
||||
modalBody.innerHTML = content;
|
||||
}
|
||||
modal.classList.add('active');
|
||||
state.modalOpen = true;
|
||||
|
||||
// Prevent body scroll
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.classList.remove('active');
|
||||
state.modalOpen = false;
|
||||
|
||||
// Restore body scroll
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && state.modalOpen) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Utility functions
|
||||
function showMessage(text, type) {
|
||||
const message = document.createElement('div');
|
||||
message.className = `message ${type}`;
|
||||
message.textContent = text;
|
||||
document.body.appendChild(message);
|
||||
|
||||
setTimeout(() => message.classList.add('show'), 100);
|
||||
|
||||
setTimeout(() => {
|
||||
message.classList.remove('show');
|
||||
setTimeout(() => message.remove(), 500);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function addButtonBounce(button) {
|
||||
button.classList.add('bounce-in');
|
||||
setTimeout(() => button.classList.remove('bounce-in'), 600);
|
||||
}
|
||||
|
||||
function createFloatingHearts() {
|
||||
const hearts = ['💖', '💕', '💗', '💝', '❤️'];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
setTimeout(() => {
|
||||
const heart = document.createElement('div');
|
||||
heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
|
||||
heart.style.cssText = `
|
||||
position: fixed;
|
||||
font-size: 2rem;
|
||||
pointer-events: none;
|
||||
z-index: 3000;
|
||||
left: ${favoriteBtn.getBoundingClientRect().left + Math.random() * 100 - 50}px;
|
||||
top: ${favoriteBtn.getBoundingClientRect().top}px;
|
||||
animation: floatUp 2s ease-out forwards;
|
||||
`;
|
||||
|
||||
document.body.appendChild(heart);
|
||||
|
||||
setTimeout(() => heart.remove(), 2000);
|
||||
}, i * 200);
|
||||
}
|
||||
}
|
||||
|
||||
function createShareExplosion(button) {
|
||||
const emojis = ['✨', '🎉', '💫', '⭐', '🌟'];
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
setTimeout(() => {
|
||||
const emoji = document.createElement('div');
|
||||
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
emoji.style.cssText = `
|
||||
position: fixed;
|
||||
font-size: 1.5rem;
|
||||
pointer-events: none;
|
||||
z-index: 3000;
|
||||
left: ${button.getBoundingClientRect().left + button.offsetWidth / 2}px;
|
||||
top: ${button.getBoundingClientRect().top + button.offsetHeight / 2}px;
|
||||
animation: explode 1s ease-out forwards;
|
||||
transform-origin: center;
|
||||
`;
|
||||
|
||||
document.body.appendChild(emoji);
|
||||
|
||||
setTimeout(() => emoji.remove(), 1000);
|
||||
}, i * 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Add custom CSS animations
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes floatUp {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100px) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes explode {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.5) translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize with fun entrance animation
|
||||
window.addEventListener('load', function() {
|
||||
const component = document.querySelector('.hybrid-component');
|
||||
component.classList.add('bounce-in');
|
||||
|
||||
// Stagger animation for elements
|
||||
const elements = document.querySelectorAll('.metadata-item, .action-btn, .share-btn');
|
||||
elements.forEach((el, index) => {
|
||||
setTimeout(() => {
|
||||
el.classList.add('bounce-in');
|
||||
setTimeout(() => el.classList.remove('bounce-in'), 600);
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
|
||||
// Add playful hover sounds (visual feedback)
|
||||
document.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('mouseenter', function() {
|
||||
this.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
this.style.animation = '';
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
// Random playful elements
|
||||
setInterval(() => {
|
||||
const title = document.querySelector('.card-title');
|
||||
if (Math.random() < 0.1) { // 10% chance every interval
|
||||
title.classList.add('shake');
|
||||
setTimeout(() => title.classList.remove('shake'), 500);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
// Interactive cursor effects for enhanced playfulness
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (Math.random() < 0.002) { // Very rare sparkle effect
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.textContent = '✨';
|
||||
sparkle.style.cssText = `
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
left: ${e.clientX}px;
|
||||
top: ${e.clientY}px;
|
||||
font-size: 1rem;
|
||||
animation: fadeOut 1s ease-out forwards;
|
||||
`;
|
||||
document.body.appendChild(sparkle);
|
||||
setTimeout(() => sparkle.remove(), 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// Add fadeOut animation
|
||||
const fadeOutStyle = document.createElement('style');
|
||||
fadeOutStyle.textContent = `
|
||||
@keyframes fadeOut {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(2); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(fadeOutStyle);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,861 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Handcrafted Paper Media Player</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Caveat:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--paper-cream: #f4f1eb;
|
||||
--paper-white: #faf8f3;
|
||||
--paper-brown: #8b7355;
|
||||
--paper-sepia: #704214;
|
||||
--ink-blue: #2c3e50;
|
||||
--ink-black: #1a1a1a;
|
||||
--torn-shadow: rgba(139, 115, 85, 0.3);
|
||||
--paper-texture: linear-gradient(45deg, transparent 40%, rgba(139, 115, 85, 0.05) 50%, transparent 60%);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Kalam', cursive;
|
||||
background: linear-gradient(135deg, #e8ddc7 0%, #f4f1eb 50%, #ede4d3 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: var(--ink-black);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(139, 115, 85, 0.03) 1px, transparent 1px),
|
||||
radial-gradient(circle at 80% 80%, rgba(139, 115, 85, 0.03) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--paper-sepia);
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 2px 2px 4px rgba(139, 115, 85, 0.2);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
background: var(--paper-white);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(139, 115, 85, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
background-image: var(--paper-texture);
|
||||
transform: rotate(0.5deg);
|
||||
}
|
||||
|
||||
.hybrid-component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(139, 115, 85, 0.1) 50%, transparent 70%);
|
||||
border-radius: 25px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.media-player {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 30px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.main-player {
|
||||
background: var(--paper-cream);
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(139, 115, 85, 0.1),
|
||||
0 5px 15px rgba(139, 115, 85, 0.2);
|
||||
border: 3px solid var(--paper-brown);
|
||||
border-style: dashed;
|
||||
transform: rotate(-0.3deg);
|
||||
}
|
||||
|
||||
.now-playing {
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
padding: 20px;
|
||||
background: var(--paper-white);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(139, 115, 85, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.now-playing::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--paper-brown), var(--paper-sepia), var(--paper-brown));
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 1.8rem;
|
||||
color: var(--ink-blue);
|
||||
margin-bottom: 5px;
|
||||
transform: rotate(-0.2deg);
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 1rem;
|
||||
color: var(--paper-sepia);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.visualizer {
|
||||
height: 80px;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
background: var(--paper-cream);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visualizer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0px,
|
||||
rgba(139, 115, 85, 0.05) 1px,
|
||||
transparent 2px,
|
||||
transparent 10px
|
||||
);
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 6px;
|
||||
background: linear-gradient(to top, var(--paper-sepia), var(--paper-brown));
|
||||
border-radius: 3px 3px 0 0;
|
||||
transition: height 0.1s ease;
|
||||
position: relative;
|
||||
box-shadow: 0 -2px 4px rgba(139, 115, 85, 0.3);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--paper-brown);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-shadow: inset 0 2px 4px rgba(139, 115, 85, 0.3);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--paper-sepia), var(--ink-blue));
|
||||
border-radius: 4px;
|
||||
width: 35%;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--paper-white);
|
||||
border: 2px solid var(--paper-sepia);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(139, 115, 85, 0.4);
|
||||
}
|
||||
|
||||
.time-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
color: var(--paper-sepia);
|
||||
margin-top: 5px;
|
||||
font-family: 'Caveat', cursive;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--paper-white);
|
||||
color: var(--ink-blue);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
0 4px 8px rgba(139, 115, 85, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
position: relative;
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: rotate(-1deg) translateY(-2px);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(139, 115, 85, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.control-btn.play {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--paper-sepia);
|
||||
color: var(--paper-white);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: rotate(-1deg) translateY(1px);
|
||||
box-shadow:
|
||||
0 2px 4px rgba(139, 115, 85, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: var(--paper-white);
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 2px 4px rgba(139, 115, 85, 0.1);
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: var(--paper-brown);
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-fill {
|
||||
height: 100%;
|
||||
background: var(--paper-sepia);
|
||||
border-radius: 3px;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.volume-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: -3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--paper-white);
|
||||
border: 2px solid var(--paper-sepia);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.paper-section {
|
||||
background: var(--paper-white);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
|
||||
position: relative;
|
||||
border: 2px solid var(--paper-brown);
|
||||
border-style: solid;
|
||||
transform: rotate(0.3deg);
|
||||
}
|
||||
|
||||
.paper-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 2px;
|
||||
background: var(--paper-brown);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--paper-sepia);
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
transform: rotate(-0.5deg);
|
||||
}
|
||||
|
||||
.playlist {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
background: var(--paper-cream);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid transparent;
|
||||
transform: rotate(-0.1deg);
|
||||
}
|
||||
|
||||
.playlist-item:hover {
|
||||
background: var(--paper-white);
|
||||
border-left-color: var(--paper-sepia);
|
||||
transform: rotate(-0.1deg) translateX(3px);
|
||||
}
|
||||
|
||||
.playlist-item.active {
|
||||
background: var(--paper-sepia);
|
||||
color: var(--paper-white);
|
||||
border-left-color: var(--ink-blue);
|
||||
}
|
||||
|
||||
.playlist-item-title {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.playlist-item-artist {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.quality-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quality-btn {
|
||||
padding: 6px 12px;
|
||||
border: 2px solid var(--paper-brown);
|
||||
background: var(--paper-cream);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
color: var(--paper-sepia);
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Kalam', cursive;
|
||||
transform: rotate(-0.2deg);
|
||||
}
|
||||
|
||||
.quality-btn:hover {
|
||||
background: var(--paper-white);
|
||||
transform: rotate(-0.2deg) scale(1.05);
|
||||
}
|
||||
|
||||
.quality-btn.active {
|
||||
background: var(--paper-sepia);
|
||||
color: var(--paper-white);
|
||||
border-color: var(--ink-blue);
|
||||
}
|
||||
|
||||
.sharing-options {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--paper-brown);
|
||||
background: var(--paper-white);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--paper-sepia);
|
||||
transition: all 0.3s ease;
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
.share-btn:hover {
|
||||
background: var(--paper-sepia);
|
||||
color: var(--paper-white);
|
||||
transform: rotate(1deg) scale(1.1);
|
||||
}
|
||||
|
||||
.paper-note {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #fffacd;
|
||||
padding: 15px;
|
||||
border-radius: 0 10px 0 10px;
|
||||
box-shadow: 0 3px 8px rgba(139, 115, 85, 0.4);
|
||||
font-family: 'Caveat', cursive;
|
||||
font-size: 0.9rem;
|
||||
color: var(--paper-sepia);
|
||||
max-width: 200px;
|
||||
transform: rotate(3deg);
|
||||
border: 1px dashed var(--paper-brown);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.media-player {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
padding: 20px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.main-player {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.controls {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.control-btn.play {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.playlist::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar-track {
|
||||
background: var(--paper-cream);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar-thumb {
|
||||
background: var(--paper-brown);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--paper-sepia);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Media Player - Handcrafted Paper Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="media-player">
|
||||
<div class="main-player">
|
||||
<div class="now-playing">
|
||||
<div class="track-title" id="trackTitle">Acoustic Memories</div>
|
||||
<div class="track-artist" id="trackArtist">Paper Trail Sessions</div>
|
||||
</div>
|
||||
|
||||
<div class="visualizer" id="visualizer">
|
||||
<!-- Bars will be generated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
<span id="currentTime">2:34</span>
|
||||
<span id="totalTime">5:47</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-btn" id="prevBtn">⏮</button>
|
||||
<button class="control-btn" id="rewindBtn">⏪</button>
|
||||
<button class="control-btn play" id="playBtn">▶</button>
|
||||
<button class="control-btn" id="forwardBtn">⏩</button>
|
||||
<button class="control-btn" id="nextBtn">⏭</button>
|
||||
</div>
|
||||
|
||||
<div class="volume-control">
|
||||
<span>🔊</span>
|
||||
<div class="volume-slider" id="volumeSlider">
|
||||
<div class="volume-fill" id="volumeFill"></div>
|
||||
</div>
|
||||
<span id="volumeValue">70%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="paper-section">
|
||||
<div class="section-title">Playlist</div>
|
||||
<div class="playlist" id="playlist">
|
||||
<!-- Playlist items will be generated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paper-section">
|
||||
<div class="section-title">Quality</div>
|
||||
<div class="quality-selector" id="qualitySelector">
|
||||
<button class="quality-btn" data-quality="128">128k</button>
|
||||
<button class="quality-btn active" data-quality="320">320k</button>
|
||||
<button class="quality-btn" data-quality="lossless">Lossless</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paper-section">
|
||||
<div class="section-title">Share</div>
|
||||
<div class="sharing-options">
|
||||
<button class="share-btn" title="Copy Link">🔗</button>
|
||||
<button class="share-btn" title="Share on Social">📱</button>
|
||||
<button class="share-btn" title="Email">✉️</button>
|
||||
<button class="share-btn" title="Download">💾</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paper-note">
|
||||
"Music is the poetry of the air, captured on handmade paper..."
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Media Player State
|
||||
const state = {
|
||||
isPlaying: false,
|
||||
currentTrack: 0,
|
||||
volume: 70,
|
||||
progress: 35,
|
||||
quality: '320',
|
||||
playlist: [
|
||||
{ title: "Acoustic Memories", artist: "Paper Trail Sessions", duration: "5:47" },
|
||||
{ title: "Vintage Echoes", artist: "Handwritten Harmonies", duration: "4:23" },
|
||||
{ title: "Textured Melodies", artist: "Craft Corner Collective", duration: "6:12" },
|
||||
{ title: "Sepia Serenade", artist: "Analog Hearts", duration: "3:58" },
|
||||
{ title: "Paper Moon Rising", artist: "Folk & Fiber", duration: "5:31" },
|
||||
{ title: "Inked Impressions", artist: "Manuscript Music", duration: "4:47" }
|
||||
]
|
||||
};
|
||||
|
||||
// Initialize the interface
|
||||
function init() {
|
||||
createVisualizer();
|
||||
createPlaylist();
|
||||
setupEventListeners();
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Create visualizer bars
|
||||
function createVisualizer() {
|
||||
const visualizer = document.getElementById('visualizer');
|
||||
for (let i = 0; i < 40; i++) {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'bar';
|
||||
bar.style.height = Math.random() * 60 + 10 + 'px';
|
||||
visualizer.appendChild(bar);
|
||||
}
|
||||
}
|
||||
|
||||
// Create playlist items
|
||||
function createPlaylist() {
|
||||
const playlist = document.getElementById('playlist');
|
||||
state.playlist.forEach((track, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `playlist-item ${index === state.currentTrack ? 'active' : ''}`;
|
||||
item.innerHTML = `
|
||||
<div class="playlist-item-title">${track.title}</div>
|
||||
<div class="playlist-item-artist">${track.artist} • ${track.duration}</div>
|
||||
`;
|
||||
item.addEventListener('click', () => selectTrack(index));
|
||||
playlist.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// Setup event listeners
|
||||
function setupEventListeners() {
|
||||
// Play/Pause button
|
||||
document.getElementById('playBtn').addEventListener('click', togglePlay);
|
||||
|
||||
// Control buttons
|
||||
document.getElementById('prevBtn').addEventListener('click', () => changeTrack(-1));
|
||||
document.getElementById('nextBtn').addEventListener('click', () => changeTrack(1));
|
||||
document.getElementById('rewindBtn').addEventListener('click', () => seekRelative(-10));
|
||||
document.getElementById('forwardBtn').addEventListener('click', () => seekRelative(10));
|
||||
|
||||
// Progress bar
|
||||
document.getElementById('progressBar').addEventListener('click', handleProgressClick);
|
||||
|
||||
// Volume control
|
||||
document.getElementById('volumeSlider').addEventListener('click', handleVolumeClick);
|
||||
|
||||
// Quality selector
|
||||
document.querySelectorAll('.quality-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => setQuality(e.target.dataset.quality));
|
||||
});
|
||||
|
||||
// Share buttons
|
||||
document.querySelectorAll('.share-btn').forEach(btn => {
|
||||
btn.addEventListener('click', handleShare);
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle play/pause
|
||||
function togglePlay() {
|
||||
state.isPlaying = !state.isPlaying;
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
playBtn.textContent = state.isPlaying ? '⏸' : '▶';
|
||||
|
||||
if (state.isPlaying) {
|
||||
startVisualizer();
|
||||
} else {
|
||||
stopVisualizer();
|
||||
}
|
||||
}
|
||||
|
||||
// Change track
|
||||
function changeTrack(direction) {
|
||||
state.currentTrack = Math.max(0, Math.min(state.playlist.length - 1, state.currentTrack + direction));
|
||||
updateDisplay();
|
||||
updatePlaylist();
|
||||
}
|
||||
|
||||
// Select specific track
|
||||
function selectTrack(index) {
|
||||
state.currentTrack = index;
|
||||
updateDisplay();
|
||||
updatePlaylist();
|
||||
if (!state.isPlaying) togglePlay();
|
||||
}
|
||||
|
||||
// Handle progress bar click
|
||||
function handleProgressClick(e) {
|
||||
const rect = e.target.getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width * 100;
|
||||
state.progress = Math.max(0, Math.min(100, percent));
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
// Handle volume click
|
||||
function handleVolumeClick(e) {
|
||||
const rect = e.target.getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width * 100;
|
||||
state.volume = Math.max(0, Math.min(100, percent));
|
||||
updateVolume();
|
||||
}
|
||||
|
||||
// Seek relative
|
||||
function seekRelative(seconds) {
|
||||
// Simulate seeking by adjusting progress
|
||||
const currentSeconds = (state.progress / 100) * 347; // 5:47 = 347 seconds
|
||||
const newSeconds = Math.max(0, Math.min(347, currentSeconds + seconds));
|
||||
state.progress = (newSeconds / 347) * 100;
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
// Set quality
|
||||
function setQuality(quality) {
|
||||
state.quality = quality;
|
||||
document.querySelectorAll('.quality-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.quality === quality);
|
||||
});
|
||||
|
||||
// Simulate quality change effect
|
||||
showPaperNote(`Quality changed to ${quality === 'lossless' ? 'Lossless' : quality + 'kbps'}`);
|
||||
}
|
||||
|
||||
// Handle share
|
||||
function handleShare(e) {
|
||||
const title = e.target.getAttribute('title');
|
||||
showPaperNote(`${title} feature activated!`);
|
||||
|
||||
// Add visual feedback
|
||||
e.target.style.transform = 'rotate(1deg) scale(1.2)';
|
||||
setTimeout(() => {
|
||||
e.target.style.transform = 'rotate(1deg) scale(1.1)';
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Update display
|
||||
function updateDisplay() {
|
||||
const track = state.playlist[state.currentTrack];
|
||||
document.getElementById('trackTitle').textContent = track.title;
|
||||
document.getElementById('trackArtist').textContent = track.artist;
|
||||
document.getElementById('totalTime').textContent = track.duration;
|
||||
}
|
||||
|
||||
// Update playlist display
|
||||
function updatePlaylist() {
|
||||
document.querySelectorAll('.playlist-item').forEach((item, index) => {
|
||||
item.classList.toggle('active', index === state.currentTrack);
|
||||
});
|
||||
}
|
||||
|
||||
// Update progress display
|
||||
function updateProgress() {
|
||||
document.getElementById('progressFill').style.width = state.progress + '%';
|
||||
|
||||
// Update current time based on progress
|
||||
const totalSeconds = 347; // 5:47
|
||||
const currentSeconds = (state.progress / 100) * totalSeconds;
|
||||
const minutes = Math.floor(currentSeconds / 60);
|
||||
const seconds = Math.floor(currentSeconds % 60);
|
||||
document.getElementById('currentTime').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// Update volume display
|
||||
function updateVolume() {
|
||||
document.getElementById('volumeFill').style.width = state.volume + '%';
|
||||
document.getElementById('volumeValue').textContent = Math.round(state.volume) + '%';
|
||||
}
|
||||
|
||||
// Start visualizer animation
|
||||
function startVisualizer() {
|
||||
const bars = document.querySelectorAll('.bar');
|
||||
const animateBar = (bar) => {
|
||||
const height = Math.random() * 60 + 10;
|
||||
bar.style.height = height + 'px';
|
||||
};
|
||||
|
||||
state.visualizerInterval = setInterval(() => {
|
||||
bars.forEach((bar, index) => {
|
||||
setTimeout(() => animateBar(bar), index * 20);
|
||||
});
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Stop visualizer animation
|
||||
function stopVisualizer() {
|
||||
if (state.visualizerInterval) {
|
||||
clearInterval(state.visualizerInterval);
|
||||
}
|
||||
}
|
||||
|
||||
// Show paper note notification
|
||||
function showPaperNote(message) {
|
||||
const note = document.querySelector('.paper-note');
|
||||
const originalText = note.textContent;
|
||||
|
||||
note.textContent = message;
|
||||
note.style.background = '#e6f3ff';
|
||||
note.style.transform = 'rotate(3deg) scale(1.1)';
|
||||
|
||||
setTimeout(() => {
|
||||
note.textContent = originalText;
|
||||
note.style.background = '#fffacd';
|
||||
note.style.transform = 'rotate(3deg) scale(1)';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Simulate progress updates when playing
|
||||
setInterval(() => {
|
||||
if (state.isPlaying && state.progress < 100) {
|
||||
state.progress += 0.5;
|
||||
updateProgress();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Initialize the media player
|
||||
init();
|
||||
|
||||
// Add some paper-like interactions
|
||||
document.querySelectorAll('.paper-section').forEach(section => {
|
||||
section.addEventListener('mouseenter', () => {
|
||||
section.style.transform = 'rotate(0.3deg) scale(1.02)';
|
||||
section.style.boxShadow = '0 6px 16px rgba(139, 115, 85, 0.3)';
|
||||
});
|
||||
|
||||
section.addEventListener('mouseleave', () => {
|
||||
section.style.transform = 'rotate(0.3deg) scale(1)';
|
||||
section.style.boxShadow = '0 4px 12px rgba(139, 115, 85, 0.2)';
|
||||
});
|
||||
});
|
||||
|
||||
// Add paper texture animation
|
||||
let textureOffset = 0;
|
||||
setInterval(() => {
|
||||
textureOffset += 0.5;
|
||||
document.documentElement.style.setProperty('--paper-texture',
|
||||
`linear-gradient(${45 + textureOffset * 0.1}deg, transparent 40%, rgba(139, 115, 85, 0.05) 50%, transparent 60%)`
|
||||
);
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,787 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Space Age Navigation Hub</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Orbitron', monospace;
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
|
||||
color: #e6f3ff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Animated starfield background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, #fff, transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, #8dd7f7, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #fff, transparent),
|
||||
radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.6), transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: 200px 100px;
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.3; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: #8dd7f7;
|
||||
text-shadow: 0 0 20px rgba(141, 215, 247, 0.5);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
background: rgba(26, 26, 46, 0.8);
|
||||
border: 2px solid rgba(141, 215, 247, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow:
|
||||
0 0 30px rgba(141, 215, 247, 0.2),
|
||||
inset 0 0 30px rgba(141, 215, 247, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Orbital rings decoration */
|
||||
.hybrid-component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(from 0deg, transparent, rgba(141, 215, 247, 0.1), transparent);
|
||||
border-radius: 50%;
|
||||
animation: orbit 20s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Navigation Hub Container */
|
||||
.nav-hub {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Breadcrumb System */
|
||||
.stellar-breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(45deg, rgba(141, 215, 247, 0.1), rgba(141, 215, 247, 0.05));
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(141, 215, 247, 0.2);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #8dd7f7;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
background: rgba(141, 215, 247, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(141, 215, 247, 0.3);
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 1rem;
|
||||
color: #4a9eff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Search Hub */
|
||||
.cosmic-search {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(45deg, rgba(22, 33, 62, 0.8), rgba(26, 26, 46, 0.8));
|
||||
border: 2px solid rgba(141, 215, 247, 0.3);
|
||||
border-radius: 25px;
|
||||
padding: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container:focus-within {
|
||||
border-color: #8dd7f7;
|
||||
box-shadow: 0 0 20px rgba(141, 215, 247, 0.4);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
color: #e6f3ff;
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(230, 243, 255, 0.6);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: linear-gradient(45deg, #4a9eff, #8dd7f7);
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
color: #0a0a0f;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 15px rgba(141, 215, 247, 0.4);
|
||||
}
|
||||
|
||||
/* Tab Navigation */
|
||||
.orbital-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
background: rgba(22, 33, 62, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
background: linear-gradient(45deg, #4a9eff, #8dd7f7);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
height: calc(100% - 1rem);
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
color: #e6f3ff;
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: #0a0a0f;
|
||||
}
|
||||
|
||||
.tab-btn:hover:not(.active) {
|
||||
background: rgba(141, 215, 247, 0.1);
|
||||
}
|
||||
|
||||
/* Quick Actions */
|
||||
.space-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: linear-gradient(135deg, rgba(22, 33, 62, 0.8), rgba(26, 26, 46, 0.8));
|
||||
border: 2px solid rgba(141, 215, 247, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
color: #e6f3ff;
|
||||
text-decoration: none;
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(141, 215, 247, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #8dd7f7;
|
||||
box-shadow: 0 10px 25px rgba(141, 215, 247, 0.3);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* State Memory Panel */
|
||||
.memory-panel {
|
||||
background: linear-gradient(135deg, rgba(22, 33, 62, 0.6), rgba(26, 26, 46, 0.6));
|
||||
border: 1px solid rgba(141, 215, 247, 0.2);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.memory-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.memory-title {
|
||||
color: #8dd7f7;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.memory-status {
|
||||
background: linear-gradient(45deg, #4a9eff, #8dd7f7);
|
||||
color: #0a0a0f;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.memory-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.memory-item {
|
||||
background: rgba(141, 215, 247, 0.1);
|
||||
border: 1px solid rgba(141, 215, 247, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.memory-item:hover {
|
||||
background: rgba(141, 215, 247, 0.2);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.memory-item-title {
|
||||
color: #8dd7f7;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.memory-item-desc {
|
||||
color: rgba(230, 243, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
background: rgba(22, 33, 62, 0.4);
|
||||
border: 1px solid rgba(141, 215, 247, 0.2);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-panel.active {
|
||||
display: block;
|
||||
animation: fadeInUp 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content-title {
|
||||
color: #8dd7f7;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-description {
|
||||
color: rgba(230, 243, 255, 0.9);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(141, 215, 247, 0.1);
|
||||
border: 1px solid rgba(141, 215, 247, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
background: rgba(141, 215, 247, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.stellar-breadcrumbs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.orbital-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.space-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Navigation Hub - Space Age Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="nav-hub">
|
||||
<!-- Stellar Breadcrumbs -->
|
||||
<nav class="stellar-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="#" class="breadcrumb-item">🌌 Home</a>
|
||||
<span class="breadcrumb-separator">→</span>
|
||||
<a href="#" class="breadcrumb-item">🚀 Navigation</a>
|
||||
<span class="breadcrumb-separator">→</span>
|
||||
<a href="#" class="breadcrumb-item">⭐ Current Mission</a>
|
||||
</nav>
|
||||
|
||||
<!-- Cosmic Search -->
|
||||
<div class="cosmic-search">
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="Search the cosmos..." id="searchInput">
|
||||
<button class="search-btn" onclick="performSearch()">🔍 Scan</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Space Actions -->
|
||||
<div class="space-actions">
|
||||
<a href="#" class="action-btn" onclick="quickAction('dashboard')">
|
||||
<div class="action-icon">🌟</div>
|
||||
<div>Command Center</div>
|
||||
</a>
|
||||
<a href="#" class="action-btn" onclick="quickAction('missions')">
|
||||
<div class="action-icon">🚀</div>
|
||||
<div>Active Missions</div>
|
||||
</a>
|
||||
<a href="#" class="action-btn" onclick="quickAction('fleet')">
|
||||
<div class="action-icon">🛸</div>
|
||||
<div>Fleet Status</div>
|
||||
</a>
|
||||
<a href="#" class="action-btn" onclick="quickAction('communications')">
|
||||
<div class="action-icon">📡</div>
|
||||
<div>Communications</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- State Memory Panel -->
|
||||
<div class="memory-panel">
|
||||
<div class="memory-header">
|
||||
<h3 class="memory-title">Navigation Memory Bank</h3>
|
||||
<div class="memory-status">ACTIVE</div>
|
||||
</div>
|
||||
<div class="memory-items">
|
||||
<div class="memory-item">
|
||||
<div class="memory-item-title">Last Destination</div>
|
||||
<div class="memory-item-desc">Andromeda Sector 7</div>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-item-title">Favorite Route</div>
|
||||
<div class="memory-item-desc">Earth → Mars → Jupiter</div>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-item-title">Recent Search</div>
|
||||
<div class="memory-item-desc">"wormhole coordinates"</div>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-item-title">Bookmark</div>
|
||||
<div class="memory-item-desc">Alpha Centauri Station</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orbital Tab Navigation -->
|
||||
<div class="orbital-tabs">
|
||||
<div class="tab-indicator" id="tabIndicator"></div>
|
||||
<button class="tab-btn active" data-tab="explore">🌌 Explore</button>
|
||||
<button class="tab-btn" data-tab="missions">🚀 Missions</button>
|
||||
<button class="tab-btn" data-tab="data">📊 Data Banks</button>
|
||||
<button class="tab-btn" data-tab="settings">⚙️ Controls</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
<div class="content-panel active" id="explore">
|
||||
<h3 class="content-title">Cosmic Exploration Hub</h3>
|
||||
<p class="content-description">
|
||||
Navigate through the infinite expanse of space using our advanced exploration systems.
|
||||
Discover new worlds, chart unknown territories, and expand the boundaries of human knowledge.
|
||||
</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>🌟 Star Charts</h4>
|
||||
<p>Interactive stellar mapping</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>🌍 Planet Scanner</h4>
|
||||
<p>Deep surface analysis</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>🌌 Galaxy View</h4>
|
||||
<p>Macro navigation system</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="missions">
|
||||
<h3 class="content-title">Mission Control Center</h3>
|
||||
<p class="content-description">
|
||||
Coordinate complex space missions across multiple star systems. Monitor crew status,
|
||||
resource allocation, and mission objectives in real-time.
|
||||
</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>🎯 Objectives</h4>
|
||||
<p>Mission goal tracking</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>👨🚀 Crew Status</h4>
|
||||
<p>Personnel monitoring</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>⛽ Resources</h4>
|
||||
<p>Supply management</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="data">
|
||||
<h3 class="content-title">Galactic Data Repository</h3>
|
||||
<p class="content-description">
|
||||
Access vast databases of cosmic information collected from across the universe.
|
||||
Analyze patterns, research phenomena, and contribute to galactic knowledge.
|
||||
</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>📡 Signals</h4>
|
||||
<p>Communication logs</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>🔬 Research</h4>
|
||||
<p>Scientific findings</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>📈 Analytics</h4>
|
||||
<p>Pattern recognition</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="settings">
|
||||
<h3 class="content-title">Navigation Controls</h3>
|
||||
<p class="content-description">
|
||||
Configure your space navigation preferences, customize interface elements,
|
||||
and optimize system performance for your specific mission requirements.
|
||||
</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>🎛️ Interface</h4>
|
||||
<p>UI customization</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>🔧 Systems</h4>
|
||||
<p>Performance tuning</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>🛡️ Security</h4>
|
||||
<p>Access protocols</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab Navigation System
|
||||
const tabs = document.querySelectorAll('.tab-btn');
|
||||
const panels = document.querySelectorAll('.content-panel');
|
||||
const indicator = document.getElementById('tabIndicator');
|
||||
|
||||
function updateTabIndicator(activeTab) {
|
||||
const tabRect = activeTab.getBoundingClientRect();
|
||||
const containerRect = activeTab.parentElement.getBoundingClientRect();
|
||||
const left = tabRect.left - containerRect.left;
|
||||
const width = tabRect.width;
|
||||
|
||||
indicator.style.left = left + 'px';
|
||||
indicator.style.width = width + 'px';
|
||||
}
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => {
|
||||
// Remove active class from all tabs and panels
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
panels.forEach(p => p.classList.remove('active'));
|
||||
|
||||
// Add active class to clicked tab and corresponding panel
|
||||
tab.classList.add('active');
|
||||
const targetPanel = document.getElementById(tab.dataset.tab);
|
||||
targetPanel.classList.add('active');
|
||||
|
||||
// Update tab indicator
|
||||
updateTabIndicator(tab);
|
||||
|
||||
// Store navigation state
|
||||
storeNavigationState('currentTab', tab.dataset.tab);
|
||||
addToNavigationHistory('Tab: ' + tab.textContent.trim());
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize tab indicator
|
||||
window.addEventListener('load', () => {
|
||||
const activeTab = document.querySelector('.tab-btn.active');
|
||||
if (activeTab) {
|
||||
updateTabIndicator(activeTab);
|
||||
}
|
||||
});
|
||||
|
||||
// Search Functionality
|
||||
function performSearch() {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const query = searchInput.value.trim();
|
||||
|
||||
if (query) {
|
||||
// Simulate search with cosmic effect
|
||||
searchInput.style.background = 'linear-gradient(45deg, rgba(141, 215, 247, 0.2), rgba(74, 158, 255, 0.2))';
|
||||
|
||||
setTimeout(() => {
|
||||
searchInput.style.background = 'transparent';
|
||||
alert(`🔍 Scanning cosmos for: "${query}"\n\n🌌 Found 42 stellar objects matching your search criteria!`);
|
||||
|
||||
// Store search in memory
|
||||
storeNavigationState('lastSearch', query);
|
||||
addToNavigationHistory('Search: ' + query);
|
||||
updateMemoryPanel();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Quick Actions
|
||||
function quickAction(action) {
|
||||
const actions = {
|
||||
dashboard: '🌟 Accessing Command Center...\nAll systems operational!',
|
||||
missions: '🚀 Loading Active Missions...\n3 missions in progress, 2 completed today.',
|
||||
fleet: '🛸 Fleet Status Report...\n12 vessels deployed, all reporting nominal status.',
|
||||
communications: '📡 Opening Communications Channel...\nConnected to Deep Space Network.'
|
||||
};
|
||||
|
||||
alert(actions[action] || 'Unknown action');
|
||||
addToNavigationHistory('Action: ' + action);
|
||||
}
|
||||
|
||||
// Navigation State Management
|
||||
const navigationState = {
|
||||
currentTab: 'explore',
|
||||
lastSearch: '',
|
||||
favoriteDestination: 'Andromeda Sector 7',
|
||||
history: []
|
||||
};
|
||||
|
||||
function storeNavigationState(key, value) {
|
||||
navigationState[key] = value;
|
||||
localStorage.setItem('spaceNavState', JSON.stringify(navigationState));
|
||||
}
|
||||
|
||||
function loadNavigationState() {
|
||||
const stored = localStorage.getItem('spaceNavState');
|
||||
if (stored) {
|
||||
Object.assign(navigationState, JSON.parse(stored));
|
||||
}
|
||||
}
|
||||
|
||||
function addToNavigationHistory(entry) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
navigationState.history.unshift(`${timestamp}: ${entry}`);
|
||||
|
||||
// Keep only last 10 entries
|
||||
if (navigationState.history.length > 10) {
|
||||
navigationState.history = navigationState.history.slice(0, 10);
|
||||
}
|
||||
|
||||
storeNavigationState('history', navigationState.history);
|
||||
}
|
||||
|
||||
// Update Memory Panel
|
||||
function updateMemoryPanel() {
|
||||
const memoryItems = document.querySelectorAll('.memory-item');
|
||||
|
||||
// Update last search if available
|
||||
if (navigationState.lastSearch && memoryItems[2]) {
|
||||
memoryItems[2].querySelector('.memory-item-desc').textContent = `"${navigationState.lastSearch}"`;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb Navigation
|
||||
document.querySelectorAll('.breadcrumb-item').forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const destination = item.textContent.trim();
|
||||
|
||||
// Cosmic navigation effect
|
||||
item.style.transform = 'scale(1.1)';
|
||||
item.style.boxShadow = '0 0 20px rgba(141, 215, 247, 0.6)';
|
||||
|
||||
setTimeout(() => {
|
||||
item.style.transform = '';
|
||||
item.style.boxShadow = '';
|
||||
addToNavigationHistory('Navigate: ' + destination);
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Search on Enter key
|
||||
document.getElementById('searchInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('load', () => {
|
||||
loadNavigationState();
|
||||
updateMemoryPanel();
|
||||
addToNavigationHistory('Navigation Hub initialized');
|
||||
});
|
||||
|
||||
// Add cosmic interaction effects
|
||||
document.querySelectorAll('.action-btn, .memory-item, .feature-card').forEach(element => {
|
||||
element.addEventListener('mouseenter', () => {
|
||||
element.style.transform = 'translateY(-2px) scale(1.02)';
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', () => {
|
||||
element.style.transform = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Orbital animation control
|
||||
let orbitSpeed = 1;
|
||||
const orbitElement = document.querySelector('.hybrid-component::before');
|
||||
|
||||
function adjustOrbitSpeed(speed) {
|
||||
orbitSpeed = speed;
|
||||
document.documentElement.style.setProperty('--orbit-duration', `${20 / speed}s`);
|
||||
}
|
||||
|
||||
// Enhanced accessibility
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
document.body.classList.add('keyboard-navigation');
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mousedown', () => {
|
||||
document.body.classList.remove('keyboard-navigation');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,942 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Steampunk Victorian Adaptive Workspace</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--brass-primary: #b8860b;
|
||||
--brass-light: #daa520;
|
||||
--brass-dark: #8b6914;
|
||||
--copper-primary: #b87333;
|
||||
--iron-dark: #2f2f2f;
|
||||
--iron-medium: #4a4a4a;
|
||||
--sepia-light: #f4e4bc;
|
||||
--sepia-medium: #d2b48c;
|
||||
--mahogany: #8b0000;
|
||||
--parchment: #f5f5dc;
|
||||
--ink: #1a1a1a;
|
||||
--steam: #e6e6fa;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Crimson Text', serif;
|
||||
background: linear-gradient(135deg, var(--sepia-light) 0%, var(--sepia-medium) 100%);
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 30%, rgba(184, 134, 11, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),
|
||||
url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="gears" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="3" fill="none" stroke="rgba(184,134,11,0.1)" stroke-width="0.5"/><path d="M25 15 L30 20 L25 25 L20 20 Z" fill="rgba(184,134,11,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23gears)"/></svg>');
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--mahogany);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1::before, h1::after {
|
||||
content: '⚙';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.5rem;
|
||||
color: var(--brass-primary);
|
||||
animation: rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
left: -3rem;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
right: -3rem;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
background: linear-gradient(145deg, var(--parchment) 0%, #f0e6d2 100%);
|
||||
border: 3px solid var(--brass-primary);
|
||||
border-radius: 15px;
|
||||
box-shadow:
|
||||
0 0 30px rgba(184, 134, 11, 0.3),
|
||||
inset 0 0 20px rgba(184, 134, 11, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hybrid-component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--brass-dark), var(--brass-light), var(--copper-primary), var(--brass-light), var(--brass-dark));
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.workshop-header {
|
||||
background: linear-gradient(135deg, var(--brass-primary) 0%, var(--copper-primary) 100%);
|
||||
padding: 1.5rem;
|
||||
border-bottom: 2px solid var(--brass-dark);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.workshop-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 1.8rem;
|
||||
color: var(--parchment);
|
||||
text-align: center;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.main-interface {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 80vh;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
background: linear-gradient(145deg, var(--iron-medium) 0%, var(--iron-dark) 100%);
|
||||
padding: 1.5rem;
|
||||
border-right: 2px solid var(--brass-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.main-workspace {
|
||||
background: var(--parchment);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
background: linear-gradient(145deg, var(--sepia-medium) 0%, var(--sepia-light) 100%);
|
||||
padding: 1.5rem;
|
||||
border-left: 2px solid var(--brass-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
background: rgba(245, 245, 220, 0.8);
|
||||
border: 2px solid var(--brass-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.panel-section:hover {
|
||||
box-shadow: 0 0 15px rgba(184, 134, 11, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--mahogany);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gear-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--brass-primary);
|
||||
animation: rotate 4s linear infinite;
|
||||
}
|
||||
|
||||
.task-item, .calendar-event, .note-item, .file-item {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid var(--brass-light);
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem;
|
||||
margin: 0.3rem 0;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task-item:hover, .calendar-event:hover, .note-item:hover, .file-item:hover {
|
||||
background: rgba(184, 134, 11, 0.1);
|
||||
border-color: var(--brass-primary);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.priority-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.high-priority { background: var(--mahogany); }
|
||||
.medium-priority { background: var(--brass-primary); }
|
||||
.low-priority { background: var(--copper-primary); }
|
||||
|
||||
.workshop-tabs {
|
||||
display: flex;
|
||||
background: var(--brass-primary);
|
||||
border-bottom: 2px solid var(--brass-dark);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--parchment);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: var(--parchment);
|
||||
color: var(--mahogany);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--brass-primary);
|
||||
border: 2px solid var(--brass-primary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
background: var(--parchment);
|
||||
padding: 0.5rem;
|
||||
min-height: 60px;
|
||||
border: 1px solid var(--brass-light);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.calendar-day:hover {
|
||||
background: rgba(184, 134, 11, 0.1);
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-weight: 600;
|
||||
color: var(--mahogany);
|
||||
}
|
||||
|
||||
.note-editor {
|
||||
background: var(--parchment);
|
||||
border: 2px solid var(--brass-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
min-height: 200px;
|
||||
font-family: 'Crimson Text', serif;
|
||||
font-size: 1rem;
|
||||
color: var(--ink);
|
||||
resize: vertical;
|
||||
background-image: repeating-linear-gradient(
|
||||
transparent,
|
||||
transparent 24px,
|
||||
rgba(184, 134, 11, 0.3) 24px,
|
||||
rgba(184, 134, 11, 0.3) 25px
|
||||
);
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.file-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(145deg, var(--brass-light), var(--brass-primary));
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: var(--parchment);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.file-icon:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px rgba(184, 134, 11, 0.5);
|
||||
}
|
||||
|
||||
.communication-hub {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 2px solid var(--brass-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: rgba(184, 134, 11, 0.1);
|
||||
border-left: 3px solid var(--brass-primary);
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.environment-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-knob {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--brass-light) 0%, var(--brass-primary) 70%, var(--brass-dark) 100%);
|
||||
border: 3px solid var(--brass-dark);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.control-knob:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 20px rgba(184, 134, 11, 0.6);
|
||||
}
|
||||
|
||||
.control-knob::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background: var(--mahogany);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.steam-effect {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: radial-gradient(circle, var(--steam) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: steam 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mechanical-border {
|
||||
border: 2px solid var(--brass-primary);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mechanical-border::before, .mechanical-border::after {
|
||||
content: '⚙';
|
||||
position: absolute;
|
||||
font-size: 0.8rem;
|
||||
color: var(--brass-primary);
|
||||
animation: rotate 6s linear infinite;
|
||||
}
|
||||
|
||||
.mechanical-border::before {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.mechanical-border::after {
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
|
||||
50% { opacity: 0.7; transform: translateY(-50%) scale(1.2); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
0%, 100% { opacity: 0.3; transform: translateY(0) scale(1); }
|
||||
50% { opacity: 0.7; transform: translateY(-10px) scale(1.2); }
|
||||
}
|
||||
|
||||
.adaptive-suggestion {
|
||||
background: linear-gradient(135deg, rgba(139, 0, 0, 0.1) 0%, rgba(184, 134, 11, 0.1) 100%);
|
||||
border: 1px dashed var(--mahogany);
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--mahogany);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.main-interface {
|
||||
grid-template-columns: 250px 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
grid-column: 1 / -1;
|
||||
border-left: none;
|
||||
border-top: 2px solid var(--brass-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-interface {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto 1fr;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
border-right: none;
|
||||
border-bottom: 2px solid var(--brass-primary);
|
||||
}
|
||||
|
||||
.workshop-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Adaptive Workspace - Steampunk Victorian Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="workshop-header">
|
||||
<h2 class="workshop-title">Victorian Mechanical Workshop Interface</h2>
|
||||
<div class="steam-effect"></div>
|
||||
</div>
|
||||
|
||||
<div class="main-interface">
|
||||
<div class="control-panel">
|
||||
<div class="panel-section mechanical-border">
|
||||
<h3 class="section-title">
|
||||
<span class="gear-icon">⚙</span>
|
||||
Priority Tasks
|
||||
</h3>
|
||||
<div class="task-item">
|
||||
<span>Complete quarterly invention report</span>
|
||||
<div class="priority-indicator high-priority"></div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<span>Calibrate chronometer mechanisms</span>
|
||||
<div class="priority-indicator medium-priority"></div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<span>Review apprentice blueprints</span>
|
||||
<div class="priority-indicator low-priority"></div>
|
||||
</div>
|
||||
<div class="adaptive-suggestion">
|
||||
💡 Based on your pattern, schedule calibration before 2 PM for optimal precision
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section mechanical-border">
|
||||
<h3 class="section-title">
|
||||
<span class="gear-icon">⚙</span>
|
||||
Environment Controls
|
||||
</h3>
|
||||
<div class="environment-controls">
|
||||
<div>
|
||||
<label style="font-size: 0.9rem; color: var(--mahogany);">Lighting</label>
|
||||
<div class="control-knob" data-control="lighting"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.9rem; color: var(--mahogany);">Steam Pressure</label>
|
||||
<div class="control-knob" data-control="pressure"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.9rem; color: var(--mahogany);">Temperature</label>
|
||||
<div class="control-knob" data-control="temperature"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.9rem; color: var(--mahogany);">Noise Level</label>
|
||||
<div class="control-knob" data-control="noise"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-workspace">
|
||||
<div class="workshop-tabs">
|
||||
<button class="tab-button active" data-tab="calendar">Chronometer Schedule</button>
|
||||
<button class="tab-button" data-tab="notes">Laboratory Journal</button>
|
||||
<button class="tab-button" data-tab="files">Blueprint Archive</button>
|
||||
<button class="tab-button" data-tab="communication">Telegraph Hub</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" id="calendar">
|
||||
<h3 style="font-family: 'Cinzel', serif; color: var(--mahogany); margin: 1rem 0;">Workshop Schedule - December 2024</h3>
|
||||
<div class="calendar-grid">
|
||||
<div class="calendar-day"><span class="day-number">1</span></div>
|
||||
<div class="calendar-day"><span class="day-number">2</span></div>
|
||||
<div class="calendar-day"><span class="day-number">3</span></div>
|
||||
<div class="calendar-day"><span class="day-number">4</span></div>
|
||||
<div class="calendar-day"><span class="day-number">5</span></div>
|
||||
<div class="calendar-day"><span class="day-number">6</span></div>
|
||||
<div class="calendar-day"><span class="day-number">7</span></div>
|
||||
<div class="calendar-day">
|
||||
<span class="day-number">8</span>
|
||||
<div style="font-size: 0.7rem; color: var(--mahogany);">Steam Engine Maintenance</div>
|
||||
</div>
|
||||
<div class="calendar-day"><span class="day-number">9</span></div>
|
||||
<div class="calendar-day"><span class="day-number">10</span></div>
|
||||
<div class="calendar-day"><span class="day-number">11</span></div>
|
||||
<div class="calendar-day">
|
||||
<span class="day-number">12</span>
|
||||
<div style="font-size: 0.7rem; color: var(--mahogany);">Guild Meeting</div>
|
||||
</div>
|
||||
<div class="calendar-day"><span class="day-number">13</span></div>
|
||||
<div class="calendar-day"><span class="day-number">14</span></div>
|
||||
<div class="calendar-day">
|
||||
<span class="day-number">15</span>
|
||||
<div style="font-size: 0.7rem; color: var(--mahogany);">Invention Expo</div>
|
||||
</div>
|
||||
<div class="calendar-day"><span class="day-number">16</span></div>
|
||||
<div class="calendar-day"><span class="day-number">17</span></div>
|
||||
<div class="calendar-day"><span class="day-number">18</span></div>
|
||||
<div class="calendar-day"><span class="day-number">19</span></div>
|
||||
<div class="calendar-day"><span class="day-number">20</span></div>
|
||||
<div class="calendar-day"><span class="day-number">21</span></div>
|
||||
<div class="calendar-day"><span class="day-number">22</span></div>
|
||||
<div class="calendar-day"><span class="day-number">23</span></div>
|
||||
<div class="calendar-day"><span class="day-number">24</span></div>
|
||||
<div class="calendar-day"><span class="day-number">25</span></div>
|
||||
<div class="calendar-day"><span class="day-number">26</span></div>
|
||||
<div class="calendar-day"><span class="day-number">27</span></div>
|
||||
<div class="calendar-day"><span class="day-number">28</span></div>
|
||||
<div class="calendar-day"><span class="day-number">29</span></div>
|
||||
<div class="calendar-day"><span class="day-number">30</span></div>
|
||||
<div class="calendar-day"><span class="day-number">31</span></div>
|
||||
</div>
|
||||
<div class="adaptive-suggestion" style="margin-top: 1rem;">
|
||||
📅 Your most productive invention sessions occur Tuesday-Thursday mornings. Consider scheduling complex work then.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="notes">
|
||||
<h3 style="font-family: 'Cinzel', serif; color: var(--mahogany); margin: 1rem 0;">Laboratory Research Journal</h3>
|
||||
<textarea class="note-editor" placeholder="Record your discoveries and observations in this mechanical journal...
|
||||
|
||||
Entry Date: December 7th, 1887
|
||||
|
||||
Today's experiments with the clockwork automation yielded fascinating results. The precision gearing mechanism shows promise for..."></textarea>
|
||||
<div class="adaptive-suggestion" style="margin-top: 1rem;">
|
||||
📝 Your notes often reference pressure calculations. Would you like quick access to your conversion tables?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="files">
|
||||
<h3 style="font-family: 'Cinzel', serif; color: var(--mahogany); margin: 1rem 0;">Blueprint & Patent Archive</h3>
|
||||
<div class="file-grid">
|
||||
<div class="file-icon" title="Steam Engine Schematics">📋</div>
|
||||
<div class="file-icon" title="Clockwork Mechanisms">⚙️</div>
|
||||
<div class="file-icon" title="Pressure Calculations">📊</div>
|
||||
<div class="file-icon" title="Patent Applications">📜</div>
|
||||
<div class="file-icon" title="Guild Correspondence">✉️</div>
|
||||
<div class="file-icon" title="Invention Sketches">✏️</div>
|
||||
<div class="file-icon" title="Material Specifications">📐</div>
|
||||
<div class="file-icon" title="Test Results">🔬</div>
|
||||
</div>
|
||||
<div class="adaptive-suggestion" style="margin-top: 1rem;">
|
||||
📁 Files accessed together: Steam Engine Schematics + Pressure Calculations. Auto-group these?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="communication">
|
||||
<h3 style="font-family: 'Cinzel', serif; color: var(--mahogany); margin: 1rem 0;">Telegraph Communication Hub</h3>
|
||||
<div class="communication-hub">
|
||||
<div class="message">
|
||||
<strong>From: Guild Master Thompson</strong><br>
|
||||
<em>10:30 AM</em><br>
|
||||
Your latest clockwork innovation has been approved for the exhibition. Magnificent work, old chap!
|
||||
</div>
|
||||
<div class="message">
|
||||
<strong>From: Apprentice Wilson</strong><br>
|
||||
<em>11:15 AM</em><br>
|
||||
The steam pressure readings are ready for your review. Shall I prepare the calibration tools?
|
||||
</div>
|
||||
<div class="message">
|
||||
<strong>From: Patent Office</strong><br>
|
||||
<em>2:45 PM</em><br>
|
||||
Application #VIC-1887-0247 requires additional technical specifications. Please submit by Friday.
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1rem;">
|
||||
<input type="text" placeholder="Compose telegraph message..." style="width: 100%; padding: 0.5rem; border: 2px solid var(--brass-primary); border-radius: 5px; font-family: 'Crimson Text', serif;">
|
||||
</div>
|
||||
<div class="adaptive-suggestion" style="margin-top: 1rem;">
|
||||
📨 Guild messages often require formal responses. Use template: "Most esteemed colleague..."?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-panel">
|
||||
<div class="panel-section mechanical-border">
|
||||
<h3 class="section-title">
|
||||
<span class="gear-icon">⚙</span>
|
||||
Today's Agenda
|
||||
</h3>
|
||||
<div class="calendar-event">
|
||||
<strong>9:00 AM</strong><br>
|
||||
Workshop Maintenance
|
||||
</div>
|
||||
<div class="calendar-event">
|
||||
<strong>11:30 AM</strong><br>
|
||||
Apprentice Training
|
||||
</div>
|
||||
<div class="calendar-event">
|
||||
<strong>2:00 PM</strong><br>
|
||||
Guild Council Meeting
|
||||
</div>
|
||||
<div class="calendar-event">
|
||||
<strong>4:30 PM</strong><br>
|
||||
Patent Review Session
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section mechanical-border">
|
||||
<h3 class="section-title">
|
||||
<span class="gear-icon">⚙</span>
|
||||
Quick Notes
|
||||
</h3>
|
||||
<div class="note-item">
|
||||
Remember: Brass expansion coefficient at high temperatures
|
||||
</div>
|
||||
<div class="note-item">
|
||||
Order more spring steel from Sheffield suppliers
|
||||
</div>
|
||||
<div class="note-item">
|
||||
Test new gear ratio: 3.7:1 shows promise
|
||||
</div>
|
||||
<div class="adaptive-suggestion">
|
||||
🔧 You frequently note material specifications. Create a quick-access materials database?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section mechanical-border">
|
||||
<h3 class="section-title">
|
||||
<span class="gear-icon">⚙</span>
|
||||
Recent Files
|
||||
</h3>
|
||||
<div class="file-item">📋 Steam_Engine_Mark_VII.blueprint</div>
|
||||
<div class="file-item">⚙️ Clockwork_Precision_Tests.data</div>
|
||||
<div class="file-item">📜 Patent_Application_247.document</div>
|
||||
<div class="file-item">📊 Pressure_Analysis_Dec.report</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab switching functionality
|
||||
document.querySelectorAll('.tab-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
// Remove active class from all tabs and contents
|
||||
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
// Add active class to clicked tab and corresponding content
|
||||
button.classList.add('active');
|
||||
document.getElementById(button.dataset.tab).classList.add('active');
|
||||
|
||||
// Adaptive learning simulation
|
||||
setTimeout(() => {
|
||||
addAdaptiveSuggestion(button.dataset.tab);
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
// Environment control knobs
|
||||
document.querySelectorAll('.control-knob').forEach(knob => {
|
||||
let rotation = 0;
|
||||
knob.addEventListener('click', (e) => {
|
||||
rotation += 45;
|
||||
knob.style.transform = `rotate(${rotation}deg)`;
|
||||
|
||||
// Simulate environment change
|
||||
const control = knob.dataset.control;
|
||||
showEnvironmentFeedback(control, rotation);
|
||||
});
|
||||
});
|
||||
|
||||
// Calendar day interaction
|
||||
document.querySelectorAll('.calendar-day').forEach(day => {
|
||||
day.addEventListener('click', () => {
|
||||
const existingEvent = day.querySelector('div:not(.day-number)');
|
||||
if (!existingEvent) {
|
||||
const event = document.createElement('div');
|
||||
event.style.fontSize = '0.7rem';
|
||||
event.style.color = 'var(--mahogany)';
|
||||
event.textContent = 'New appointment';
|
||||
event.contentEditable = true;
|
||||
day.appendChild(event);
|
||||
event.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Task interaction with mechanical feedback
|
||||
document.querySelectorAll('.task-item, .calendar-event, .note-item, .file-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
item.style.transform = 'translateX(10px)';
|
||||
setTimeout(() => {
|
||||
item.style.transform = 'translateX(5px)';
|
||||
}, 150);
|
||||
|
||||
// Simulate mechanical click sound
|
||||
playMechanicalSound();
|
||||
});
|
||||
});
|
||||
|
||||
// Communication input enhancement
|
||||
const messageInput = document.querySelector('input[placeholder*="telegraph"]');
|
||||
if (messageInput) {
|
||||
messageInput.addEventListener('focus', () => {
|
||||
messageInput.style.boxShadow = '0 0 15px rgba(184, 134, 11, 0.4)';
|
||||
});
|
||||
|
||||
messageInput.addEventListener('blur', () => {
|
||||
messageInput.style.boxShadow = 'none';
|
||||
});
|
||||
|
||||
messageInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendTelegraphMessage(messageInput.value);
|
||||
messageInput.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// File organization with drag simulation
|
||||
document.querySelectorAll('.file-icon').forEach(icon => {
|
||||
icon.addEventListener('mousedown', () => {
|
||||
icon.style.cursor = 'grabbing';
|
||||
icon.style.opacity = '0.8';
|
||||
});
|
||||
|
||||
icon.addEventListener('mouseup', () => {
|
||||
icon.style.cursor = 'pointer';
|
||||
icon.style.opacity = '1';
|
||||
});
|
||||
});
|
||||
|
||||
// Adaptive workspace learning
|
||||
function addAdaptiveSuggestion(context) {
|
||||
const suggestions = {
|
||||
calendar: "⏰ You often schedule meetings after 2 PM. Block morning hours for focused work?",
|
||||
notes: "📖 Your research notes could benefit from automatic cross-referencing. Enable smart linking?",
|
||||
files: "🗂️ Frequently accessed blueprints detected. Create a 'Daily Essentials' quick access panel?",
|
||||
communication: "💬 Response pattern analysis: You prefer formal language in guild correspondence."
|
||||
};
|
||||
|
||||
const existingSuggestion = document.querySelector(`#${context} .adaptive-suggestion`);
|
||||
if (existingSuggestion && Math.random() > 0.7) {
|
||||
existingSuggestion.innerHTML = suggestions[context] || existingSuggestion.innerHTML;
|
||||
existingSuggestion.style.animation = 'pulse 1s ease-in-out';
|
||||
setTimeout(() => {
|
||||
existingSuggestion.style.animation = '';
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function showEnvironmentFeedback(control, rotation) {
|
||||
const feedbackMessages = {
|
||||
lighting: rotation > 180 ? "Bright gas lamps engaged" : "Dim candlelight mode",
|
||||
pressure: rotation > 180 ? "High pressure steam ready" : "Low pressure conservation mode",
|
||||
temperature: rotation > 180 ? "Workshop heating increased" : "Cool working conditions",
|
||||
noise: rotation > 180 ? "Full machinery operation" : "Quiet contemplation mode"
|
||||
};
|
||||
|
||||
// Create temporary feedback
|
||||
const feedback = document.createElement('div');
|
||||
feedback.textContent = feedbackMessages[control];
|
||||
feedback.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: var(--brass-primary);
|
||||
color: var(--parchment);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
z-index: 1000;
|
||||
font-family: 'Cinzel', serif;
|
||||
box-shadow: 0 0 15px rgba(184, 134, 11, 0.5);
|
||||
`;
|
||||
|
||||
document.body.appendChild(feedback);
|
||||
setTimeout(() => {
|
||||
feedback.remove();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function playMechanicalSound() {
|
||||
// Simulate mechanical click with visual feedback
|
||||
const steamEffect = document.querySelector('.steam-effect');
|
||||
if (steamEffect) {
|
||||
steamEffect.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
steamEffect.style.animation = 'steam 3s ease-in-out infinite';
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
function sendTelegraphMessage(message) {
|
||||
if (message.trim()) {
|
||||
const messageContainer = document.querySelector('.communication-hub');
|
||||
const newMessage = document.createElement('div');
|
||||
newMessage.className = 'message';
|
||||
newMessage.innerHTML = `
|
||||
<strong>To: Workshop Colleagues</strong><br>
|
||||
<em>${new Date().toLocaleTimeString()}</em><br>
|
||||
${message}
|
||||
`;
|
||||
messageContainer.appendChild(newMessage);
|
||||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||||
|
||||
// Simulate telegraph transmission effect
|
||||
newMessage.style.opacity = '0';
|
||||
newMessage.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
newMessage.style.transition = 'all 0.5s ease';
|
||||
newMessage.style.opacity = '1';
|
||||
newMessage.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Automatic workspace adaptation based on time
|
||||
function adaptWorkspaceToTime() {
|
||||
const hour = new Date().getHours();
|
||||
const knobs = document.querySelectorAll('.control-knob');
|
||||
|
||||
if (hour < 9 || hour > 18) {
|
||||
// Evening/night mode - dim lighting, quiet
|
||||
knobs[0].style.transform = 'rotate(45deg)'; // Dim lighting
|
||||
knobs[3].style.transform = 'rotate(45deg)'; // Quiet mode
|
||||
} else if (hour >= 9 && hour < 12) {
|
||||
// Morning - bright lighting, active
|
||||
knobs[0].style.transform = 'rotate(135deg)'; // Bright lighting
|
||||
knobs[1].style.transform = 'rotate(135deg)'; // High pressure
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize adaptive features
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
adaptWorkspaceToTime();
|
||||
|
||||
// Simulate user activity patterns
|
||||
setInterval(() => {
|
||||
if (Math.random() > 0.95) {
|
||||
const suggestions = document.querySelectorAll('.adaptive-suggestion');
|
||||
const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
|
||||
if (randomSuggestion) {
|
||||
randomSuggestion.style.animation = 'pulse 1s ease-in-out';
|
||||
setTimeout(() => {
|
||||
randomSuggestion.style.animation = '';
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}, 30000);
|
||||
});
|
||||
|
||||
// Keyboard shortcuts for workshop efficiency
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
switch(e.key) {
|
||||
case '1':
|
||||
e.preventDefault();
|
||||
document.querySelector('[data-tab="calendar"]').click();
|
||||
break;
|
||||
case '2':
|
||||
e.preventDefault();
|
||||
document.querySelector('[data-tab="notes"]').click();
|
||||
break;
|
||||
case '3':
|
||||
e.preventDefault();
|
||||
document.querySelector('[data-tab="files"]').click();
|
||||
break;
|
||||
case '4':
|
||||
e.preventDefault();
|
||||
document.querySelector('[data-tab="communication"]').click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,823 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Organic Nature Search Hub - Hybrid UI Component</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7e6 0%, #e8f0d6 50%, #dde8cc 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Animated background elements */
|
||||
.nature-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.leaf {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0.1;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.leaf::before {
|
||||
content: '🍃';
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
25% { transform: translateY(-20px) rotate(90deg); }
|
||||
50% { transform: translateY(10px) rotate(180deg); }
|
||||
75% { transform: translateY(-15px) rotate(270deg); }
|
||||
}
|
||||
|
||||
/* Main container */
|
||||
.search-ecosystem {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Search bar with organic styling */
|
||||
.search-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 30px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 40px rgba(76, 114, 29, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(139, 195, 74, 0.05) 0%, transparent 70%);
|
||||
animation: ripple 15s infinite ease-out;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% { transform: scale(0.8); opacity: 0.5; }
|
||||
50% { transform: scale(1.2); opacity: 0.3; }
|
||||
100% { transform: scale(0.8); opacity: 0.5; }
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f9fdf5;
|
||||
border: 2px solid #c5d9b4;
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-group:focus-within {
|
||||
border-color: #7cb342;
|
||||
box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
padding: 0 20px;
|
||||
color: #689f38;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 15px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
color: #2e4a1c;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #8ba673;
|
||||
}
|
||||
|
||||
/* Filter tags */
|
||||
.filter-tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
background: linear-gradient(135deg, #dcedc8 0%, #c5e1a5 100%);
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #33691e;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filter-tag::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(124, 179, 66, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
.filter-tag:hover::before {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.filter-tag.active {
|
||||
background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Autocomplete dropdown */
|
||||
.autocomplete-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 10px 30px rgba(76, 114, 29, 0.15);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
transform-origin: top center;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.autocomplete-dropdown.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.autocomplete-item {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.autocomplete-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(139, 195, 74, 0.1) 0%, transparent 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.autocomplete-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.autocomplete-item-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #e8f5e9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Recent searches with vine animation */
|
||||
.recent-searches {
|
||||
margin-top: 30px;
|
||||
opacity: 0;
|
||||
animation: growIn 0.6s ease forwards;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes growIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-searches h3 {
|
||||
color: #4a6f31;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 12px 16px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recent-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #8bc34a 0%, #c5e1a5 100%);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.recent-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/* Results preview with bloom animation */
|
||||
.results-preview {
|
||||
margin-top: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.results-preview.show {
|
||||
animation: bloomIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes bloomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) rotate(5deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05) rotate(-2deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 5px 20px rgba(76, 114, 29, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform-origin: left center;
|
||||
animation: leafUnfold 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.result-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.result-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.result-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes leafUnfold {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px) rotateY(-90deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.result-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(139, 195, 74, 0.05) 0%, transparent 70%);
|
||||
animation: pulse 4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.5; }
|
||||
50% { transform: scale(1.2); opacity: 0.3; }
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
color: #2e4a1c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
color: #5d7a48;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
color: #8ba673;
|
||||
}
|
||||
|
||||
/* Water flow loading animation */
|
||||
.loading-indicator {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.loading-indicator.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.water-drop {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #7cb342;
|
||||
border-radius: 50%;
|
||||
margin: 0 3px;
|
||||
animation: waterFlow 1.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.water-drop:nth-child(1) { animation-delay: -0.32s; }
|
||||
.water-drop:nth-child(2) { animation-delay: -0.16s; }
|
||||
.water-drop:nth-child(3) { animation-delay: 0; }
|
||||
|
||||
@keyframes waterFlow {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.8) translateY(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2) translateY(-20px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Seasonal color variations */
|
||||
.spring { --season-primary: #8bc34a; --season-secondary: #c5e1a5; }
|
||||
.summer { --season-primary: #66bb6a; --season-secondary: #a5d6a7; }
|
||||
.autumn { --season-primary: #ff7043; --season-secondary: #ffab91; }
|
||||
.winter { --season-primary: #5c6bc0; --season-secondary: #9fa8da; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Animated nature background -->
|
||||
<div class="nature-bg" id="natureBg"></div>
|
||||
|
||||
<div class="search-ecosystem">
|
||||
<div class="search-container">
|
||||
<div class="search-wrapper">
|
||||
<!-- Main search bar -->
|
||||
<div class="search-input-group">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search through nature's knowledge...">
|
||||
</div>
|
||||
|
||||
<!-- Filter tags -->
|
||||
<div class="filter-tags">
|
||||
<button class="filter-tag active" data-filter="all">🌿 All</button>
|
||||
<button class="filter-tag" data-filter="plants">🌱 Plants</button>
|
||||
<button class="filter-tag" data-filter="animals">🦋 Animals</button>
|
||||
<button class="filter-tag" data-filter="weather">☀️ Weather</button>
|
||||
<button class="filter-tag" data-filter="seasons">🍂 Seasons</button>
|
||||
</div>
|
||||
|
||||
<!-- Autocomplete dropdown -->
|
||||
<div class="autocomplete-dropdown" id="autocompleteDropdown">
|
||||
<div class="autocomplete-item">
|
||||
<div class="autocomplete-item-icon">🌸</div>
|
||||
<span>Spring flowers blooming patterns</span>
|
||||
</div>
|
||||
<div class="autocomplete-item">
|
||||
<div class="autocomplete-item-icon">🌳</div>
|
||||
<span>Oak tree growth cycles</span>
|
||||
</div>
|
||||
<div class="autocomplete-item">
|
||||
<div class="autocomplete-item-icon">🐝</div>
|
||||
<span>Bee pollination techniques</span>
|
||||
</div>
|
||||
<div class="autocomplete-item">
|
||||
<div class="autocomplete-item-icon">💧</div>
|
||||
<span>Water conservation in plants</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent searches -->
|
||||
<div class="recent-searches">
|
||||
<h3>🌿 Recent Explorations</h3>
|
||||
<div class="recent-list">
|
||||
<div class="recent-item">
|
||||
<span>Photosynthesis process</span>
|
||||
<span style="color: #8ba673; font-size: 14px;">2 hours ago</span>
|
||||
</div>
|
||||
<div class="recent-item">
|
||||
<span>Butterfly migration patterns</span>
|
||||
<span style="color: #8ba673; font-size: 14px;">Yesterday</span>
|
||||
</div>
|
||||
<div class="recent-item">
|
||||
<span>Seasonal plant care</span>
|
||||
<span style="color: #8ba673; font-size: 14px;">3 days ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div class="loading-indicator" id="loadingIndicator">
|
||||
<div class="water-drop"></div>
|
||||
<div class="water-drop"></div>
|
||||
<div class="water-drop"></div>
|
||||
</div>
|
||||
|
||||
<!-- Results preview -->
|
||||
<div class="results-preview" id="resultsPreview">
|
||||
<div class="result-card">
|
||||
<div class="result-header">
|
||||
<div class="result-icon">🌺</div>
|
||||
<h3 class="result-title">Understanding Flower Pollination</h3>
|
||||
</div>
|
||||
<p class="result-description">
|
||||
Discover the intricate dance between flowers and their pollinators. Learn how different species have evolved unique strategies to ensure successful reproduction through color, scent, and timing.
|
||||
</p>
|
||||
<div class="result-meta">
|
||||
<span>📚 Educational</span>
|
||||
<span>⏱️ 5 min read</span>
|
||||
<span>🌟 4.8 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-header">
|
||||
<div class="result-icon">🌲</div>
|
||||
<h3 class="result-title">Forest Ecosystems Explained</h3>
|
||||
</div>
|
||||
<p class="result-description">
|
||||
Explore the complex relationships within forest ecosystems. From the canopy to the forest floor, understand how each layer supports diverse life forms and maintains ecological balance.
|
||||
</p>
|
||||
<div class="result-meta">
|
||||
<span>🎥 Video</span>
|
||||
<span>⏱️ 12 min watch</span>
|
||||
<span>🌟 4.9 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-header">
|
||||
<div class="result-icon">🦋</div>
|
||||
<h3 class="result-title">Monarch Butterfly Migration</h3>
|
||||
</div>
|
||||
<p class="result-description">
|
||||
Follow the incredible journey of monarch butterflies as they travel thousands of miles. Learn about their navigation methods, breeding cycles, and conservation efforts.
|
||||
</p>
|
||||
<div class="result-meta">
|
||||
<span>🗺️ Interactive</span>
|
||||
<span>⏱️ 8 min explore</span>
|
||||
<span>🌟 5.0 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Create floating leaves in background
|
||||
function createLeaves() {
|
||||
const bg = document.getElementById('natureBg');
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const leaf = document.createElement('div');
|
||||
leaf.className = 'leaf';
|
||||
leaf.style.left = Math.random() * 100 + '%';
|
||||
leaf.style.top = Math.random() * 100 + '%';
|
||||
leaf.style.animationDelay = Math.random() * 20 + 's';
|
||||
leaf.style.animationDuration = (20 + Math.random() * 10) + 's';
|
||||
bg.appendChild(leaf);
|
||||
}
|
||||
}
|
||||
|
||||
createLeaves();
|
||||
|
||||
// Search functionality
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const autocompleteDropdown = document.getElementById('autocompleteDropdown');
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
const resultsPreview = document.getElementById('resultsPreview');
|
||||
|
||||
// Autocomplete suggestions data
|
||||
const suggestions = {
|
||||
plants: ['Rose care tips', 'Succulent watering guide', 'Indoor plant species', 'Garden design ideas'],
|
||||
animals: ['Bird watching basics', 'Butterfly gardens', 'Wildlife photography', 'Animal habitats'],
|
||||
weather: ['Cloud formation types', 'Weather patterns', 'Climate zones', 'Storm tracking'],
|
||||
seasons: ['Spring gardening', 'Summer plant care', 'Autumn leaves', 'Winter preparations']
|
||||
};
|
||||
|
||||
// Show autocomplete on focus
|
||||
searchInput.addEventListener('focus', () => {
|
||||
autocompleteDropdown.classList.add('show');
|
||||
});
|
||||
|
||||
// Hide autocomplete on blur (with delay for clicking)
|
||||
searchInput.addEventListener('blur', () => {
|
||||
setTimeout(() => {
|
||||
autocompleteDropdown.classList.remove('show');
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Search input handler
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value;
|
||||
if (value.length > 2) {
|
||||
// Update autocomplete based on input
|
||||
updateAutocomplete(value);
|
||||
}
|
||||
});
|
||||
|
||||
// Perform search on Enter
|
||||
searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && e.target.value.trim()) {
|
||||
performSearch(e.target.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Filter tag functionality
|
||||
const filterTags = document.querySelectorAll('.filter-tag');
|
||||
let activeFilter = 'all';
|
||||
|
||||
filterTags.forEach(tag => {
|
||||
tag.addEventListener('click', () => {
|
||||
filterTags.forEach(t => t.classList.remove('active'));
|
||||
tag.classList.add('active');
|
||||
activeFilter = tag.dataset.filter;
|
||||
|
||||
// Trigger search with current input and filter
|
||||
if (searchInput.value.trim()) {
|
||||
performSearch(searchInput.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Autocomplete item clicks
|
||||
document.querySelectorAll('.autocomplete-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
searchInput.value = item.querySelector('span').textContent;
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
});
|
||||
|
||||
// Recent search item clicks
|
||||
document.querySelectorAll('.recent-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
searchInput.value = item.querySelector('span').textContent;
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
});
|
||||
|
||||
// Update autocomplete suggestions
|
||||
function updateAutocomplete(query) {
|
||||
// In a real app, this would fetch suggestions from an API
|
||||
const dropdown = document.getElementById('autocompleteDropdown');
|
||||
dropdown.innerHTML = '';
|
||||
|
||||
// Generate contextual suggestions
|
||||
const icons = ['🌸', '🌳', '🐝', '💧', '🌿', '🦋'];
|
||||
const contextualSuggestions = [
|
||||
`${query} in spring`,
|
||||
`${query} care guide`,
|
||||
`${query} identification`,
|
||||
`How to grow ${query}`,
|
||||
`${query} facts`,
|
||||
`Best ${query} varieties`
|
||||
];
|
||||
|
||||
contextualSuggestions.slice(0, 4).forEach((suggestion, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'autocomplete-item';
|
||||
item.innerHTML = `
|
||||
<div class="autocomplete-item-icon">${icons[index]}</div>
|
||||
<span>${suggestion}</span>
|
||||
`;
|
||||
item.addEventListener('click', () => {
|
||||
searchInput.value = suggestion;
|
||||
performSearch(suggestion);
|
||||
});
|
||||
dropdown.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// Perform search with loading and results animation
|
||||
function performSearch(query) {
|
||||
// Hide autocomplete
|
||||
autocompleteDropdown.classList.remove('show');
|
||||
|
||||
// Show loading
|
||||
loadingIndicator.classList.add('show');
|
||||
resultsPreview.classList.remove('show');
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
loadingIndicator.classList.remove('show');
|
||||
|
||||
// Generate dynamic results based on query and filter
|
||||
generateResults(query, activeFilter);
|
||||
|
||||
// Show results with bloom animation
|
||||
resultsPreview.classList.add('show');
|
||||
|
||||
// Add to recent searches
|
||||
addToRecentSearches(query);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Generate dynamic search results
|
||||
function generateResults(query, filter) {
|
||||
const resultsContainer = document.getElementById('resultsPreview');
|
||||
resultsContainer.innerHTML = '';
|
||||
|
||||
// Sample result templates based on filter
|
||||
const resultTemplates = {
|
||||
plants: [
|
||||
{ icon: '🌺', title: 'Plant Care Guide', type: '📚 Guide' },
|
||||
{ icon: '🌱', title: 'Growing Tips', type: '🎥 Video' },
|
||||
{ icon: '🌿', title: 'Species Information', type: '📊 Database' }
|
||||
],
|
||||
animals: [
|
||||
{ icon: '🦋', title: 'Wildlife Observation', type: '📷 Gallery' },
|
||||
{ icon: '🐝', title: 'Animal Behavior', type: '🎥 Documentary' },
|
||||
{ icon: '🦜', title: 'Species Guide', type: '📚 Reference' }
|
||||
],
|
||||
weather: [
|
||||
{ icon: '☀️', title: 'Weather Patterns', type: '📊 Data' },
|
||||
{ icon: '🌧️', title: 'Climate Analysis', type: '📈 Report' },
|
||||
{ icon: '⛈️', title: 'Storm Tracking', type: '🗺️ Live Map' }
|
||||
],
|
||||
all: [
|
||||
{ icon: '🌸', title: 'Nature Discovery', type: '🔍 Explore' },
|
||||
{ icon: '🌳', title: 'Ecosystem Guide', type: '📚 Learn' },
|
||||
{ icon: '💧', title: 'Environmental Topics', type: '🌍 Discover' }
|
||||
]
|
||||
};
|
||||
|
||||
const templates = resultTemplates[filter] || resultTemplates.all;
|
||||
|
||||
templates.forEach((template, index) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'result-card';
|
||||
card.style.animationDelay = `${index * 0.1}s`;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="result-header">
|
||||
<div class="result-icon">${template.icon}</div>
|
||||
<h3 class="result-title">${template.title}: ${query}</h3>
|
||||
</div>
|
||||
<p class="result-description">
|
||||
Comprehensive information about ${query}. Explore detailed insights, expert knowledge, and practical tips
|
||||
to deepen your understanding of this fascinating aspect of nature.
|
||||
</p>
|
||||
<div class="result-meta">
|
||||
<span>${template.type}</span>
|
||||
<span>⏱️ ${5 + index * 3} min</span>
|
||||
<span>🌟 ${(4.5 + Math.random() * 0.5).toFixed(1)} rating</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
resultsContainer.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Add to recent searches
|
||||
function addToRecentSearches(query) {
|
||||
const recentList = document.querySelector('.recent-list');
|
||||
const existingItems = Array.from(recentList.children);
|
||||
|
||||
// Check if already exists
|
||||
const exists = existingItems.some(item =>
|
||||
item.querySelector('span').textContent === query
|
||||
);
|
||||
|
||||
if (!exists) {
|
||||
// Create new recent item
|
||||
const newItem = document.createElement('div');
|
||||
newItem.className = 'recent-item';
|
||||
newItem.innerHTML = `
|
||||
<span>${query}</span>
|
||||
<span style="color: #8ba673; font-size: 14px;">Just now</span>
|
||||
`;
|
||||
|
||||
// Add click handler
|
||||
newItem.addEventListener('click', () => {
|
||||
searchInput.value = query;
|
||||
performSearch(query);
|
||||
});
|
||||
|
||||
// Insert at beginning
|
||||
recentList.insertBefore(newItem, recentList.firstChild);
|
||||
|
||||
// Remove last item if more than 3
|
||||
if (recentList.children.length > 3) {
|
||||
recentList.removeChild(recentList.lastChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Seasonal theme changer (demo)
|
||||
function applySeason() {
|
||||
const seasons = ['spring', 'summer', 'autumn', 'winter'];
|
||||
const currentMonth = new Date().getMonth();
|
||||
let season = 'spring';
|
||||
|
||||
if (currentMonth >= 2 && currentMonth <= 4) season = 'spring';
|
||||
else if (currentMonth >= 5 && currentMonth <= 7) season = 'summer';
|
||||
else if (currentMonth >= 8 && currentMonth <= 10) season = 'autumn';
|
||||
else season = 'winter';
|
||||
|
||||
document.body.className = season;
|
||||
}
|
||||
|
||||
// Initialize seasonal theme
|
||||
applySeason();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,993 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NEXUS Media Player - Cyberpunk Interface</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Animated cyberpunk background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 50%, #00ffff22 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, #ff00ff22 0%, transparent 50%),
|
||||
radial-gradient(circle at 50% 20%, #ffff0022 0%, transparent 50%);
|
||||
animation: bgPulse 10s ease-in-out infinite;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
/* Grid overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent),
|
||||
linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent);
|
||||
background-size: 50px 50px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes bgPulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
height: 90vh;
|
||||
max-height: 700px;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||||
border: 2px solid #00ffff;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 0 50px rgba(0, 255, 255, 0.5),
|
||||
inset 0 0 50px rgba(0, 255, 255, 0.1);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
/* Glitch effect */
|
||||
@keyframes glitch {
|
||||
0%, 100% {
|
||||
transform: translate(0);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
filter: hue-rotate(90deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-2px, -2px);
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px);
|
||||
filter: hue-rotate(270deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.glitch {
|
||||
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #00ffff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: 'NEXUS MEDIA PLAYER v2.077';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 20px;
|
||||
font-size: 10px;
|
||||
color: #00ffff;
|
||||
opacity: 0.5;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
color: #00ffff;
|
||||
text-shadow:
|
||||
0 0 10px #00ffff,
|
||||
0 0 20px #00ffff,
|
||||
0 0 30px #00ffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 350px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Visualizer area */
|
||||
.visualizer-section {
|
||||
position: relative;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.visualizer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.visualizer-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 2%;
|
||||
background: linear-gradient(to top, #00ffff, #ff00ff, #ffff00);
|
||||
transform-origin: bottom;
|
||||
transition: height 0.1s ease;
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
/* Video display */
|
||||
.video-display {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid #00ffff;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 20px currentColor;
|
||||
}
|
||||
|
||||
.video-display.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Playlist section */
|
||||
.playlist-section {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-left: 1px solid #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.playlist-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #00ffff;
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.playlist-header h3 {
|
||||
color: #00ffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.playlist {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #00ffff #000;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar-track {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.playlist::-webkit-scrollbar-thumb {
|
||||
background: #00ffff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.track-item {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.track-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.track-item:hover {
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.track-item.active {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-left: 3px solid #00ffff;
|
||||
}
|
||||
|
||||
.track-title {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
color: #00ffff;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #ffff00;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Controls section */
|
||||
.controls-section {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-top: 1px solid #00ffff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, #00ffff, transparent);
|
||||
animation: scanline 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00);
|
||||
width: 0%;
|
||||
transition: width 0.1s linear;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.controls-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: 1px solid #00ffff;
|
||||
color: #00ffff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.control-btn.main {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
border-color: #ff00ff;
|
||||
color: #ff00ff;
|
||||
}
|
||||
|
||||
.control-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.control-btn:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 20px currentColor;
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-fill {
|
||||
height: 100%;
|
||||
background: #00ffff;
|
||||
width: 70%;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.extra-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Quality selector */
|
||||
.quality-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quality-dropdown {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
background: #000;
|
||||
border: 1px solid #00ffff;
|
||||
display: none;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.quality-dropdown.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quality-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.quality-option:hover {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.quality-option.active {
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
/* Share menu */
|
||||
.share-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
background: #000;
|
||||
border: 1px solid #00ffff;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.share-menu.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.share-option {
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.share-option:hover {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* Cyberpunk text effects */
|
||||
.cyber-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cyber-text::before,
|
||||
.cyber-text::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cyber-text::before {
|
||||
color: #ff00ff;
|
||||
z-index: -1;
|
||||
animation: cyberGlitch1 0.5s infinite;
|
||||
}
|
||||
|
||||
.cyber-text::after {
|
||||
color: #00ffff;
|
||||
z-index: -2;
|
||||
animation: cyberGlitch2 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes cyberGlitch1 {
|
||||
0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
||||
20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }
|
||||
40% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); }
|
||||
60% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, -2px); }
|
||||
80% { clip-path: inset(80% 0 10% 0); transform: translate(2px, 2px); }
|
||||
}
|
||||
|
||||
@keyframes cyberGlitch2 {
|
||||
0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
||||
20% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -2px); }
|
||||
40% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); }
|
||||
60% { clip-path: inset(50% 0 20% 0); transform: translate(2px, 2px); }
|
||||
80% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, -2px); }
|
||||
}
|
||||
|
||||
/* Current track info */
|
||||
.current-track {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.current-title {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.current-artist {
|
||||
font-size: 14px;
|
||||
color: #00ffff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="player-container">
|
||||
<div class="header">
|
||||
<h1 class="title cyber-text" data-text="NEXUS MEDIA SYSTEM">NEXUS MEDIA SYSTEM</h1>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="visualizer-section">
|
||||
<div class="visualizer" id="visualizer"></div>
|
||||
<div class="video-display" id="videoDisplay">
|
||||
<span>VIDEO MODE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="playlist-section">
|
||||
<div class="playlist-header">
|
||||
<h3>TRANSMISSION LOG</h3>
|
||||
</div>
|
||||
<div class="playlist" id="playlist"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-section">
|
||||
<div class="current-track">
|
||||
<div class="current-title" id="currentTitle">INITIALIZING...</div>
|
||||
<div class="current-artist" id="currentArtist">SYSTEM READY</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="progressBar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
<span id="currentTime">00:00</span>
|
||||
<span id="totalTime">00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-main">
|
||||
<div class="playback-controls">
|
||||
<button class="control-btn" id="prevBtn">⏮</button>
|
||||
<button class="control-btn main" id="playBtn">▶</button>
|
||||
<button class="control-btn" id="nextBtn">⏭</button>
|
||||
</div>
|
||||
|
||||
<div class="volume-control">
|
||||
<button class="control-btn control-small" id="muteBtn">🔊</button>
|
||||
<div class="volume-slider" id="volumeSlider">
|
||||
<div class="volume-fill" id="volumeFill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extra-controls">
|
||||
<button class="control-btn control-small" id="shuffleBtn">🔀</button>
|
||||
<button class="control-btn control-small" id="repeatBtn">🔁</button>
|
||||
<div class="quality-selector">
|
||||
<button class="control-btn control-small" id="qualityBtn">HD</button>
|
||||
<div class="quality-dropdown" id="qualityDropdown">
|
||||
<div class="quality-option" data-quality="4K">4K</div>
|
||||
<div class="quality-option active" data-quality="1080p">1080p</div>
|
||||
<div class="quality-option" data-quality="720p">720p</div>
|
||||
<div class="quality-option" data-quality="480p">480p</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-container">
|
||||
<button class="control-btn control-small" id="shareBtn">📤</button>
|
||||
<div class="share-menu" id="shareMenu">
|
||||
<div class="share-option">Copy Link</div>
|
||||
<div class="share-option">Neural Link</div>
|
||||
<div class="share-option">Quantum Share</div>
|
||||
<div class="share-option">Matrix Upload</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Playlist data
|
||||
const tracks = [
|
||||
{ id: 1, title: "Neon Dreams", artist: "Cyber Collective", duration: "3:45", type: "audio" },
|
||||
{ id: 2, title: "Digital Rain", artist: "Matrix Runners", duration: "4:12", type: "audio" },
|
||||
{ id: 3, title: "Ghost Protocol", artist: "Neural Network", duration: "5:03", type: "video" },
|
||||
{ id: 4, title: "Blade Symphony", artist: "Replicant Echo", duration: "3:28", type: "audio" },
|
||||
{ id: 5, title: "Chrome Hearts", artist: "Android Dreams", duration: "4:55", type: "audio" },
|
||||
{ id: 6, title: "Cyber City Lights", artist: "Neon Pulse", duration: "6:21", type: "video" },
|
||||
{ id: 7, title: "Data Stream", artist: "Binary Code", duration: "3:17", type: "audio" },
|
||||
{ id: 8, title: "Hologram Love", artist: "Virtual Hearts", duration: "4:33", type: "audio" },
|
||||
{ id: 9, title: "Mainframe Dreams", artist: "System Override", duration: "5:45", type: "video" },
|
||||
{ id: 10, title: "Electric Shadows", artist: "Noir Tech", duration: "3:52", type: "audio" },
|
||||
{ id: 11, title: "Quantum Leap", artist: "Time Hackers", duration: "4:08", type: "audio" },
|
||||
{ id: 12, title: "Neural Interface", artist: "Mind Link", duration: "7:12", type: "video" }
|
||||
];
|
||||
|
||||
// Player state
|
||||
let currentTrackIndex = 0;
|
||||
let isPlaying = false;
|
||||
let currentTime = 0;
|
||||
let duration = 0;
|
||||
let volume = 0.7;
|
||||
let isMuted = false;
|
||||
let isShuffled = false;
|
||||
let repeatMode = 'none'; // none, one, all
|
||||
let visualizerInterval;
|
||||
|
||||
// DOM elements
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
const prevBtn = document.getElementById('prevBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const currentTimeEl = document.getElementById('currentTime');
|
||||
const totalTimeEl = document.getElementById('totalTime');
|
||||
const volumeSlider = document.getElementById('volumeSlider');
|
||||
const volumeFill = document.getElementById('volumeFill');
|
||||
const muteBtn = document.getElementById('muteBtn');
|
||||
const shuffleBtn = document.getElementById('shuffleBtn');
|
||||
const repeatBtn = document.getElementById('repeatBtn');
|
||||
const playlist = document.getElementById('playlist');
|
||||
const visualizer = document.getElementById('visualizer');
|
||||
const videoDisplay = document.getElementById('videoDisplay');
|
||||
const currentTitle = document.getElementById('currentTitle');
|
||||
const currentArtist = document.getElementById('currentArtist');
|
||||
const qualityBtn = document.getElementById('qualityBtn');
|
||||
const qualityDropdown = document.getElementById('qualityDropdown');
|
||||
const shareBtn = document.getElementById('shareBtn');
|
||||
const shareMenu = document.getElementById('shareMenu');
|
||||
|
||||
// Initialize visualizer bars
|
||||
function initVisualizer() {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'visualizer-bar';
|
||||
bar.style.left = `${i * 2}%`;
|
||||
visualizer.appendChild(bar);
|
||||
}
|
||||
}
|
||||
|
||||
// Animate visualizer
|
||||
function animateVisualizer() {
|
||||
const bars = visualizer.querySelectorAll('.visualizer-bar');
|
||||
bars.forEach(bar => {
|
||||
const height = Math.random() * 70 + 30;
|
||||
bar.style.height = `${height}%`;
|
||||
bar.style.opacity = Math.random() * 0.5 + 0.5;
|
||||
});
|
||||
}
|
||||
|
||||
// Create playlist
|
||||
function createPlaylist() {
|
||||
playlist.innerHTML = '';
|
||||
tracks.forEach((track, index) => {
|
||||
const trackEl = document.createElement('div');
|
||||
trackEl.className = 'track-item';
|
||||
if (index === currentTrackIndex) trackEl.classList.add('active');
|
||||
|
||||
trackEl.innerHTML = `
|
||||
<div class="track-title">${track.title}</div>
|
||||
<div class="track-artist">${track.artist}</div>
|
||||
<div class="track-duration">${track.duration}</div>
|
||||
`;
|
||||
|
||||
trackEl.addEventListener('click', () => loadTrack(index));
|
||||
playlist.appendChild(trackEl);
|
||||
});
|
||||
}
|
||||
|
||||
// Load track
|
||||
function loadTrack(index) {
|
||||
currentTrackIndex = index;
|
||||
const track = tracks[currentTrackIndex];
|
||||
|
||||
// Add glitch effect
|
||||
document.querySelector('.player-container').classList.add('glitch');
|
||||
setTimeout(() => {
|
||||
document.querySelector('.player-container').classList.remove('glitch');
|
||||
}, 300);
|
||||
|
||||
// Update UI
|
||||
currentTitle.textContent = track.title;
|
||||
currentArtist.textContent = track.artist;
|
||||
|
||||
// Parse duration
|
||||
const [minutes, seconds] = track.duration.split(':').map(Number);
|
||||
duration = minutes * 60 + seconds;
|
||||
totalTimeEl.textContent = track.duration;
|
||||
currentTime = 0;
|
||||
updateProgress();
|
||||
|
||||
// Update playlist active state
|
||||
document.querySelectorAll('.track-item').forEach((item, i) => {
|
||||
item.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
// Show/hide video display
|
||||
videoDisplay.classList.toggle('active', track.type === 'video');
|
||||
|
||||
if (isPlaying) {
|
||||
play();
|
||||
}
|
||||
}
|
||||
|
||||
// Play/pause
|
||||
function togglePlay() {
|
||||
if (isPlaying) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}
|
||||
|
||||
function play() {
|
||||
isPlaying = true;
|
||||
playBtn.textContent = '⏸';
|
||||
startPlayback();
|
||||
|
||||
// Start visualizer
|
||||
visualizerInterval = setInterval(animateVisualizer, 100);
|
||||
}
|
||||
|
||||
function pause() {
|
||||
isPlaying = false;
|
||||
playBtn.textContent = '▶';
|
||||
stopPlayback();
|
||||
|
||||
// Stop visualizer
|
||||
clearInterval(visualizerInterval);
|
||||
}
|
||||
|
||||
// Playback simulation
|
||||
let playbackInterval;
|
||||
|
||||
function startPlayback() {
|
||||
playbackInterval = setInterval(() => {
|
||||
if (currentTime < duration) {
|
||||
currentTime += 0.1;
|
||||
updateProgress();
|
||||
} else {
|
||||
handleTrackEnd();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function stopPlayback() {
|
||||
clearInterval(playbackInterval);
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
const progress = (currentTime / duration) * 100;
|
||||
progressFill.style.width = `${progress}%`;
|
||||
|
||||
const minutes = Math.floor(currentTime / 60);
|
||||
const seconds = Math.floor(currentTime % 60);
|
||||
currentTimeEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function handleTrackEnd() {
|
||||
if (repeatMode === 'one') {
|
||||
currentTime = 0;
|
||||
play();
|
||||
} else if (repeatMode === 'all' || currentTrackIndex < tracks.length - 1) {
|
||||
nextTrack();
|
||||
} else {
|
||||
pause();
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
function prevTrack() {
|
||||
if (currentTrackIndex > 0) {
|
||||
loadTrack(currentTrackIndex - 1);
|
||||
} else if (repeatMode === 'all') {
|
||||
loadTrack(tracks.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function nextTrack() {
|
||||
if (isShuffled) {
|
||||
const nextIndex = Math.floor(Math.random() * tracks.length);
|
||||
loadTrack(nextIndex);
|
||||
} else if (currentTrackIndex < tracks.length - 1) {
|
||||
loadTrack(currentTrackIndex + 1);
|
||||
} else if (repeatMode === 'all') {
|
||||
loadTrack(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bar seeking
|
||||
progressBar.addEventListener('click', (e) => {
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percentage = x / rect.width;
|
||||
currentTime = percentage * duration;
|
||||
updateProgress();
|
||||
});
|
||||
|
||||
// Volume control
|
||||
volumeSlider.addEventListener('click', (e) => {
|
||||
const rect = volumeSlider.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
volume = x / rect.width;
|
||||
updateVolume();
|
||||
});
|
||||
|
||||
function updateVolume() {
|
||||
volumeFill.style.width = `${volume * 100}%`;
|
||||
muteBtn.textContent = volume === 0 || isMuted ? '🔇' : '🔊';
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
isMuted = !isMuted;
|
||||
updateVolume();
|
||||
}
|
||||
|
||||
// Shuffle and repeat
|
||||
function toggleShuffle() {
|
||||
isShuffled = !isShuffled;
|
||||
shuffleBtn.style.color = isShuffled ? '#ffff00' : '#00ffff';
|
||||
}
|
||||
|
||||
function toggleRepeat() {
|
||||
const modes = ['none', 'all', 'one'];
|
||||
const currentIndex = modes.indexOf(repeatMode);
|
||||
repeatMode = modes[(currentIndex + 1) % modes.length];
|
||||
|
||||
repeatBtn.style.color = repeatMode === 'none' ? '#00ffff' : '#ffff00';
|
||||
repeatBtn.textContent = repeatMode === 'one' ? '🔂' : '🔁';
|
||||
}
|
||||
|
||||
// Quality selector
|
||||
qualityBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
qualityDropdown.classList.toggle('active');
|
||||
shareMenu.classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.quality-option').forEach(option => {
|
||||
option.addEventListener('click', (e) => {
|
||||
document.querySelectorAll('.quality-option').forEach(opt => opt.classList.remove('active'));
|
||||
option.classList.add('active');
|
||||
qualityBtn.textContent = option.dataset.quality;
|
||||
qualityDropdown.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Share menu
|
||||
shareBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
shareMenu.classList.toggle('active');
|
||||
qualityDropdown.classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.share-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
// Add glitch effect on share
|
||||
option.classList.add('glitch');
|
||||
setTimeout(() => {
|
||||
option.classList.remove('glitch');
|
||||
shareMenu.classList.remove('active');
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Close dropdowns on outside click
|
||||
document.addEventListener('click', () => {
|
||||
qualityDropdown.classList.remove('active');
|
||||
shareMenu.classList.remove('active');
|
||||
});
|
||||
|
||||
// Event listeners
|
||||
playBtn.addEventListener('click', togglePlay);
|
||||
prevBtn.addEventListener('click', prevTrack);
|
||||
nextBtn.addEventListener('click', nextTrack);
|
||||
muteBtn.addEventListener('click', toggleMute);
|
||||
shuffleBtn.addEventListener('click', toggleShuffle);
|
||||
repeatBtn.addEventListener('click', toggleRepeat);
|
||||
|
||||
// Initialize
|
||||
initVisualizer();
|
||||
createPlaylist();
|
||||
loadTrack(0);
|
||||
updateVolume();
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
switch(e.key) {
|
||||
case ' ':
|
||||
e.preventDefault();
|
||||
togglePlay();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
prevTrack();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
nextTrack();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
volume = Math.min(1, volume + 0.1);
|
||||
updateVolume();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
volume = Math.max(0, volume - 0.1);
|
||||
updateVolume();
|
||||
break;
|
||||
case 'm':
|
||||
toggleMute();
|
||||
break;
|
||||
case 's':
|
||||
toggleShuffle();
|
||||
break;
|
||||
case 'r':
|
||||
toggleRepeat();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Add startup animation
|
||||
setTimeout(() => {
|
||||
document.querySelector('.player-container').style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
document.querySelector('.player-container').style.opacity = '1';
|
||||
document.querySelector('.player-container').classList.add('glitch');
|
||||
setTimeout(() => {
|
||||
document.querySelector('.player-container').classList.remove('glitch');
|
||||
}, 500);
|
||||
}, 100);
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,906 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Glass Morphism Analytics Dashboard Widget</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animated background orbs */
|
||||
.bg-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.6;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, #ff006e, #8338ec);
|
||||
top: -200px;
|
||||
left: -200px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, #3a86ff, #06ffa5);
|
||||
bottom: -150px;
|
||||
right: -150px;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.orb-3 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, #ffbe0b, #fb5607);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(50px, -50px) scale(1.1); }
|
||||
50% { transform: translate(-50px, 50px) scale(0.9); }
|
||||
75% { transform: translate(30px, 30px) scale(1.05); }
|
||||
}
|
||||
|
||||
/* Main dashboard container */
|
||||
.dashboard-widget {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Glass panel base */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Light refraction effect */
|
||||
.glass-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Header section */
|
||||
.header-section {
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title-area h1 {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-area p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.glass-button {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Chart container */
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Canvas for chart */
|
||||
#salesChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Filter panel */
|
||||
.filter-panel {
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.filter-panel h3 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.glass-select {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-select:focus {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.glass-select option {
|
||||
background: #764ba2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Alerts panel */
|
||||
.alerts-panel {
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.alerts-panel h3 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.alert-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alert-icon.success { background: #06ffa5; }
|
||||
.alert-icon.warning { background: #ffbe0b; }
|
||||
.alert-icon.danger { background: #ff006e; }
|
||||
|
||||
.alert-title {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.alert-time {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 11px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Settings modal */
|
||||
.settings-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.settings-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.settings-header h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.glass-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glass-checkbox input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
accent-color: #06ffa5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glass-checkbox span {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-widget {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Background orbs -->
|
||||
<div class="bg-orb orb-1"></div>
|
||||
<div class="bg-orb orb-2"></div>
|
||||
<div class="bg-orb orb-3"></div>
|
||||
|
||||
<!-- Main dashboard widget -->
|
||||
<div class="dashboard-widget">
|
||||
<!-- Main content area -->
|
||||
<div class="main-content">
|
||||
<!-- Header section -->
|
||||
<div class="glass-panel header-section">
|
||||
<div class="title-area">
|
||||
<h1>Revenue Analytics</h1>
|
||||
<p>Real-time performance monitoring</p>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button class="glass-button" onclick="refreshData()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
|
||||
</svg>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="glass-button" onclick="exportData()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
Export
|
||||
</button>
|
||||
<button class="glass-button" onclick="openSettings()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6m4.22-10.22l4.24 4.24m-4.24 4.24l4.24 4.24M6.34 6.34L2.1 2.1m4.24 15.8l-4.24 4.24M1 12h6m6 0h6"/>
|
||||
</svg>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart container -->
|
||||
<div class="glass-panel chart-container">
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="salesChart"></canvas>
|
||||
</div>
|
||||
<div class="loading" id="chartLoading">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Filter panel -->
|
||||
<div class="glass-panel filter-panel">
|
||||
<h3>Filters</h3>
|
||||
<div class="filter-group">
|
||||
<label>Time Period</label>
|
||||
<select class="glass-select" id="periodFilter" onchange="applyFilters()">
|
||||
<option value="7">Last 7 Days</option>
|
||||
<option value="30" selected>Last 30 Days</option>
|
||||
<option value="90">Last 90 Days</option>
|
||||
<option value="365">Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>Region</label>
|
||||
<select class="glass-select" id="regionFilter" onchange="applyFilters()">
|
||||
<option value="all">All Regions</option>
|
||||
<option value="north">North America</option>
|
||||
<option value="europe">Europe</option>
|
||||
<option value="asia">Asia Pacific</option>
|
||||
<option value="latin">Latin America</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>Product Category</label>
|
||||
<select class="glass-select" id="categoryFilter" onchange="applyFilters()">
|
||||
<option value="all">All Categories</option>
|
||||
<option value="electronics">Electronics</option>
|
||||
<option value="software">Software</option>
|
||||
<option value="services">Services</option>
|
||||
<option value="hardware">Hardware</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts panel -->
|
||||
<div class="glass-panel alerts-panel">
|
||||
<h3>Alerts</h3>
|
||||
<div id="alertsList">
|
||||
<div class="alert-item">
|
||||
<div class="alert-header">
|
||||
<div class="alert-icon success"></div>
|
||||
<div class="alert-title">Revenue Target Achieved</div>
|
||||
</div>
|
||||
<div class="alert-message">Q4 revenue exceeded projections by 12%</div>
|
||||
<div class="alert-time">2 hours ago</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<div class="alert-header">
|
||||
<div class="alert-icon warning"></div>
|
||||
<div class="alert-title">Inventory Alert</div>
|
||||
</div>
|
||||
<div class="alert-message">Electronics category stock running low in APAC region</div>
|
||||
<div class="alert-time">5 hours ago</div>
|
||||
</div>
|
||||
<div class="alert-item">
|
||||
<div class="alert-header">
|
||||
<div class="alert-icon danger"></div>
|
||||
<div class="alert-title">System Maintenance</div>
|
||||
</div>
|
||||
<div class="alert-message">Scheduled maintenance window: Sunday 2-4 AM EST</div>
|
||||
<div class="alert-time">Yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings modal -->
|
||||
<div class="settings-modal" id="settingsModal">
|
||||
<div class="settings-content">
|
||||
<div class="settings-header">
|
||||
<h2>Dashboard Settings</h2>
|
||||
<button class="close-button" onclick="closeSettings()">✕</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>Display Options</label>
|
||||
<div class="glass-checkbox">
|
||||
<input type="checkbox" id="showDataLabels" checked>
|
||||
<span>Show data labels on chart</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="glass-checkbox">
|
||||
<input type="checkbox" id="enableAnimations" checked>
|
||||
<span>Enable chart animations</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="glass-checkbox">
|
||||
<input type="checkbox" id="autoRefresh">
|
||||
<span>Auto-refresh every 5 minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>Chart Type</label>
|
||||
<select class="glass-select" id="chartType">
|
||||
<option value="line">Line Chart</option>
|
||||
<option value="bar">Bar Chart</option>
|
||||
<option value="area">Area Chart</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>Theme</label>
|
||||
<select class="glass-select" id="themeSelect">
|
||||
<option value="glass">Glass Morphism</option>
|
||||
<option value="dark">Dark Crystal</option>
|
||||
<option value="light">Light Prism</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip" id="tooltip"></div>
|
||||
|
||||
<script>
|
||||
// Chart initialization
|
||||
let chart = null;
|
||||
let chartData = {
|
||||
labels: [],
|
||||
revenue: [],
|
||||
orders: [],
|
||||
users: []
|
||||
};
|
||||
|
||||
// Generate sample data
|
||||
function generateData(days) {
|
||||
const data = {
|
||||
labels: [],
|
||||
revenue: [],
|
||||
orders: [],
|
||||
users: []
|
||||
};
|
||||
|
||||
const now = new Date();
|
||||
for (let i = days - 1; i >= 0; i--) {
|
||||
const date = new Date(now);
|
||||
date.setDate(date.getDate() - i);
|
||||
data.labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
|
||||
|
||||
// Generate realistic data with trends
|
||||
const baseRevenue = 50000 + Math.random() * 30000;
|
||||
const trend = (days - i) * 100;
|
||||
data.revenue.push(Math.round(baseRevenue + trend + Math.random() * 10000));
|
||||
data.orders.push(Math.round(100 + Math.random() * 50 + (days - i) * 2));
|
||||
data.users.push(Math.round(1000 + Math.random() * 500 + (days - i) * 10));
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
function initChart() {
|
||||
const canvas = document.getElementById('salesChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Set canvas size
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
|
||||
chartData = generateData(30);
|
||||
drawChart(ctx);
|
||||
}
|
||||
|
||||
// Draw chart
|
||||
function drawChart(ctx) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const padding = 40;
|
||||
const chartWidth = width - padding * 2;
|
||||
const chartHeight = height - padding * 2;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Find max value
|
||||
const maxRevenue = Math.max(...chartData.revenue);
|
||||
const scale = chartHeight / maxRevenue;
|
||||
|
||||
// Draw grid lines
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const y = padding + (chartHeight / 5) * i;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, y);
|
||||
ctx.lineTo(width - padding, y);
|
||||
ctx.stroke();
|
||||
|
||||
// Y-axis labels
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
|
||||
ctx.font = '12px -apple-system, BlinkMacSystemFont, sans-serif';
|
||||
ctx.textAlign = 'right';
|
||||
const value = Math.round(maxRevenue - (maxRevenue / 5) * i);
|
||||
ctx.fillText(`$${(value / 1000).toFixed(0)}k`, padding - 10, y + 4);
|
||||
}
|
||||
|
||||
// Draw data line
|
||||
ctx.strokeStyle = '#06ffa5';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
// Create gradient for area fill
|
||||
const gradient = ctx.createLinearGradient(0, padding, 0, height - padding);
|
||||
gradient.addColorStop(0, 'rgba(6, 255, 165, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(6, 255, 165, 0)');
|
||||
|
||||
// Draw area
|
||||
ctx.beginPath();
|
||||
chartData.revenue.forEach((value, index) => {
|
||||
const x = padding + (chartWidth / (chartData.revenue.length - 1)) * index;
|
||||
const y = padding + chartHeight - (value * scale);
|
||||
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
|
||||
// Complete area path
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
chartData.revenue.forEach((value, index) => {
|
||||
const x = padding + (chartWidth / (chartData.revenue.length - 1)) * index;
|
||||
const y = padding + chartHeight - (value * scale);
|
||||
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
ctx.stroke();
|
||||
|
||||
// Draw points
|
||||
ctx.fillStyle = '#06ffa5';
|
||||
chartData.revenue.forEach((value, index) => {
|
||||
const x = padding + (chartWidth / (chartData.revenue.length - 1)) * index;
|
||||
const y = padding + chartHeight - (value * scale);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// X-axis labels
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
|
||||
ctx.font = '12px -apple-system, BlinkMacSystemFont, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
|
||||
const labelInterval = Math.ceil(chartData.labels.length / 10);
|
||||
chartData.labels.forEach((label, index) => {
|
||||
if (index % labelInterval === 0) {
|
||||
const x = padding + (chartWidth / (chartData.labels.length - 1)) * index;
|
||||
ctx.fillText(label, x, height - padding + 20);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Apply filters
|
||||
function applyFilters() {
|
||||
const period = document.getElementById('periodFilter').value;
|
||||
const loading = document.getElementById('chartLoading');
|
||||
|
||||
loading.classList.add('active');
|
||||
|
||||
setTimeout(() => {
|
||||
chartData = generateData(parseInt(period));
|
||||
const canvas = document.getElementById('salesChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
drawChart(ctx);
|
||||
loading.classList.remove('active');
|
||||
|
||||
// Add new alert
|
||||
addAlert('success', 'Filters Applied', 'Data updated based on selected filters');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Refresh data
|
||||
function refreshData() {
|
||||
const loading = document.getElementById('chartLoading');
|
||||
loading.classList.add('active');
|
||||
|
||||
setTimeout(() => {
|
||||
applyFilters();
|
||||
addAlert('success', 'Data Refreshed', 'Dashboard updated with latest information');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Export data
|
||||
function exportData() {
|
||||
const data = {
|
||||
period: document.getElementById('periodFilter').value,
|
||||
region: document.getElementById('regionFilter').value,
|
||||
category: document.getElementById('categoryFilter').value,
|
||||
data: chartData
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `analytics-export-${new Date().toISOString().split('T')[0]}.json`;
|
||||
a.click();
|
||||
|
||||
addAlert('success', 'Export Complete', 'Data exported successfully');
|
||||
}
|
||||
|
||||
// Settings functions
|
||||
function openSettings() {
|
||||
document.getElementById('settingsModal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
document.getElementById('settingsModal').classList.remove('active');
|
||||
}
|
||||
|
||||
// Add alert
|
||||
function addAlert(type, title, message) {
|
||||
const alertsList = document.getElementById('alertsList');
|
||||
const alert = document.createElement('div');
|
||||
alert.className = 'alert-item';
|
||||
alert.innerHTML = `
|
||||
<div class="alert-header">
|
||||
<div class="alert-icon ${type}"></div>
|
||||
<div class="alert-title">${title}</div>
|
||||
</div>
|
||||
<div class="alert-message">${message}</div>
|
||||
<div class="alert-time">Just now</div>
|
||||
`;
|
||||
|
||||
alertsList.insertBefore(alert, alertsList.firstChild);
|
||||
|
||||
// Remove oldest alert if more than 5
|
||||
if (alertsList.children.length > 5) {
|
||||
alertsList.removeChild(alertsList.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-refresh
|
||||
let autoRefreshInterval;
|
||||
document.getElementById('autoRefresh').addEventListener('change', function(e) {
|
||||
if (e.target.checked) {
|
||||
autoRefreshInterval = setInterval(refreshData, 300000); // 5 minutes
|
||||
addAlert('success', 'Auto-refresh Enabled', 'Dashboard will refresh every 5 minutes');
|
||||
} else {
|
||||
clearInterval(autoRefreshInterval);
|
||||
addAlert('warning', 'Auto-refresh Disabled', 'Manual refresh required for updates');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize on load
|
||||
window.addEventListener('load', () => {
|
||||
initChart();
|
||||
|
||||
// Resize handler
|
||||
window.addEventListener('resize', () => {
|
||||
const canvas = document.getElementById('salesChart');
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
drawChart(ctx);
|
||||
});
|
||||
});
|
||||
|
||||
// Close settings on outside click
|
||||
document.getElementById('settingsModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeSettings();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,940 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zen Form Wizard - Meditation Retreat Booking</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.wizard-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wizard-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(147, 197, 253, 0.1) 0%, transparent 70%);
|
||||
animation: breathe 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); }
|
||||
50% { transform: scale(1.05) rotate(180deg); }
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wizard-title {
|
||||
font-size: 2.5em;
|
||||
color: #34495e;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.wizard-subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #e0e6ed;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.progress-line-active {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 100%);
|
||||
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #e0e6ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2em;
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: rgba(147, 197, 253, 0.3);
|
||||
transform: scale(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.progress-step.active .step-circle {
|
||||
background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.progress-step.active .step-circle::after {
|
||||
transform: scale(1.5);
|
||||
animation: ripple 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1.1); }
|
||||
50% { transform: scale(1.2); }
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0%, 100% { transform: scale(1.5); opacity: 0; }
|
||||
50% { transform: scale(2); opacity: 0.3; }
|
||||
}
|
||||
|
||||
.progress-step.completed .step-circle {
|
||||
background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 10px;
|
||||
font-size: 0.9em;
|
||||
color: #7f8c8d;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-step.active .step-label,
|
||||
.progress-step.completed .step-label {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-step.active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #34495e;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
border: 2px solid #e0e6ed;
|
||||
border-radius: 10px;
|
||||
font-size: 1em;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #93c5fd;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.radio-group,
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.radio-option,
|
||||
.checkbox-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-option:hover,
|
||||
.checkbox-option:hover {
|
||||
background: rgba(147, 197, 253, 0.1);
|
||||
}
|
||||
|
||||
.radio-option input,
|
||||
.checkbox-option input {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
margin-top: 8px;
|
||||
font-size: 0.9em;
|
||||
color: #e74c3c;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.validation-message.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.validation-message.success {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.form-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 50px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 15px 40px;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.btn-prev {
|
||||
background: #e0e6ed;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.btn-prev:hover {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-next:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(74, 222, 128, 0.3);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn:disabled:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.save-indicator {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.save-indicator.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.save-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #4ade80;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.save-indicator.saved .save-icon {
|
||||
animation: none;
|
||||
border-color: #4ade80;
|
||||
background: #4ade80;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.save-indicator.saved .save-icon::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.completion-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.completion-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 30px;
|
||||
background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3em;
|
||||
color: white;
|
||||
animation: breathe 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.completion-text {
|
||||
font-size: 1.5em;
|
||||
color: #34495e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.completion-subtext {
|
||||
color: #7f8c8d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wizard-container {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.wizard-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.form-navigation {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wizard-container">
|
||||
<div class="save-indicator" id="saveIndicator">
|
||||
<div class="save-icon"></div>
|
||||
<span>Saving...</span>
|
||||
</div>
|
||||
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">Journey to Inner Peace</h1>
|
||||
<p class="wizard-subtitle">Book your meditation retreat experience</p>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-line-active" id="progressLineActive"></div>
|
||||
|
||||
<div class="progress-step active" data-step="1">
|
||||
<div class="step-circle">1</div>
|
||||
<div class="step-label">Intention</div>
|
||||
</div>
|
||||
<div class="progress-step" data-step="2">
|
||||
<div class="step-circle">2</div>
|
||||
<div class="step-label">Journey</div>
|
||||
</div>
|
||||
<div class="progress-step" data-step="3">
|
||||
<div class="step-circle">3</div>
|
||||
<div class="step-label">Practice</div>
|
||||
</div>
|
||||
<div class="progress-step" data-step="4">
|
||||
<div class="step-circle">4</div>
|
||||
<div class="step-label">Reflection</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<!-- Step 1: Intention -->
|
||||
<div class="form-step active" data-step="1">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your name, dear traveler</label>
|
||||
<input type="text" class="form-input" id="fullName" placeholder="Enter your full name">
|
||||
<div class="validation-message" id="fullNameError">Please share your name with us</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email for your journey details</label>
|
||||
<input type="email" class="form-input" id="email" placeholder="your@email.com">
|
||||
<div class="validation-message" id="emailError">A valid email helps us guide your path</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">What brings you to this retreat?</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="intention" value="stress-relief">
|
||||
<span>Finding calm in chaos</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="intention" value="self-discovery">
|
||||
<span>Journey of self-discovery</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="intention" value="spiritual-growth">
|
||||
<span>Deepening spiritual practice</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="intention" value="healing">
|
||||
<span>Healing and restoration</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="validation-message" id="intentionError">Your intention guides your journey</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Journey -->
|
||||
<div class="form-step" data-step="2">
|
||||
<div class="form-group">
|
||||
<label class="form-label">When would you like to begin?</label>
|
||||
<input type="date" class="form-input" id="startDate">
|
||||
<div class="validation-message" id="startDateError">Choose a date for your journey</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Duration of your retreat</label>
|
||||
<select class="form-select" id="duration">
|
||||
<option value="">Select duration</option>
|
||||
<option value="weekend">Weekend Retreat (3 days)</option>
|
||||
<option value="week">Week of Mindfulness (7 days)</option>
|
||||
<option value="extended">Extended Journey (14 days)</option>
|
||||
<option value="immersion">Full Immersion (30 days)</option>
|
||||
</select>
|
||||
<div class="validation-message" id="durationError">Time is a gift - choose wisely</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Preferred accommodation</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="accommodation" value="shared">
|
||||
<span>Shared space - Community living</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="accommodation" value="private">
|
||||
<span>Private room - Solitary reflection</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="accommodation" value="nature">
|
||||
<span>Nature cabin - Forest dwelling</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="validation-message" id="accommodationError">Your sanctuary awaits selection</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Practice -->
|
||||
<div class="form-step" data-step="3">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your meditation experience</label>
|
||||
<select class="form-select" id="experience">
|
||||
<option value="">Share your practice level</option>
|
||||
<option value="beginner">New to the path</option>
|
||||
<option value="occasional">Occasional practitioner</option>
|
||||
<option value="regular">Regular practice</option>
|
||||
<option value="advanced">Seasoned meditator</option>
|
||||
</select>
|
||||
<div class="validation-message" id="experienceError">Every journey begins somewhere</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Practices that call to you</label>
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" name="practices" value="vipassana">
|
||||
<span>Vipassana meditation</span>
|
||||
</label>
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" name="practices" value="yoga">
|
||||
<span>Mindful yoga</span>
|
||||
</label>
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" name="practices" value="walking">
|
||||
<span>Walking meditation</span>
|
||||
</label>
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" name="practices" value="chanting">
|
||||
<span>Sacred chanting</span>
|
||||
</label>
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" name="practices" value="silence">
|
||||
<span>Noble silence</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="validation-message" id="practicesError">Select at least one practice for your journey</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Dietary preferences</label>
|
||||
<select class="form-select" id="diet">
|
||||
<option value="">Nourishment for body and soul</option>
|
||||
<option value="vegetarian">Vegetarian</option>
|
||||
<option value="vegan">Vegan</option>
|
||||
<option value="gluten-free">Gluten-free</option>
|
||||
<option value="no-preference">No restrictions</option>
|
||||
</select>
|
||||
<div class="validation-message" id="dietError">Help us prepare your mindful meals</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Reflection -->
|
||||
<div class="form-step" data-step="4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Share your heart's intention</label>
|
||||
<textarea class="form-textarea" id="heartIntention" placeholder="What do you hope to discover or release during this retreat?"></textarea>
|
||||
<div class="validation-message" id="heartIntentionError">Your words help us support your journey</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Any special needs or considerations?</label>
|
||||
<textarea class="form-textarea" id="specialNeeds" placeholder="Physical, emotional, or spiritual considerations we should know about"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-option">
|
||||
<input type="checkbox" id="agreement">
|
||||
<span>I understand this is a journey of self-discovery and commit to approaching it with an open heart</span>
|
||||
</label>
|
||||
<div class="validation-message" id="agreementError">Your commitment opens the door to transformation</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion Message -->
|
||||
<div class="form-step" data-step="complete">
|
||||
<div class="completion-message">
|
||||
<div class="completion-icon">🙏</div>
|
||||
<h2 class="completion-text">Your Journey Awaits</h2>
|
||||
<p class="completion-subtext">
|
||||
Thank you for trusting us with your spiritual journey.<br>
|
||||
We will send you a detailed guide to prepare for your retreat.<br>
|
||||
May your path be filled with peace and discovery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-navigation">
|
||||
<button class="btn btn-prev" id="prevBtn" style="display: none;">Previous</button>
|
||||
<button class="btn btn-next" id="nextBtn">Continue</button>
|
||||
<button class="btn btn-submit" id="submitBtn" style="display: none;">Complete Journey</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class ZenFormWizard {
|
||||
constructor() {
|
||||
this.currentStep = 1;
|
||||
this.totalSteps = 4;
|
||||
this.formData = this.loadSavedData() || {};
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.attachEventListeners();
|
||||
this.updateProgressBar();
|
||||
this.restoreFormData();
|
||||
this.initializeAutoSave();
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
document.getElementById('nextBtn').addEventListener('click', () => this.nextStep());
|
||||
document.getElementById('prevBtn').addEventListener('click', () => this.prevStep());
|
||||
document.getElementById('submitBtn').addEventListener('click', () => this.submitForm());
|
||||
|
||||
// Progress step clicks
|
||||
document.querySelectorAll('.progress-step').forEach(step => {
|
||||
step.addEventListener('click', (e) => {
|
||||
const stepNum = parseInt(e.currentTarget.dataset.step);
|
||||
if (stepNum < this.currentStep || this.validateStep(stepNum - 1)) {
|
||||
this.goToStep(stepNum);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Real-time validation
|
||||
this.attachValidationListeners();
|
||||
}
|
||||
|
||||
attachValidationListeners() {
|
||||
// Step 1 validations
|
||||
document.getElementById('fullName').addEventListener('blur', (e) => {
|
||||
this.validateField('fullName', e.target.value.trim().length > 0);
|
||||
});
|
||||
|
||||
document.getElementById('email').addEventListener('blur', (e) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
this.validateField('email', emailRegex.test(e.target.value));
|
||||
});
|
||||
|
||||
// Add more validation listeners as needed
|
||||
}
|
||||
|
||||
validateField(fieldId, isValid) {
|
||||
const errorElement = document.getElementById(`${fieldId}Error`);
|
||||
if (isValid) {
|
||||
errorElement.classList.remove('show');
|
||||
errorElement.classList.add('success');
|
||||
setTimeout(() => {
|
||||
errorElement.classList.remove('success');
|
||||
}, 2000);
|
||||
} else {
|
||||
errorElement.classList.add('show');
|
||||
}
|
||||
return isValid;
|
||||
}
|
||||
|
||||
validateStep(step) {
|
||||
let isValid = true;
|
||||
|
||||
switch(step) {
|
||||
case 1:
|
||||
const fullName = document.getElementById('fullName').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const intention = document.querySelector('input[name="intention"]:checked');
|
||||
|
||||
if (!this.validateField('fullName', fullName.length > 0)) isValid = false;
|
||||
if (!this.validateField('email', /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))) isValid = false;
|
||||
if (!this.validateField('intention', intention !== null)) isValid = false;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const duration = document.getElementById('duration').value;
|
||||
const accommodation = document.querySelector('input[name="accommodation"]:checked');
|
||||
|
||||
if (!this.validateField('startDate', startDate !== '')) isValid = false;
|
||||
if (!this.validateField('duration', duration !== '')) isValid = false;
|
||||
if (!this.validateField('accommodation', accommodation !== null)) isValid = false;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
const experience = document.getElementById('experience').value;
|
||||
const practices = document.querySelectorAll('input[name="practices"]:checked');
|
||||
const diet = document.getElementById('diet').value;
|
||||
|
||||
if (!this.validateField('experience', experience !== '')) isValid = false;
|
||||
if (!this.validateField('practices', practices.length > 0)) isValid = false;
|
||||
if (!this.validateField('diet', diet !== '')) isValid = false;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
const heartIntention = document.getElementById('heartIntention').value.trim();
|
||||
const agreement = document.getElementById('agreement').checked;
|
||||
|
||||
if (!this.validateField('heartIntention', heartIntention.length > 10)) isValid = false;
|
||||
if (!this.validateField('agreement', agreement)) isValid = false;
|
||||
break;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
nextStep() {
|
||||
if (this.validateStep(this.currentStep)) {
|
||||
this.saveFormData();
|
||||
if (this.currentStep < this.totalSteps) {
|
||||
this.currentStep++;
|
||||
this.updateUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
prevStep() {
|
||||
if (this.currentStep > 1) {
|
||||
this.currentStep--;
|
||||
this.updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
goToStep(step) {
|
||||
this.currentStep = step;
|
||||
this.updateUI();
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
// Update form steps
|
||||
document.querySelectorAll('.form-step').forEach(step => {
|
||||
step.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`.form-step[data-step="${this.currentStep}"]`).classList.add('active');
|
||||
|
||||
// Update progress steps
|
||||
document.querySelectorAll('.progress-step').forEach((step, index) => {
|
||||
step.classList.remove('active', 'completed');
|
||||
if (index + 1 < this.currentStep) {
|
||||
step.classList.add('completed');
|
||||
} else if (index + 1 === this.currentStep) {
|
||||
step.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update navigation buttons
|
||||
document.getElementById('prevBtn').style.display = this.currentStep === 1 ? 'none' : 'block';
|
||||
document.getElementById('nextBtn').style.display = this.currentStep === this.totalSteps ? 'none' : 'block';
|
||||
document.getElementById('submitBtn').style.display = this.currentStep === this.totalSteps ? 'block' : 'none';
|
||||
|
||||
// Update progress bar
|
||||
this.updateProgressBar();
|
||||
}
|
||||
|
||||
updateProgressBar() {
|
||||
const progressPercentage = ((this.currentStep - 1) / (this.totalSteps - 1)) * 100;
|
||||
document.getElementById('progressLineActive').style.width = `${progressPercentage}%`;
|
||||
}
|
||||
|
||||
saveFormData() {
|
||||
// Collect all form data
|
||||
const formElements = document.querySelectorAll('input, select, textarea');
|
||||
formElements.forEach(element => {
|
||||
if (element.type === 'radio' || element.type === 'checkbox') {
|
||||
if (element.checked) {
|
||||
if (element.type === 'checkbox') {
|
||||
if (!this.formData[element.name]) {
|
||||
this.formData[element.name] = [];
|
||||
}
|
||||
if (!this.formData[element.name].includes(element.value)) {
|
||||
this.formData[element.name].push(element.value);
|
||||
}
|
||||
} else {
|
||||
this.formData[element.name] = element.value;
|
||||
}
|
||||
}
|
||||
} else if (element.value) {
|
||||
this.formData[element.id] = element.value;
|
||||
}
|
||||
});
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem('zenFormData', JSON.stringify(this.formData));
|
||||
this.showSaveIndicator();
|
||||
}
|
||||
|
||||
loadSavedData() {
|
||||
const saved = localStorage.getItem('zenFormData');
|
||||
return saved ? JSON.parse(saved) : null;
|
||||
}
|
||||
|
||||
restoreFormData() {
|
||||
if (!this.formData) return;
|
||||
|
||||
Object.keys(this.formData).forEach(key => {
|
||||
const element = document.getElementById(key);
|
||||
if (element) {
|
||||
element.value = this.formData[key];
|
||||
} else {
|
||||
// Handle radio/checkbox
|
||||
if (Array.isArray(this.formData[key])) {
|
||||
this.formData[key].forEach(value => {
|
||||
const checkbox = document.querySelector(`input[name="${key}"][value="${value}"]`);
|
||||
if (checkbox) checkbox.checked = true;
|
||||
});
|
||||
} else {
|
||||
const radio = document.querySelector(`input[name="${key}"][value="${this.formData[key]}"]`);
|
||||
if (radio) radio.checked = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showSaveIndicator() {
|
||||
const indicator = document.getElementById('saveIndicator');
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
indicator.classList.add('saved');
|
||||
indicator.querySelector('span').textContent = 'Saved';
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
indicator.classList.remove('show', 'saved');
|
||||
indicator.querySelector('span').textContent = 'Saving...';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
initializeAutoSave() {
|
||||
let saveTimeout;
|
||||
document.addEventListener('input', () => {
|
||||
clearTimeout(saveTimeout);
|
||||
saveTimeout = setTimeout(() => {
|
||||
this.saveFormData();
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
submitForm() {
|
||||
if (this.validateStep(this.currentStep)) {
|
||||
this.saveFormData();
|
||||
|
||||
// Show completion
|
||||
document.querySelectorAll('.form-step').forEach(step => {
|
||||
step.classList.remove('active');
|
||||
});
|
||||
document.querySelector('.form-step[data-step="complete"]').classList.add('active');
|
||||
|
||||
// Hide navigation
|
||||
document.querySelector('.form-navigation').style.display = 'none';
|
||||
|
||||
// Clear saved data
|
||||
localStorage.removeItem('zenFormData');
|
||||
|
||||
// In a real application, you would submit to a server here
|
||||
console.log('Form submitted:', this.formData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the wizard when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new ZenFormWizard();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,886 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Industrial File Manager - Hybrid UI Component</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.industrial-container {
|
||||
width: 95vw;
|
||||
max-width: 1400px;
|
||||
height: 90vh;
|
||||
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.8),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.1),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.5);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.industrial-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255, 255, 255, 0.03) 2px,
|
||||
rgba(255, 255, 255, 0.03) 4px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255, 255, 255, 0.03) 2px,
|
||||
rgba(255, 255, 255, 0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header-panel {
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
color: #ff6b35;
|
||||
text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
|
||||
}
|
||||
|
||||
.status-lights {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-light {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.5),
|
||||
0 0 4px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-light.active {
|
||||
background: #00ff41;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.5),
|
||||
0 0 15px rgba(0, 255, 65, 0.8);
|
||||
}
|
||||
|
||||
.main-area {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 350px;
|
||||
gap: 20px;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.file-browser {
|
||||
background: linear-gradient(145deg, #252525, #1a1a1a);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
0 1px 2px rgba(255, 255, 255, 0.05);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #888;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.folder-item, .file-item {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
background: #2a2a2a;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.folder-item:hover, .file-item:hover {
|
||||
background: #333;
|
||||
border-color: #ff6b35;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.folder-item::before {
|
||||
content: '📁';
|
||||
}
|
||||
|
||||
.file-item::before {
|
||||
content: '📄';
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
background: linear-gradient(145deg, #252525, #1a1a1a);
|
||||
border-radius: 4px;
|
||||
padding: 30px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
0 1px 2px rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drop-area {
|
||||
flex: 1;
|
||||
border: 3px dashed #444;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drop-area.dragover {
|
||||
border-color: #ff6b35;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.drop-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gear {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gear::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
repeating-conic-gradient(
|
||||
from 0deg,
|
||||
#666 0deg 30deg,
|
||||
transparent 30deg 60deg
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gear.large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: rotate 4s linear infinite;
|
||||
}
|
||||
|
||||
.gear.small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation: rotate-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rotate-reverse {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(-360deg); }
|
||||
}
|
||||
|
||||
.drop-text {
|
||||
font-size: 18px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.drop-subtext {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-top: 30px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.file-progress {
|
||||
background: #2a2a2a;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-progress::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 107, 53, 0.2),
|
||||
transparent
|
||||
);
|
||||
animation: scan 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
to { left: 100%; }
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
height: 8px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ff6b35, #ff8555);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
background: linear-gradient(145deg, #252525, #1a1a1a);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
0 1px 2px rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #888;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: #1a1a1a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2a2a2a;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #e0e0e0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.validation-panel {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2a2a2a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.validation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.validation-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.validation-icon.pass {
|
||||
background: #00ff41;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.validation-icon.fail {
|
||||
background: #ff3333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.validation-icon.warning {
|
||||
background: #ffaa00;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.control-btn.primary {
|
||||
background: linear-gradient(145deg, #ff6b35, #ff5525);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-btn.primary:hover {
|
||||
background: linear-gradient(145deg, #ff7b45, #ff6535);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="industrial-container">
|
||||
<div class="header-panel">
|
||||
<div class="logo">INDUSTRIAL FM</div>
|
||||
<div class="status-lights">
|
||||
<div class="status-light" id="powerLight"></div>
|
||||
<div class="status-light" id="processLight"></div>
|
||||
<div class="status-light" id="networkLight"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="file-browser">
|
||||
<div class="browser-header">File System</div>
|
||||
<div class="folder-item">Documents</div>
|
||||
<div class="folder-item">Projects</div>
|
||||
<div class="folder-item">Archives</div>
|
||||
<div class="file-item">blueprint_v2.dwg</div>
|
||||
<div class="file-item">specs_final.pdf</div>
|
||||
<div class="file-item">prototype_3d.stl</div>
|
||||
<div class="file-item">assembly_guide.pdf</div>
|
||||
<div class="file-item">material_list.xlsx</div>
|
||||
<div class="file-item">safety_protocol.doc</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-zone">
|
||||
<div class="drop-area" id="dropArea">
|
||||
<div class="drop-icon">
|
||||
<div class="gear large"></div>
|
||||
<div class="gear small"></div>
|
||||
</div>
|
||||
<div class="drop-text">Drop Files Here</div>
|
||||
<div class="drop-subtext">or click to browse</div>
|
||||
<input type="file" class="file-input" id="fileInput" multiple>
|
||||
</div>
|
||||
|
||||
<div class="progress-container" id="progressContainer"></div>
|
||||
</div>
|
||||
|
||||
<div class="preview-panel">
|
||||
<div class="preview-header">File Preview</div>
|
||||
<div class="preview-content" id="previewContent">
|
||||
<div class="preview-placeholder">
|
||||
<div class="preview-icon">⚙️</div>
|
||||
<div>No file selected</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-details" id="fileDetails" style="display: none;">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Name</span>
|
||||
<span class="detail-value" id="detailName">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Type</span>
|
||||
<span class="detail-value" id="detailType">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Size</span>
|
||||
<span class="detail-value" id="detailSize">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Modified</span>
|
||||
<span class="detail-value" id="detailModified">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-panel" id="validationPanel" style="display: none;">
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon pass" id="sizeCheck">✓</div>
|
||||
<span>File size within limits</span>
|
||||
</div>
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon pass" id="typeCheck">✓</div>
|
||||
<span>File type supported</span>
|
||||
</div>
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon warning" id="virusCheck">!</div>
|
||||
<span>Security scan pending</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-btn" id="clearBtn">Clear All</button>
|
||||
<button class="control-btn primary" id="uploadBtn">Upload Files</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Status lights initialization
|
||||
const statusLights = {
|
||||
power: document.getElementById('powerLight'),
|
||||
process: document.getElementById('processLight'),
|
||||
network: document.getElementById('networkLight')
|
||||
};
|
||||
|
||||
// Activate power light immediately
|
||||
setTimeout(() => {
|
||||
statusLights.power.classList.add('active');
|
||||
}, 500);
|
||||
|
||||
// Simulate network connection
|
||||
setTimeout(() => {
|
||||
statusLights.network.classList.add('active');
|
||||
}, 1500);
|
||||
|
||||
// File handling
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const fileDetails = document.getElementById('fileDetails');
|
||||
const validationPanel = document.getElementById('validationPanel');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
const clearBtn = document.getElementById('clearBtn');
|
||||
|
||||
let uploadedFiles = [];
|
||||
|
||||
// Drag and drop events
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add('dragover');
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove('dragover');
|
||||
}
|
||||
|
||||
dropArea.addEventListener('drop', handleDrop, false);
|
||||
dropArea.addEventListener('click', () => fileInput.click());
|
||||
fileInput.addEventListener('change', handleFileSelect);
|
||||
|
||||
function handleDrop(e) {
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
([...files]).forEach(uploadFile);
|
||||
statusLights.process.classList.add('active');
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
uploadedFiles.push(file);
|
||||
|
||||
const progressElement = createProgressElement(file);
|
||||
progressContainer.appendChild(progressElement);
|
||||
|
||||
// Simulate upload progress
|
||||
let progress = 0;
|
||||
const progressBar = progressElement.querySelector('.progress-bar');
|
||||
const progressPercent = progressElement.querySelector('.progress-percent');
|
||||
const progressStatus = progressElement.querySelector('.progress-status-text');
|
||||
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress > 100) {
|
||||
progress = 100;
|
||||
clearInterval(interval);
|
||||
progressStatus.textContent = 'Complete';
|
||||
setTimeout(() => {
|
||||
showPreview(file);
|
||||
validateFile(file);
|
||||
}, 500);
|
||||
}
|
||||
progressBar.style.width = progress + '%';
|
||||
progressPercent.textContent = Math.round(progress) + '%';
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function createProgressElement(file) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'file-progress';
|
||||
div.innerHTML = `
|
||||
<div class="file-info">
|
||||
<span class="file-name">${file.name}</span>
|
||||
<span class="file-size">${formatFileSize(file.size)}</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress-status">
|
||||
<span class="progress-status-text">Uploading...</span>
|
||||
<span class="progress-percent">0%</span>
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function showPreview(file) {
|
||||
fileDetails.style.display = 'block';
|
||||
document.getElementById('detailName').textContent = file.name;
|
||||
document.getElementById('detailType').textContent = file.type || 'Unknown';
|
||||
document.getElementById('detailSize').textContent = formatFileSize(file.size);
|
||||
document.getElementById('detailModified').textContent = new Date(file.lastModified).toLocaleString();
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
previewContent.innerHTML = `<img src="${e.target.result}" class="preview-image" alt="${file.name}">`;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
let icon = '📄';
|
||||
if (file.type.includes('pdf')) icon = '📕';
|
||||
else if (file.type.includes('word')) icon = '📝';
|
||||
else if (file.type.includes('excel') || file.type.includes('spreadsheet')) icon = '📊';
|
||||
else if (file.type.includes('zip') || file.type.includes('rar')) icon = '📦';
|
||||
|
||||
previewContent.innerHTML = `
|
||||
<div class="preview-placeholder">
|
||||
<div class="preview-icon">${icon}</div>
|
||||
<div>${file.name}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function validateFile(file) {
|
||||
validationPanel.style.display = 'block';
|
||||
|
||||
// Size check
|
||||
const sizeCheck = document.getElementById('sizeCheck');
|
||||
if (file.size < 100 * 1024 * 1024) { // 100MB limit
|
||||
sizeCheck.className = 'validation-icon pass';
|
||||
sizeCheck.textContent = '✓';
|
||||
} else {
|
||||
sizeCheck.className = 'validation-icon fail';
|
||||
sizeCheck.textContent = '✗';
|
||||
}
|
||||
|
||||
// Type check
|
||||
const typeCheck = document.getElementById('typeCheck');
|
||||
const allowedTypes = ['image/', 'application/pdf', 'text/', 'application/msword', 'application/vnd.'];
|
||||
const isAllowed = allowedTypes.some(type => file.type.includes(type));
|
||||
if (isAllowed) {
|
||||
typeCheck.className = 'validation-icon pass';
|
||||
typeCheck.textContent = '✓';
|
||||
} else {
|
||||
typeCheck.className = 'validation-icon warning';
|
||||
typeCheck.textContent = '!';
|
||||
}
|
||||
|
||||
// Simulate virus scan
|
||||
const virusCheck = document.getElementById('virusCheck');
|
||||
setTimeout(() => {
|
||||
virusCheck.className = 'validation-icon pass';
|
||||
virusCheck.textContent = '✓';
|
||||
virusCheck.nextElementSibling.textContent = 'Security scan complete';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
progressContainer.innerHTML = '';
|
||||
previewContent.innerHTML = `
|
||||
<div class="preview-placeholder">
|
||||
<div class="preview-icon">⚙️</div>
|
||||
<div>No file selected</div>
|
||||
</div>
|
||||
`;
|
||||
fileDetails.style.display = 'none';
|
||||
validationPanel.style.display = 'none';
|
||||
uploadedFiles = [];
|
||||
fileInput.value = '';
|
||||
statusLights.process.classList.remove('active');
|
||||
});
|
||||
|
||||
uploadBtn.addEventListener('click', () => {
|
||||
if (uploadedFiles.length > 0) {
|
||||
alert(`Uploading ${uploadedFiles.length} file(s) to server...`);
|
||||
// Here you would implement actual upload logic
|
||||
} else {
|
||||
alert('No files selected for upload');
|
||||
}
|
||||
});
|
||||
|
||||
// File browser interactions
|
||||
document.querySelectorAll('.folder-item, .file-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
console.log('Clicked:', this.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
// Add some industrial ambiance
|
||||
setInterval(() => {
|
||||
if (Math.random() > 0.8) {
|
||||
statusLights.process.classList.toggle('active');
|
||||
setTimeout(() => {
|
||||
statusLights.process.classList.toggle('active');
|
||||
}, 100);
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,910 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MAINFRAME TERMINAL v2.6 - System Data Explorer</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'VT323', monospace;
|
||||
background: #000;
|
||||
color: #00ff00;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT Monitor Effects */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Phosphor Glow Effect */
|
||||
@keyframes flicker {
|
||||
0% { opacity: 0.98; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
.terminal-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
background: radial-gradient(ellipse at center, #001100 0%, #000000 100%);
|
||||
animation: flicker 0.15s infinite;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* ASCII Art Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
|
||||
}
|
||||
|
||||
.ascii-art {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
white-space: pre;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
/* Command Line */
|
||||
.command-line {
|
||||
background: #001100;
|
||||
border: 2px solid #00ff00;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: #00ff00;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#commandInput {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #00ff00;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#commandInput::placeholder {
|
||||
color: #008800;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: #002200;
|
||||
border: 1px solid #00ff00;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
/* Data Table Container */
|
||||
.data-container {
|
||||
background: #001100;
|
||||
border: 2px solid #00ff00;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #004400;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: #002200;
|
||||
color: #00ff00;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-table th:hover {
|
||||
background: #003300;
|
||||
text-shadow: 0 0 5px #00ff00;
|
||||
}
|
||||
|
||||
.data-table th.sorted::after {
|
||||
content: " ▲";
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.data-table th.sorted-desc::after {
|
||||
content: " ▼";
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: #002200;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.data-table tr.selected {
|
||||
background: #003300;
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
/* Checkbox Styling */
|
||||
.checkbox-cell {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #00ff00;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background: #00ff00;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: "X";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 2px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Status Indicators */
|
||||
.status-active {
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 5px #00ff00;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
color: #ff0000;
|
||||
text-shadow: 0 0 5px #ff0000;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: #ffaa00;
|
||||
text-shadow: 0 0 5px #ffaa00;
|
||||
}
|
||||
|
||||
/* Control Panel */
|
||||
.control-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
background: #002200;
|
||||
border: 2px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 8px 16px;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #00ff00;
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 4px 8px;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.page-btn:hover {
|
||||
background: #002200;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: #00ff00;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Search Box */
|
||||
.search-box {
|
||||
background: #001100;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 6px 12px;
|
||||
color: #00ff00;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Filter Dropdown */
|
||||
.filter-select {
|
||||
background: #001100;
|
||||
border: 1px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 6px 12px;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Help Text */
|
||||
.help-text {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #002200;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.help-title {
|
||||
color: #ffff00;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
/* Export Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #001100;
|
||||
border: 2px solid #00ff00;
|
||||
padding: 20px;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 0 50px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
color: #ffff00;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.control-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="terminal-container">
|
||||
<!-- ASCII Art Header -->
|
||||
<div class="header">
|
||||
<pre class="ascii-art">
|
||||
╔═══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ __ __ _ ___ _ _ _____ ____ _ __ __ _____ ____ __ __ ║
|
||||
║ | \/ | / \ |_ _| \ | | ___| _ \ / \ | \/ | ____| |___ \ \ \ / / ║
|
||||
║ | |\/| | / _ \ | || \| | |_ | |_) | / _ \ | |\/| | _| __) | \ V / ║
|
||||
║ | | | |/ ___ \ | || |\ | _| | _ < / ___ \| | | | |___ / __/ _ | | ║
|
||||
║ |_| |_/_/ \_\___|_| \_|_| |_| \_\/_/ \_\_| |_|_____| |_____(_)|_| ║
|
||||
║ ║
|
||||
║ SYSTEM DATA EXPLORER v2.6.0 ║
|
||||
║ [AUTHORIZED PERSONNEL ONLY] ║
|
||||
╚═══════════════════════════════════════════════════════════════════════════════╝
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<!-- Command Line Interface -->
|
||||
<div class="command-line">
|
||||
<span class="prompt">SYSTEM:/$</span>
|
||||
<input type="text" id="commandInput" placeholder="Enter command... (type 'help' for commands)" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<span class="status-item">RECORDS: <span id="totalRecords">0</span></span>
|
||||
<span class="status-item">SELECTED: <span id="selectedCount">0</span></span>
|
||||
<span class="status-item">FILTERED: <span id="filteredCount">0</span></span>
|
||||
<span class="status-item">PAGE: <span id="currentPage">1</span>/<span id="totalPages">1</span></span>
|
||||
<span class="status-item">STATUS: <span id="systemStatus" class="status-active">ONLINE</span></span>
|
||||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="control-panel">
|
||||
<div class="control-group">
|
||||
<input type="text" class="search-box" id="searchInput" placeholder="SEARCH...">
|
||||
<select class="filter-select" id="filterSelect">
|
||||
<option value="">ALL STATUS</option>
|
||||
<option value="active">ACTIVE</option>
|
||||
<option value="inactive">INACTIVE</option>
|
||||
<option value="warning">WARNING</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<button class="btn" onclick="selectAll()">SELECT ALL</button>
|
||||
<button class="btn" onclick="deselectAll()">DESELECT</button>
|
||||
<button class="btn" onclick="exportSelected()">EXPORT</button>
|
||||
<button class="btn" onclick="refreshData()">REFRESH</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Container -->
|
||||
<div class="data-container">
|
||||
<table class="data-table" id="dataTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="checkbox-cell">
|
||||
<input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
|
||||
</th>
|
||||
<th onclick="sortTable('id')">ID</th>
|
||||
<th onclick="sortTable('user')">USER</th>
|
||||
<th onclick="sortTable('process')">PROCESS</th>
|
||||
<th onclick="sortTable('cpu')">CPU%</th>
|
||||
<th onclick="sortTable('memory')">MEM(MB)</th>
|
||||
<th onclick="sortTable('status')">STATUS</th>
|
||||
<th onclick="sortTable('timestamp')">TIMESTAMP</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody">
|
||||
<!-- Data will be inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" id="pagination">
|
||||
<!-- Pagination buttons will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Modal -->
|
||||
<div class="modal" id="exportModal">
|
||||
<div class="modal-content">
|
||||
<h3>EXPORT DATA</h3>
|
||||
<p>Export <span id="exportCount">0</span> selected records?</p>
|
||||
<div class="modal-buttons">
|
||||
<button class="btn" onclick="confirmExport('csv')">CSV</button>
|
||||
<button class="btn" onclick="confirmExport('json')">JSON</button>
|
||||
<button class="btn" onclick="confirmExport('txt')">TXT</button>
|
||||
<button class="btn" onclick="closeModal()">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Text -->
|
||||
<div class="help-text">
|
||||
<div class="help-title">COMMANDS:</div>
|
||||
<div>:sort [column] - Sort by column</div>
|
||||
<div>:filter [status] - Filter by status</div>
|
||||
<div>:search [term] - Search records</div>
|
||||
<div>:export - Export selected</div>
|
||||
<div>:clear - Clear filters</div>
|
||||
<div>:help - Show commands</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Sample Data Generation
|
||||
const processes = ['SYSTEM', 'KERNEL', 'NETWORK', 'DATABASE', 'AUTH', 'MONITOR', 'BACKUP', 'SYNC', 'CACHE', 'QUEUE'];
|
||||
const users = ['ROOT', 'ADMIN', 'SYSTEM', 'SERVICE', 'DAEMON', 'USER001', 'USER002', 'USER003'];
|
||||
const statuses = ['active', 'inactive', 'warning'];
|
||||
|
||||
let allData = [];
|
||||
let filteredData = [];
|
||||
let currentSort = { column: null, ascending: true };
|
||||
let currentPage = 1;
|
||||
const recordsPerPage = 10;
|
||||
|
||||
// Generate mock data
|
||||
function generateData() {
|
||||
allData = [];
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
allData.push({
|
||||
id: `SYS${String(i).padStart(4, '0')}`,
|
||||
user: users[Math.floor(Math.random() * users.length)],
|
||||
process: processes[Math.floor(Math.random() * processes.length)],
|
||||
cpu: Math.floor(Math.random() * 100),
|
||||
memory: Math.floor(Math.random() * 2048),
|
||||
status: statuses[Math.floor(Math.random() * statuses.length)],
|
||||
timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString().slice(0, 19).replace('T', ' '),
|
||||
selected: false
|
||||
});
|
||||
}
|
||||
filteredData = [...allData];
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Update table display
|
||||
function updateDisplay() {
|
||||
const tbody = document.getElementById('tableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
const startIndex = (currentPage - 1) * recordsPerPage;
|
||||
const endIndex = startIndex + recordsPerPage;
|
||||
const pageData = filteredData.slice(startIndex, endIndex);
|
||||
|
||||
pageData.forEach(record => {
|
||||
const row = document.createElement('tr');
|
||||
if (record.selected) row.classList.add('selected');
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" ${record.selected ? 'checked' : ''}
|
||||
onchange="toggleSelection('${record.id}')">
|
||||
</td>
|
||||
<td>${record.id}</td>
|
||||
<td>${record.user}</td>
|
||||
<td>${record.process}</td>
|
||||
<td>${record.cpu}</td>
|
||||
<td>${record.memory}</td>
|
||||
<td class="status-${record.status}">${record.status.toUpperCase()}</td>
|
||||
<td>${record.timestamp}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
updateStatusBar();
|
||||
updatePagination();
|
||||
}
|
||||
|
||||
// Update status bar
|
||||
function updateStatusBar() {
|
||||
document.getElementById('totalRecords').textContent = allData.length;
|
||||
document.getElementById('filteredCount').textContent = filteredData.length;
|
||||
document.getElementById('selectedCount').textContent = allData.filter(r => r.selected).length;
|
||||
document.getElementById('currentPage').textContent = currentPage;
|
||||
document.getElementById('totalPages').textContent = Math.ceil(filteredData.length / recordsPerPage);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
function updatePagination() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
pagination.innerHTML = '';
|
||||
|
||||
const totalPages = Math.ceil(filteredData.length / recordsPerPage);
|
||||
|
||||
// Previous button
|
||||
const prevBtn = document.createElement('button');
|
||||
prevBtn.className = 'page-btn';
|
||||
prevBtn.textContent = '<<';
|
||||
prevBtn.disabled = currentPage === 1;
|
||||
prevBtn.onclick = () => goToPage(currentPage - 1);
|
||||
pagination.appendChild(prevBtn);
|
||||
|
||||
// Page numbers
|
||||
const maxButtons = 5;
|
||||
let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
|
||||
let endPage = Math.min(totalPages, startPage + maxButtons - 1);
|
||||
|
||||
if (endPage - startPage < maxButtons - 1) {
|
||||
startPage = Math.max(1, endPage - maxButtons + 1);
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
const pageBtn = document.createElement('button');
|
||||
pageBtn.className = 'page-btn';
|
||||
if (i === currentPage) pageBtn.classList.add('active');
|
||||
pageBtn.textContent = i;
|
||||
pageBtn.onclick = () => goToPage(i);
|
||||
pagination.appendChild(pageBtn);
|
||||
}
|
||||
|
||||
// Next button
|
||||
const nextBtn = document.createElement('button');
|
||||
nextBtn.className = 'page-btn';
|
||||
nextBtn.textContent = '>>';
|
||||
nextBtn.disabled = currentPage === totalPages;
|
||||
nextBtn.onclick = () => goToPage(currentPage + 1);
|
||||
pagination.appendChild(nextBtn);
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
const totalPages = Math.ceil(filteredData.length / recordsPerPage);
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
currentPage = page;
|
||||
updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
// Sorting
|
||||
function sortTable(column) {
|
||||
const headers = document.querySelectorAll('th');
|
||||
headers.forEach(h => {
|
||||
h.classList.remove('sorted', 'sorted-desc');
|
||||
});
|
||||
|
||||
if (currentSort.column === column) {
|
||||
currentSort.ascending = !currentSort.ascending;
|
||||
} else {
|
||||
currentSort.column = column;
|
||||
currentSort.ascending = true;
|
||||
}
|
||||
|
||||
filteredData.sort((a, b) => {
|
||||
let valA = a[column];
|
||||
let valB = b[column];
|
||||
|
||||
if (typeof valA === 'string') {
|
||||
valA = valA.toLowerCase();
|
||||
valB = valB.toLowerCase();
|
||||
}
|
||||
|
||||
if (valA < valB) return currentSort.ascending ? -1 : 1;
|
||||
if (valA > valB) return currentSort.ascending ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
const headerIndex = Array.from(headers).findIndex(h => h.textContent.toLowerCase().includes(column));
|
||||
if (headerIndex > -1) {
|
||||
headers[headerIndex].classList.add(currentSort.ascending ? 'sorted' : 'sorted-desc');
|
||||
}
|
||||
|
||||
currentPage = 1;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Selection functions
|
||||
function toggleSelection(id) {
|
||||
const record = allData.find(r => r.id === id);
|
||||
if (record) {
|
||||
record.selected = !record.selected;
|
||||
updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
const checkbox = document.getElementById('selectAllCheckbox');
|
||||
const startIndex = (currentPage - 1) * recordsPerPage;
|
||||
const endIndex = startIndex + recordsPerPage;
|
||||
const pageData = filteredData.slice(startIndex, endIndex);
|
||||
|
||||
pageData.forEach(record => {
|
||||
record.selected = checkbox.checked;
|
||||
});
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
filteredData.forEach(record => {
|
||||
record.selected = true;
|
||||
});
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function deselectAll() {
|
||||
allData.forEach(record => {
|
||||
record.selected = false;
|
||||
});
|
||||
document.getElementById('selectAllCheckbox').checked = false;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Search and filter
|
||||
document.getElementById('searchInput').addEventListener('input', function(e) {
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
document.getElementById('filterSelect').addEventListener('change', function(e) {
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
function applyFilters() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
const statusFilter = document.getElementById('filterSelect').value;
|
||||
|
||||
filteredData = allData.filter(record => {
|
||||
const matchesSearch = !searchTerm ||
|
||||
Object.values(record).some(val =>
|
||||
String(val).toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
const matchesStatus = !statusFilter || record.status === statusFilter;
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// Export functions
|
||||
function exportSelected() {
|
||||
const selectedCount = allData.filter(r => r.selected).length;
|
||||
if (selectedCount === 0) {
|
||||
alert('NO RECORDS SELECTED FOR EXPORT');
|
||||
return;
|
||||
}
|
||||
document.getElementById('exportCount').textContent = selectedCount;
|
||||
document.getElementById('exportModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function confirmExport(format) {
|
||||
const selectedData = allData.filter(r => r.selected);
|
||||
let content = '';
|
||||
|
||||
switch(format) {
|
||||
case 'csv':
|
||||
content = 'ID,USER,PROCESS,CPU%,MEMORY(MB),STATUS,TIMESTAMP\n';
|
||||
selectedData.forEach(r => {
|
||||
content += `${r.id},${r.user},${r.process},${r.cpu},${r.memory},${r.status},${r.timestamp}\n`;
|
||||
});
|
||||
downloadFile('system_data.csv', content, 'text/csv');
|
||||
break;
|
||||
|
||||
case 'json':
|
||||
content = JSON.stringify(selectedData.map(r => {
|
||||
const {selected, ...data} = r;
|
||||
return data;
|
||||
}), null, 2);
|
||||
downloadFile('system_data.json', content, 'application/json');
|
||||
break;
|
||||
|
||||
case 'txt':
|
||||
content = 'SYSTEM DATA EXPORT\n';
|
||||
content += '==================\n\n';
|
||||
selectedData.forEach(r => {
|
||||
content += `ID: ${r.id}\n`;
|
||||
content += `USER: ${r.user}\n`;
|
||||
content += `PROCESS: ${r.process}\n`;
|
||||
content += `CPU: ${r.cpu}%\n`;
|
||||
content += `MEMORY: ${r.memory}MB\n`;
|
||||
content += `STATUS: ${r.status}\n`;
|
||||
content += `TIMESTAMP: ${r.timestamp}\n`;
|
||||
content += '-------------------\n';
|
||||
});
|
||||
downloadFile('system_data.txt', content, 'text/plain');
|
||||
break;
|
||||
}
|
||||
|
||||
closeModal();
|
||||
document.getElementById('systemStatus').textContent = 'EXPORT COMPLETE';
|
||||
document.getElementById('systemStatus').className = 'status-warning';
|
||||
setTimeout(() => {
|
||||
document.getElementById('systemStatus').textContent = 'ONLINE';
|
||||
document.getElementById('systemStatus').className = 'status-active';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function downloadFile(filename, content, mimeType) {
|
||||
const blob = new Blob([content], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('exportModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function refreshData() {
|
||||
document.getElementById('systemStatus').textContent = 'REFRESHING...';
|
||||
document.getElementById('systemStatus').className = 'status-warning loading';
|
||||
|
||||
setTimeout(() => {
|
||||
generateData();
|
||||
document.getElementById('systemStatus').textContent = 'ONLINE';
|
||||
document.getElementById('systemStatus').className = 'status-active';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Command line interface
|
||||
document.getElementById('commandInput').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
const command = this.value.trim().toLowerCase();
|
||||
processCommand(command);
|
||||
this.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
function processCommand(command) {
|
||||
const parts = command.split(' ');
|
||||
const cmd = parts[0];
|
||||
const arg = parts[1];
|
||||
|
||||
switch(cmd) {
|
||||
case ':sort':
|
||||
if (arg && ['id', 'user', 'process', 'cpu', 'memory', 'status', 'timestamp'].includes(arg)) {
|
||||
sortTable(arg);
|
||||
showCommandResult(`SORTED BY ${arg.toUpperCase()}`);
|
||||
} else {
|
||||
showCommandResult('INVALID SORT COLUMN');
|
||||
}
|
||||
break;
|
||||
|
||||
case ':filter':
|
||||
if (arg && ['active', 'inactive', 'warning'].includes(arg)) {
|
||||
document.getElementById('filterSelect').value = arg;
|
||||
applyFilters();
|
||||
showCommandResult(`FILTERED BY ${arg.toUpperCase()}`);
|
||||
} else if (arg === 'clear') {
|
||||
document.getElementById('filterSelect').value = '';
|
||||
applyFilters();
|
||||
showCommandResult('FILTER CLEARED');
|
||||
} else {
|
||||
showCommandResult('INVALID FILTER');
|
||||
}
|
||||
break;
|
||||
|
||||
case ':search':
|
||||
const searchTerm = parts.slice(1).join(' ');
|
||||
document.getElementById('searchInput').value = searchTerm;
|
||||
applyFilters();
|
||||
showCommandResult(`SEARCHING FOR "${searchTerm}"`);
|
||||
break;
|
||||
|
||||
case ':export':
|
||||
exportSelected();
|
||||
break;
|
||||
|
||||
case ':clear':
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.getElementById('filterSelect').value = '';
|
||||
applyFilters();
|
||||
showCommandResult('FILTERS CLEARED');
|
||||
break;
|
||||
|
||||
case ':help':
|
||||
case 'help':
|
||||
showCommandResult('AVAILABLE COMMANDS: :sort, :filter, :search, :export, :clear');
|
||||
break;
|
||||
|
||||
default:
|
||||
showCommandResult('UNKNOWN COMMAND. TYPE "help" FOR AVAILABLE COMMANDS');
|
||||
}
|
||||
}
|
||||
|
||||
function showCommandResult(message) {
|
||||
const status = document.getElementById('systemStatus');
|
||||
const originalText = status.textContent;
|
||||
const originalClass = status.className;
|
||||
|
||||
status.textContent = message;
|
||||
status.className = 'status-warning';
|
||||
|
||||
setTimeout(() => {
|
||||
status.textContent = originalText;
|
||||
status.className = originalClass;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
generateData();
|
||||
|
||||
// Add some CRT flicker effect
|
||||
setInterval(() => {
|
||||
if (Math.random() > 0.95) {
|
||||
document.body.style.opacity = '0.95';
|
||||
setTimeout(() => {
|
||||
document.body.style.opacity = '1';
|
||||
}, 50);
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,686 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Brutalist Navigation Center - Hybrid UI</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #1a1a1a;
|
||||
color: #d4d4d4;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-image:
|
||||
repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 4px),
|
||||
repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px);
|
||||
}
|
||||
|
||||
.brutalist-nav-center {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #2a2a2a;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Top Monolith - Search and Quick Actions */
|
||||
.nav-monolith {
|
||||
background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
|
||||
border-bottom: 8px solid #1a1a1a;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0,0,0,0.8),
|
||||
inset 0 -2px 10px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.search-fortress {
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(255,255,255,.02) 100px, rgba(255,255,255,.02) 101px),
|
||||
repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(255,255,255,.02) 100px, rgba(255,255,255,.02) 101px);
|
||||
}
|
||||
|
||||
.search-block {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #1a1a1a;
|
||||
border: 4px solid #3a3a3a;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0,0,0,0.8),
|
||||
0 5px 15px rgba(0,0,0,0.6);
|
||||
transform: skewX(-2deg);
|
||||
}
|
||||
|
||||
.search-block input {
|
||||
width: 100%;
|
||||
padding: 20px 60px 20px 25px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
transform: skewX(2deg);
|
||||
}
|
||||
|
||||
.search-block::before {
|
||||
content: '⌕';
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) skewX(2deg);
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Quick Actions - Concrete Blocks */
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.action-block {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #2a2a2a;
|
||||
border: 3px solid #3a3a3a;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 10px rgba(0,0,0,0.6),
|
||||
inset 0 0 10px rgba(0,0,0,0.4);
|
||||
transform: skewX(-5deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.action-block:hover {
|
||||
transform: skewX(-5deg) translateY(-2px);
|
||||
box-shadow:
|
||||
0 6px 20px rgba(0,0,0,0.8),
|
||||
inset 0 0 15px rgba(255,255,255,0.1);
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.action-block:active {
|
||||
transform: skewX(-5deg) translateY(1px);
|
||||
box-shadow:
|
||||
0 2px 5px rgba(0,0,0,0.8),
|
||||
inset 0 0 20px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Breadcrumb Fortress */
|
||||
.breadcrumb-fortress {
|
||||
background: #2a2a2a;
|
||||
padding: 15px 30px;
|
||||
border-bottom: 4px solid #1a1a1a;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.breadcrumb-path {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.crumb {
|
||||
padding: 8px 16px;
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #3a3a3a;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
|
||||
margin-left: -10px;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.crumb:first-child {
|
||||
margin-left: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
|
||||
}
|
||||
|
||||
.crumb:hover {
|
||||
background: #2a2a2a;
|
||||
transform: translateX(2px);
|
||||
box-shadow: 4px 4px 12px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.crumb.active {
|
||||
background: #3a3a3a;
|
||||
color: #fff;
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
/* Tab Citadel */
|
||||
.tab-citadel {
|
||||
background: #1a1a1a;
|
||||
border-bottom: 6px solid #0a0a0a;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.8);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.tab-citadel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-row {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tab-pillar {
|
||||
padding: 20px 30px;
|
||||
background: #2a2a2a;
|
||||
border: 3px solid #3a3a3a;
|
||||
border-bottom: none;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
|
||||
box-shadow:
|
||||
0 -4px 10px rgba(0,0,0,0.4),
|
||||
inset 0 0 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.tab-pillar:hover {
|
||||
background: #3a3a3a;
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 -6px 20px rgba(0,0,0,0.6),
|
||||
inset 0 0 25px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.tab-pillar.active {
|
||||
background: #4a4a4a;
|
||||
color: #fff;
|
||||
transform: translateY(-5px);
|
||||
border-color: #5a5a5a;
|
||||
box-shadow:
|
||||
0 -8px 30px rgba(0,0,0,0.8),
|
||||
inset 0 0 30px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.tab-pillar .tab-close {
|
||||
margin-left: 15px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.tab-pillar .tab-close:hover {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
/* Content Vault */
|
||||
.content-vault {
|
||||
flex: 1;
|
||||
background: #2a2a2a;
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, transparent, transparent 200px, rgba(255,255,255,.02) 200px, rgba(255,255,255,.02) 201px),
|
||||
repeating-linear-gradient(90deg, transparent, transparent 200px, rgba(255,255,255,.02) 200px, rgba(255,255,255,.02) 201px);
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
display: none;
|
||||
animation: vaultOpen 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.content-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes vaultOpen {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* State Memory Panel */
|
||||
.memory-vault {
|
||||
position: fixed;
|
||||
right: -300px;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: #1a1a1a;
|
||||
border-left: 6px solid #0a0a0a;
|
||||
box-shadow: -10px 0 30px rgba(0,0,0,0.8);
|
||||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.memory-vault.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.memory-toggle {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
background: #1a1a1a;
|
||||
border: 3px solid #0a0a0a;
|
||||
border-right: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
box-shadow: -4px 0 10px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.memory-content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.memory-block {
|
||||
background: #2a2a2a;
|
||||
border: 3px solid #3a3a3a;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow:
|
||||
0 4px 10px rgba(0,0,0,0.4),
|
||||
inset 0 0 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.memory-block h4 {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.memory-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.memory-item:hover {
|
||||
padding-left: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.concrete-text {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.power-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #44ff44;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #44ff44;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Demo Content */
|
||||
.demo-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
background: #1a1a1a;
|
||||
border: 4px solid #3a3a3a;
|
||||
padding: 30px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0,0,0,0.6),
|
||||
inset 0 0 30px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.content-block h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-block p {
|
||||
line-height: 1.8;
|
||||
color: #aaa;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="brutalist-nav-center">
|
||||
<!-- Top Monolith -->
|
||||
<div class="nav-monolith">
|
||||
<!-- Search Fortress -->
|
||||
<div class="search-fortress">
|
||||
<div class="search-block">
|
||||
<input type="text" placeholder="SEARCH COMMAND CENTER..." class="concrete-text">
|
||||
</div>
|
||||
<div class="quick-actions">
|
||||
<div class="action-block" title="Dashboard">📊</div>
|
||||
<div class="action-block" title="Messages">✉️</div>
|
||||
<div class="action-block" title="Settings">⚙️</div>
|
||||
<div class="action-block" title="Profile">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb Fortress -->
|
||||
<div class="breadcrumb-fortress">
|
||||
<div class="breadcrumb-path">
|
||||
<div class="crumb" onclick="navigateToCrumb('home')">HOME</div>
|
||||
<div class="crumb" onclick="navigateToCrumb('projects')">PROJECTS</div>
|
||||
<div class="crumb" onclick="navigateToCrumb('brutalism')">BRUTALISM</div>
|
||||
<div class="crumb active" onclick="navigateToCrumb('navigation')">NAVIGATION</div>
|
||||
</div>
|
||||
<div class="power-indicator"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Citadel -->
|
||||
<div class="tab-citadel">
|
||||
<div class="tab-row" id="tabRow">
|
||||
<div class="tab-pillar active" data-tab="overview">
|
||||
OVERVIEW
|
||||
<span class="tab-close" onclick="closeTab(event, 'overview')">×</span>
|
||||
</div>
|
||||
<div class="tab-pillar" data-tab="architecture">
|
||||
ARCHITECTURE
|
||||
<span class="tab-close" onclick="closeTab(event, 'architecture')">×</span>
|
||||
</div>
|
||||
<div class="tab-pillar" data-tab="components">
|
||||
COMPONENTS
|
||||
<span class="tab-close" onclick="closeTab(event, 'components')">×</span>
|
||||
</div>
|
||||
<div class="tab-pillar" data-tab="documentation">
|
||||
DOCUMENTATION
|
||||
<span class="tab-close" onclick="closeTab(event, 'documentation')">×</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Vault -->
|
||||
<div class="content-vault">
|
||||
<div class="content-panel active" id="overview">
|
||||
<div class="demo-content">
|
||||
<div class="content-block">
|
||||
<h2 class="concrete-text">BRUTALIST NAVIGATION CENTER</h2>
|
||||
<p>Welcome to the monolithic navigation system. This imposing structure combines the raw power of brutalist architecture with advanced navigation capabilities.</p>
|
||||
<p>Each element has been forged from digital concrete, creating an interface that commands attention and respect. Navigate through the fortress of information with confidence.</p>
|
||||
</div>
|
||||
<div class="content-block">
|
||||
<h2 class="concrete-text">SYSTEM STATUS</h2>
|
||||
<p>All navigation systems operational. Memory vault synchronized. State persistence active.</p>
|
||||
<p>Current session: 47 minutes. Navigation history: 23 locations. Quick actions executed: 15.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="architecture">
|
||||
<div class="demo-content">
|
||||
<div class="content-block">
|
||||
<h2 class="concrete-text">ARCHITECTURAL FOUNDATION</h2>
|
||||
<p>The navigation center is built on solid brutalist principles. Heavy forms, raw textures, and imposing geometry create a navigation experience unlike any other.</p>
|
||||
<p>Each component serves a vital purpose in the overall structure, from the search fortress at the summit to the content vault below.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="components">
|
||||
<div class="demo-content">
|
||||
<div class="content-block">
|
||||
<h2 class="concrete-text">COMPONENT MANIFEST</h2>
|
||||
<p>Search Fortress: Central command for system-wide search operations.</p>
|
||||
<p>Quick Actions: Rapid deployment blocks for common operations.</p>
|
||||
<p>Breadcrumb Path: Historical navigation tracking with angular precision.</p>
|
||||
<p>Tab Citadel: Multi-dimensional content management system.</p>
|
||||
<p>Memory Vault: State persistence and navigation history archive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel" id="documentation">
|
||||
<div class="demo-content">
|
||||
<div class="content-block">
|
||||
<h2 class="concrete-text">OPERATIONAL MANUAL</h2>
|
||||
<p>To navigate this brutalist interface, understand that each element has weight and purpose. The angular forms and heavy shadows are not merely aesthetic - they guide your interaction.</p>
|
||||
<p>Use the memory vault to access your navigation history. Quick actions provide immediate access to critical functions. The tab system allows parallel exploration of multiple data streams.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Vault -->
|
||||
<div class="memory-vault" id="memoryVault">
|
||||
<div class="memory-toggle" onclick="toggleMemoryVault()">
|
||||
<span id="memoryToggleIcon">◀</span>
|
||||
</div>
|
||||
<div class="memory-content">
|
||||
<div class="memory-block">
|
||||
<h4>RECENT LOCATIONS</h4>
|
||||
<div class="memory-item">Overview / System Status</div>
|
||||
<div class="memory-item">Projects / Alpha Complex</div>
|
||||
<div class="memory-item">Documentation / API Reference</div>
|
||||
<div class="memory-item">Settings / Security</div>
|
||||
</div>
|
||||
<div class="memory-block">
|
||||
<h4>SAVED SEARCHES</h4>
|
||||
<div class="memory-item">brutalist components</div>
|
||||
<div class="memory-item">navigation patterns</div>
|
||||
<div class="memory-item">concrete textures</div>
|
||||
</div>
|
||||
<div class="memory-block">
|
||||
<h4>QUICK ACCESS</h4>
|
||||
<div class="memory-item">Dashboard Analytics</div>
|
||||
<div class="memory-item">User Management</div>
|
||||
<div class="memory-item">System Logs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Navigation State Management
|
||||
const navigationState = {
|
||||
currentTab: 'overview',
|
||||
breadcrumbs: ['home', 'projects', 'brutalism', 'navigation'],
|
||||
searchHistory: [],
|
||||
tabHistory: ['overview'],
|
||||
memoryVaultOpen: false
|
||||
};
|
||||
|
||||
// Tab Management
|
||||
document.querySelectorAll('.tab-pillar').forEach(tab => {
|
||||
tab.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('tab-close')) return;
|
||||
|
||||
const tabName = this.dataset.tab;
|
||||
switchTab(tabName);
|
||||
});
|
||||
});
|
||||
|
||||
function switchTab(tabName) {
|
||||
// Update tabs
|
||||
document.querySelectorAll('.tab-pillar').forEach(t => t.classList.remove('active'));
|
||||
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
||||
|
||||
// Update content
|
||||
document.querySelectorAll('.content-panel').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
|
||||
// Update state
|
||||
navigationState.currentTab = tabName;
|
||||
navigationState.tabHistory.push(tabName);
|
||||
saveState();
|
||||
}
|
||||
|
||||
function closeTab(event, tabName) {
|
||||
event.stopPropagation();
|
||||
const tab = document.querySelector(`[data-tab="${tabName}"]`);
|
||||
const wasActive = tab.classList.contains('active');
|
||||
|
||||
tab.style.transform = 'translateY(-100px)';
|
||||
tab.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
tab.remove();
|
||||
if (wasActive && navigationState.tabHistory.length > 1) {
|
||||
const previousTab = navigationState.tabHistory[navigationState.tabHistory.length - 2];
|
||||
switchTab(previousTab);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Breadcrumb Navigation
|
||||
function navigateToCrumb(crumbName) {
|
||||
const index = navigationState.breadcrumbs.indexOf(crumbName);
|
||||
if (index !== -1) {
|
||||
navigationState.breadcrumbs = navigationState.breadcrumbs.slice(0, index + 1);
|
||||
updateBreadcrumbs();
|
||||
saveState();
|
||||
}
|
||||
}
|
||||
|
||||
function updateBreadcrumbs() {
|
||||
const container = document.querySelector('.breadcrumb-path');
|
||||
container.innerHTML = navigationState.breadcrumbs.map((crumb, index) => {
|
||||
const isActive = index === navigationState.breadcrumbs.length - 1;
|
||||
return `<div class="crumb ${isActive ? 'active' : ''}" onclick="navigateToCrumb('${crumb}')">${crumb.toUpperCase()}</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// Memory Vault
|
||||
function toggleMemoryVault() {
|
||||
navigationState.memoryVaultOpen = !navigationState.memoryVaultOpen;
|
||||
const vault = document.getElementById('memoryVault');
|
||||
const icon = document.getElementById('memoryToggleIcon');
|
||||
|
||||
if (navigationState.memoryVaultOpen) {
|
||||
vault.classList.add('open');
|
||||
icon.textContent = '▶';
|
||||
} else {
|
||||
vault.classList.remove('open');
|
||||
icon.textContent = '◀';
|
||||
}
|
||||
|
||||
saveState();
|
||||
}
|
||||
|
||||
// Search Functionality
|
||||
const searchInput = document.querySelector('.search-block input');
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
const query = this.value.trim();
|
||||
if (query) {
|
||||
navigationState.searchHistory.push(query);
|
||||
performSearch(query);
|
||||
this.value = '';
|
||||
saveState();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function performSearch(query) {
|
||||
console.log('Searching for:', query);
|
||||
// Add visual feedback
|
||||
const searchBlock = document.querySelector('.search-block');
|
||||
searchBlock.style.boxShadow = 'inset 0 0 30px rgba(68, 255, 68, 0.3), 0 5px 15px rgba(0,0,0,0.6)';
|
||||
setTimeout(() => {
|
||||
searchBlock.style.boxShadow = 'inset 0 0 20px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.6)';
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Quick Actions
|
||||
document.querySelectorAll('.action-block').forEach(action => {
|
||||
action.addEventListener('click', function() {
|
||||
const title = this.getAttribute('title');
|
||||
console.log('Quick action:', title);
|
||||
|
||||
// Visual feedback
|
||||
this.style.transform = 'skewX(-5deg) scale(0.9)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'skewX(-5deg)';
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
// State Persistence
|
||||
function saveState() {
|
||||
localStorage.setItem('brutalNavState', JSON.stringify(navigationState));
|
||||
}
|
||||
|
||||
function loadState() {
|
||||
const saved = localStorage.getItem('brutalNavState');
|
||||
if (saved) {
|
||||
const state = JSON.parse(saved);
|
||||
Object.assign(navigationState, state);
|
||||
|
||||
// Restore UI state
|
||||
if (state.currentTab) {
|
||||
switchTab(state.currentTab);
|
||||
}
|
||||
if (state.memoryVaultOpen) {
|
||||
toggleMemoryVault();
|
||||
}
|
||||
updateBreadcrumbs();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
loadState();
|
||||
|
||||
// Add some interactive effects
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
const x = e.clientX / window.innerWidth;
|
||||
const y = e.clientY / window.innerHeight;
|
||||
|
||||
document.querySelector('.content-vault').style.backgroundPosition =
|
||||
`${x * 50}px ${y * 50}px`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,901 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Playful Input Intelligence - UI Hybrid 29</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
animation: backgroundShift 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 30px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #764ba2;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2em;
|
||||
animation: titleBounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes titleBounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.input-wrapper.focused {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 30px rgba(118, 75, 162, 0.3);
|
||||
}
|
||||
|
||||
.input-wrapper.success {
|
||||
animation: successBounce 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes successBounce {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.input-wrapper.error {
|
||||
animation: errorShake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes errorShake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
color: #667eea;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.helper-character {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
right: -80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.helper-character.show {
|
||||
opacity: 1;
|
||||
right: -70px;
|
||||
}
|
||||
|
||||
.helper-character.celebrate {
|
||||
animation: celebrate 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes celebrate {
|
||||
0% { transform: translateY(-50%) rotate(0deg); }
|
||||
50% { transform: translateY(-70%) rotate(360deg); }
|
||||
100% { transform: translateY(-50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.helper-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffd93d;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.helper-face {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.helper-eyes {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
animation: blink 4s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { transform: scaleY(1); }
|
||||
50% { transform: scaleY(0.1); }
|
||||
}
|
||||
|
||||
.helper-mouth {
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border-bottom: 3px solid #333;
|
||||
border-radius: 0 0 20px 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.helper-character.happy .helper-mouth {
|
||||
width: 25px;
|
||||
height: 12px;
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
|
||||
.helper-character.worried .helper-mouth {
|
||||
width: 15px;
|
||||
height: 5px;
|
||||
border-radius: 0 0 15px 15px;
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
bottom: 20%;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #4facfe);
|
||||
background-size: 300% 100%;
|
||||
width: 0;
|
||||
transition: width 0.3s ease;
|
||||
animation: gradientShift 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.validation-hints {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.validation-hints.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.validation-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hint-icon.pending {
|
||||
background: #e0e0e0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hint-icon.valid {
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
animation: checkPop 0.4s ease-out;
|
||||
}
|
||||
|
||||
.hint-icon.invalid {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
animation: xPop 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes checkPop {
|
||||
0% { transform: scale(0); }
|
||||
50% { transform: scale(1.3); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes xPop {
|
||||
0% { transform: scale(0) rotate(0deg); }
|
||||
50% { transform: scale(1.3) rotate(180deg); }
|
||||
100% { transform: scale(1) rotate(180deg); }
|
||||
}
|
||||
|
||||
.autocomplete-suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.9);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.autocomplete-suggestions.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.suggestion:hover {
|
||||
background: #f0f0f0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.suggestion::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.suggestion:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.format-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.format-preview.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confetti {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.confetti-piece {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffd93d;
|
||||
animation: confettiFall 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes confettiFall {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100px) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(118, 75, 162, 0.4);
|
||||
}
|
||||
|
||||
.submit-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: scale(0);
|
||||
animation: rippleEffect 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes rippleEffect {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<h1>🎉 Fun Form Friend 🎉</h1>
|
||||
|
||||
<form id="playfulForm">
|
||||
<div class="input-group" data-type="email">
|
||||
<label for="email">Email Address</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="email" name="email" placeholder="your@email.com" autocomplete="off">
|
||||
<div class="progress-bar"></div>
|
||||
<div class="format-preview"></div>
|
||||
</div>
|
||||
<div class="helper-character">
|
||||
<div class="helper-body">
|
||||
<div class="helper-face">
|
||||
<div class="helper-eyes">
|
||||
<div class="eye"></div>
|
||||
<div class="eye"></div>
|
||||
</div>
|
||||
<div class="helper-mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-hints">
|
||||
<div class="validation-hint" data-rule="@">
|
||||
<span class="hint-icon pending">@</span>
|
||||
<span>Contains @ symbol</span>
|
||||
</div>
|
||||
<div class="validation-hint" data-rule="domain">
|
||||
<span class="hint-icon pending">.</span>
|
||||
<span>Valid domain</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="autocomplete-suggestions"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" data-type="phone">
|
||||
<label for="phone">Phone Number</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="phone" name="phone" placeholder="(555) 123-4567" autocomplete="off">
|
||||
<div class="progress-bar"></div>
|
||||
<div class="format-preview"></div>
|
||||
</div>
|
||||
<div class="helper-character">
|
||||
<div class="helper-body" style="background: #4fc3f7;">
|
||||
<div class="helper-face">
|
||||
<div class="helper-eyes">
|
||||
<div class="eye"></div>
|
||||
<div class="eye"></div>
|
||||
</div>
|
||||
<div class="helper-mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-hints">
|
||||
<div class="validation-hint" data-rule="digits">
|
||||
<span class="hint-icon pending">📱</span>
|
||||
<span>10 digits</span>
|
||||
</div>
|
||||
<div class="validation-hint" data-rule="format">
|
||||
<span class="hint-icon pending">✨</span>
|
||||
<span>Proper format</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" data-type="creditcard">
|
||||
<label for="creditcard">Credit Card</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="creditcard" name="creditcard" placeholder="1234 5678 9012 3456" autocomplete="off">
|
||||
<div class="progress-bar"></div>
|
||||
<div class="format-preview"></div>
|
||||
</div>
|
||||
<div class="helper-character">
|
||||
<div class="helper-body" style="background: #81c784;">
|
||||
<div class="helper-face">
|
||||
<div class="helper-eyes">
|
||||
<div class="eye"></div>
|
||||
<div class="eye"></div>
|
||||
</div>
|
||||
<div class="helper-mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-hints">
|
||||
<div class="validation-hint" data-rule="length">
|
||||
<span class="hint-icon pending">💳</span>
|
||||
<span>16 digits</span>
|
||||
</div>
|
||||
<div class="validation-hint" data-rule="luhn">
|
||||
<span class="hint-icon pending">🔒</span>
|
||||
<span>Valid card number</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" data-type="username">
|
||||
<label for="username">Username</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="username" name="username" placeholder="cooluser123" autocomplete="off">
|
||||
<div class="progress-bar"></div>
|
||||
<div class="format-preview"></div>
|
||||
</div>
|
||||
<div class="helper-character">
|
||||
<div class="helper-body" style="background: #ff7043;">
|
||||
<div class="helper-face">
|
||||
<div class="helper-eyes">
|
||||
<div class="eye"></div>
|
||||
<div class="eye"></div>
|
||||
</div>
|
||||
<div class="helper-mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-hints">
|
||||
<div class="validation-hint" data-rule="length">
|
||||
<span class="hint-icon pending">📏</span>
|
||||
<span>3-20 characters</span>
|
||||
</div>
|
||||
<div class="validation-hint" data-rule="alphanumeric">
|
||||
<span class="hint-icon pending">🔤</span>
|
||||
<span>Letters & numbers only</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="autocomplete-suggestions"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
Submit with Joy! 🚀
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class PlayfulInput {
|
||||
constructor(inputGroup) {
|
||||
this.group = inputGroup;
|
||||
this.input = inputGroup.querySelector('input');
|
||||
this.wrapper = inputGroup.querySelector('.input-wrapper');
|
||||
this.helper = inputGroup.querySelector('.helper-character');
|
||||
this.progressBar = inputGroup.querySelector('.progress-bar');
|
||||
this.hints = inputGroup.querySelector('.validation-hints');
|
||||
this.suggestions = inputGroup.querySelector('.autocomplete-suggestions');
|
||||
this.formatPreview = inputGroup.querySelector('.format-preview');
|
||||
this.type = inputGroup.dataset.type;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.input.addEventListener('focus', () => this.handleFocus());
|
||||
this.input.addEventListener('blur', () => this.handleBlur());
|
||||
this.input.addEventListener('input', () => this.handleInput());
|
||||
|
||||
if (this.suggestions) {
|
||||
this.setupAutocomplete();
|
||||
}
|
||||
|
||||
this.setupValidation();
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.wrapper.classList.add('focused');
|
||||
this.helper.classList.add('show');
|
||||
if (this.hints) {
|
||||
this.hints.classList.add('show');
|
||||
}
|
||||
this.playSound('pop');
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.wrapper.classList.remove('focused');
|
||||
if (this.input.value === '') {
|
||||
this.helper.classList.remove('show');
|
||||
if (this.hints) {
|
||||
this.hints.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
const value = this.input.value;
|
||||
const progress = this.calculateProgress(value);
|
||||
|
||||
this.progressBar.style.width = `${progress}%`;
|
||||
|
||||
if (this.type === 'phone') {
|
||||
this.formatPhone();
|
||||
} else if (this.type === 'creditcard') {
|
||||
this.formatCreditCard();
|
||||
}
|
||||
|
||||
this.validate();
|
||||
this.updateHelper(progress);
|
||||
|
||||
if (this.suggestions && this.type !== 'phone' && this.type !== 'creditcard') {
|
||||
this.showSuggestions(value);
|
||||
}
|
||||
}
|
||||
|
||||
formatPhone() {
|
||||
let value = this.input.value.replace(/\D/g, '');
|
||||
if (value.length > 0) {
|
||||
if (value.length <= 3) {
|
||||
value = `(${value}`;
|
||||
} else if (value.length <= 6) {
|
||||
value = `(${value.slice(0, 3)}) ${value.slice(3)}`;
|
||||
} else {
|
||||
value = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6, 10)}`;
|
||||
}
|
||||
}
|
||||
this.input.value = value;
|
||||
}
|
||||
|
||||
formatCreditCard() {
|
||||
let value = this.input.value.replace(/\s/g, '');
|
||||
let formattedValue = '';
|
||||
|
||||
for (let i = 0; i < value.length && i < 16; i++) {
|
||||
if (i > 0 && i % 4 === 0) {
|
||||
formattedValue += ' ';
|
||||
}
|
||||
formattedValue += value[i];
|
||||
}
|
||||
|
||||
this.input.value = formattedValue;
|
||||
|
||||
// Detect card type
|
||||
if (value.startsWith('4')) {
|
||||
this.showFormatPreview('Visa');
|
||||
} else if (value.startsWith('5')) {
|
||||
this.showFormatPreview('Mastercard');
|
||||
} else if (value.startsWith('3')) {
|
||||
this.showFormatPreview('Amex');
|
||||
}
|
||||
}
|
||||
|
||||
showFormatPreview(text) {
|
||||
this.formatPreview.textContent = text;
|
||||
this.formatPreview.classList.add('show');
|
||||
}
|
||||
|
||||
calculateProgress(value) {
|
||||
if (this.type === 'email') {
|
||||
const hasAt = value.includes('@');
|
||||
const hasDot = value.includes('.') && value.indexOf('.') > value.indexOf('@');
|
||||
return hasAt && hasDot ? 100 : hasAt ? 50 : value.length > 0 ? 25 : 0;
|
||||
} else if (this.type === 'phone') {
|
||||
const digits = value.replace(/\D/g, '');
|
||||
return Math.min((digits.length / 10) * 100, 100);
|
||||
} else if (this.type === 'creditcard') {
|
||||
const digits = value.replace(/\s/g, '');
|
||||
return Math.min((digits.length / 16) * 100, 100);
|
||||
} else if (this.type === 'username') {
|
||||
const validLength = value.length >= 3 && value.length <= 20;
|
||||
const validChars = /^[a-zA-Z0-9_]*$/.test(value);
|
||||
return validLength && validChars ? 100 : value.length > 0 ? 50 : 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
validate() {
|
||||
const value = this.input.value;
|
||||
const hints = this.group.querySelectorAll('.validation-hint');
|
||||
|
||||
hints.forEach(hint => {
|
||||
const rule = hint.dataset.rule;
|
||||
const icon = hint.querySelector('.hint-icon');
|
||||
let isValid = false;
|
||||
|
||||
if (this.type === 'email') {
|
||||
if (rule === '@') {
|
||||
isValid = value.includes('@');
|
||||
} else if (rule === 'domain') {
|
||||
isValid = /\.[a-z]{2,}$/i.test(value);
|
||||
}
|
||||
} else if (this.type === 'phone') {
|
||||
const digits = value.replace(/\D/g, '');
|
||||
if (rule === 'digits') {
|
||||
isValid = digits.length === 10;
|
||||
} else if (rule === 'format') {
|
||||
isValid = /^\(\d{3}\) \d{3}-\d{4}$/.test(value);
|
||||
}
|
||||
} else if (this.type === 'creditcard') {
|
||||
const digits = value.replace(/\s/g, '');
|
||||
if (rule === 'length') {
|
||||
isValid = digits.length === 16;
|
||||
} else if (rule === 'luhn') {
|
||||
isValid = this.luhnCheck(digits);
|
||||
}
|
||||
} else if (this.type === 'username') {
|
||||
if (rule === 'length') {
|
||||
isValid = value.length >= 3 && value.length <= 20;
|
||||
} else if (rule === 'alphanumeric') {
|
||||
isValid = /^[a-zA-Z0-9_]+$/.test(value);
|
||||
}
|
||||
}
|
||||
|
||||
icon.classList.remove('pending', 'valid', 'invalid');
|
||||
if (value.length > 0) {
|
||||
icon.classList.add(isValid ? 'valid' : 'invalid');
|
||||
icon.textContent = isValid ? '✓' : '✗';
|
||||
} else {
|
||||
icon.classList.add('pending');
|
||||
icon.textContent = hint.textContent.trim().charAt(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
luhnCheck(digits) {
|
||||
if (digits.length !== 16) return false;
|
||||
|
||||
let sum = 0;
|
||||
let isEven = false;
|
||||
|
||||
for (let i = digits.length - 1; i >= 0; i--) {
|
||||
let digit = parseInt(digits[i]);
|
||||
|
||||
if (isEven) {
|
||||
digit *= 2;
|
||||
if (digit > 9) {
|
||||
digit -= 9;
|
||||
}
|
||||
}
|
||||
|
||||
sum += digit;
|
||||
isEven = !isEven;
|
||||
}
|
||||
|
||||
return sum % 10 === 0;
|
||||
}
|
||||
|
||||
updateHelper(progress) {
|
||||
this.helper.classList.remove('happy', 'worried');
|
||||
|
||||
if (progress === 100) {
|
||||
this.helper.classList.add('happy', 'celebrate');
|
||||
this.wrapper.classList.add('success');
|
||||
this.createConfetti();
|
||||
this.playSound('success');
|
||||
|
||||
setTimeout(() => {
|
||||
this.helper.classList.remove('celebrate');
|
||||
this.wrapper.classList.remove('success');
|
||||
}, 600);
|
||||
} else if (progress > 50) {
|
||||
this.helper.classList.add('happy');
|
||||
} else if (progress > 0) {
|
||||
this.helper.classList.add('worried');
|
||||
}
|
||||
}
|
||||
|
||||
setupAutocomplete() {
|
||||
const suggestionData = {
|
||||
email: ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com'],
|
||||
username: ['_gamer', '_pro', '_master', '_ninja', '_wizard', '123', '2024', '_cool']
|
||||
};
|
||||
|
||||
if (suggestionData[this.type]) {
|
||||
this.input.addEventListener('input', () => {
|
||||
this.showSuggestions(this.input.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showSuggestions(value) {
|
||||
if (!this.suggestions) return;
|
||||
|
||||
const suggestionData = {
|
||||
email: ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com'],
|
||||
username: ['_gamer', '_pro', '_master', '_ninja', '_wizard', '123', '2024', '_cool']
|
||||
};
|
||||
|
||||
const data = suggestionData[this.type];
|
||||
if (!data || value.length < 3) {
|
||||
this.suggestions.classList.remove('show');
|
||||
return;
|
||||
}
|
||||
|
||||
let suggestions = [];
|
||||
|
||||
if (this.type === 'email' && value.includes('@') && !value.includes('.')) {
|
||||
const [user, partial] = value.split('@');
|
||||
suggestions = data
|
||||
.filter(domain => domain.startsWith(partial))
|
||||
.map(domain => `${user}@${domain}`);
|
||||
} else if (this.type === 'username') {
|
||||
suggestions = data.map(suffix => value + suffix);
|
||||
}
|
||||
|
||||
if (suggestions.length > 0) {
|
||||
this.suggestions.innerHTML = suggestions
|
||||
.slice(0, 3)
|
||||
.map(s => `<div class="suggestion">${s}</div>`)
|
||||
.join('');
|
||||
|
||||
this.suggestions.classList.add('show');
|
||||
|
||||
this.suggestions.querySelectorAll('.suggestion').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
this.input.value = el.textContent;
|
||||
this.suggestions.classList.remove('show');
|
||||
this.handleInput();
|
||||
this.playSound('select');
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.suggestions.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
createConfetti() {
|
||||
const colors = ['#ffd93d', '#6bcf7f', '#e74c3c', '#3498db', '#9b59b6'];
|
||||
const confettiCount = 20;
|
||||
|
||||
for (let i = 0; i < confettiCount; i++) {
|
||||
setTimeout(() => {
|
||||
const confetti = document.createElement('div');
|
||||
confetti.className = 'confetti';
|
||||
|
||||
const piece = document.createElement('div');
|
||||
piece.className = 'confetti-piece';
|
||||
piece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
piece.style.left = Math.random() * 100 + '%';
|
||||
piece.style.top = Math.random() * 100 + '%';
|
||||
|
||||
confetti.appendChild(piece);
|
||||
document.body.appendChild(confetti);
|
||||
|
||||
setTimeout(() => confetti.remove(), 1000);
|
||||
}, i * 50);
|
||||
}
|
||||
}
|
||||
|
||||
playSound(type) {
|
||||
// Sound effects would be implemented here
|
||||
// Using Web Audio API or audio elements
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all input groups
|
||||
document.querySelectorAll('.input-group').forEach(group => {
|
||||
new PlayfulInput(group);
|
||||
});
|
||||
|
||||
// Form submission
|
||||
document.getElementById('playfulForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const button = e.target.querySelector('.submit-button');
|
||||
const rect = button.getBoundingClientRect();
|
||||
const ripple = document.createElement('span');
|
||||
ripple.className = 'ripple';
|
||||
ripple.style.width = ripple.style.height = '40px';
|
||||
ripple.style.left = '50%';
|
||||
ripple.style.top = '50%';
|
||||
|
||||
button.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
|
||||
// Create celebration
|
||||
document.querySelectorAll('.helper-character').forEach(helper => {
|
||||
helper.classList.add('celebrate');
|
||||
setTimeout(() => helper.classList.remove('celebrate'), 600);
|
||||
});
|
||||
|
||||
// Success message
|
||||
alert('🎉 Form submitted with maximum joy! 🎉');
|
||||
});
|
||||
|
||||
// Add some ambient animation
|
||||
setInterval(() => {
|
||||
const helpers = document.querySelectorAll('.helper-character.show:not(.celebrate)');
|
||||
const randomHelper = helpers[Math.floor(Math.random() * helpers.length)];
|
||||
|
||||
if (randomHelper) {
|
||||
randomHelper.style.transform = 'translateY(-50%) rotate(-5deg)';
|
||||
setTimeout(() => {
|
||||
randomHelper.style.transform = 'translateY(-50%) rotate(5deg)';
|
||||
setTimeout(() => {
|
||||
randomHelper.style.transform = 'translateY(-50%) rotate(0deg)';
|
||||
}, 200);
|
||||
}, 200);
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,707 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Digital Minimalism Action Controller - Iteration 30</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
||||
background: #FAFAFA;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.controllers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.controllers-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-controller {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 32px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.action-controller:hover {
|
||||
border-color: #000;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.controller-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.action-button:hover:not(:disabled) {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.action-button.delete {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.action-button.delete:hover:not(:disabled) {
|
||||
background: #FF3B30;
|
||||
color: #fff;
|
||||
border-color: #FF3B30;
|
||||
}
|
||||
|
||||
.action-button.submit {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.action-button.archive {
|
||||
background: #fff;
|
||||
color: #666;
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.action-button.archive:hover:not(:disabled) {
|
||||
border-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Button States */
|
||||
.button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.button-content.hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.loading-state.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.loading-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: loadingPulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes loadingPulse {
|
||||
0%, 80%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Confirmation State */
|
||||
.confirmation-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.confirmation-state.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.confirmation-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirmation-text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.confirmation-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.confirm-btn, .cancel-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid #E5E5E5;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
/* Success/Error States */
|
||||
.feedback-state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.feedback-state.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feedback-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.feedback-text {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #E5E5E5;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.progress-bar.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #000;
|
||||
width: 0%;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* SVG Icons */
|
||||
.icon-check {
|
||||
stroke: #34C759;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.icon-error {
|
||||
stroke: #FF3B30;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Advanced Controllers */
|
||||
.multi-action-controller {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.multi-action-controller {
|
||||
grid-column: span 1;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.action-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-description {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.action-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
padding: 12px 24px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
border: 1px solid #E5E5E5;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.secondary-button:hover {
|
||||
border-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
padding: 12px 24px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: 1px solid #000;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Action Controller</h1>
|
||||
<p>Digital Minimalism × Iteration 30</p>
|
||||
</div>
|
||||
|
||||
<div class="controllers-grid">
|
||||
<!-- Save Controller -->
|
||||
<div class="action-controller">
|
||||
<span class="controller-label">Save</span>
|
||||
<button class="action-button save" data-action="save">
|
||||
<span class="button-content">Save Changes</span>
|
||||
<div class="loading-state">
|
||||
<div class="loading-dots">
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback-state success">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<path class="icon-check" d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Saved</div>
|
||||
</div>
|
||||
<div class="feedback-state error">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<circle class="icon-error" cx="12" cy="12" r="10"/>
|
||||
<line class="icon-error" x1="12" y1="8" x2="12" y2="12"/>
|
||||
<line class="icon-error" x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Failed</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Controller -->
|
||||
<div class="action-controller">
|
||||
<span class="controller-label">Delete</span>
|
||||
<button class="action-button delete" data-action="delete">
|
||||
<span class="button-content">Delete Item</span>
|
||||
<div class="loading-state">
|
||||
<div class="loading-dots">
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirmation-state">
|
||||
<div class="confirmation-content">
|
||||
<div class="confirmation-text">Are you sure?</div>
|
||||
<div class="confirmation-actions">
|
||||
<button class="cancel-btn">Cancel</button>
|
||||
<button class="confirm-btn">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback-state success">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<path class="icon-check" d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Deleted</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Controller -->
|
||||
<div class="action-controller">
|
||||
<span class="controller-label">Submit</span>
|
||||
<button class="action-button submit" data-action="submit">
|
||||
<span class="button-content">Submit Form</span>
|
||||
<div class="loading-state">
|
||||
<div class="loading-dots">
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback-state success">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<path class="icon-check" d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Submitted</div>
|
||||
</div>
|
||||
<div class="feedback-state error">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<circle class="icon-error" cx="12" cy="12" r="10"/>
|
||||
<line class="icon-error" x1="12" y1="8" x2="12" y2="12"/>
|
||||
<line class="icon-error" x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Error</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Archive Controller -->
|
||||
<div class="action-controller">
|
||||
<span class="controller-label">Archive</span>
|
||||
<button class="action-button archive" data-action="archive">
|
||||
<span class="button-content">Archive</span>
|
||||
<div class="loading-state">
|
||||
<div class="loading-dots">
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback-state success">
|
||||
<svg class="feedback-icon" viewBox="0 0 24 24">
|
||||
<path class="icon-check" d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feedback-text">Archived</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Action Controller -->
|
||||
<div class="action-controller multi-action-controller">
|
||||
<div class="action-info">
|
||||
<h3 class="action-title">Export Document</h3>
|
||||
<p class="action-description">Generate and download a comprehensive report with all current data and analytics.</p>
|
||||
</div>
|
||||
<div class="action-controls">
|
||||
<button class="secondary-button" data-action="preview">Preview</button>
|
||||
<button class="primary-button" data-action="export">Export PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class ActionController {
|
||||
constructor(button) {
|
||||
this.button = button;
|
||||
this.controller = button.closest('.action-controller');
|
||||
this.action = button.dataset.action;
|
||||
this.isProcessing = false;
|
||||
|
||||
this.elements = {
|
||||
buttonContent: button.querySelector('.button-content'),
|
||||
loadingState: button.querySelector('.loading-state'),
|
||||
confirmationState: button.querySelector('.confirmation-state'),
|
||||
successState: button.querySelector('.feedback-state.success'),
|
||||
errorState: button.querySelector('.feedback-state.error'),
|
||||
progressBar: this.controller.querySelector('.progress-bar'),
|
||||
progressFill: this.controller.querySelector('.progress-fill')
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.button.addEventListener('click', () => this.handleClick());
|
||||
|
||||
if (this.elements.confirmationState) {
|
||||
const cancelBtn = this.elements.confirmationState.querySelector('.cancel-btn');
|
||||
const confirmBtn = this.elements.confirmationState.querySelector('.confirm-btn');
|
||||
|
||||
cancelBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.hideConfirmation();
|
||||
});
|
||||
|
||||
confirmBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.executeAction();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
if (this.isProcessing) return;
|
||||
|
||||
if (this.action === 'delete' && this.elements.confirmationState) {
|
||||
this.showConfirmation();
|
||||
} else {
|
||||
this.executeAction();
|
||||
}
|
||||
}
|
||||
|
||||
showConfirmation() {
|
||||
this.elements.buttonContent.classList.add('hidden');
|
||||
this.elements.confirmationState.classList.add('active');
|
||||
}
|
||||
|
||||
hideConfirmation() {
|
||||
this.elements.confirmationState.classList.remove('active');
|
||||
setTimeout(() => {
|
||||
this.elements.buttonContent.classList.remove('hidden');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async executeAction() {
|
||||
this.isProcessing = true;
|
||||
this.button.disabled = true;
|
||||
|
||||
// Hide confirmation if visible
|
||||
if (this.elements.confirmationState?.classList.contains('active')) {
|
||||
this.elements.confirmationState.classList.remove('active');
|
||||
}
|
||||
|
||||
// Start loading
|
||||
this.elements.buttonContent.classList.add('hidden');
|
||||
if (this.elements.loadingState) {
|
||||
this.elements.loadingState.classList.add('active');
|
||||
}
|
||||
|
||||
// Show progress bar
|
||||
if (this.elements.progressBar) {
|
||||
this.elements.progressBar.classList.add('active');
|
||||
this.animateProgress();
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
const duration = this.getActionDuration();
|
||||
const success = Math.random() > 0.2; // 80% success rate
|
||||
|
||||
await this.delay(duration);
|
||||
|
||||
// Hide loading
|
||||
if (this.elements.loadingState) {
|
||||
this.elements.loadingState.classList.remove('active');
|
||||
}
|
||||
|
||||
// Show result
|
||||
if (success && this.elements.successState) {
|
||||
this.elements.successState.classList.add('active');
|
||||
await this.delay(1500);
|
||||
this.elements.successState.classList.remove('active');
|
||||
} else if (!success && this.elements.errorState) {
|
||||
this.elements.errorState.classList.add('active');
|
||||
await this.delay(2000);
|
||||
this.elements.errorState.classList.remove('active');
|
||||
}
|
||||
|
||||
// Reset
|
||||
await this.delay(300);
|
||||
this.elements.buttonContent.classList.remove('hidden');
|
||||
this.button.disabled = false;
|
||||
this.isProcessing = false;
|
||||
|
||||
// Hide progress bar
|
||||
if (this.elements.progressBar) {
|
||||
this.elements.progressBar.classList.remove('active');
|
||||
this.elements.progressFill.style.width = '0%';
|
||||
}
|
||||
}
|
||||
|
||||
animateProgress() {
|
||||
if (!this.elements.progressFill) return;
|
||||
|
||||
const duration = this.getActionDuration();
|
||||
const steps = 20;
|
||||
const stepDuration = duration / steps;
|
||||
let currentStep = 0;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
currentStep++;
|
||||
const progress = (currentStep / steps) * 100;
|
||||
this.elements.progressFill.style.width = `${progress}%`;
|
||||
|
||||
if (currentStep >= steps) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, stepDuration);
|
||||
}
|
||||
|
||||
getActionDuration() {
|
||||
const durations = {
|
||||
save: 1500,
|
||||
delete: 2000,
|
||||
submit: 2500,
|
||||
archive: 1000,
|
||||
export: 3000,
|
||||
preview: 1000
|
||||
};
|
||||
return durations[this.action] || 1500;
|
||||
}
|
||||
|
||||
delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all action controllers
|
||||
document.querySelectorAll('.action-button, .primary-button, .secondary-button').forEach(button => {
|
||||
new ActionController(button);
|
||||
});
|
||||
|
||||
// Add hover effects for multi-action controller
|
||||
document.querySelectorAll('.multi-action-controller').forEach(controller => {
|
||||
controller.addEventListener('mouseenter', () => {
|
||||
controller.style.borderColor = '#000';
|
||||
});
|
||||
|
||||
controller.addEventListener('mouseleave', () => {
|
||||
controller.style.borderColor = '#E5E5E5';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,550 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neon Arcade Analytics - Dashboard Media Player Hybrid</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
color: #00ffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT Effect */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.arcade-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: radial-gradient(ellipse at center, #1a0033 0%, #000000 100%);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Neon Grid Background */
|
||||
.grid-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.arcade-header {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 32px;
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #00ffff,
|
||||
0 0 60px #ff00ff;
|
||||
animation: neonFlicker 2s ease-in-out infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@keyframes neonFlicker {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* Main Dashboard */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Widget Base */
|
||||
.widget {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 2px solid #00ffff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 0 20px #00ffff,
|
||||
inset 0 0 20px rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.widget::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
|
||||
border-radius: 10px;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
animation: borderRotate 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes borderRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Leaderboard Widget */
|
||||
.leaderboard {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.leaderboard-title {
|
||||
font-size: 16px;
|
||||
color: #ffff00;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px #ffff00;
|
||||
}
|
||||
|
||||
.player-entry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: rgba(255, 0, 255, 0.1);
|
||||
border: 1px solid #ff00ff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-entry::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: var(--score-width);
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.player-rank {
|
||||
font-size: 20px;
|
||||
color: #ffff00;
|
||||
text-shadow: 0 0 10px #ffff00;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.player-score {
|
||||
font-size: 14px;
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 10px #00ff00;
|
||||
}
|
||||
|
||||
/* Stats Widget */
|
||||
.stats-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
padding: 15px;
|
||||
border: 1px solid #00ffff;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: #ff00ff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 20px #00ff00;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Audio Visualizer */
|
||||
.audio-visualizer {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.visualizer-bars {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
height: 200px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 20px;
|
||||
background: linear-gradient(to top, #ff00ff, #00ffff);
|
||||
box-shadow: 0 0 10px currentColor;
|
||||
transition: height 0.1s ease;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
/* Media Controls */
|
||||
.media-controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
padding: 15px;
|
||||
border: 2px solid #ff00ff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: 2px solid #00ffff;
|
||||
color: #00ffff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: #00ffff;
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px #00ffff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Achievement Popup */
|
||||
.achievement {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 0 50px #ff00ff;
|
||||
animation: achievementPop 3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes achievementPop {
|
||||
0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); }
|
||||
50% { transform: translate(-50%, -50%) scale(1.2) rotate(360deg); }
|
||||
100% { transform: translate(-50%, -50%) scale(0) rotate(720deg); }
|
||||
}
|
||||
|
||||
.achievement-text {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
text-shadow: 2px 2px 0 #fff;
|
||||
}
|
||||
|
||||
/* Pixel Stars */
|
||||
.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #fff;
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Score Counter */
|
||||
.score-counter {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 20px #00ff00;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="arcade-container">
|
||||
<div class="grid-bg"></div>
|
||||
<div class="stars"></div>
|
||||
|
||||
<h1 class="arcade-header">ARCADE ANALYTICS</h1>
|
||||
|
||||
<div class="score-counter">SCORE: <span id="totalScore">0</span></div>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<!-- Leaderboard Widget -->
|
||||
<div class="widget leaderboard">
|
||||
<h2 class="leaderboard-title">HIGH SCORES</h2>
|
||||
<div id="leaderboardContent"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Widget -->
|
||||
<div class="widget stats-widget">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">GAMES PLAYED</div>
|
||||
<div class="stat-value" id="gamesPlayed">0</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">WIN RATE</div>
|
||||
<div class="stat-value" id="winRate">0%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">COMBO MAX</div>
|
||||
<div class="stat-value" id="comboMax">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio Visualizer -->
|
||||
<div class="widget audio-visualizer">
|
||||
<div class="visualizer-bars" id="visualizer"></div>
|
||||
<div class="media-controls">
|
||||
<button class="control-btn" id="playBtn">▶</button>
|
||||
<button class="control-btn" id="pauseBtn">❚❚</button>
|
||||
<button class="control-btn" id="stopBtn">◼</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="achievement" id="achievement">
|
||||
<div class="achievement-text">NEW HIGH SCORE!</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize leaderboard data
|
||||
const players = [
|
||||
{ name: 'PLAYER_1', score: 999999, rank: 1 },
|
||||
{ name: 'ARCADE_MASTER', score: 875420, rank: 2 },
|
||||
{ name: 'NEON_KNIGHT', score: 654321, rank: 3 },
|
||||
{ name: 'PIXEL_HERO', score: 543210, rank: 4 },
|
||||
{ name: 'RETRO_KING', score: 432100, rank: 5 }
|
||||
];
|
||||
|
||||
// Create leaderboard
|
||||
function createLeaderboard() {
|
||||
const leaderboardContent = document.getElementById('leaderboardContent');
|
||||
leaderboardContent.innerHTML = '';
|
||||
|
||||
players.forEach((player, index) => {
|
||||
const entry = document.createElement('div');
|
||||
entry.className = 'player-entry';
|
||||
entry.style.setProperty('--score-width', `${(player.score / 999999) * 100}%`);
|
||||
entry.innerHTML = `
|
||||
<div class="player-rank">#${player.rank}</div>
|
||||
<div class="player-name">${player.name}</div>
|
||||
<div class="player-score">${player.score.toLocaleString()}</div>
|
||||
`;
|
||||
leaderboardContent.appendChild(entry);
|
||||
});
|
||||
}
|
||||
|
||||
// Create audio visualizer
|
||||
function createVisualizer() {
|
||||
const visualizer = document.getElementById('visualizer');
|
||||
const barCount = 20;
|
||||
|
||||
for (let i = 0; i < barCount; i++) {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'bar';
|
||||
bar.style.height = '10px';
|
||||
visualizer.appendChild(bar);
|
||||
}
|
||||
}
|
||||
|
||||
// Animate visualizer
|
||||
let isPlaying = false;
|
||||
function animateVisualizer() {
|
||||
if (!isPlaying) return;
|
||||
|
||||
const bars = document.querySelectorAll('.bar');
|
||||
bars.forEach(bar => {
|
||||
const height = Math.random() * 180 + 20;
|
||||
bar.style.height = `${height}px`;
|
||||
});
|
||||
|
||||
requestAnimationFrame(animateVisualizer);
|
||||
}
|
||||
|
||||
// Media controls
|
||||
document.getElementById('playBtn').addEventListener('click', () => {
|
||||
isPlaying = true;
|
||||
animateVisualizer();
|
||||
updateStats();
|
||||
});
|
||||
|
||||
document.getElementById('pauseBtn').addEventListener('click', () => {
|
||||
isPlaying = false;
|
||||
});
|
||||
|
||||
document.getElementById('stopBtn').addEventListener('click', () => {
|
||||
isPlaying = false;
|
||||
document.querySelectorAll('.bar').forEach(bar => {
|
||||
bar.style.height = '10px';
|
||||
});
|
||||
});
|
||||
|
||||
// Update stats with animation
|
||||
function updateStats() {
|
||||
let games = 0;
|
||||
let wins = 0;
|
||||
let combo = 0;
|
||||
let score = 0;
|
||||
|
||||
const gamesInterval = setInterval(() => {
|
||||
games += Math.floor(Math.random() * 10) + 1;
|
||||
document.getElementById('gamesPlayed').textContent = games;
|
||||
|
||||
if (games >= 1337) {
|
||||
clearInterval(gamesInterval);
|
||||
document.getElementById('gamesPlayed').textContent = 1337;
|
||||
}
|
||||
}, 100);
|
||||
|
||||
const winInterval = setInterval(() => {
|
||||
wins += Math.floor(Math.random() * 2) + 1;
|
||||
const rate = Math.min(Math.floor((wins / 100) * 100), 87);
|
||||
document.getElementById('winRate').textContent = rate + '%';
|
||||
|
||||
if (rate >= 87) {
|
||||
clearInterval(winInterval);
|
||||
}
|
||||
}, 150);
|
||||
|
||||
const comboInterval = setInterval(() => {
|
||||
combo += Math.floor(Math.random() * 50) + 10;
|
||||
document.getElementById('comboMax').textContent = combo + 'x';
|
||||
|
||||
if (combo >= 999) {
|
||||
clearInterval(comboInterval);
|
||||
document.getElementById('comboMax').textContent = '999x';
|
||||
showAchievement();
|
||||
}
|
||||
}, 200);
|
||||
|
||||
const scoreInterval = setInterval(() => {
|
||||
score += Math.floor(Math.random() * 10000) + 1000;
|
||||
document.getElementById('totalScore').textContent = score.toLocaleString();
|
||||
|
||||
if (score >= 1000000) {
|
||||
clearInterval(scoreInterval);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// Show achievement
|
||||
function showAchievement() {
|
||||
const achievement = document.getElementById('achievement');
|
||||
achievement.style.animation = 'achievementPop 3s ease-out';
|
||||
setTimeout(() => {
|
||||
achievement.style.animation = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Create pixel stars
|
||||
function createStars() {
|
||||
const starsContainer = document.querySelector('.stars');
|
||||
const starCount = 50;
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.left = Math.random() * 100 + '%';
|
||||
star.style.top = Math.random() * 100 + '%';
|
||||
star.style.animationDelay = Math.random() * 3 + 's';
|
||||
starsContainer.appendChild(star);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
createLeaderboard();
|
||||
createVisualizer();
|
||||
createStars();
|
||||
|
||||
// Simulate random score updates
|
||||
setInterval(() => {
|
||||
if (isPlaying && Math.random() > 0.7) {
|
||||
const currentScore = parseInt(document.getElementById('totalScore').textContent.replace(/,/g, ''));
|
||||
const newScore = currentScore + Math.floor(Math.random() * 1000) + 100;
|
||||
document.getElementById('totalScore').textContent = newScore.toLocaleString();
|
||||
}
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,811 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Steampunk Process Controller - Patent Submission System</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital@0;1&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Crimson Text', serif;
|
||||
background: #1a1611;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(139, 69, 19, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, rgba(184, 134, 11, 0.2) 0%, transparent 50%),
|
||||
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 69, 19, 0.1) 2px, rgba(139, 69, 19, 0.1) 4px);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #f4e4bc;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.controller-frame {
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
background: linear-gradient(135deg, #2c241b 0%, #1a1611 100%);
|
||||
border: 12px solid transparent;
|
||||
border-image: linear-gradient(45deg, #b8860b, #cd853f, #b8860b) 1;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 0 50px rgba(184, 134, 11, 0.3),
|
||||
inset 0 0 30px rgba(0, 0, 0, 0.5),
|
||||
0 20px 40px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.controller-frame::before,
|
||||
.controller-frame::after {
|
||||
content: '⚙';
|
||||
position: absolute;
|
||||
font-size: 40px;
|
||||
color: #b8860b;
|
||||
animation: rotateSlow 20s linear infinite;
|
||||
}
|
||||
|
||||
.controller-frame::before {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.controller-frame::after {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.patent-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.patent-header h1 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 2.5em;
|
||||
color: #cd853f;
|
||||
text-shadow:
|
||||
2px 2px 4px rgba(0, 0, 0, 0.8),
|
||||
0 0 20px rgba(184, 134, 11, 0.5);
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.patent-header .subtitle {
|
||||
font-size: 1.1em;
|
||||
font-style: italic;
|
||||
color: #b8860b;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.gear-progress {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.gear-item {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.gear {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, #b8860b 30%, #8b6914 70%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.5),
|
||||
0 0 20px rgba(184, 134, 11, 0.5);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.gear::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg 30deg,
|
||||
#8b6914 30deg 60deg,
|
||||
transparent 60deg 90deg,
|
||||
#8b6914 90deg 120deg,
|
||||
transparent 120deg 150deg,
|
||||
#8b6914 150deg 180deg,
|
||||
transparent 180deg 210deg,
|
||||
#8b6914 210deg 240deg,
|
||||
transparent 240deg 270deg,
|
||||
#8b6914 270deg 300deg,
|
||||
transparent 300deg 330deg,
|
||||
#8b6914 330deg 360deg
|
||||
);
|
||||
border-radius: 50%;
|
||||
animation: rotateSlow 10s linear infinite paused;
|
||||
}
|
||||
|
||||
.gear-item.active .gear::before {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.gear-item.complete .gear {
|
||||
background: radial-gradient(circle, #ffd700 30%, #b8860b 70%);
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.3),
|
||||
0 0 30px rgba(255, 215, 0, 0.8);
|
||||
}
|
||||
|
||||
.gear-number {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.5em;
|
||||
color: #1a1611;
|
||||
text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.gear-pipe {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #8b6914 0%, #cd853f 50%, #8b6914 100%);
|
||||
top: 50%;
|
||||
right: -40px;
|
||||
transform: translateY(-50%);
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px rgba(184, 134, 11, 0.3);
|
||||
}
|
||||
|
||||
.gear-pipe::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent);
|
||||
animation: steamFlow 2s ease-in-out infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gear-item.active ~ .gear-item .gear-pipe::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid #8b6914;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
display: none;
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.form-section.active {
|
||||
display: block;
|
||||
animation: steamReveal 0.8s ease-out;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
font-family: 'Cinzel', serif;
|
||||
color: #ffd700;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #cd853f;
|
||||
font-size: 1.1em;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid #8b6914;
|
||||
border-radius: 5px;
|
||||
color: #f4e4bc;
|
||||
font-family: 'Crimson Text', serif;
|
||||
font-size: 1em;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #ffd700;
|
||||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.action-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(139, 69, 19, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
||||
border: 2px solid #8b6914;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pressure-gauge {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
background: radial-gradient(circle, #2c241b 0%, #1a1611 70%);
|
||||
border-radius: 50%;
|
||||
border: 4px solid #b8860b;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.8),
|
||||
0 0 20px rgba(184, 134, 11, 0.3);
|
||||
}
|
||||
|
||||
.gauge-needle {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background: #ff4444;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
transform-origin: bottom center;
|
||||
transform: translateX(-50%) rotate(-90deg);
|
||||
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 0 10px rgba(255, 68, 68, 0.8);
|
||||
}
|
||||
|
||||
.gauge-needle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: radial-gradient(circle, #b8860b, #8b6914);
|
||||
border-radius: 50%;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.gauge-markings {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gauge-marking {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: #b8860b;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform-origin: center 45px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.8em;
|
||||
color: #b8860b;
|
||||
font-family: 'Cinzel', serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brass-button {
|
||||
padding: 15px 30px;
|
||||
background: linear-gradient(135deg, #b8860b 0%, #cd853f 50%, #b8860b 100%);
|
||||
border: 3px solid #8b6914;
|
||||
border-radius: 50px;
|
||||
color: #1a1611;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
0 5px 15px rgba(0, 0, 0, 0.5),
|
||||
inset 0 -2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.brass-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 7px 20px rgba(0, 0, 0, 0.6),
|
||||
inset 0 -2px 5px rgba(0, 0, 0, 0.3),
|
||||
0 0 30px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.brass-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0, 0, 0, 0.5),
|
||||
inset 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.brass-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.steam-effect {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.steam-particle {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
|
||||
border-radius: 50%;
|
||||
animation: steamRise 3s ease-out infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes rotateSlow {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes steamFlow {
|
||||
0% { transform: translateX(-100%); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes steamReveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes steamRise {
|
||||
0% {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(0) scale(0.5);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
bottom: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(20px) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.ornate-divider {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
font-size: 1.5em;
|
||||
color: #8b6914;
|
||||
text-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.success-message h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
color: #ffd700;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.success-message p {
|
||||
font-size: 1.2em;
|
||||
color: #cd853f;
|
||||
}
|
||||
|
||||
.patent-number {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 1.5em;
|
||||
color: #ffd700;
|
||||
margin-top: 20px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controller-frame">
|
||||
<div class="patent-header">
|
||||
<h1>Victorian Patent Registry</h1>
|
||||
<p class="subtitle">Automated Invention Submission Apparatus</p>
|
||||
</div>
|
||||
|
||||
<div class="gear-progress">
|
||||
<div class="gear-item active" data-step="1">
|
||||
<div class="gear">
|
||||
<span class="gear-number">I</span>
|
||||
</div>
|
||||
<div class="gear-pipe"></div>
|
||||
</div>
|
||||
<div class="gear-item" data-step="2">
|
||||
<div class="gear">
|
||||
<span class="gear-number">II</span>
|
||||
</div>
|
||||
<div class="gear-pipe"></div>
|
||||
</div>
|
||||
<div class="gear-item" data-step="3">
|
||||
<div class="gear">
|
||||
<span class="gear-number">III</span>
|
||||
</div>
|
||||
<div class="gear-pipe"></div>
|
||||
</div>
|
||||
<div class="gear-item" data-step="4">
|
||||
<div class="gear">
|
||||
<span class="gear-number">IV</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ornate-divider">⚙ ◆ ⚙ ◆ ⚙</div>
|
||||
|
||||
<!-- Step 1: Inventor Information -->
|
||||
<div class="form-section active" data-step="1">
|
||||
<h2>Phase I: Inventor's Credentials</h2>
|
||||
<div class="form-group">
|
||||
<label>Full Name of Inventor</label>
|
||||
<input type="text" id="inventorName" placeholder="Sir/Madam..." required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Workshop Address</label>
|
||||
<input type="text" id="workshopAddress" placeholder="123 Cogwheel Lane..." required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Guild Membership Number</label>
|
||||
<input type="text" id="guildNumber" placeholder="GUILD-XXXX" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Invention Details -->
|
||||
<div class="form-section" data-step="2">
|
||||
<h2>Phase II: Contraption Specifications</h2>
|
||||
<div class="form-group">
|
||||
<label>Invention Title</label>
|
||||
<input type="text" id="inventionTitle" placeholder="Automated Steam-Powered..." required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Category of Innovation</label>
|
||||
<select id="category" required>
|
||||
<option value="">Select Category...</option>
|
||||
<option value="steam">Steam Propulsion</option>
|
||||
<option value="clockwork">Clockwork Mechanisms</option>
|
||||
<option value="electrical">Electrical Apparatus</option>
|
||||
<option value="mechanical">Mechanical Engineering</option>
|
||||
<option value="aether">Aetheric Sciences</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Primary Function</label>
|
||||
<textarea id="primaryFunction" rows="4" placeholder="Describe the primary function..." required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Technical Drawings -->
|
||||
<div class="form-section" data-step="3">
|
||||
<h2>Phase III: Technical Schematics</h2>
|
||||
<div class="form-group">
|
||||
<label>Blueprint Reference Number</label>
|
||||
<input type="text" id="blueprintRef" placeholder="BP-XXXX" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Material Components</label>
|
||||
<textarea id="materials" rows="3" placeholder="List primary materials..." required></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Power Source</label>
|
||||
<select id="powerSource" required>
|
||||
<option value="">Select Power Source...</option>
|
||||
<option value="steam">Steam Engine</option>
|
||||
<option value="spring">Mainspring Mechanism</option>
|
||||
<option value="coal">Coal Combustion</option>
|
||||
<option value="electricity">Galvanic Cell</option>
|
||||
<option value="manual">Manual Crank</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Final Declaration -->
|
||||
<div class="form-section" data-step="4">
|
||||
<h2>Phase IV: Inventor's Declaration</h2>
|
||||
<div class="form-group">
|
||||
<label>Oath of Originality</label>
|
||||
<textarea id="oath" rows="4" placeholder="I hereby declare that this invention..." required></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Proposed Patent Duration</label>
|
||||
<select id="duration" required>
|
||||
<option value="">Select Duration...</option>
|
||||
<option value="7">7 Years</option>
|
||||
<option value="14">14 Years</option>
|
||||
<option value="21">21 Years</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date of Submission</label>
|
||||
<input type="date" id="submissionDate" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-panel">
|
||||
<div class="pressure-gauge">
|
||||
<div class="gauge-markings">
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(0deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(30deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(60deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(90deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(120deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(150deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(180deg);"></div>
|
||||
</div>
|
||||
<div class="gauge-needle" id="pressureNeedle"></div>
|
||||
<div class="gauge-label">Pressure</div>
|
||||
</div>
|
||||
|
||||
<button class="brass-button" id="prevButton" onclick="navigateStep(-1)" disabled>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<button class="brass-button" id="nextButton" onclick="navigateStep(1)">
|
||||
Next Phase
|
||||
</button>
|
||||
|
||||
<div class="pressure-gauge">
|
||||
<div class="gauge-markings">
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(0deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(30deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(60deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(90deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(120deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(150deg);"></div>
|
||||
<div class="gauge-marking" style="transform: translateX(-50%) rotate(180deg);"></div>
|
||||
</div>
|
||||
<div class="gauge-needle" id="progressNeedle"></div>
|
||||
<div class="gauge-label">Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="success-message" id="successMessage">
|
||||
<h3>Patent Successfully Registered!</h3>
|
||||
<p>Your invention has been catalogued in the Royal Registry</p>
|
||||
<div class="patent-number" id="patentNumber"></div>
|
||||
</div>
|
||||
|
||||
<div class="steam-effect" id="steamEffect"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentStep = 1;
|
||||
const totalSteps = 4;
|
||||
let formData = {};
|
||||
|
||||
function navigateStep(direction) {
|
||||
// Validate current step before moving
|
||||
if (direction > 0 && !validateCurrentStep()) {
|
||||
showPressureSpike();
|
||||
return;
|
||||
}
|
||||
|
||||
// Save current step data
|
||||
saveStepData();
|
||||
|
||||
// Update step
|
||||
currentStep += direction;
|
||||
currentStep = Math.max(1, Math.min(currentStep, totalSteps));
|
||||
|
||||
// Update UI
|
||||
updateStepDisplay();
|
||||
updateGauges();
|
||||
|
||||
// Check if final step
|
||||
if (currentStep === totalSteps && direction > 0) {
|
||||
document.getElementById('nextButton').textContent = 'Submit Patent';
|
||||
document.getElementById('nextButton').onclick = submitPatent;
|
||||
} else {
|
||||
document.getElementById('nextButton').textContent = 'Next Phase';
|
||||
document.getElementById('nextButton').onclick = () => navigateStep(1);
|
||||
}
|
||||
}
|
||||
|
||||
function updateStepDisplay() {
|
||||
// Update form sections
|
||||
document.querySelectorAll('.form-section').forEach(section => {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`.form-section[data-step="${currentStep}"]`).classList.add('active');
|
||||
|
||||
// Update gears
|
||||
document.querySelectorAll('.gear-item').forEach((gear, index) => {
|
||||
const stepNum = index + 1;
|
||||
gear.classList.remove('active', 'complete');
|
||||
if (stepNum < currentStep) {
|
||||
gear.classList.add('complete');
|
||||
} else if (stepNum === currentStep) {
|
||||
gear.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update buttons
|
||||
document.getElementById('prevButton').disabled = currentStep === 1;
|
||||
|
||||
// Create steam effect
|
||||
createSteamBurst();
|
||||
}
|
||||
|
||||
function updateGauges() {
|
||||
const progressAngle = (currentStep - 1) / (totalSteps - 1) * 180 - 90;
|
||||
document.getElementById('progressNeedle').style.transform =
|
||||
`translateX(-50%) rotate(${progressAngle}deg)`;
|
||||
|
||||
// Random pressure fluctuation
|
||||
const pressureAngle = Math.random() * 60 + 30 - 90;
|
||||
document.getElementById('pressureNeedle').style.transform =
|
||||
`translateX(-50%) rotate(${pressureAngle}deg)`;
|
||||
}
|
||||
|
||||
function validateCurrentStep() {
|
||||
const section = document.querySelector(`.form-section[data-step="${currentStep}"]`);
|
||||
const inputs = section.querySelectorAll('input[required], textarea[required], select[required]');
|
||||
|
||||
for (let input of inputs) {
|
||||
if (!input.value.trim()) {
|
||||
input.focus();
|
||||
input.style.borderColor = '#ff4444';
|
||||
setTimeout(() => {
|
||||
input.style.borderColor = '#8b6914';
|
||||
}, 2000);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function saveStepData() {
|
||||
const section = document.querySelector(`.form-section[data-step="${currentStep}"]`);
|
||||
const inputs = section.querySelectorAll('input, textarea, select');
|
||||
|
||||
inputs.forEach(input => {
|
||||
formData[input.id] = input.value;
|
||||
});
|
||||
}
|
||||
|
||||
function showPressureSpike() {
|
||||
const pressureNeedle = document.getElementById('pressureNeedle');
|
||||
pressureNeedle.style.transform = 'translateX(-50%) rotate(90deg)';
|
||||
setTimeout(() => {
|
||||
updateGauges();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function createSteamBurst() {
|
||||
const steamEffect = document.getElementById('steamEffect');
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
setTimeout(() => {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'steam-particle';
|
||||
particle.style.left = Math.random() * 100 + '%';
|
||||
particle.style.animationDelay = Math.random() * 0.5 + 's';
|
||||
steamEffect.appendChild(particle);
|
||||
|
||||
setTimeout(() => particle.remove(), 3000);
|
||||
}, i * 100);
|
||||
}
|
||||
}
|
||||
|
||||
function submitPatent() {
|
||||
if (!validateCurrentStep()) {
|
||||
showPressureSpike();
|
||||
return;
|
||||
}
|
||||
|
||||
saveStepData();
|
||||
|
||||
// Show maximum pressure
|
||||
document.getElementById('pressureNeedle').style.transform = 'translateX(-50%) rotate(90deg)';
|
||||
document.getElementById('progressNeedle').style.transform = 'translateX(-50%) rotate(90deg)';
|
||||
|
||||
// Create intense steam effect
|
||||
for (let i = 0; i < 20; i++) {
|
||||
setTimeout(() => createSteamBurst(), i * 100);
|
||||
}
|
||||
|
||||
// Generate patent number
|
||||
const patentNumber = `PAT-${Date.now().toString(36).toUpperCase()}-VICT`;
|
||||
document.getElementById('patentNumber').textContent = patentNumber;
|
||||
|
||||
// Hide form and show success
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.form-section').forEach(section => {
|
||||
section.style.display = 'none';
|
||||
});
|
||||
document.querySelector('.action-panel').style.display = 'none';
|
||||
document.getElementById('successMessage').style.display = 'block';
|
||||
|
||||
// Mark all gears as complete
|
||||
document.querySelectorAll('.gear-item').forEach(gear => {
|
||||
gear.classList.add('complete');
|
||||
gear.classList.remove('active');
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Initialize gauges with random starting positions
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateGauges();
|
||||
|
||||
// Set today's date as default
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
document.getElementById('submissionDate').value = today;
|
||||
|
||||
// Create initial steam particles
|
||||
setInterval(createSteamBurst, 5000);
|
||||
});
|
||||
|
||||
// Add some Victorian flair to form interactions
|
||||
document.querySelectorAll('input, textarea, select').forEach(element => {
|
||||
element.addEventListener('focus', () => {
|
||||
createSteamBurst();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,599 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wabi-Sabi Navigation Garden</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
background: #f5f2ed;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Rice Paper Texture Background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 30%, rgba(188, 180, 164, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 70%, rgba(188, 180, 164, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 10% 90%, rgba(188, 180, 164, 0.06) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Subtle Paper Fibers */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(188, 180, 164, 0.03) 3px, rgba(188, 180, 164, 0.03) 6px),
|
||||
repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(188, 180, 164, 0.03) 3px, rgba(188, 180, 164, 0.03) 6px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Main Container - Garden Layout */
|
||||
.garden-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Title with Calligraphy Style */
|
||||
.garden-title {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.garden-title h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
color: #2c2c2c;
|
||||
letter-spacing: 0.2em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.garden-title h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120px;
|
||||
height: 2px;
|
||||
background: #2c2c2c;
|
||||
opacity: 0.2;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Garden Path Navigation */
|
||||
.garden-path {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Stepping Stones Navigation */
|
||||
.stepping-stones {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stone {
|
||||
display: block;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 15px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(188, 180, 164, 0.3);
|
||||
border-radius: 50% 40% 60% 30% / 40% 50% 30% 60%;
|
||||
text-decoration: none;
|
||||
color: #2c2c2c;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.05em;
|
||||
position: relative;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -30px;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: rgba(188, 180, 164, 0.3);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.stone:hover {
|
||||
transform: translateX(5px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 5px 20px rgba(188, 180, 164, 0.2);
|
||||
}
|
||||
|
||||
.stone:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stone.active {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Zen Garden Content Area */
|
||||
.content-garden {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Haiku Content Cards */
|
||||
.haiku-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(188, 180, 164, 0.2);
|
||||
border-radius: 2px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
transition: all 0.4s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ink Wash Effect */
|
||||
.haiku-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(188, 180, 164, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.haiku-card:hover::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.haiku-card h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
color: #2c2c2c;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.haiku-text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
color: #4a4a4a;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
border-left: 2px solid rgba(188, 180, 164, 0.2);
|
||||
border-right: 2px solid rgba(188, 180, 164, 0.2);
|
||||
}
|
||||
|
||||
.haiku-content {
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #4a4a4a;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Brush Stroke Animation */
|
||||
.brush-stroke {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background: #2c2c2c;
|
||||
opacity: 0.1;
|
||||
transform-origin: left center;
|
||||
animation: brushDraw 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes brushDraw {
|
||||
0% {
|
||||
transform: scaleX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scaleX(1);
|
||||
opacity: 0.1;
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating Elements - Cherry Blossoms */
|
||||
.sakura {
|
||||
position: fixed;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(255, 192, 203, 0.3);
|
||||
border-radius: 50% 0;
|
||||
animation: float 10s infinite linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(-100px) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(calc(100vh + 100px)) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tea Ceremony Interaction */
|
||||
.tea-ceremony {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(188, 180, 164, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tea-ceremony:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 5px 20px rgba(188, 180, 164, 0.3);
|
||||
}
|
||||
|
||||
.tea-bowl {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
border: 2px solid #2c2c2c;
|
||||
border-radius: 0 0 15px 15px;
|
||||
border-top: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tea-bowl::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #2c2c2c;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: steam 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mindful Transitions */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeIn 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Natural Imperfections */
|
||||
.imperfection {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle, rgba(188, 180, 164, 0.05) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.garden-path {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stepping-stones {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stone {
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.haiku-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="garden-container">
|
||||
<div class="garden-title fade-in">
|
||||
<h1>侘寂</h1>
|
||||
<p style="margin-top: 10px; color: #666; font-size: 0.9rem; letter-spacing: 0.1em;">WABI-SABI NAVIGATION</p>
|
||||
</div>
|
||||
|
||||
<div class="garden-path">
|
||||
<!-- Stepping Stones Navigation -->
|
||||
<nav class="stepping-stones fade-in" style="animation-delay: 0.2s;">
|
||||
<a href="#beginning" class="stone active">Beginning</a>
|
||||
<a href="#simplicity" class="stone">Simplicity</a>
|
||||
<a href="#imperfection" class="stone">Imperfection</a>
|
||||
<a href="#impermanence" class="stone">Impermanence</a>
|
||||
<a href="#contemplation" class="stone">Contemplation</a>
|
||||
</nav>
|
||||
|
||||
<!-- Content Garden -->
|
||||
<div class="content-garden">
|
||||
<div id="beginning" class="haiku-card fade-in" style="animation-delay: 0.4s;">
|
||||
<div class="brush-stroke" style="top: 20px; right: 40px;"></div>
|
||||
<h2>The Beginning</h2>
|
||||
<div class="haiku-text">
|
||||
Empty bowl awaits<br>
|
||||
Morning light through paper walls<br>
|
||||
Tea ceremony starts
|
||||
</div>
|
||||
<p class="haiku-content">
|
||||
In the philosophy of wabi-sabi, we find beauty in the imperfect, impermanent, and incomplete.
|
||||
This navigation garden invites you to explore concepts through a mindful journey, where each
|
||||
step reveals new understanding.
|
||||
</p>
|
||||
<div class="imperfection" style="bottom: 20px; right: 30px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="simplicity" class="haiku-card fade-in" style="animation-delay: 0.6s;">
|
||||
<div class="brush-stroke" style="top: 40px; left: 60px; transform: rotate(-5deg);"></div>
|
||||
<h2>Embracing Simplicity</h2>
|
||||
<div class="haiku-text">
|
||||
Single blade of grass<br>
|
||||
Bends with wind, returns to form<br>
|
||||
Strength in gentleness
|
||||
</div>
|
||||
<p class="haiku-content">
|
||||
Simplicity is not merely the absence of clutter, but the presence of clarity. In our digital
|
||||
gardens, we cultivate spaces where every element serves a purpose, where negative space
|
||||
speaks as loudly as content.
|
||||
</p>
|
||||
<div class="imperfection" style="top: 50px; left: 40px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="imperfection" class="haiku-card fade-in" style="animation-delay: 0.8s;">
|
||||
<div class="brush-stroke" style="bottom: 30px; right: 50px; transform: rotate(3deg);"></div>
|
||||
<h2>Beauty in Imperfection</h2>
|
||||
<div class="haiku-text">
|
||||
Cracked ceramic bowl<br>
|
||||
Gold fills the broken spaces<br>
|
||||
More precious than new
|
||||
</div>
|
||||
<p class="haiku-content">
|
||||
Like kintsugi, the art of golden repair, our imperfections become part of our story.
|
||||
The asymmetry in design, the natural variations in texture—these are not flaws but
|
||||
features that give character and authenticity.
|
||||
</p>
|
||||
<div class="imperfection" style="top: 30px; right: 60px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="impermanence" class="haiku-card fade-in" style="animation-delay: 1s;">
|
||||
<div class="brush-stroke" style="top: 60px; left: 40px; transform: rotate(-2deg);"></div>
|
||||
<h2>Accepting Impermanence</h2>
|
||||
<div class="haiku-text">
|
||||
Cherry blossoms fall<br>
|
||||
Brief beauty more precious still<br>
|
||||
Memory remains
|
||||
</div>
|
||||
<p class="haiku-content">
|
||||
Nothing is permanent, and therein lies the beauty. Each interaction, each moment of
|
||||
engagement is unique and fleeting. We design not for eternity, but for the present
|
||||
moment, knowing that change is the only constant.
|
||||
</p>
|
||||
<div class="imperfection" style="bottom: 40px; left: 50px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="contemplation" class="haiku-card fade-in" style="animation-delay: 1.2s;">
|
||||
<div class="brush-stroke" style="bottom: 50px; right: 30px; transform: rotate(1deg);"></div>
|
||||
<h2>Space for Contemplation</h2>
|
||||
<div class="haiku-text">
|
||||
Silent meditation<br>
|
||||
Between breaths, infinity<br>
|
||||
Understanding blooms
|
||||
</div>
|
||||
<p class="haiku-content">
|
||||
In the spaces between, in the pauses and the silence, we find room for contemplation.
|
||||
This navigation garden is not meant to be rushed through, but experienced mindfully,
|
||||
allowing each concept to settle like sediment in still water.
|
||||
</p>
|
||||
<div class="imperfection" style="top: 20px; left: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tea Ceremony Button -->
|
||||
<div class="tea-ceremony" title="Take a moment to pause">
|
||||
<div class="tea-bowl"></div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Sakura Petals -->
|
||||
<div class="sakura" style="left: 10%; animation-delay: 0s;"></div>
|
||||
<div class="sakura" style="left: 30%; animation-delay: 2s;"></div>
|
||||
<div class="sakura" style="left: 50%; animation-delay: 4s;"></div>
|
||||
<div class="sakura" style="left: 70%; animation-delay: 6s;"></div>
|
||||
<div class="sakura" style="left: 90%; animation-delay: 8s;"></div>
|
||||
|
||||
<script>
|
||||
// Smooth scroll behavior
|
||||
document.querySelectorAll('.stone').forEach(stone => {
|
||||
stone.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const targetElement = document.getElementById(targetId);
|
||||
|
||||
// Update active state
|
||||
document.querySelectorAll('.stone').forEach(s => s.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// Smooth scroll
|
||||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
|
||||
// Add subtle animation to the target card
|
||||
targetElement.style.transform = 'scale(1.02)';
|
||||
setTimeout(() => {
|
||||
targetElement.style.transform = 'scale(1)';
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Tea ceremony meditation
|
||||
const teaCeremony = document.querySelector('.tea-ceremony');
|
||||
let meditating = false;
|
||||
|
||||
teaCeremony.addEventListener('click', function() {
|
||||
if (!meditating) {
|
||||
meditating = true;
|
||||
document.body.style.transition = 'filter 1s ease';
|
||||
document.body.style.filter = 'sepia(0.2)';
|
||||
|
||||
// Create meditation overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(245, 242, 237, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease;
|
||||
`;
|
||||
|
||||
overlay.innerHTML = `
|
||||
<div style="text-align: center;">
|
||||
<p style="font-size: 1.5rem; color: #2c2c2c; letter-spacing: 0.2em; margin-bottom: 20px;">一期一会</p>
|
||||
<p style="font-size: 1rem; color: #666; letter-spacing: 0.1em;">One time, one meeting</p>
|
||||
<p style="font-size: 0.9rem; color: #999; margin-top: 40px;">Click to continue...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
setTimeout(() => {
|
||||
overlay.style.opacity = '1';
|
||||
}, 100);
|
||||
|
||||
overlay.addEventListener('click', function() {
|
||||
overlay.style.opacity = '0';
|
||||
document.body.style.filter = 'none';
|
||||
setTimeout(() => {
|
||||
overlay.remove();
|
||||
meditating = false;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for fade-in animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.haiku-card').forEach(card => {
|
||||
observer.observe(card);
|
||||
});
|
||||
|
||||
// Add natural imperfections on load
|
||||
window.addEventListener('load', function() {
|
||||
const cards = document.querySelectorAll('.haiku-card');
|
||||
cards.forEach((card, index) => {
|
||||
// Slightly rotate each card for natural asymmetry
|
||||
const rotation = (Math.random() - 0.5) * 0.5;
|
||||
card.style.transform = `rotate(${rotation}deg)`;
|
||||
|
||||
// Add subtle box shadow variations
|
||||
const shadowIntensity = 0.1 + Math.random() * 0.1;
|
||||
card.style.boxShadow = `0 2px 10px rgba(188, 180, 164, ${shadowIntensity})`;
|
||||
});
|
||||
});
|
||||
|
||||
// Dynamic brush strokes
|
||||
setInterval(() => {
|
||||
const brushStrokes = document.querySelectorAll('.brush-stroke');
|
||||
brushStrokes.forEach(stroke => {
|
||||
const delay = Math.random() * 2;
|
||||
stroke.style.animationDelay = `${delay}s`;
|
||||
});
|
||||
}, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,733 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Living Circuit Interface - Neural Data Explorer</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Monaco', 'Courier New', monospace;
|
||||
background: #0a0a0f;
|
||||
color: #e0f7ff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Neural Circuit Background */
|
||||
.circuit-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke: #00ff88;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
filter: drop-shadow(0 0 3px #00ff88);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
fill: #00ffff;
|
||||
filter: drop-shadow(0 0 10px #00ffff);
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.neural-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Header - Neural Core */
|
||||
.neural-core {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.core-title {
|
||||
font-size: 2.5em;
|
||||
background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)); }
|
||||
50% { filter: brightness(1.2) drop-shadow(0 0 40px rgba(0, 255, 255, 0.8)); }
|
||||
}
|
||||
|
||||
/* Data Stream Grid */
|
||||
.data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Synaptic Input Panel */
|
||||
.synaptic-panel {
|
||||
background: rgba(0, 20, 40, 0.3);
|
||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.synaptic-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff, #00ff88);
|
||||
border-radius: 15px;
|
||||
opacity: 0;
|
||||
animation: border-pulse 4s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes border-pulse {
|
||||
0%, 100% { opacity: 0; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 15px;
|
||||
color: #00ffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* Neural Input Fields */
|
||||
.neural-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
background: rgba(0, 50, 80, 0.2);
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #e0f7ff;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neural-input:focus {
|
||||
outline: none;
|
||||
border-color: #00ffff;
|
||||
background: rgba(0, 100, 150, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.input-synapse {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #00ff88;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.neural-input:focus + .input-synapse {
|
||||
opacity: 1;
|
||||
animation: synapse-fire 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes synapse-fire {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px #00ff88;
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88;
|
||||
transform: translateY(-50%) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Data Explorer - Central Neural Network */
|
||||
.neural-explorer {
|
||||
background: rgba(0, 20, 40, 0.2);
|
||||
border: 1px solid rgba(0, 255, 136, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.data-nodes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.data-node {
|
||||
background: rgba(0, 50, 100, 0.2);
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.data-node::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(0, 255, 255, 0.8), transparent);
|
||||
transition: all 0.5s ease;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.data-node:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-node:hover {
|
||||
border-color: #00ffff;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.node-value {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #00ff88;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Neural Activity Monitor */
|
||||
.activity-monitor {
|
||||
background: rgba(0, 20, 40, 0.3);
|
||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.signal-wave {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.wave-path {
|
||||
stroke: #00ffff;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
filter: drop-shadow(0 0 5px #00ffff);
|
||||
}
|
||||
|
||||
/* Adaptive Learning Indicators */
|
||||
.learning-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.synapse-strength {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(0, 50, 80, 0.3);
|
||||
border-radius: 3px;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strength-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ff88, #00ffff);
|
||||
width: 0%;
|
||||
transition: width 0.5s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Bio-luminescent Buttons */
|
||||
.bio-button {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(45deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 255, 0.2));
|
||||
border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
border-radius: 25px;
|
||||
color: #e0f7ff;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.bio-button:hover {
|
||||
background: linear-gradient(45deg, rgba(0, 255, 136, 0.4), rgba(0, 255, 255, 0.4));
|
||||
border-color: #00ffff;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Neural Connection Lines */
|
||||
.connection-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.neural-connection {
|
||||
stroke: #00ff88;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
opacity: 0.4;
|
||||
stroke-dasharray: 5, 5;
|
||||
animation: dash-flow 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash-flow {
|
||||
to { stroke-dashoffset: -10; }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.data-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.data-nodes {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Circuit Background -->
|
||||
<svg class="circuit-bg" id="circuitBg">
|
||||
<defs>
|
||||
<radialGradient id="pulseGradient">
|
||||
<stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#00ffff;stop-opacity:0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Neural Connection Lines -->
|
||||
<svg class="connection-svg" id="connectionSvg"></svg>
|
||||
|
||||
<div class="neural-container">
|
||||
<!-- Neural Core Header -->
|
||||
<div class="neural-core">
|
||||
<h1 class="core-title">NEURAL CIRCUIT INTERFACE</h1>
|
||||
<p style="opacity: 0.7; margin-top: 10px;">Living Data Explorer v3.5</p>
|
||||
</div>
|
||||
|
||||
<div class="data-grid">
|
||||
<!-- Synaptic Input Panel -->
|
||||
<div class="synaptic-panel">
|
||||
<h2 class="panel-title">Synaptic Input</h2>
|
||||
|
||||
<div style="position: relative;">
|
||||
<input type="text" class="neural-input" placeholder="Neural Query..." id="queryInput">
|
||||
<div class="input-synapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<input type="number" class="neural-input" placeholder="Threshold Level..." id="thresholdInput">
|
||||
<div class="input-synapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<select class="neural-input" id="modeSelect">
|
||||
<option>Exploration Mode</option>
|
||||
<option>Learning Mode</option>
|
||||
<option>Synthesis Mode</option>
|
||||
<option>Evolution Mode</option>
|
||||
</select>
|
||||
<div class="input-synapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<button class="bio-button" onclick="initiateScan()">Initiate Scan</button>
|
||||
<button class="bio-button" onclick="evolveNetwork()">Evolve</button>
|
||||
</div>
|
||||
|
||||
<div class="learning-indicator" style="margin-top: 20px;">
|
||||
<span style="font-size: 0.9em;">Learning</span>
|
||||
<div class="synapse-strength">
|
||||
<div class="strength-fill" id="learningBar"></div>
|
||||
</div>
|
||||
<span style="font-size: 0.9em;" id="learningPercent">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Central Neural Explorer -->
|
||||
<div class="neural-explorer">
|
||||
<h2 class="panel-title">Neural Network Explorer</h2>
|
||||
|
||||
<div class="data-nodes" id="dataNodes">
|
||||
<div class="data-node" data-node="1">
|
||||
<div class="node-value">87.3</div>
|
||||
<div class="node-label">Synapse α</div>
|
||||
</div>
|
||||
<div class="data-node" data-node="2">
|
||||
<div class="node-value">142.7</div>
|
||||
<div class="node-label">Neuron β</div>
|
||||
</div>
|
||||
<div class="data-node" data-node="3">
|
||||
<div class="node-value">56.9</div>
|
||||
<div class="node-label">Dendrite γ</div>
|
||||
</div>
|
||||
<div class="data-node" data-node="4">
|
||||
<div class="node-value">203.1</div>
|
||||
<div class="node-label">Axon δ</div>
|
||||
</div>
|
||||
<div class="data-node" data-node="5">
|
||||
<div class="node-value">178.4</div>
|
||||
<div class="node-label">Cortex ε</div>
|
||||
</div>
|
||||
<div class="data-node" data-node="6">
|
||||
<div class="node-value">92.6</div>
|
||||
<div class="node-label">Signal ζ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px; text-align: center;">
|
||||
<div style="display: inline-block; margin: 0 10px;">
|
||||
<small style="opacity: 0.7;">Network Health</small>
|
||||
<div style="font-size: 1.5em; color: #00ff88; margin-top: 5px;">
|
||||
<span id="networkHealth">98.7</span>%
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block; margin: 0 10px;">
|
||||
<small style="opacity: 0.7;">Active Synapses</small>
|
||||
<div style="font-size: 1.5em; color: #00ffff; margin-top: 5px;">
|
||||
<span id="activeSynapses">1,247</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block; margin: 0 10px;">
|
||||
<small style="opacity: 0.7;">Evolution Stage</small>
|
||||
<div style="font-size: 1.5em; color: #ff00ff; margin-top: 5px;">
|
||||
<span id="evolutionStage">7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Monitor -->
|
||||
<div class="activity-monitor">
|
||||
<h2 class="panel-title">Neural Activity</h2>
|
||||
|
||||
<div class="signal-wave">
|
||||
<svg width="100%" height="100%" id="waveform">
|
||||
<path class="wave-path" id="wavePath"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="learning-indicator">
|
||||
<span>Alpha</span>
|
||||
<div class="synapse-strength">
|
||||
<div class="strength-fill" style="width: 75%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-indicator">
|
||||
<span>Beta</span>
|
||||
<div class="synapse-strength">
|
||||
<div class="strength-fill" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-indicator">
|
||||
<span>Gamma</span>
|
||||
<div class="synapse-strength">
|
||||
<div class="strength-fill" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-indicator">
|
||||
<span>Delta</span>
|
||||
<div class="synapse-strength">
|
||||
<div class="strength-fill" style="width: 45%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="bio-button" style="width: 100%; margin-top: 20px;" onclick="recalibrateSignals()">
|
||||
Recalibrate Signals
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize circuit background
|
||||
function createCircuitBackground() {
|
||||
const svg = document.getElementById('circuitBg');
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
// Create random circuit paths
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
const startX = Math.random() * width;
|
||||
const startY = Math.random() * height;
|
||||
const endX = Math.random() * width;
|
||||
const endY = Math.random() * height;
|
||||
const midX = (startX + endX) / 2 + (Math.random() - 0.5) * 200;
|
||||
const midY = (startY + endY) / 2 + (Math.random() - 0.5) * 200;
|
||||
|
||||
path.setAttribute('d', `M${startX},${startY} Q${midX},${midY} ${endX},${endY}`);
|
||||
path.setAttribute('class', 'circuit-path');
|
||||
svg.appendChild(path);
|
||||
|
||||
// Add traveling pulses
|
||||
if (Math.random() > 0.5) {
|
||||
createPulse(path);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create traveling pulse animation
|
||||
function createPulse(path) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.setAttribute('r', '4');
|
||||
circle.setAttribute('class', 'pulse');
|
||||
|
||||
const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
|
||||
animate.setAttribute('dur', `${3 + Math.random() * 4}s`);
|
||||
animate.setAttribute('repeatCount', 'indefinite');
|
||||
|
||||
const mpath = document.createElementNS('http://www.w3.org/2000/svg', 'mpath');
|
||||
mpath.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + path.id);
|
||||
|
||||
animate.appendChild(mpath);
|
||||
circle.appendChild(animate);
|
||||
path.parentNode.appendChild(circle);
|
||||
}
|
||||
|
||||
// Draw neural connections
|
||||
function drawConnections() {
|
||||
const svg = document.getElementById('connectionSvg');
|
||||
const nodes = document.querySelectorAll('.data-node');
|
||||
|
||||
nodes.forEach((node, i) => {
|
||||
nodes.forEach((targetNode, j) => {
|
||||
if (i < j && Math.random() > 0.6) {
|
||||
const rect1 = node.getBoundingClientRect();
|
||||
const rect2 = targetNode.getBoundingClientRect();
|
||||
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', rect1.left + rect1.width / 2);
|
||||
line.setAttribute('y1', rect1.top + rect1.height / 2);
|
||||
line.setAttribute('x2', rect2.left + rect2.width / 2);
|
||||
line.setAttribute('y2', rect2.top + rect2.height / 2);
|
||||
line.setAttribute('class', 'neural-connection');
|
||||
svg.appendChild(line);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Animate waveform
|
||||
function animateWaveform() {
|
||||
const path = document.getElementById('wavePath');
|
||||
const width = path.parentElement.clientWidth;
|
||||
const height = path.parentElement.clientHeight;
|
||||
|
||||
let d = `M0,${height/2}`;
|
||||
for (let x = 0; x < width; x += 5) {
|
||||
const y = height/2 + Math.sin((x + Date.now() * 0.002) * 0.02) * 30 * Math.random();
|
||||
d += ` L${x},${y}`;
|
||||
}
|
||||
|
||||
path.setAttribute('d', d);
|
||||
requestAnimationFrame(animateWaveform);
|
||||
}
|
||||
|
||||
// Update node values with organic variation
|
||||
function updateNodeValues() {
|
||||
const nodes = document.querySelectorAll('.node-value');
|
||||
nodes.forEach(node => {
|
||||
const currentValue = parseFloat(node.textContent);
|
||||
const change = (Math.random() - 0.5) * 10;
|
||||
const newValue = Math.max(0, currentValue + change);
|
||||
node.textContent = newValue.toFixed(1);
|
||||
|
||||
// Color based on value
|
||||
const hue = (newValue / 300) * 120; // Green to red
|
||||
node.style.color = `hsl(${120 - hue}, 100%, 50%)`;
|
||||
});
|
||||
}
|
||||
|
||||
// Evolve network
|
||||
function evolveNetwork() {
|
||||
const stage = document.getElementById('evolutionStage');
|
||||
const currentStage = parseInt(stage.textContent);
|
||||
stage.textContent = currentStage + 1;
|
||||
|
||||
// Trigger visual evolution
|
||||
document.querySelectorAll('.data-node').forEach((node, i) => {
|
||||
setTimeout(() => {
|
||||
node.style.transform = 'scale(1.2)';
|
||||
node.style.boxShadow = '0 0 50px rgba(255, 0, 255, 0.8)';
|
||||
setTimeout(() => {
|
||||
node.style.transform = 'scale(1)';
|
||||
node.style.boxShadow = '';
|
||||
}, 300);
|
||||
}, i * 100);
|
||||
});
|
||||
|
||||
// Update learning bar
|
||||
const learningBar = document.getElementById('learningBar');
|
||||
const learningPercent = document.getElementById('learningPercent');
|
||||
const newPercent = Math.min(100, parseInt(learningPercent.textContent) + 15);
|
||||
learningBar.style.width = newPercent + '%';
|
||||
learningPercent.textContent = newPercent + '%';
|
||||
}
|
||||
|
||||
// Initiate scan
|
||||
function initiateScan() {
|
||||
const queryInput = document.getElementById('queryInput').value;
|
||||
console.log('Initiating neural scan for:', queryInput);
|
||||
|
||||
// Visual feedback
|
||||
document.querySelectorAll('.circuit-path').forEach(path => {
|
||||
path.style.opacity = '0.8';
|
||||
path.style.strokeWidth = '3';
|
||||
setTimeout(() => {
|
||||
path.style.opacity = '0.3';
|
||||
path.style.strokeWidth = '2';
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Update values
|
||||
updateNodeValues();
|
||||
|
||||
// Update active synapses
|
||||
const synapses = document.getElementById('activeSynapses');
|
||||
synapses.textContent = (parseInt(synapses.textContent.replace(',', '')) + Math.floor(Math.random() * 100)).toLocaleString();
|
||||
}
|
||||
|
||||
// Recalibrate signals
|
||||
function recalibrateSignals() {
|
||||
document.querySelectorAll('.strength-fill').forEach(fill => {
|
||||
const newWidth = Math.random() * 100;
|
||||
fill.style.width = newWidth + '%';
|
||||
});
|
||||
|
||||
// Update network health
|
||||
const health = document.getElementById('networkHealth');
|
||||
health.textContent = (90 + Math.random() * 10).toFixed(1);
|
||||
}
|
||||
|
||||
// Input intelligence - adapt based on user patterns
|
||||
document.querySelectorAll('.neural-input').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
// Simulate learning from input
|
||||
const learningBar = document.getElementById('learningBar');
|
||||
const currentWidth = parseInt(learningBar.style.width) || 0;
|
||||
learningBar.style.width = Math.min(100, currentWidth + 1) + '%';
|
||||
document.getElementById('learningPercent').textContent = learningBar.style.width;
|
||||
});
|
||||
});
|
||||
|
||||
// Node interaction
|
||||
document.querySelectorAll('.data-node').forEach(node => {
|
||||
node.addEventListener('click', function() {
|
||||
this.style.animation = 'pulse-glow 0.5s ease';
|
||||
setTimeout(() => {
|
||||
this.style.animation = '';
|
||||
}, 500);
|
||||
|
||||
// Create ripple effect
|
||||
const ripple = document.createElement('div');
|
||||
ripple.style.position = 'absolute';
|
||||
ripple.style.width = '20px';
|
||||
ripple.style.height = '20px';
|
||||
ripple.style.borderRadius = '50%';
|
||||
ripple.style.background = 'rgba(0, 255, 255, 0.5)';
|
||||
ripple.style.transform = 'translate(-50%, -50%)';
|
||||
ripple.style.pointerEvents = 'none';
|
||||
ripple.style.animation = 'expand 1s ease-out';
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
ripple.style.left = '50%';
|
||||
ripple.style.top = '50%';
|
||||
|
||||
this.appendChild(ripple);
|
||||
setTimeout(() => ripple.remove(), 1000);
|
||||
});
|
||||
});
|
||||
|
||||
// Add expanding animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes expand {
|
||||
to {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize
|
||||
createCircuitBackground();
|
||||
setTimeout(drawConnections, 100);
|
||||
animateWaveform();
|
||||
|
||||
// Continuous updates
|
||||
setInterval(updateNodeValues, 3000);
|
||||
setInterval(() => {
|
||||
const health = document.getElementById('networkHealth');
|
||||
const currentHealth = parseFloat(health.textContent);
|
||||
const variation = (Math.random() - 0.5) * 2;
|
||||
health.textContent = Math.max(90, Math.min(100, currentHealth + variation)).toFixed(1);
|
||||
}, 2000);
|
||||
|
||||
// Assign unique IDs to circuit paths for pulse animation
|
||||
document.querySelectorAll('.circuit-path').forEach((path, i) => {
|
||||
path.id = `circuit-path-${i}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,824 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Digital Minimalism Input Intelligence</title>
|
||||
<style>
|
||||
/* Digital Minimalism Core Variables */
|
||||
:root {
|
||||
--primary-color: #000000;
|
||||
--secondary-color: #333333;
|
||||
--accent-color: #666666;
|
||||
--background-color: #ffffff;
|
||||
--surface-color: #fafafa;
|
||||
--error-color: #ff0000;
|
||||
--success-color: #00ff00;
|
||||
--warning-color: #ffaa00;
|
||||
|
||||
--font-primary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
|
||||
|
||||
--spacing-unit: 8px;
|
||||
--border-radius: 2px;
|
||||
--animation-duration: 200ms;
|
||||
--animation-easing: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
background-color: var(--background-color);
|
||||
color: var(--primary-color);
|
||||
line-height: 1.4;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: calc(var(--spacing-unit) * 4);
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: calc(var(--spacing-unit) * 6);
|
||||
text-align: center;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Hybrid Component Container */
|
||||
.hybrid-component {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-intelligence {
|
||||
position: relative;
|
||||
background: var(--surface-color);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all var(--animation-duration) var(--animation-easing);
|
||||
}
|
||||
|
||||
.input-intelligence:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-color);
|
||||
}
|
||||
|
||||
.input-intelligence.has-error {
|
||||
border-color: var(--error-color);
|
||||
box-shadow: 0 0 0 1px var(--error-color);
|
||||
}
|
||||
|
||||
.input-intelligence.has-success {
|
||||
border-color: var(--success-color);
|
||||
box-shadow: 0 0 0 1px var(--success-color);
|
||||
}
|
||||
|
||||
/* Main Input Field */
|
||||
.input-field {
|
||||
position: relative;
|
||||
padding: calc(var(--spacing-unit) * 3);
|
||||
}
|
||||
|
||||
.input-field input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: var(--primary-color);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.input-field input::placeholder {
|
||||
color: var(--accent-color);
|
||||
transition: opacity var(--animation-duration) var(--animation-easing);
|
||||
}
|
||||
|
||||
.input-field input:focus::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Label System */
|
||||
.input-label {
|
||||
position: absolute;
|
||||
top: calc(var(--spacing-unit) * 3);
|
||||
left: calc(var(--spacing-unit) * 3);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: var(--accent-color);
|
||||
pointer-events: none;
|
||||
transition: all var(--animation-duration) var(--animation-easing);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.input-label.focused {
|
||||
top: calc(var(--spacing-unit) * 1);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Validation System */
|
||||
.validation-container {
|
||||
position: absolute;
|
||||
right: calc(var(--spacing-unit) * 3);
|
||||
top: calc(var(--spacing-unit) * 3);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.validation-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--animation-duration) var(--animation-easing);
|
||||
}
|
||||
|
||||
.validation-icon.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.validation-icon.success {
|
||||
background: linear-gradient(45deg, var(--success-color), var(--success-color));
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20,6 9,17 4,12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.validation-icon.error {
|
||||
background: linear-gradient(45deg, var(--error-color), var(--error-color));
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.validation-icon.loading {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-top: 1px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Help System */
|
||||
.help-system {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--surface-color);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: all var(--animation-duration) var(--animation-easing);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.help-system.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: var(--secondary-color);
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.help-examples {
|
||||
margin-top: calc(var(--spacing-unit) * 1);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--accent-color);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Autocomplete System */
|
||||
.autocomplete-system {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--surface-color);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: all var(--animation-duration) var(--animation-easing);
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.autocomplete-system.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.autocomplete-item {
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--secondary-color);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--animation-duration) var(--animation-easing);
|
||||
border-bottom: 1px solid var(--surface-color);
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.autocomplete-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.autocomplete-item:hover,
|
||||
.autocomplete-item.selected {
|
||||
background-color: var(--surface-color);
|
||||
}
|
||||
|
||||
.autocomplete-highlight {
|
||||
color: var(--primary-color);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Format Indicator */
|
||||
.format-indicator {
|
||||
position: absolute;
|
||||
bottom: calc(var(--spacing-unit) * 1);
|
||||
right: calc(var(--spacing-unit) * 3);
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-color);
|
||||
opacity: 0;
|
||||
transition: opacity var(--animation-duration) var(--animation-easing);
|
||||
}
|
||||
|
||||
.format-indicator.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Progress Indicator */
|
||||
.progress-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--primary-color);
|
||||
width: 0%;
|
||||
transition: width var(--animation-duration) var(--animation-easing);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
margin-bottom: calc(var(--spacing-unit) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Demo Examples */
|
||||
.demo-section {
|
||||
margin-top: calc(var(--spacing-unit) * 8);
|
||||
padding-top: calc(var(--spacing-unit) * 4);
|
||||
border-top: 1px solid var(--surface-color);
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: calc(var(--spacing-unit) * 2);
|
||||
}
|
||||
|
||||
.demo-input {
|
||||
margin-bottom: calc(var(--spacing-unit) * 4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Input Intelligence - Digital Minimalism Theme</h1>
|
||||
|
||||
<div class="hybrid-component">
|
||||
<!-- Primary Email Input with Full Intelligence -->
|
||||
<div class="input-intelligence" id="email-input">
|
||||
<div class="input-field">
|
||||
<label class="input-label" for="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
spellcheck="false"
|
||||
data-type="email"
|
||||
aria-describedby="email-help"
|
||||
>
|
||||
<div class="validation-container">
|
||||
<div class="validation-icon" id="email-validation"></div>
|
||||
</div>
|
||||
<div class="format-indicator" id="email-format"></div>
|
||||
</div>
|
||||
|
||||
<div class="help-system" id="email-help">
|
||||
<div class="help-content">
|
||||
Enter a valid email address for account verification.
|
||||
<div class="help-examples">
|
||||
Examples: user@domain.com, name+tag@company.org
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="autocomplete-system" id="email-autocomplete">
|
||||
<!-- Dynamic autocomplete suggestions -->
|
||||
</div>
|
||||
|
||||
<div class="progress-indicator" id="email-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Section -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-label">Additional Examples</div>
|
||||
|
||||
<!-- Phone Number Input -->
|
||||
<div class="demo-input">
|
||||
<div class="input-intelligence" id="phone-input">
|
||||
<div class="input-field">
|
||||
<label class="input-label" for="phone">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
autocomplete="tel"
|
||||
data-type="phone"
|
||||
aria-describedby="phone-help"
|
||||
>
|
||||
<div class="validation-container">
|
||||
<div class="validation-icon" id="phone-validation"></div>
|
||||
</div>
|
||||
<div class="format-indicator" id="phone-format"></div>
|
||||
</div>
|
||||
|
||||
<div class="help-system" id="phone-help">
|
||||
<div class="help-content">
|
||||
Enter your phone number for SMS verification.
|
||||
<div class="help-examples">
|
||||
Formats: (555) 123-4567, +1-555-123-4567, 555.123.4567
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="autocomplete-system" id="phone-autocomplete"></div>
|
||||
<div class="progress-indicator" id="phone-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Input -->
|
||||
<div class="demo-input">
|
||||
<div class="input-intelligence" id="date-input">
|
||||
<div class="input-field">
|
||||
<label class="input-label" for="date">Date of Birth</label>
|
||||
<input
|
||||
type="text"
|
||||
id="date"
|
||||
name="date"
|
||||
autocomplete="bday"
|
||||
data-type="date"
|
||||
aria-describedby="date-help"
|
||||
>
|
||||
<div class="validation-container">
|
||||
<div class="validation-icon" id="date-validation"></div>
|
||||
</div>
|
||||
<div class="format-indicator" id="date-format"></div>
|
||||
</div>
|
||||
|
||||
<div class="help-system" id="date-help">
|
||||
<div class="help-content">
|
||||
Enter your date of birth for age verification.
|
||||
<div class="help-examples">
|
||||
Formats: MM/DD/YYYY, MM-DD-YYYY, Month DD, YYYY
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="autocomplete-system" id="date-autocomplete"></div>
|
||||
<div class="progress-indicator" id="date-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Digital Minimalism Input Intelligence System
|
||||
class InputIntelligence {
|
||||
constructor(container) {
|
||||
this.container = container;
|
||||
this.input = container.querySelector('input');
|
||||
this.label = container.querySelector('.input-label');
|
||||
this.validation = container.querySelector('.validation-icon');
|
||||
this.help = container.querySelector('.help-system');
|
||||
this.autocomplete = container.querySelector('.autocomplete-system');
|
||||
this.formatIndicator = container.querySelector('.format-indicator');
|
||||
this.progress = container.querySelector('.progress-indicator');
|
||||
|
||||
this.type = this.input.dataset.type;
|
||||
this.isValid = false;
|
||||
this.isValidating = false;
|
||||
this.selectedIndex = -1;
|
||||
this.suggestions = [];
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.bindEvents();
|
||||
this.setupFormatting();
|
||||
this.loadSuggestions();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Focus and blur events
|
||||
this.input.addEventListener('focus', () => this.handleFocus());
|
||||
this.input.addEventListener('blur', () => this.handleBlur());
|
||||
|
||||
// Input events
|
||||
this.input.addEventListener('input', () => this.handleInput());
|
||||
this.input.addEventListener('keydown', (e) => this.handleKeydown(e));
|
||||
|
||||
// Help system
|
||||
this.input.addEventListener('focus', () => this.showHelp());
|
||||
this.input.addEventListener('blur', () => {
|
||||
setTimeout(() => this.hideHelp(), 150);
|
||||
});
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.label.classList.add('focused');
|
||||
this.updateProgress(25);
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
if (!this.input.value) {
|
||||
this.label.classList.remove('focused');
|
||||
this.updateProgress(0);
|
||||
}
|
||||
this.hideAutocomplete();
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
const value = this.input.value;
|
||||
|
||||
// Format the input
|
||||
this.formatInput(value);
|
||||
|
||||
// Validate
|
||||
this.validateInput(value);
|
||||
|
||||
// Show autocomplete
|
||||
this.showAutocomplete(value);
|
||||
|
||||
// Update progress
|
||||
this.updateProgress(this.calculateProgress(value));
|
||||
|
||||
// Keep label focused if there's content
|
||||
if (value) {
|
||||
this.label.classList.add('focused');
|
||||
} else if (!this.input.matches(':focus')) {
|
||||
this.label.classList.remove('focused');
|
||||
}
|
||||
}
|
||||
|
||||
handleKeydown(e) {
|
||||
if (this.autocomplete.classList.contains('visible')) {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
this.selectNext();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
this.selectPrevious();
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
this.selectCurrent();
|
||||
break;
|
||||
case 'Escape':
|
||||
this.hideAutocomplete();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
formatInput(value) {
|
||||
let formatted = value;
|
||||
|
||||
switch (this.type) {
|
||||
case 'phone':
|
||||
formatted = this.formatPhone(value);
|
||||
break;
|
||||
case 'date':
|
||||
formatted = this.formatDate(value);
|
||||
break;
|
||||
case 'email':
|
||||
formatted = value.toLowerCase();
|
||||
break;
|
||||
}
|
||||
|
||||
if (formatted !== value) {
|
||||
const cursorPos = this.input.selectionStart;
|
||||
this.input.value = formatted;
|
||||
this.input.setSelectionRange(cursorPos, cursorPos);
|
||||
}
|
||||
|
||||
this.updateFormatIndicator(formatted);
|
||||
}
|
||||
|
||||
formatPhone(value) {
|
||||
const digits = value.replace(/\D/g, '');
|
||||
if (digits.length <= 3) return digits;
|
||||
if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
|
||||
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
|
||||
}
|
||||
|
||||
formatDate(value) {
|
||||
const digits = value.replace(/\D/g, '');
|
||||
if (digits.length <= 2) return digits;
|
||||
if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
||||
return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
|
||||
}
|
||||
|
||||
validateInput(value) {
|
||||
this.isValidating = true;
|
||||
this.showValidation('loading');
|
||||
|
||||
setTimeout(() => {
|
||||
const isValid = this.checkValidity(value);
|
||||
this.isValid = isValid;
|
||||
this.isValidating = false;
|
||||
|
||||
this.container.classList.toggle('has-error', !isValid && value.length > 0);
|
||||
this.container.classList.toggle('has-success', isValid && value.length > 0);
|
||||
|
||||
if (value.length > 0) {
|
||||
this.showValidation(isValid ? 'success' : 'error');
|
||||
} else {
|
||||
this.hideValidation();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
checkValidity(value) {
|
||||
if (!value) return false;
|
||||
|
||||
switch (this.type) {
|
||||
case 'email':
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||||
case 'phone':
|
||||
const digits = value.replace(/\D/g, '');
|
||||
return digits.length === 10;
|
||||
case 'date':
|
||||
const dateRegex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
|
||||
const match = value.match(dateRegex);
|
||||
if (!match) return false;
|
||||
|
||||
const month = parseInt(match[1]);
|
||||
const day = parseInt(match[2]);
|
||||
const year = parseInt(match[3]);
|
||||
|
||||
return month >= 1 && month <= 12 &&
|
||||
day >= 1 && day <= 31 &&
|
||||
year >= 1900 && year <= new Date().getFullYear();
|
||||
default:
|
||||
return value.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
showValidation(type) {
|
||||
this.validation.className = `validation-icon visible ${type}`;
|
||||
}
|
||||
|
||||
hideValidation() {
|
||||
this.validation.className = 'validation-icon';
|
||||
}
|
||||
|
||||
showHelp() {
|
||||
this.help.classList.add('visible');
|
||||
}
|
||||
|
||||
hideHelp() {
|
||||
this.help.classList.remove('visible');
|
||||
}
|
||||
|
||||
showAutocomplete(value) {
|
||||
if (!value || value.length < 2) {
|
||||
this.hideAutocomplete();
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = this.suggestions.filter(suggestion =>
|
||||
suggestion.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
this.hideAutocomplete();
|
||||
return;
|
||||
}
|
||||
|
||||
this.renderAutocomplete(filtered, value);
|
||||
this.autocomplete.classList.add('visible');
|
||||
this.selectedIndex = -1;
|
||||
}
|
||||
|
||||
hideAutocomplete() {
|
||||
this.autocomplete.classList.remove('visible');
|
||||
this.selectedIndex = -1;
|
||||
}
|
||||
|
||||
renderAutocomplete(suggestions, query) {
|
||||
const html = suggestions.map((suggestion, index) => {
|
||||
const highlighted = suggestion.replace(
|
||||
new RegExp(`(${query})`, 'gi'),
|
||||
'<span class="autocomplete-highlight">$1</span>'
|
||||
);
|
||||
|
||||
return `<div class="autocomplete-item" data-index="${index}">${highlighted}</div>`;
|
||||
}).join('');
|
||||
|
||||
this.autocomplete.innerHTML = html;
|
||||
|
||||
// Bind click events
|
||||
this.autocomplete.querySelectorAll('.autocomplete-item').forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
this.selectedIndex = index;
|
||||
this.selectCurrent();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
selectNext() {
|
||||
const items = this.autocomplete.querySelectorAll('.autocomplete-item');
|
||||
if (items.length === 0) return;
|
||||
|
||||
this.selectedIndex = (this.selectedIndex + 1) % items.length;
|
||||
this.updateSelection();
|
||||
}
|
||||
|
||||
selectPrevious() {
|
||||
const items = this.autocomplete.querySelectorAll('.autocomplete-item');
|
||||
if (items.length === 0) return;
|
||||
|
||||
this.selectedIndex = this.selectedIndex <= 0 ? items.length - 1 : this.selectedIndex - 1;
|
||||
this.updateSelection();
|
||||
}
|
||||
|
||||
updateSelection() {
|
||||
const items = this.autocomplete.querySelectorAll('.autocomplete-item');
|
||||
items.forEach((item, index) => {
|
||||
item.classList.toggle('selected', index === this.selectedIndex);
|
||||
});
|
||||
}
|
||||
|
||||
selectCurrent() {
|
||||
const items = this.autocomplete.querySelectorAll('.autocomplete-item');
|
||||
if (this.selectedIndex >= 0 && items[this.selectedIndex]) {
|
||||
const suggestion = items[this.selectedIndex].textContent;
|
||||
this.input.value = suggestion;
|
||||
this.hideAutocomplete();
|
||||
this.handleInput();
|
||||
this.input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
updateFormatIndicator(value) {
|
||||
if (!value) {
|
||||
this.formatIndicator.classList.remove('visible');
|
||||
return;
|
||||
}
|
||||
|
||||
let format = '';
|
||||
switch (this.type) {
|
||||
case 'email':
|
||||
format = 'Email';
|
||||
break;
|
||||
case 'phone':
|
||||
format = 'Phone';
|
||||
break;
|
||||
case 'date':
|
||||
format = 'Date';
|
||||
break;
|
||||
}
|
||||
|
||||
this.formatIndicator.textContent = format;
|
||||
this.formatIndicator.classList.add('visible');
|
||||
}
|
||||
|
||||
calculateProgress(value) {
|
||||
if (!value) return 0;
|
||||
|
||||
const baseProgress = Math.min((value.length / 10) * 50, 50);
|
||||
const validityProgress = this.isValid ? 50 : 0;
|
||||
|
||||
return baseProgress + validityProgress;
|
||||
}
|
||||
|
||||
updateProgress(percentage) {
|
||||
this.progress.style.width = `${percentage}%`;
|
||||
}
|
||||
|
||||
setupFormatting() {
|
||||
// Format-specific setup
|
||||
switch (this.type) {
|
||||
case 'phone':
|
||||
this.input.setAttribute('maxlength', '14');
|
||||
break;
|
||||
case 'date':
|
||||
this.input.setAttribute('maxlength', '10');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
loadSuggestions() {
|
||||
// Mock suggestions for demo
|
||||
switch (this.type) {
|
||||
case 'email':
|
||||
this.suggestions = [
|
||||
'john.doe@gmail.com',
|
||||
'jane.smith@company.com',
|
||||
'user@example.org',
|
||||
'admin@website.net',
|
||||
'contact@business.co'
|
||||
];
|
||||
break;
|
||||
case 'phone':
|
||||
this.suggestions = [
|
||||
'(555) 123-4567',
|
||||
'(555) 987-6543',
|
||||
'(555) 555-0123'
|
||||
];
|
||||
break;
|
||||
case 'date':
|
||||
this.suggestions = [
|
||||
'01/15/1990',
|
||||
'03/22/1985',
|
||||
'12/05/1992'
|
||||
];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all input intelligence components
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const inputs = document.querySelectorAll('.input-intelligence');
|
||||
inputs.forEach(input => new InputIntelligence(input));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,691 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retro Computing Action Controller</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier Prime', 'Courier New', monospace;
|
||||
background: #000;
|
||||
color: #00ff00;
|
||||
min-height: 100vh;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 255, 0, 0.03) 50%, transparent 50%),
|
||||
linear-gradient(90deg, rgba(255, 0, 0, 0.03) 50%, transparent 50%);
|
||||
background-size: 2px 2px, 2px 2px;
|
||||
animation: scanlines 0.1s linear infinite;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@keyframes scanlines {
|
||||
0% { background-position: 0 0, 0 0; }
|
||||
100% { background-position: 0 2px, 2px 0; }
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
text-shadow: 0 0 10px #00ff00;
|
||||
letter-spacing: 2px;
|
||||
animation: flicker 2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.terminal-frame {
|
||||
border: 2px solid #00ff00;
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 255, 0, 0.3),
|
||||
inset 0 0 20px rgba(0, 255, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: #00ff00;
|
||||
color: #000;
|
||||
padding: 8px 15px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
padding: 20px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.command-prompt {
|
||||
color: #00ff00;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-controller {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-action-btn {
|
||||
background: transparent;
|
||||
border: 2px solid #00ff00;
|
||||
color: #00ff00;
|
||||
padding: 15px 40px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-action-btn:hover {
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.main-action-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.main-action-btn.loading {
|
||||
color: #ffff00;
|
||||
border-color: #ffff00;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-action-btn.success {
|
||||
color: #00ffff;
|
||||
border-color: #00ffff;
|
||||
animation: success-pulse 0.5s ease;
|
||||
}
|
||||
|
||||
.main-action-btn.error {
|
||||
color: #ff0000;
|
||||
border-color: #ff0000;
|
||||
animation: error-shake 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes success-pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes error-shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
75% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
.loading-display {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #ffff00;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-display.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
border: 1px solid #ffff00;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ffff00, #ff8800);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
animation: scanning 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes scanning {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
.confirmation-dialog {
|
||||
display: none;
|
||||
border: 2px solid #ffff00;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirmation-dialog.active {
|
||||
display: block;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { transform: translateY(-20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.confirmation-text {
|
||||
color: #ffff00;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.confirmation-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-btn, .cancel-btn {
|
||||
background: transparent;
|
||||
border: 1px solid;
|
||||
color: inherit;
|
||||
padding: 8px 20px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
border-color: #00ff00;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
border-color: #ff0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-display {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-display.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.status-display.success {
|
||||
border-color: #00ffff;
|
||||
color: #00ffff;
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.status-display.error {
|
||||
border-color: #ff0000;
|
||||
color: #ff0000;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.terminal-output {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid #333;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
height: 150px;
|
||||
overflow-y: auto;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.output-line {
|
||||
margin-bottom: 5px;
|
||||
animation: typewriter 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
from { width: 0; overflow: hidden; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ascii-art {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: #00ff00;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.blinking-cursor {
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-action-btn {
|
||||
padding: 12px 30px;
|
||||
font-size: 14px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.confirmation-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Action Controller - Retro Computing Theme</h1>
|
||||
|
||||
<div class="terminal-frame">
|
||||
<div class="terminal-header">
|
||||
SYSTEM CONTROL TERMINAL v2.3.1
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div class="command-prompt">
|
||||
C:\SYSTEM> action_controller.exe --mode=interactive<span class="blinking-cursor">_</span>
|
||||
</div>
|
||||
|
||||
<div class="ascii-art">
|
||||
╔═══════════════════════════════════════╗<br>
|
||||
║ ▄▀█ █▀▀ ▀█▀ █ █▀█ █▄░█ ║<br>
|
||||
║ █▀█ █▄▄ ░█░ █ █▄█ █░▀█ ║<br>
|
||||
║ ║<br>
|
||||
║ █▀▀ █▀█ █▄░█ ▀█▀ █▀█ █▀█ █░░ ║<br>
|
||||
║ █▄▄ █▄█ █░▀█ ░█░ █▄█ █▄█ █▄▄ ║<br>
|
||||
╚═══════════════════════════════════════╝
|
||||
</div>
|
||||
|
||||
<div class="hybrid-component">
|
||||
<div class="action-controller">
|
||||
<button class="main-action-btn" id="mainAction">
|
||||
Execute Command
|
||||
</button>
|
||||
|
||||
<div class="loading-display" id="loadingDisplay">
|
||||
<span>Processing...</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<span id="progressText">0%</span>
|
||||
</div>
|
||||
|
||||
<div class="confirmation-dialog" id="confirmDialog">
|
||||
<div class="confirmation-text">
|
||||
WARNING: This action will execute system commands.<br>
|
||||
Are you sure you want to proceed?
|
||||
</div>
|
||||
<div class="confirmation-buttons">
|
||||
<button class="confirm-btn" id="confirmBtn">Y - Confirm</button>
|
||||
<button class="cancel-btn" id="cancelBtn">N - Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-display" id="statusDisplay">
|
||||
<span class="status-icon" id="statusIcon"></span>
|
||||
<div id="statusMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="terminal-output" id="terminalOutput">
|
||||
<div class="output-line">
|
||||
<span class="timestamp">[00:00:00]</span> System initialized successfully
|
||||
</div>
|
||||
<div class="output-line">
|
||||
<span class="timestamp">[00:00:01]</span> Action controller module loaded
|
||||
</div>
|
||||
<div class="output-line">
|
||||
<span class="timestamp">[00:00:02]</span> Ready for user input...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
class RetroActionController {
|
||||
constructor() {
|
||||
this.mainButton = document.getElementById('mainAction');
|
||||
this.loadingDisplay = document.getElementById('loadingDisplay');
|
||||
this.progressFill = document.getElementById('progressFill');
|
||||
this.progressText = document.getElementById('progressText');
|
||||
this.confirmDialog = document.getElementById('confirmDialog');
|
||||
this.confirmBtn = document.getElementById('confirmBtn');
|
||||
this.cancelBtn = document.getElementById('cancelBtn');
|
||||
this.statusDisplay = document.getElementById('statusDisplay');
|
||||
this.statusIcon = document.getElementById('statusIcon');
|
||||
this.statusMessage = document.getElementById('statusMessage');
|
||||
this.terminalOutput = document.getElementById('terminalOutput');
|
||||
|
||||
this.state = 'idle'; // idle, confirming, loading, success, error
|
||||
this.actionCount = 0;
|
||||
|
||||
this.initializeEventListeners();
|
||||
this.startTerminalClock();
|
||||
}
|
||||
|
||||
initializeEventListeners() {
|
||||
this.mainButton.addEventListener('click', () => this.handleMainAction());
|
||||
this.confirmBtn.addEventListener('click', () => this.handleConfirm());
|
||||
this.cancelBtn.addEventListener('click', () => this.handleCancel());
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (this.state === 'confirming') {
|
||||
if (e.key === 'y' || e.key === 'Y' || e.key === 'Enter') {
|
||||
this.handleConfirm();
|
||||
} else if (e.key === 'n' || e.key === 'N' || e.key === 'Escape') {
|
||||
this.handleCancel();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleMainAction() {
|
||||
if (this.state !== 'idle') return;
|
||||
|
||||
this.playSound('beep');
|
||||
this.logToTerminal('User initiated action sequence');
|
||||
this.showConfirmation();
|
||||
}
|
||||
|
||||
showConfirmation() {
|
||||
this.state = 'confirming';
|
||||
this.confirmDialog.classList.add('active');
|
||||
this.statusDisplay.classList.remove('active');
|
||||
this.logToTerminal('Awaiting user confirmation...');
|
||||
}
|
||||
|
||||
handleConfirm() {
|
||||
this.confirmDialog.classList.remove('active');
|
||||
this.logToTerminal('Action confirmed - initiating execution');
|
||||
this.executeAction();
|
||||
}
|
||||
|
||||
handleCancel() {
|
||||
this.confirmDialog.classList.remove('active');
|
||||
this.state = 'idle';
|
||||
this.logToTerminal('Action cancelled by user');
|
||||
this.playSound('cancel');
|
||||
}
|
||||
|
||||
executeAction() {
|
||||
this.state = 'loading';
|
||||
this.mainButton.classList.add('loading');
|
||||
this.mainButton.textContent = 'Processing...';
|
||||
this.loadingDisplay.classList.add('active');
|
||||
this.statusDisplay.classList.remove('active');
|
||||
|
||||
this.logToTerminal('Executing system commands...');
|
||||
this.playSound('process');
|
||||
|
||||
// Simulate loading progress
|
||||
let progress = 0;
|
||||
const progressInterval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress > 100) progress = 100;
|
||||
|
||||
this.progressFill.style.width = progress + '%';
|
||||
this.progressText.textContent = Math.floor(progress) + '%';
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
this.completeAction();
|
||||
}
|
||||
}, 150);
|
||||
}
|
||||
|
||||
completeAction() {
|
||||
this.actionCount++;
|
||||
this.loadingDisplay.classList.remove('active');
|
||||
|
||||
// Randomly succeed or fail for demo purposes
|
||||
const success = Math.random() > 0.3;
|
||||
|
||||
if (success) {
|
||||
this.showSuccess();
|
||||
} else {
|
||||
this.showError();
|
||||
}
|
||||
|
||||
// Reset after 3 seconds
|
||||
setTimeout(() => this.resetController(), 3000);
|
||||
}
|
||||
|
||||
showSuccess() {
|
||||
this.state = 'success';
|
||||
this.mainButton.classList.remove('loading');
|
||||
this.mainButton.classList.add('success');
|
||||
this.mainButton.textContent = 'Success!';
|
||||
|
||||
this.statusDisplay.classList.add('active', 'success');
|
||||
this.statusIcon.textContent = '✓';
|
||||
this.statusMessage.textContent = 'Command executed successfully';
|
||||
|
||||
this.logToTerminal('SUCCESS: Action completed without errors');
|
||||
this.logToTerminal(`Total successful actions: ${this.actionCount}`);
|
||||
this.playSound('success');
|
||||
}
|
||||
|
||||
showError() {
|
||||
this.state = 'error';
|
||||
this.mainButton.classList.remove('loading');
|
||||
this.mainButton.classList.add('error');
|
||||
this.mainButton.textContent = 'Error!';
|
||||
|
||||
this.statusDisplay.classList.add('active', 'error');
|
||||
this.statusIcon.textContent = '✗';
|
||||
this.statusMessage.textContent = 'ERROR: Command execution failed';
|
||||
|
||||
this.logToTerminal('ERROR: System encountered an unexpected error');
|
||||
this.logToTerminal('Please check system logs for details');
|
||||
this.playSound('error');
|
||||
}
|
||||
|
||||
resetController() {
|
||||
this.state = 'idle';
|
||||
this.mainButton.className = 'main-action-btn';
|
||||
this.mainButton.textContent = 'Execute Command';
|
||||
this.statusDisplay.classList.remove('active', 'success', 'error');
|
||||
this.progressFill.style.width = '0%';
|
||||
this.progressText.textContent = '0%';
|
||||
|
||||
this.logToTerminal('Controller reset - ready for next action');
|
||||
}
|
||||
|
||||
logToTerminal(message) {
|
||||
const timestamp = this.getCurrentTimestamp();
|
||||
const outputLine = document.createElement('div');
|
||||
outputLine.className = 'output-line';
|
||||
outputLine.innerHTML = `<span class="timestamp">[${timestamp}]</span> ${message}`;
|
||||
|
||||
this.terminalOutput.appendChild(outputLine);
|
||||
this.terminalOutput.scrollTop = this.terminalOutput.scrollHeight;
|
||||
|
||||
// Keep only last 20 lines
|
||||
const lines = this.terminalOutput.querySelectorAll('.output-line');
|
||||
if (lines.length > 20) {
|
||||
lines[0].remove();
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentTimestamp() {
|
||||
const now = new Date();
|
||||
return now.toTimeString().split(' ')[0];
|
||||
}
|
||||
|
||||
startTerminalClock() {
|
||||
// Update clock display every second
|
||||
setInterval(() => {
|
||||
// This could update a terminal clock if desired
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
playSound(type) {
|
||||
// Create retro computer sounds using Web Audio API
|
||||
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
|
||||
const sounds = {
|
||||
beep: { freq: 800, duration: 0.1 },
|
||||
process: { freq: 400, duration: 0.05 },
|
||||
success: { freq: 600, duration: 0.2 },
|
||||
error: { freq: 200, duration: 0.3 },
|
||||
cancel: { freq: 300, duration: 0.15 }
|
||||
};
|
||||
|
||||
const sound = sounds[type];
|
||||
if (!sound) return;
|
||||
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.frequency.setValueAtTime(sound.freq, audioContext.currentTime);
|
||||
oscillator.type = 'square';
|
||||
|
||||
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + sound.duration);
|
||||
|
||||
oscillator.start(audioContext.currentTime);
|
||||
oscillator.stop(audioContext.currentTime + sound.duration);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the retro action controller
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new RetroActionController();
|
||||
});
|
||||
|
||||
// Add some terminal-style effects
|
||||
document.addEventListener('click', (e) => {
|
||||
// Create click effect
|
||||
const ripple = document.createElement('div');
|
||||
ripple.style.position = 'absolute';
|
||||
ripple.style.width = '10px';
|
||||
ripple.style.height = '10px';
|
||||
ripple.style.background = '#00ff00';
|
||||
ripple.style.borderRadius = '50%';
|
||||
ripple.style.transform = 'translate(-50%, -50%)';
|
||||
ripple.style.left = e.pageX + 'px';
|
||||
ripple.style.top = e.pageY + 'px';
|
||||
ripple.style.pointerEvents = 'none';
|
||||
ripple.style.animation = 'ripple 0.6s ease-out forwards';
|
||||
|
||||
document.body.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
|
||||
// Add ripple animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,945 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Glass Morphism File Manager</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 2rem;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: 1.5rem;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
/* Glass Morphism Base Styles */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.glass-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
transition: left 0.6s;
|
||||
}
|
||||
|
||||
.glass-panel:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.glass-panel:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Upload Area */
|
||||
.upload-zone {
|
||||
grid-column: 1 / -1;
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-zone.dragover {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Progress Tracking */
|
||||
.progress-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.filename {
|
||||
font-weight: 500;
|
||||
truncate: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00f5ff, #0080ff);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* File Browser */
|
||||
.browser-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #fff;
|
||||
backdrop-filter: blur(10px);
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-glass::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.search-glass:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.file-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.file-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(15px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.file-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
transform: translateY(-4px) scale(1.05);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Preview Modal */
|
||||
.preview-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.preview-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.preview-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.preview-close:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Validation System */
|
||||
.validation-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.validation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.validation-icon {
|
||||
font-size: 1.5rem;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.validation-icon.success { color: #00ff88; }
|
||||
.validation-icon.warning { color: #ffaa00; }
|
||||
.validation-icon.error { color: #ff4444; }
|
||||
|
||||
.validation-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.validation-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.validation-desc {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hybrid-component {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.file-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
.file-card:focus,
|
||||
.upload-zone:focus {
|
||||
outline: 2px solid rgba(255, 255, 255, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>File Manager - Glass Morphism Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<!-- Upload Zone -->
|
||||
<div class="upload-zone glass-panel" id="uploadZone" tabindex="0" role="button" aria-label="File upload area">
|
||||
<div class="upload-icon">☁️</div>
|
||||
<div class="upload-text">Drop files here or click to browse</div>
|
||||
<div class="upload-hint">Supports images, documents, and archives up to 50MB</div>
|
||||
<input type="file" id="fileInput" multiple style="display: none;" accept="image/*,application/pdf,.doc,.docx,.txt,.zip,.rar">
|
||||
</div>
|
||||
|
||||
<!-- Progress Tracking -->
|
||||
<div class="progress-panel glass-panel">
|
||||
<h3>📊 Upload Progress</h3>
|
||||
<div id="progressContainer">
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon">💫</div>
|
||||
<div class="validation-text">
|
||||
<div class="validation-title">Ready to upload</div>
|
||||
<div class="validation-desc">Select files to see progress here</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Browser -->
|
||||
<div class="browser-panel glass-panel">
|
||||
<div class="browser-header">
|
||||
<h3>📁 File Browser</h3>
|
||||
<input type="text" class="search-glass" placeholder="Search files..." id="searchInput">
|
||||
</div>
|
||||
<div class="file-grid" id="fileGrid">
|
||||
<!-- Sample files -->
|
||||
<div class="file-card" data-filename="document.pdf" data-type="pdf" tabindex="0">
|
||||
<div class="file-icon">📄</div>
|
||||
<div class="file-name">document.pdf</div>
|
||||
</div>
|
||||
<div class="file-card" data-filename="image.jpg" data-type="image" tabindex="0">
|
||||
<div class="file-icon">🖼️</div>
|
||||
<div class="file-name">image.jpg</div>
|
||||
</div>
|
||||
<div class="file-card" data-filename="archive.zip" data-type="archive" tabindex="0">
|
||||
<div class="file-icon">📦</div>
|
||||
<div class="file-name">archive.zip</div>
|
||||
</div>
|
||||
<div class="file-card" data-filename="presentation.pptx" data-type="presentation" tabindex="0">
|
||||
<div class="file-icon">📊</div>
|
||||
<div class="file-name">presentation.pptx</div>
|
||||
</div>
|
||||
<div class="file-card" data-filename="spreadsheet.xlsx" data-type="spreadsheet" tabindex="0">
|
||||
<div class="file-icon">📈</div>
|
||||
<div class="file-name">spreadsheet.xlsx</div>
|
||||
</div>
|
||||
<div class="file-card" data-filename="video.mp4" data-type="video" tabindex="0">
|
||||
<div class="file-icon">🎬</div>
|
||||
<div class="file-name">video.mp4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation System -->
|
||||
<div class="validation-panel glass-panel">
|
||||
<h3>✅ File Validation</h3>
|
||||
<div id="validationContainer">
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon success">✓</div>
|
||||
<div class="validation-text">
|
||||
<div class="validation-title">System Ready</div>
|
||||
<div class="validation-desc">All validation checks passed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon success">✓</div>
|
||||
<div class="validation-text">
|
||||
<div class="validation-title">Storage Available</div>
|
||||
<div class="validation-desc">2.4GB remaining space</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-item">
|
||||
<div class="validation-icon success">✓</div>
|
||||
<div class="validation-text">
|
||||
<div class="validation-title">Security Scan</div>
|
||||
<div class="validation-desc">Malware protection active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Modal -->
|
||||
<div class="preview-modal" id="previewModal" role="dialog" aria-labelledby="previewTitle" aria-hidden="true">
|
||||
<div class="preview-content">
|
||||
<button class="preview-close" id="previewClose" aria-label="Close preview">×</button>
|
||||
<h3 id="previewTitle">File Preview</h3>
|
||||
<div id="previewBody">
|
||||
<!-- Preview content will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
class GlassFileManager {
|
||||
constructor() {
|
||||
this.uploadZone = document.getElementById('uploadZone');
|
||||
this.fileInput = document.getElementById('fileInput');
|
||||
this.progressContainer = document.getElementById('progressContainer');
|
||||
this.fileGrid = document.getElementById('fileGrid');
|
||||
this.searchInput = document.getElementById('searchInput');
|
||||
this.validationContainer = document.getElementById('validationContainer');
|
||||
this.previewModal = document.getElementById('previewModal');
|
||||
this.previewClose = document.getElementById('previewClose');
|
||||
this.previewBody = document.getElementById('previewBody');
|
||||
|
||||
this.uploadedFiles = [];
|
||||
this.isUploading = false;
|
||||
|
||||
this.initializeEventListeners();
|
||||
this.initializeAnimation();
|
||||
}
|
||||
|
||||
initializeEventListeners() {
|
||||
// Upload zone events
|
||||
this.uploadZone.addEventListener('click', () => this.fileInput.click());
|
||||
this.uploadZone.addEventListener('dragover', this.handleDragOver.bind(this));
|
||||
this.uploadZone.addEventListener('dragleave', this.handleDragLeave.bind(this));
|
||||
this.uploadZone.addEventListener('drop', this.handleDrop.bind(this));
|
||||
|
||||
// File input change
|
||||
this.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
|
||||
|
||||
// Search functionality
|
||||
this.searchInput.addEventListener('input', this.handleSearch.bind(this));
|
||||
|
||||
// File preview
|
||||
this.fileGrid.addEventListener('click', this.handleFilePreview.bind(this));
|
||||
this.previewClose.addEventListener('click', this.closePreview.bind(this));
|
||||
this.previewModal.addEventListener('click', (e) => {
|
||||
if (e.target === this.previewModal) this.closePreview();
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', this.handleKeyboard.bind(this));
|
||||
}
|
||||
|
||||
initializeAnimation() {
|
||||
// Animate panels on load
|
||||
const panels = document.querySelectorAll('.glass-panel');
|
||||
panels.forEach((panel, index) => {
|
||||
setTimeout(() => {
|
||||
panel.classList.add('animate-in');
|
||||
}, index * 200);
|
||||
});
|
||||
}
|
||||
|
||||
handleDragOver(e) {
|
||||
e.preventDefault();
|
||||
this.uploadZone.classList.add('dragover');
|
||||
}
|
||||
|
||||
handleDragLeave(e) {
|
||||
e.preventDefault();
|
||||
this.uploadZone.classList.remove('dragover');
|
||||
}
|
||||
|
||||
handleDrop(e) {
|
||||
e.preventDefault();
|
||||
this.uploadZone.classList.remove('dragover');
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
this.processFiles(files);
|
||||
}
|
||||
|
||||
handleFileSelect(e) {
|
||||
const files = Array.from(e.target.files);
|
||||
this.processFiles(files);
|
||||
}
|
||||
|
||||
processFiles(files) {
|
||||
if (this.isUploading) return;
|
||||
|
||||
// Validate files
|
||||
const validatedFiles = this.validateFiles(files);
|
||||
|
||||
if (validatedFiles.length > 0) {
|
||||
this.uploadFiles(validatedFiles);
|
||||
}
|
||||
}
|
||||
|
||||
validateFiles(files) {
|
||||
const validFiles = [];
|
||||
const validationResults = [];
|
||||
|
||||
files.forEach(file => {
|
||||
const validation = this.validateSingleFile(file);
|
||||
if (validation.valid) {
|
||||
validFiles.push(file);
|
||||
validationResults.push({
|
||||
type: 'success',
|
||||
icon: '✓',
|
||||
title: `${file.name} validated`,
|
||||
desc: `${this.formatFileSize(file.size)} - Ready to upload`
|
||||
});
|
||||
} else {
|
||||
validationResults.push({
|
||||
type: 'error',
|
||||
icon: '✗',
|
||||
title: `${file.name} rejected`,
|
||||
desc: validation.reason
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.updateValidationDisplay(validationResults);
|
||||
return validFiles;
|
||||
}
|
||||
|
||||
validateSingleFile(file) {
|
||||
const maxSize = 50 * 1024 * 1024; // 50MB
|
||||
const allowedTypes = [
|
||||
'image/jpeg', 'image/png', 'image/gif', 'image/webp',
|
||||
'application/pdf', 'text/plain',
|
||||
'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/zip', 'application/x-rar-compressed'
|
||||
];
|
||||
|
||||
if (file.size > maxSize) {
|
||||
return { valid: false, reason: 'File size exceeds 50MB limit' };
|
||||
}
|
||||
|
||||
if (!allowedTypes.includes(file.type) && !this.isValidExtension(file.name)) {
|
||||
return { valid: false, reason: 'File type not supported' };
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
isValidExtension(filename) {
|
||||
const validExtensions = ['.txt', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.zip', '.rar'];
|
||||
return validExtensions.some(ext => filename.toLowerCase().endsWith(ext));
|
||||
}
|
||||
|
||||
uploadFiles(files) {
|
||||
this.isUploading = true;
|
||||
this.progressContainer.innerHTML = '';
|
||||
|
||||
files.forEach((file, index) => {
|
||||
this.uploadSingleFile(file, index);
|
||||
});
|
||||
}
|
||||
|
||||
uploadSingleFile(file, index) {
|
||||
const progressItem = this.createProgressItem(file);
|
||||
this.progressContainer.appendChild(progressItem);
|
||||
|
||||
// Simulate upload progress
|
||||
let progress = 0;
|
||||
const progressBar = progressItem.querySelector('.progress-fill');
|
||||
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress >= 100) {
|
||||
progress = 100;
|
||||
clearInterval(interval);
|
||||
this.completeUpload(file, progressItem);
|
||||
}
|
||||
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
createProgressItem(file) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'progress-item animate-in';
|
||||
item.innerHTML = `
|
||||
<div class="progress-header">
|
||||
<span class="filename">${file.name}</span>
|
||||
<span class="file-size">${this.formatFileSize(file.size)}</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 0%"></div>
|
||||
</div>
|
||||
`;
|
||||
return item;
|
||||
}
|
||||
|
||||
completeUpload(file, progressItem) {
|
||||
this.uploadedFiles.push(file);
|
||||
|
||||
// Add to file browser
|
||||
this.addToFileBrowser(file);
|
||||
|
||||
// Update validation
|
||||
this.updateValidationDisplay([{
|
||||
type: 'success',
|
||||
icon: '✓',
|
||||
title: 'Upload completed',
|
||||
desc: `${file.name} successfully uploaded`
|
||||
}]);
|
||||
|
||||
// Update progress item
|
||||
setTimeout(() => {
|
||||
progressItem.style.transform = 'scale(0.95)';
|
||||
progressItem.style.opacity = '0.7';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
addToFileBrowser(file) {
|
||||
const fileCard = document.createElement('div');
|
||||
fileCard.className = 'file-card animate-in';
|
||||
fileCard.setAttribute('data-filename', file.name);
|
||||
fileCard.setAttribute('data-type', this.getFileType(file));
|
||||
fileCard.setAttribute('tabindex', '0');
|
||||
|
||||
const icon = this.getFileIcon(file);
|
||||
fileCard.innerHTML = `
|
||||
<div class="file-icon">${icon}</div>
|
||||
<div class="file-name">${file.name}</div>
|
||||
`;
|
||||
|
||||
this.fileGrid.insertBefore(fileCard, this.fileGrid.firstChild);
|
||||
}
|
||||
|
||||
getFileType(file) {
|
||||
if (file.type.startsWith('image/')) return 'image';
|
||||
if (file.type === 'application/pdf') return 'pdf';
|
||||
if (file.type.includes('word')) return 'document';
|
||||
if (file.type.includes('zip') || file.type.includes('rar')) return 'archive';
|
||||
return 'file';
|
||||
}
|
||||
|
||||
getFileIcon(file) {
|
||||
const type = this.getFileType(file);
|
||||
const icons = {
|
||||
'image': '🖼️',
|
||||
'pdf': '📄',
|
||||
'document': '📝',
|
||||
'archive': '📦',
|
||||
'file': '📄'
|
||||
};
|
||||
return icons[type] || '📄';
|
||||
}
|
||||
|
||||
handleSearch(e) {
|
||||
const query = e.target.value.toLowerCase();
|
||||
const fileCards = this.fileGrid.querySelectorAll('.file-card');
|
||||
|
||||
fileCards.forEach(card => {
|
||||
const filename = card.getAttribute('data-filename').toLowerCase();
|
||||
const visible = filename.includes(query);
|
||||
card.style.display = visible ? 'block' : 'none';
|
||||
|
||||
if (visible && query) {
|
||||
card.style.animation = 'none';
|
||||
card.offsetHeight; // Trigger reflow
|
||||
card.style.animation = 'slideInUp 0.3s ease';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleFilePreview(e) {
|
||||
const fileCard = e.target.closest('.file-card');
|
||||
if (!fileCard) return;
|
||||
|
||||
const filename = fileCard.getAttribute('data-filename');
|
||||
const filetype = fileCard.getAttribute('data-type');
|
||||
|
||||
this.showPreview(filename, filetype);
|
||||
}
|
||||
|
||||
showPreview(filename, filetype) {
|
||||
const previewTitle = document.getElementById('previewTitle');
|
||||
previewTitle.textContent = `Preview: ${filename}`;
|
||||
|
||||
let content = '';
|
||||
|
||||
switch (filetype) {
|
||||
case 'image':
|
||||
content = `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 400px; height: 300px; background: rgba(255,255,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
|
||||
<span style="font-size: 4rem;">🖼️</span>
|
||||
</div>
|
||||
<p style="margin-top: 1rem; opacity: 0.8;">Image preview would appear here</p>
|
||||
</div>
|
||||
`;
|
||||
break;
|
||||
case 'pdf':
|
||||
content = `
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 400px; height: 500px; background: rgba(255,255,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
|
||||
<span style="font-size: 4rem;">📄</span>
|
||||
</div>
|
||||
<p style="margin-top: 1rem; opacity: 0.8;">PDF preview would appear here</p>
|
||||
</div>
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
content = `
|
||||
<div style="text-align: center; padding: 2rem;">
|
||||
<div style="font-size: 4rem; margin-bottom: 1rem;">📄</div>
|
||||
<h4 style="margin-bottom: 1rem;">${filename}</h4>
|
||||
<p style="opacity: 0.8;">Preview not available for this file type</p>
|
||||
<p style="opacity: 0.6; font-size: 0.9rem; margin-top: 1rem;">File type: ${filetype}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
this.previewBody.innerHTML = content;
|
||||
this.previewModal.classList.add('active');
|
||||
this.previewModal.setAttribute('aria-hidden', 'false');
|
||||
|
||||
// Focus management
|
||||
this.previewClose.focus();
|
||||
}
|
||||
|
||||
closePreview() {
|
||||
this.previewModal.classList.remove('active');
|
||||
this.previewModal.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
updateValidationDisplay(results) {
|
||||
if (results.length === 0) return;
|
||||
|
||||
this.validationContainer.innerHTML = '';
|
||||
|
||||
results.forEach(result => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'validation-item animate-in';
|
||||
item.innerHTML = `
|
||||
<div class="validation-icon ${result.type}">${result.icon}</div>
|
||||
<div class="validation-text">
|
||||
<div class="validation-title">${result.title}</div>
|
||||
<div class="validation-desc">${result.desc}</div>
|
||||
</div>
|
||||
`;
|
||||
this.validationContainer.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyboard(e) {
|
||||
// Escape key closes preview
|
||||
if (e.key === 'Escape' && this.previewModal.classList.contains('active')) {
|
||||
this.closePreview();
|
||||
}
|
||||
|
||||
// Enter key on file cards opens preview
|
||||
if (e.key === 'Enter' && e.target.classList.contains('file-card')) {
|
||||
this.handleFilePreview(e);
|
||||
}
|
||||
|
||||
// Enter key on upload zone opens file picker
|
||||
if (e.key === 'Enter' && e.target === this.uploadZone) {
|
||||
this.fileInput.click();
|
||||
}
|
||||
}
|
||||
|
||||
formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the file manager when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new GlassFileManager();
|
||||
});
|
||||
|
||||
// Add some dynamic glass effects
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const panels = document.querySelectorAll('.glass-panel');
|
||||
panels.forEach(panel => {
|
||||
const rect = panel.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
|
||||
panel.style.setProperty('--mouse-x', `${x}%`);
|
||||
panel.style.setProperty('--mouse-y', `${y}%`);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,678 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Organic Nature Search Hub - UI Hybrid 11</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Animated background leaves */
|
||||
.leaf {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0.1;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.leaf:before {
|
||||
content: '🌿';
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
25% { transform: translateY(-20px) rotate(45deg); }
|
||||
50% { transform: translateY(10px) rotate(-45deg); }
|
||||
75% { transform: translateY(-10px) rotate(180deg); }
|
||||
}
|
||||
|
||||
/* Main container */
|
||||
.search-ecosystem {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 30px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(76, 175, 80, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-ecosystem::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(139, 195, 74, 0.1) 0%, transparent 70%);
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.5; }
|
||||
50% { transform: scale(1.1); opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* Title with growing animation */
|
||||
.eco-title {
|
||||
text-align: center;
|
||||
color: #2e7d32;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eco-title span {
|
||||
display: inline-block;
|
||||
animation: grow 0.5s ease-out forwards;
|
||||
animation-delay: calc(var(--i) * 0.1s);
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search container with organic shape */
|
||||
.search-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
|
||||
border-radius: 60px;
|
||||
padding: 5px;
|
||||
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-wrapper:focus-within {
|
||||
transform: scale(1.02);
|
||||
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 20px 60px 20px 30px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.2em;
|
||||
color: #1b5e20;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #4caf50;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-icon:hover {
|
||||
background: #66bb6a;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.search-icon:before {
|
||||
content: '🔍';
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Filter tags with leaf shapes */
|
||||
.filter-tags {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 25px;
|
||||
flex-wrap: wrap;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
background: linear-gradient(45deg, #a5d6a7 0%, #81c784 100%);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.filter-tag:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-tag:hover:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.filter-tag.active {
|
||||
background: linear-gradient(45deg, #388e3c 0%, #2e7d32 100%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Autocomplete suggestions with vine animation */
|
||||
.autocomplete {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease, opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.autocomplete.show {
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
padding: 15px 25px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.suggestion:hover {
|
||||
background: #e8f5e9;
|
||||
border-left-color: #4caf50;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.suggestion:before {
|
||||
content: '🌱';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.suggestion:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Recent searches with growth animation */
|
||||
.recent-searches {
|
||||
margin-bottom: 30px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #388e3c;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title:before {
|
||||
content: '🌿';
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.recent-items {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%);
|
||||
padding: 12px 20px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
animation: bloomIn 0.5s ease-out forwards;
|
||||
animation-delay: calc(var(--i) * 0.1s);
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-10deg);
|
||||
}
|
||||
|
||||
@keyframes bloomIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
/* Results preview with organic cards */
|
||||
.results-preview {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid #81c784;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: growFromSeed 0.6s ease-out forwards;
|
||||
animation-delay: calc(var(--i) * 0.15s);
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.9);
|
||||
}
|
||||
|
||||
@keyframes growFromSeed {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
border-left-color: #4caf50;
|
||||
}
|
||||
|
||||
.result-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(139, 195, 74, 0.1) 0%, transparent 50%);
|
||||
transition: top 0.5s ease;
|
||||
}
|
||||
|
||||
.result-card:hover:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
color: #2e7d32;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
font-size: 0.85em;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loading.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plant-loader {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plant-loader:before {
|
||||
content: '🌱';
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
animation: growPlant 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes growPlant {
|
||||
0%, 100% { transform: scale(0.8) rotate(-5deg); }
|
||||
50% { transform: scale(1.2) rotate(5deg); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.search-ecosystem {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.eco-title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.filter-tags {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
padding: 8px 15px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Floating leaves background -->
|
||||
<div class="leaf" style="top: 10%; left: 5%; animation-delay: 0s;"></div>
|
||||
<div class="leaf" style="top: 20%; right: 10%; animation-delay: 2s;"></div>
|
||||
<div class="leaf" style="bottom: 30%; left: 15%; animation-delay: 4s;"></div>
|
||||
<div class="leaf" style="bottom: 10%; right: 20%; animation-delay: 6s;"></div>
|
||||
<div class="leaf" style="top: 50%; left: 80%; animation-delay: 8s;"></div>
|
||||
|
||||
<div class="search-ecosystem">
|
||||
<h1 class="eco-title">
|
||||
<span style="--i:0">O</span><span style="--i:1">r</span><span style="--i:2">g</span><span style="--i:3">a</span><span style="--i:4">n</span><span style="--i:5">i</span><span style="--i:6">c</span>
|
||||
<span style="--i:7"> </span>
|
||||
<span style="--i:8">S</span><span style="--i:9">e</span><span style="--i:10">a</span><span style="--i:11">r</span><span style="--i:12">c</span><span style="--i:13">h</span>
|
||||
</h1>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-wrapper">
|
||||
<input type="text" class="search-input" placeholder="Let your search grow naturally..." id="searchInput">
|
||||
<div class="search-icon" onclick="performSearch()"></div>
|
||||
|
||||
<div class="autocomplete" id="autocomplete">
|
||||
<div class="suggestion">Sustainable gardening practices</div>
|
||||
<div class="suggestion">Organic composting methods</div>
|
||||
<div class="suggestion">Native plant species guide</div>
|
||||
<div class="suggestion">Permaculture design principles</div>
|
||||
<div class="suggestion">Natural pest control solutions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-tags">
|
||||
<button class="filter-tag active" onclick="toggleFilter(this)">All Seeds</button>
|
||||
<button class="filter-tag" onclick="toggleFilter(this)">Garden Tips</button>
|
||||
<button class="filter-tag" onclick="toggleFilter(this)">Plant Care</button>
|
||||
<button class="filter-tag" onclick="toggleFilter(this)">Eco Living</button>
|
||||
<button class="filter-tag" onclick="toggleFilter(this)">Seasonal</button>
|
||||
</div>
|
||||
|
||||
<div class="recent-searches">
|
||||
<h3 class="section-title">Recently Planted Searches</h3>
|
||||
<div class="recent-items">
|
||||
<div class="recent-item" style="--i:0" onclick="quickSearch(this)">Indoor herbs</div>
|
||||
<div class="recent-item" style="--i:1" onclick="quickSearch(this)">Butterfly gardens</div>
|
||||
<div class="recent-item" style="--i:2" onclick="quickSearch(this)">Rain harvesting</div>
|
||||
<div class="recent-item" style="--i:3" onclick="quickSearch(this)">Companion planting</div>
|
||||
<div class="recent-item" style="--i:4" onclick="quickSearch(this)">Soil health</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="plant-loader"></div>
|
||||
<p style="color: #4caf50; margin-top: 20px;">Growing your results...</p>
|
||||
</div>
|
||||
|
||||
<div class="results-preview" id="results">
|
||||
<h3 class="section-title">Sprouting Results</h3>
|
||||
<div class="result-card" style="--i:0">
|
||||
<h4 class="result-title">Creating a Thriving Indoor Herb Garden</h4>
|
||||
<p class="result-description">Discover the secrets to growing fresh herbs year-round in your kitchen. From basil to thyme, learn the perfect conditions for each herb species.</p>
|
||||
<div class="result-meta">
|
||||
<span>🌿 Plant Care</span>
|
||||
<span>📅 5 days ago</span>
|
||||
<span>⭐ 4.8 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-card" style="--i:1">
|
||||
<h4 class="result-title">Companion Planting: Nature's Partnership</h4>
|
||||
<p class="result-description">Learn which plants grow better together. This ancient technique can improve yield, reduce pests, and create a balanced ecosystem in your garden.</p>
|
||||
<div class="result-meta">
|
||||
<span>🌱 Garden Tips</span>
|
||||
<span>📅 1 week ago</span>
|
||||
<span>⭐ 4.9 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-card" style="--i:2">
|
||||
<h4 class="result-title">Natural Composting Methods for Rich Soil</h4>
|
||||
<p class="result-description">Transform kitchen scraps and yard waste into black gold for your garden. Step-by-step guide to creating nutrient-rich compost naturally.</p>
|
||||
<div class="result-meta">
|
||||
<span>♻️ Eco Living</span>
|
||||
<span>📅 2 weeks ago</span>
|
||||
<span>⭐ 5.0 rating</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const autocomplete = document.getElementById('autocomplete');
|
||||
const results = document.getElementById('results');
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
// Sample data for dynamic results
|
||||
const searchData = {
|
||||
'sustainable': [
|
||||
{
|
||||
title: 'Sustainable Water Management in Gardens',
|
||||
description: 'Innovative techniques for conserving water while maintaining a lush garden ecosystem.',
|
||||
category: 'Eco Living',
|
||||
date: '3 days ago',
|
||||
rating: '4.7'
|
||||
},
|
||||
{
|
||||
title: 'Building Sustainable Garden Structures',
|
||||
description: 'Use reclaimed materials to create beautiful and functional garden features.',
|
||||
category: 'Garden Tips',
|
||||
date: '1 week ago',
|
||||
rating: '4.6'
|
||||
}
|
||||
],
|
||||
'organic': [
|
||||
{
|
||||
title: 'Organic Fertilizers: Feed Your Soil Naturally',
|
||||
description: 'Compare different organic fertilizers and learn when and how to apply them.',
|
||||
category: 'Plant Care',
|
||||
date: '2 days ago',
|
||||
rating: '4.9'
|
||||
},
|
||||
{
|
||||
title: 'Starting an Organic Vegetable Garden',
|
||||
description: 'Everything you need to know about growing vegetables without synthetic chemicals.',
|
||||
category: 'Garden Tips',
|
||||
date: '5 days ago',
|
||||
rating: '5.0'
|
||||
}
|
||||
],
|
||||
'native': [
|
||||
{
|
||||
title: 'Native Plants for Pollinators',
|
||||
description: 'Attract bees, butterflies, and birds with these beautiful native species.',
|
||||
category: 'Plant Care',
|
||||
date: '1 day ago',
|
||||
rating: '4.8'
|
||||
},
|
||||
{
|
||||
title: 'Landscaping with Native Grasses',
|
||||
description: 'Low-maintenance alternatives to traditional lawns using local grass species.',
|
||||
category: 'Eco Living',
|
||||
date: '4 days ago',
|
||||
rating: '4.7'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Autocomplete functionality
|
||||
searchInput.addEventListener('input', function() {
|
||||
if (this.value.length > 0) {
|
||||
autocomplete.classList.add('show');
|
||||
} else {
|
||||
autocomplete.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener('blur', function() {
|
||||
setTimeout(() => {
|
||||
autocomplete.classList.remove('show');
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
function performSearch() {
|
||||
const query = searchInput.value.toLowerCase();
|
||||
if (!query) return;
|
||||
|
||||
loading.classList.add('show');
|
||||
results.style.display = 'none';
|
||||
|
||||
setTimeout(() => {
|
||||
loading.classList.remove('show');
|
||||
displayResults(query);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function displayResults(query) {
|
||||
results.style.display = 'block';
|
||||
const resultsContainer = results.querySelector('h3').nextElementSibling;
|
||||
|
||||
// Clear existing results except the title
|
||||
while (resultsContainer) {
|
||||
resultsContainer.remove();
|
||||
}
|
||||
|
||||
// Find matching results
|
||||
let matchingResults = [];
|
||||
for (let key in searchData) {
|
||||
if (query.includes(key)) {
|
||||
matchingResults = matchingResults.concat(searchData[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// If no specific matches, show default results
|
||||
if (matchingResults.length === 0) {
|
||||
matchingResults = [
|
||||
{
|
||||
title: `Results for "${query}"`,
|
||||
description: 'Exploring new territories in sustainable gardening and organic living.',
|
||||
category: 'Search Results',
|
||||
date: 'Just now',
|
||||
rating: '4.5'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// Add results with animation
|
||||
matchingResults.forEach((result, index) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'result-card';
|
||||
card.style.setProperty('--i', index);
|
||||
card.innerHTML = `
|
||||
<h4 class="result-title">${result.title}</h4>
|
||||
<p class="result-description">${result.description}</p>
|
||||
<div class="result-meta">
|
||||
<span>🌿 ${result.category}</span>
|
||||
<span>📅 ${result.date}</span>
|
||||
<span>⭐ ${result.rating} rating</span>
|
||||
</div>
|
||||
`;
|
||||
results.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Quick search from recent items
|
||||
function quickSearch(element) {
|
||||
searchInput.value = element.textContent;
|
||||
performSearch();
|
||||
}
|
||||
|
||||
// Filter toggle
|
||||
function toggleFilter(element) {
|
||||
document.querySelectorAll('.filter-tag').forEach(tag => {
|
||||
tag.classList.remove('active');
|
||||
});
|
||||
element.classList.add('active');
|
||||
}
|
||||
|
||||
// Autocomplete item click
|
||||
document.querySelectorAll('.suggestion').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
searchInput.value = this.textContent;
|
||||
autocomplete.classList.remove('show');
|
||||
performSearch();
|
||||
});
|
||||
});
|
||||
|
||||
// Enter key to search
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,941 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Glass Morphism Form Wizard - UI Hybrid 13</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 20s ease infinite;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Floating Glass Orbs */
|
||||
.glass-orb {
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50%;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.orb1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.orb2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 70%;
|
||||
right: 10%;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.orb3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 50%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
25% { transform: translate(50px, -50px) rotate(90deg); }
|
||||
50% { transform: translate(-50px, 50px) rotate(180deg); }
|
||||
75% { transform: translate(30px, 30px) rotate(270deg); }
|
||||
}
|
||||
|
||||
/* Main Wizard Container */
|
||||
.wizard-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 20px 50px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Progress Header */
|
||||
.progress-header {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.step-indicators {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.step-number::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: linear-gradient(45deg, #667eea, #f093fb);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.step-indicator.active .step-number::before,
|
||||
.step-indicator.completed .step-number::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.step-indicator.completed .step-number {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 10px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.step-indicator.active .step-label,
|
||||
.step-indicator.completed .step-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Progress Line */
|
||||
.progress-line {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-line-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #f093fb);
|
||||
width: 0%;
|
||||
transition: width 0.5s ease;
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
/* Form Content */
|
||||
.form-content {
|
||||
padding: 40px;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-step {
|
||||
display: none;
|
||||
animation: slideIn 0.5s ease;
|
||||
}
|
||||
|
||||
.form-step.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass Form Elements */
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.form-textarea:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
background: #2d3748;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Validation States */
|
||||
.form-group.error .form-input,
|
||||
.form-group.error .form-select,
|
||||
.form-group.error .form-textarea {
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.form-group.success .form-input,
|
||||
.form-group.success .form-select,
|
||||
.form-group.success .form-textarea {
|
||||
border-color: rgba(16, 185, 129, 0.5);
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 5px;
|
||||
color: #ef4444;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-group.error .error-message {
|
||||
display: block;
|
||||
animation: shake 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-10px); }
|
||||
75% { transform: translateX(10px); }
|
||||
}
|
||||
|
||||
/* Checkbox and Radio Glass Style */
|
||||
.checkbox-group,
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.checkbox-label,
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox-label:hover,
|
||||
.radio-label:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.radio-input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
accent-color: #667eea;
|
||||
}
|
||||
|
||||
/* Navigation Buttons */
|
||||
.form-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 30px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, #667eea, #f093fb);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, #667eea, #f093fb);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Save Progress */
|
||||
.save-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.save-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.save-indicator.saving .save-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Summary Step */
|
||||
.summary-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.summary-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Success Animation */
|
||||
.success-animation {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 30px;
|
||||
background: linear-gradient(45deg, #10b981, #34d399);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
animation: successPulse 1s ease;
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0% { transform: scale(0); opacity: 0; }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.step-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-navigation {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Floating Glass Orbs -->
|
||||
<div class="glass-orb orb1"></div>
|
||||
<div class="glass-orb orb2"></div>
|
||||
<div class="glass-orb orb3"></div>
|
||||
|
||||
<!-- Wizard Container -->
|
||||
<div class="wizard-container">
|
||||
<!-- Progress Header -->
|
||||
<div class="progress-header">
|
||||
<div class="step-indicators">
|
||||
<div class="step-indicator active" data-step="1">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-label">Personal Info</div>
|
||||
</div>
|
||||
<div class="step-indicator" data-step="2">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-label">Contact Details</div>
|
||||
</div>
|
||||
<div class="step-indicator" data-step="3">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-label">Preferences</div>
|
||||
</div>
|
||||
<div class="step-indicator" data-step="4">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-label">Review</div>
|
||||
</div>
|
||||
<div class="progress-line">
|
||||
<div class="progress-line-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Content -->
|
||||
<div class="form-content">
|
||||
<!-- Step 1: Personal Information -->
|
||||
<div class="form-step active" data-step="1">
|
||||
<h2 style="color: white; margin-bottom: 30px;">Personal Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" class="form-input" name="fullName" placeholder="Enter your full name" required>
|
||||
<span class="error-message">Please enter your full name</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Date of Birth</label>
|
||||
<input type="date" class="form-input" name="dateOfBirth" required>
|
||||
<span class="error-message">Please select your date of birth</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Gender</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<input type="radio" class="radio-input" name="gender" value="male">
|
||||
Male
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" class="radio-input" name="gender" value="female">
|
||||
Female
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" class="radio-input" name="gender" value="other">
|
||||
Other
|
||||
</label>
|
||||
</div>
|
||||
<span class="error-message">Please select your gender</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Occupation</label>
|
||||
<select class="form-select" name="occupation" required>
|
||||
<option value="">Select your occupation</option>
|
||||
<option value="student">Student</option>
|
||||
<option value="employed">Employed</option>
|
||||
<option value="self-employed">Self Employed</option>
|
||||
<option value="retired">Retired</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
<span class="error-message">Please select your occupation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Contact Details -->
|
||||
<div class="form-step" data-step="2">
|
||||
<h2 style="color: white; margin-bottom: 30px;">Contact Details</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email Address</label>
|
||||
<input type="email" class="form-input" name="email" placeholder="your@email.com" required>
|
||||
<span class="error-message">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Phone Number</label>
|
||||
<input type="tel" class="form-input" name="phone" placeholder="+1 (555) 123-4567" required>
|
||||
<span class="error-message">Please enter a valid phone number</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Address</label>
|
||||
<textarea class="form-textarea" name="address" rows="3" placeholder="Enter your full address" required></textarea>
|
||||
<span class="error-message">Please enter your address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Preferred Contact Method</label>
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="contactMethod" value="email">
|
||||
Email
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="contactMethod" value="phone">
|
||||
Phone
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="contactMethod" value="sms">
|
||||
SMS
|
||||
</label>
|
||||
</div>
|
||||
<span class="error-message">Please select at least one contact method</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Preferences -->
|
||||
<div class="form-step" data-step="3">
|
||||
<h2 style="color: white; margin-bottom: 30px;">Preferences</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Newsletter Subscription</label>
|
||||
<div class="radio-group">
|
||||
<label class="radio-label">
|
||||
<input type="radio" class="radio-input" name="newsletter" value="yes">
|
||||
Yes, subscribe me
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" class="radio-input" name="newsletter" value="no">
|
||||
No, thanks
|
||||
</label>
|
||||
</div>
|
||||
<span class="error-message">Please select an option</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Interests</label>
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="interests" value="technology">
|
||||
Technology
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="interests" value="design">
|
||||
Design
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="interests" value="business">
|
||||
Business
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="checkbox-input" name="interests" value="health">
|
||||
Health
|
||||
</label>
|
||||
</div>
|
||||
<span class="error-message">Please select at least one interest</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Additional Comments</label>
|
||||
<textarea class="form-textarea" name="comments" rows="4" placeholder="Any additional information you'd like to share..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Review -->
|
||||
<div class="form-step" data-step="4">
|
||||
<h2 style="color: white; margin-bottom: 30px;">Review Your Information</h2>
|
||||
|
||||
<div class="summary-content">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Full Name:</span>
|
||||
<span class="summary-value" id="summary-name">-</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Date of Birth:</span>
|
||||
<span class="summary-value" id="summary-dob">-</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Email:</span>
|
||||
<span class="summary-value" id="summary-email">-</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Phone:</span>
|
||||
<span class="summary-value" id="summary-phone">-</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Newsletter:</span>
|
||||
<span class="summary-value" id="summary-newsletter">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Animation -->
|
||||
<div class="success-animation">
|
||||
<div class="success-icon">✓</div>
|
||||
<h2 style="color: white; margin-bottom: 10px;">Submission Successful!</h2>
|
||||
<p style="color: rgba(255, 255, 255, 0.7);">Your information has been saved successfully.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="form-navigation">
|
||||
<div class="save-indicator" id="saveIndicator">
|
||||
<div class="save-icon"></div>
|
||||
<span id="saveText">All changes saved</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 15px;">
|
||||
<button class="btn" id="prevBtn" onclick="changeStep(-1)" disabled>Previous</button>
|
||||
<button class="btn btn-primary" id="nextBtn" onclick="changeStep(1)">Next</button>
|
||||
<button class="btn btn-primary" id="submitBtn" onclick="submitForm()" style="display: none;">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentStep = 1;
|
||||
const totalSteps = 4;
|
||||
const formData = {};
|
||||
|
||||
// Auto-save functionality
|
||||
let saveTimeout;
|
||||
function autoSave() {
|
||||
clearTimeout(saveTimeout);
|
||||
const saveIndicator = document.getElementById('saveIndicator');
|
||||
const saveText = document.getElementById('saveText');
|
||||
|
||||
saveIndicator.classList.add('saving');
|
||||
saveText.textContent = 'Saving...';
|
||||
|
||||
saveTimeout = setTimeout(() => {
|
||||
// Save to localStorage
|
||||
localStorage.setItem('wizardFormData', JSON.stringify(formData));
|
||||
localStorage.setItem('wizardCurrentStep', currentStep);
|
||||
|
||||
saveIndicator.classList.remove('saving');
|
||||
saveText.textContent = 'All changes saved';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Load saved data on page load
|
||||
window.addEventListener('load', () => {
|
||||
const savedData = localStorage.getItem('wizardFormData');
|
||||
const savedStep = localStorage.getItem('wizardCurrentStep');
|
||||
|
||||
if (savedData) {
|
||||
Object.assign(formData, JSON.parse(savedData));
|
||||
// Restore form values
|
||||
Object.keys(formData).forEach(key => {
|
||||
const elements = document.querySelectorAll(`[name="${key}"]`);
|
||||
elements.forEach(element => {
|
||||
if (element.type === 'radio' || element.type === 'checkbox') {
|
||||
element.checked = element.value === formData[key] ||
|
||||
(Array.isArray(formData[key]) && formData[key].includes(element.value));
|
||||
} else {
|
||||
element.value = formData[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (savedStep && savedStep !== '1') {
|
||||
currentStep = 1;
|
||||
changeStep(parseInt(savedStep) - 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Add input listeners for auto-save
|
||||
document.querySelectorAll('input, select, textarea').forEach(element => {
|
||||
element.addEventListener('input', () => {
|
||||
saveFormData();
|
||||
autoSave();
|
||||
});
|
||||
element.addEventListener('change', () => {
|
||||
saveFormData();
|
||||
autoSave();
|
||||
});
|
||||
});
|
||||
|
||||
function saveFormData() {
|
||||
const currentStepElement = document.querySelector(`.form-step[data-step="${currentStep}"]`);
|
||||
const inputs = currentStepElement.querySelectorAll('input, select, textarea');
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (input.type === 'radio') {
|
||||
if (input.checked) {
|
||||
formData[input.name] = input.value;
|
||||
}
|
||||
} else if (input.type === 'checkbox') {
|
||||
if (!formData[input.name]) formData[input.name] = [];
|
||||
if (input.checked && !formData[input.name].includes(input.value)) {
|
||||
formData[input.name].push(input.value);
|
||||
} else if (!input.checked && formData[input.name].includes(input.value)) {
|
||||
formData[input.name] = formData[input.name].filter(v => v !== input.value);
|
||||
}
|
||||
} else {
|
||||
formData[input.name] = input.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function validateStep(step) {
|
||||
const stepElement = document.querySelector(`.form-step[data-step="${step}"]`);
|
||||
const requiredInputs = stepElement.querySelectorAll('[required]');
|
||||
let isValid = true;
|
||||
|
||||
requiredInputs.forEach(input => {
|
||||
const formGroup = input.closest('.form-group');
|
||||
|
||||
if (input.type === 'radio') {
|
||||
const radioGroup = stepElement.querySelectorAll(`input[name="${input.name}"]`);
|
||||
const isChecked = Array.from(radioGroup).some(radio => radio.checked);
|
||||
|
||||
if (!isChecked) {
|
||||
formGroup.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
formGroup.classList.remove('error');
|
||||
}
|
||||
} else if (input.name === 'contactMethod') {
|
||||
const checkboxes = stepElement.querySelectorAll(`input[name="${input.name}"]`);
|
||||
const isChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
|
||||
|
||||
if (!isChecked) {
|
||||
formGroup.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
formGroup.classList.remove('error');
|
||||
}
|
||||
} else if (input.type === 'email') {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(input.value)) {
|
||||
formGroup.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
formGroup.classList.remove('error');
|
||||
formGroup.classList.add('success');
|
||||
}
|
||||
} else if (!input.value.trim()) {
|
||||
formGroup.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
formGroup.classList.remove('error');
|
||||
formGroup.classList.add('success');
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function changeStep(direction) {
|
||||
// Validate current step before moving forward
|
||||
if (direction > 0 && !validateStep(currentStep)) {
|
||||
return;
|
||||
}
|
||||
|
||||
saveFormData();
|
||||
|
||||
const newStep = currentStep + direction;
|
||||
if (newStep < 1 || newStep > totalSteps) return;
|
||||
|
||||
// Hide current step
|
||||
document.querySelector(`.form-step[data-step="${currentStep}"]`).classList.remove('active');
|
||||
document.querySelector(`.step-indicator[data-step="${currentStep}"]`).classList.remove('active');
|
||||
|
||||
if (direction > 0) {
|
||||
document.querySelector(`.step-indicator[data-step="${currentStep}"]`).classList.add('completed');
|
||||
}
|
||||
|
||||
// Show new step
|
||||
currentStep = newStep;
|
||||
document.querySelector(`.form-step[data-step="${currentStep}"]`).classList.add('active');
|
||||
document.querySelector(`.step-indicator[data-step="${currentStep}"]`).classList.add('active');
|
||||
|
||||
// Update progress bar
|
||||
const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
|
||||
document.querySelector('.progress-line-fill').style.width = progressPercentage + '%';
|
||||
|
||||
// Update navigation buttons
|
||||
document.getElementById('prevBtn').disabled = currentStep === 1;
|
||||
|
||||
if (currentStep === totalSteps) {
|
||||
document.getElementById('nextBtn').style.display = 'none';
|
||||
document.getElementById('submitBtn').style.display = 'block';
|
||||
updateSummary();
|
||||
} else {
|
||||
document.getElementById('nextBtn').style.display = 'block';
|
||||
document.getElementById('submitBtn').style.display = 'none';
|
||||
}
|
||||
|
||||
// Remove completed class from future steps
|
||||
for (let i = currentStep + 1; i <= totalSteps; i++) {
|
||||
document.querySelector(`.step-indicator[data-step="${i}"]`).classList.remove('completed');
|
||||
}
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
document.getElementById('summary-name').textContent = formData.fullName || '-';
|
||||
document.getElementById('summary-dob').textContent = formData.dateOfBirth || '-';
|
||||
document.getElementById('summary-email').textContent = formData.email || '-';
|
||||
document.getElementById('summary-phone').textContent = formData.phone || '-';
|
||||
document.getElementById('summary-newsletter').textContent =
|
||||
formData.newsletter === 'yes' ? 'Subscribed' : 'Not Subscribed';
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
// Show success animation
|
||||
document.querySelector(`.form-step[data-step="${currentStep}"]`).style.display = 'none';
|
||||
document.querySelector('.success-animation').style.display = 'block';
|
||||
|
||||
// Clear saved data
|
||||
localStorage.removeItem('wizardFormData');
|
||||
localStorage.removeItem('wizardCurrentStep');
|
||||
|
||||
// Log form data (in real app, would send to server)
|
||||
console.log('Form submitted:', formData);
|
||||
|
||||
// Reset after delay
|
||||
setTimeout(() => {
|
||||
if (confirm('Would you like to fill out another form?')) {
|
||||
location.reload();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Add real-time validation
|
||||
document.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(input => {
|
||||
input.addEventListener('blur', () => {
|
||||
const formGroup = input.closest('.form-group');
|
||||
|
||||
if (input.hasAttribute('required')) {
|
||||
if (input.type === 'email') {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (emailRegex.test(input.value)) {
|
||||
formGroup.classList.remove('error');
|
||||
formGroup.classList.add('success');
|
||||
} else if (input.value) {
|
||||
formGroup.classList.add('error');
|
||||
}
|
||||
} else if (input.value.trim()) {
|
||||
formGroup.classList.remove('error');
|
||||
formGroup.classList.add('success');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,872 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zen Dashboard Widget - Hybrid UI Component</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Zen Container */
|
||||
.zen-dashboard {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
animation: breathe 6s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-5px) scale(1.01); }
|
||||
}
|
||||
|
||||
/* Zen Orb Background */
|
||||
.zen-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(108, 117, 125, 0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.zen-orb:nth-child(1) {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.zen-orb:nth-child(2) {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
33% { transform: translate(30px, -30px) rotate(120deg); }
|
||||
66% { transform: translate(-20px, 20px) rotate(240deg); }
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 28px;
|
||||
color: #2c3e50;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Control Buttons */
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease 0.2s forwards;
|
||||
}
|
||||
|
||||
.zen-button {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zen-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.zen-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(108, 117, 125, 0.1);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.zen-button:active::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Chart Container */
|
||||
.chart-container {
|
||||
background: #fafbfc;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease 0.4s forwards;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
color: #495057;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chart-type-selector {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-type-btn {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #6c757d;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chart-type-btn.active {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
/* Canvas Chart */
|
||||
#zenChart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Filter Section */
|
||||
.filter-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease 0.6s forwards;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-group:hover {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #6c757d;
|
||||
box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.1);
|
||||
}
|
||||
|
||||
/* Alert Section */
|
||||
.alert-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease 0.8s forwards;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.8; }
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.alert-dismiss {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.alert-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Settings Modal */
|
||||
.settings-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.settings-modal.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-modal.active .settings-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
font-size: 20px;
|
||||
color: #2c3e50;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.close-settings {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.close-settings:hover {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-switch.active {
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toggle-switch.active .toggle-slider {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* Zen Loading Animation */
|
||||
.zen-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zen-loader.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zen-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #e0e0e0;
|
||||
border-top-color: #6c757d;
|
||||
border-radius: 50%;
|
||||
animation: zenSpin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes zenSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.zen-dashboard {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="zen-dashboard">
|
||||
<!-- Zen Orbs -->
|
||||
<div class="zen-orb"></div>
|
||||
<div class="zen-orb"></div>
|
||||
|
||||
<!-- Dashboard Header -->
|
||||
<div class="dashboard-header">
|
||||
<h1 class="dashboard-title">Mindful Analytics</h1>
|
||||
<div class="control-buttons">
|
||||
<button class="zen-button" onclick="refreshData()">
|
||||
<span>🔄 Refresh</span>
|
||||
</button>
|
||||
<button class="zen-button" onclick="exportData()">
|
||||
<span>📊 Export</span>
|
||||
</button>
|
||||
<button class="zen-button" onclick="toggleSettings()">
|
||||
<span>⚙️ Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Container -->
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2 class="chart-title">Flow Visualization</h2>
|
||||
<div class="chart-type-selector">
|
||||
<button class="chart-type-btn active" onclick="changeChartType('line')">Line</button>
|
||||
<button class="chart-type-btn" onclick="changeChartType('bar')">Bar</button>
|
||||
<button class="chart-type-btn" onclick="changeChartType('area')">Area</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="zenChart"></canvas>
|
||||
<div class="zen-loader">
|
||||
<div class="zen-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Time Period</label>
|
||||
<select class="filter-select" onchange="applyFilter('period', this.value)">
|
||||
<option value="day">Today</option>
|
||||
<option value="week" selected>This Week</option>
|
||||
<option value="month">This Month</option>
|
||||
<option value="year">This Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Category</label>
|
||||
<select class="filter-select" onchange="applyFilter('category', this.value)">
|
||||
<option value="all">All Categories</option>
|
||||
<option value="meditation">Meditation</option>
|
||||
<option value="focus">Focus</option>
|
||||
<option value="energy">Energy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">View Mode</label>
|
||||
<select class="filter-select" onchange="applyFilter('mode', this.value)">
|
||||
<option value="summary">Summary</option>
|
||||
<option value="detailed">Detailed</option>
|
||||
<option value="comparison">Comparison</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Section -->
|
||||
<div class="alert-section" id="alertSection">
|
||||
<div class="alert-icon">✨</div>
|
||||
<div class="alert-content">
|
||||
<div class="alert-title">Mindful Moment</div>
|
||||
<div class="alert-message">Your focus levels have increased by 25% this week. Keep up the great work!</div>
|
||||
</div>
|
||||
<button class="alert-dismiss" onclick="dismissAlert()">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="settings-modal" id="settingsModal">
|
||||
<div class="settings-content">
|
||||
<div class="settings-header">
|
||||
<h2 class="settings-title">Dashboard Settings</h2>
|
||||
<button class="close-settings" onclick="toggleSettings()">×</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label class="setting-label">Enable Animations</label>
|
||||
<div class="setting-toggle">
|
||||
<div class="toggle-switch active" onclick="toggleSetting(this)">
|
||||
<div class="toggle-slider"></div>
|
||||
</div>
|
||||
<span>Smooth transitions and effects</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label class="setting-label">Auto Refresh</label>
|
||||
<div class="setting-toggle">
|
||||
<div class="toggle-switch" onclick="toggleSetting(this)">
|
||||
<div class="toggle-slider"></div>
|
||||
</div>
|
||||
<span>Update data every 5 minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label class="setting-label">Mindful Notifications</label>
|
||||
<div class="setting-toggle">
|
||||
<div class="toggle-switch active" onclick="toggleSetting(this)">
|
||||
<div class="toggle-slider"></div>
|
||||
</div>
|
||||
<span>Gentle reminders and insights</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label class="setting-label">Dark Mode</label>
|
||||
<div class="setting-toggle">
|
||||
<div class="toggle-switch" onclick="toggleSetting(this)">
|
||||
<div class="toggle-slider"></div>
|
||||
</div>
|
||||
<span>Reduce eye strain at night</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Chart configuration
|
||||
let currentChartType = 'line';
|
||||
let chartData = {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Focus Level',
|
||||
data: [65, 72, 78, 75, 82, 88, 85],
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
};
|
||||
|
||||
// Initialize chart
|
||||
const canvas = document.getElementById('zenChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let animationFrame;
|
||||
|
||||
function drawChart() {
|
||||
const width = canvas.width = canvas.offsetWidth;
|
||||
const height = canvas.height = canvas.offsetHeight;
|
||||
const padding = 40;
|
||||
const chartWidth = width - padding * 2;
|
||||
const chartHeight = height - padding * 2;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw grid
|
||||
ctx.strokeStyle = '#e0e0e0';
|
||||
ctx.lineWidth = 0.5;
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const y = padding + (chartHeight / 5) * i;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, y);
|
||||
ctx.lineTo(width - padding, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw data
|
||||
const dataset = chartData.datasets[0];
|
||||
const maxValue = Math.max(...dataset.data);
|
||||
const points = dataset.data.map((value, index) => ({
|
||||
x: padding + (chartWidth / (dataset.data.length - 1)) * index,
|
||||
y: height - padding - (value / maxValue) * chartHeight
|
||||
}));
|
||||
|
||||
if (currentChartType === 'line') {
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = dataset.borderColor;
|
||||
ctx.lineWidth = 3;
|
||||
points.forEach((point, index) => {
|
||||
if (index === 0) {
|
||||
ctx.moveTo(point.x, point.y);
|
||||
} else {
|
||||
const prevPoint = points[index - 1];
|
||||
const cp1x = prevPoint.x + (point.x - prevPoint.x) / 2;
|
||||
const cp1y = prevPoint.y;
|
||||
const cp2x = prevPoint.x + (point.x - prevPoint.x) / 2;
|
||||
const cp2y = point.y;
|
||||
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, point.x, point.y);
|
||||
}
|
||||
});
|
||||
ctx.stroke();
|
||||
|
||||
// Draw area
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = dataset.backgroundColor;
|
||||
ctx.moveTo(points[0].x, height - padding);
|
||||
points.forEach(point => ctx.lineTo(point.x, point.y));
|
||||
ctx.lineTo(points[points.length - 1].x, height - padding);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
// Draw points
|
||||
points.forEach(point => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = dataset.borderColor;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
});
|
||||
} else if (currentChartType === 'bar') {
|
||||
const barWidth = chartWidth / dataset.data.length * 0.6;
|
||||
const barSpacing = chartWidth / dataset.data.length * 0.4;
|
||||
|
||||
dataset.data.forEach((value, index) => {
|
||||
const barHeight = (value / maxValue) * chartHeight;
|
||||
const x = padding + (barWidth + barSpacing) * index + barSpacing / 2;
|
||||
const y = height - padding - barHeight;
|
||||
|
||||
ctx.fillStyle = dataset.borderColor;
|
||||
ctx.fillRect(x, y, barWidth, barHeight);
|
||||
});
|
||||
} else if (currentChartType === 'area') {
|
||||
// Draw filled area with gradient
|
||||
const gradient = ctx.createLinearGradient(0, padding, 0, height - padding);
|
||||
gradient.addColorStop(0, 'rgba(102, 126, 234, 0.4)');
|
||||
gradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.moveTo(points[0].x, height - padding);
|
||||
points.forEach(point => ctx.lineTo(point.x, point.y));
|
||||
ctx.lineTo(points[points.length - 1].x, height - padding);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Draw labels
|
||||
ctx.fillStyle = '#6c757d';
|
||||
ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
chartData.labels.forEach((label, index) => {
|
||||
const x = padding + (chartWidth / (chartData.labels.length - 1)) * index;
|
||||
ctx.fillText(label, x, height - padding + 20);
|
||||
});
|
||||
}
|
||||
|
||||
// Chart functions
|
||||
function changeChartType(type) {
|
||||
currentChartType = type;
|
||||
document.querySelectorAll('.chart-type-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
drawChart();
|
||||
}
|
||||
|
||||
// Data functions
|
||||
function refreshData() {
|
||||
const loader = document.querySelector('.zen-loader');
|
||||
loader.classList.add('active');
|
||||
|
||||
// Simulate data refresh
|
||||
setTimeout(() => {
|
||||
// Generate new random data
|
||||
chartData.datasets[0].data = chartData.datasets[0].data.map(() =>
|
||||
Math.floor(Math.random() * 30) + 60
|
||||
);
|
||||
drawChart();
|
||||
loader.classList.remove('active');
|
||||
showNotification('Data refreshed successfully');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function exportData() {
|
||||
const data = {
|
||||
title: 'Mindful Analytics Export',
|
||||
date: new Date().toISOString(),
|
||||
chartType: currentChartType,
|
||||
data: chartData
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `mindful-analytics-${Date.now()}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showNotification('Data exported successfully');
|
||||
}
|
||||
|
||||
function applyFilter(filterType, value) {
|
||||
console.log(`Applying filter: ${filterType} = ${value}`);
|
||||
// Simulate filter application
|
||||
refreshData();
|
||||
}
|
||||
|
||||
// UI functions
|
||||
function toggleSettings() {
|
||||
const modal = document.getElementById('settingsModal');
|
||||
modal.classList.toggle('active');
|
||||
}
|
||||
|
||||
function toggleSetting(element) {
|
||||
element.classList.toggle('active');
|
||||
}
|
||||
|
||||
function dismissAlert() {
|
||||
const alertSection = document.getElementById('alertSection');
|
||||
alertSection.style.transition = 'all 0.5s ease';
|
||||
alertSection.style.opacity = '0';
|
||||
alertSection.style.transform = 'translateX(100%)';
|
||||
setTimeout(() => {
|
||||
alertSection.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function showNotification(message) {
|
||||
// Create temporary notification
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
animation: slideIn 0.5s ease, slideOut 0.5s ease 2s forwards;
|
||||
z-index: 1001;
|
||||
`;
|
||||
notification.textContent = message;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
// Add notification animations
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('load', () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
animationFrame = requestAnimationFrame(drawChart);
|
||||
});
|
||||
|
||||
// Auto-refresh simulation
|
||||
let autoRefreshInterval;
|
||||
function toggleAutoRefresh(enabled) {
|
||||
if (enabled) {
|
||||
autoRefreshInterval = setInterval(() => {
|
||||
refreshData();
|
||||
}, 300000); // 5 minutes
|
||||
} else {
|
||||
clearInterval(autoRefreshInterval);
|
||||
}
|
||||
}
|
||||
|
||||
// Mindful reminder
|
||||
setTimeout(() => {
|
||||
showNotification('Remember to take a mindful breath 🧘');
|
||||
}, 10000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,946 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Industrial File Manager - Hybrid UI Component</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Industrial Grid Background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,165,0,0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,165,0,0.05) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
pointer-events: none;
|
||||
animation: gridShift 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridShift {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.file-manager {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
height: 80vh;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
border: 2px solid #ff6600;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
gap: 2px;
|
||||
box-shadow:
|
||||
0 0 50px rgba(255,102,0,0.3),
|
||||
inset 0 0 100px rgba(255,102,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Industrial Corner Brackets */
|
||||
.file-manager::before,
|
||||
.file-manager::after,
|
||||
.corner-bracket-top,
|
||||
.corner-bracket-bottom {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #ff6600;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.file-manager::before {
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-manager::after {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.corner-bracket-top {
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.corner-bracket-bottom {
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Panel Styles */
|
||||
.panel {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 100%);
|
||||
padding: 15px;
|
||||
border-bottom: 2px solid #ff6600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff6600, transparent);
|
||||
animation: scanLine 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #ff6600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Left Panel - File Browser */
|
||||
.file-browser {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,102,0,0.3), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.file-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
border-color: #ff6600;
|
||||
transform: translateX(5px);
|
||||
box-shadow: -5px 0 10px rgba(255,102,0,0.3);
|
||||
}
|
||||
|
||||
.file-item.active {
|
||||
background: #333;
|
||||
border-color: #ff6600;
|
||||
box-shadow: inset 0 0 20px rgba(255,102,0,0.2);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
background: #ff6600;
|
||||
clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Center Panel - Upload Zone */
|
||||
.upload-zone {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drop-area {
|
||||
flex: 1;
|
||||
margin: 20px;
|
||||
border: 3px dashed #666;
|
||||
background: #0f0f0f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.drop-area.dragover {
|
||||
border-color: #ff6600;
|
||||
background: #1a1a1a;
|
||||
box-shadow: inset 0 0 50px rgba(255,102,0,0.2);
|
||||
}
|
||||
|
||||
.drop-area::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg,
|
||||
rgba(255,102,0,0.1) 90deg,
|
||||
transparent 180deg
|
||||
);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: radar 4s linear infinite;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes radar {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.gear {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3px solid #ff6600;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: gearRotate 10s linear infinite;
|
||||
}
|
||||
|
||||
.gear::before,
|
||||
.gear::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #ff6600;
|
||||
}
|
||||
|
||||
.gear::before {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gear::after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: repeating-conic-gradient(
|
||||
from 0deg,
|
||||
#ff6600 0deg 20deg,
|
||||
transparent 20deg 40deg
|
||||
);
|
||||
-webkit-mask: radial-gradient(circle at center, transparent 30%, black 30%, black 40%, transparent 40%);
|
||||
mask: radial-gradient(circle at center, transparent 30%, black 30%, black 40%, transparent 40%);
|
||||
}
|
||||
|
||||
@keyframes gearRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-subtext {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Progress Bars Container */
|
||||
.progress-container {
|
||||
padding: 20px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress-filename {
|
||||
font-size: 12px;
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #444;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ff6600 0%, #ff8800 100%);
|
||||
width: 0%;
|
||||
transition: width 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
opacity: 0.5;
|
||||
animation: progressPulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes progressPulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Right Panel - Preview & Validation */
|
||||
.preview-panel {
|
||||
grid-column: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-area {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0f0f0f;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* Validation Section */
|
||||
.validation-section {
|
||||
padding: 20px;
|
||||
border-top: 2px solid #333;
|
||||
}
|
||||
|
||||
.validation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.validation-item.valid {
|
||||
border-color: #00ff00;
|
||||
box-shadow: inset 0 0 10px rgba(0,255,0,0.1);
|
||||
}
|
||||
|
||||
.validation-item.invalid {
|
||||
border-color: #ff0000;
|
||||
box-shadow: inset 0 0 10px rgba(255,0,0,0.1);
|
||||
}
|
||||
|
||||
.validation-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.validation-icon::before {
|
||||
content: '⚙';
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
animation: validationSpin 2s linear infinite;
|
||||
}
|
||||
|
||||
.validation-item.valid .validation-icon::before {
|
||||
content: '✓';
|
||||
color: #00ff00;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.validation-item.invalid .validation-icon::before {
|
||||
content: '✗';
|
||||
color: #ff0000;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes validationSpin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.validation-text {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.status-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
background: #1a1a1a;
|
||||
border-top: 2px solid #ff6600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #00ff00;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
animation: statusPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusPulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* File Input */
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ff6600;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #ff8800;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.file-manager {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 2fr 1fr;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.file-browser,
|
||||
.upload-zone,
|
||||
.preview-panel {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="corner-bracket-top"></div>
|
||||
<div class="corner-bracket-bottom"></div>
|
||||
|
||||
<div class="file-manager">
|
||||
<!-- Left Panel - File Browser -->
|
||||
<div class="panel file-browser">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">FILE DIRECTORY</div>
|
||||
<div style="font-size: 10px; color: #666;">SYSTEM://LOCAL</div>
|
||||
</div>
|
||||
<div class="file-list" id="fileList">
|
||||
<!-- Files will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Panel - Upload Zone -->
|
||||
<div class="panel upload-zone">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">UPLOAD INTERFACE</div>
|
||||
<div style="font-size: 10px; color: #666;">DRAG & DROP ENABLED</div>
|
||||
</div>
|
||||
<div class="drop-area" id="dropArea">
|
||||
<div class="upload-icon">
|
||||
<div class="gear"></div>
|
||||
</div>
|
||||
<div class="upload-text">DROP FILES HERE</div>
|
||||
<div class="upload-subtext">or click to browse</div>
|
||||
</div>
|
||||
<div class="progress-container" id="progressContainer">
|
||||
<!-- Progress bars will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel - Preview & Validation -->
|
||||
<div class="panel preview-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">PREVIEW & VALIDATION</div>
|
||||
<div style="font-size: 10px; color: #666;">ANALYSIS MODULE</div>
|
||||
</div>
|
||||
<div class="preview-area">
|
||||
<div class="preview-content" id="previewContent">
|
||||
<div class="preview-placeholder">
|
||||
<div class="preview-icon">⚙</div>
|
||||
<div>No file selected</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="validation-section" id="validationSection">
|
||||
<div class="validation-item" id="validationType">
|
||||
<div class="validation-icon"></div>
|
||||
<div class="validation-text">File Type: Waiting...</div>
|
||||
</div>
|
||||
<div class="validation-item" id="validationSize">
|
||||
<div class="validation-icon"></div>
|
||||
<div class="validation-text">File Size: Waiting...</div>
|
||||
</div>
|
||||
<div class="validation-item" id="validationFormat">
|
||||
<div class="validation-icon"></div>
|
||||
<div class="validation-text">Format Check: Waiting...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-indicator"></div>
|
||||
<div id="statusText">SYSTEM READY - AWAITING INPUT</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" id="fileInput" multiple>
|
||||
|
||||
<script>
|
||||
// File Manager State
|
||||
const fileManager = {
|
||||
files: [],
|
||||
selectedFile: null,
|
||||
uploads: new Map()
|
||||
};
|
||||
|
||||
// Elements
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileList = document.getElementById('fileList');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const validationSection = document.getElementById('validationSection');
|
||||
const statusText = document.getElementById('statusText');
|
||||
|
||||
// Drag and Drop Events
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
document.body.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add('dragover');
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove('dragover');
|
||||
}
|
||||
|
||||
// Handle Drop
|
||||
dropArea.addEventListener('drop', handleDrop, false);
|
||||
dropArea.addEventListener('click', () => fileInput.click());
|
||||
fileInput.addEventListener('change', handleFileSelect);
|
||||
|
||||
function handleDrop(e) {
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
handleFiles([...files]);
|
||||
}
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
handleFiles([...files]);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files.forEach(uploadFile);
|
||||
updateStatus(`PROCESSING ${files.length} FILE(S)`);
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
const id = Date.now() + Math.random();
|
||||
|
||||
// Add to file manager
|
||||
fileManager.files.push({
|
||||
id,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
file: file,
|
||||
progress: 0
|
||||
});
|
||||
|
||||
// Create progress item
|
||||
const progressItem = createProgressItem(file.name, id);
|
||||
progressContainer.appendChild(progressItem);
|
||||
|
||||
// Simulate upload
|
||||
simulateUpload(id, file);
|
||||
|
||||
// Add to file list
|
||||
addToFileList(id, file);
|
||||
}
|
||||
|
||||
function createProgressItem(filename, id) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'progress-item';
|
||||
item.id = `progress-${id}`;
|
||||
item.innerHTML = `
|
||||
<div class="progress-header">
|
||||
<div class="progress-filename">${filename}</div>
|
||||
<div class="progress-percent">0%</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
`;
|
||||
return item;
|
||||
}
|
||||
|
||||
function simulateUpload(id, file) {
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress > 100) {
|
||||
progress = 100;
|
||||
clearInterval(interval);
|
||||
setTimeout(() => {
|
||||
const progressItem = document.getElementById(`progress-${id}`);
|
||||
if (progressItem) {
|
||||
progressItem.style.opacity = '0';
|
||||
setTimeout(() => progressItem.remove(), 300);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
updateProgress(id, progress);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function updateProgress(id, progress) {
|
||||
const fileData = fileManager.files.find(f => f.id === id);
|
||||
if (fileData) {
|
||||
fileData.progress = progress;
|
||||
}
|
||||
|
||||
const progressItem = document.getElementById(`progress-${id}`);
|
||||
if (progressItem) {
|
||||
const fill = progressItem.querySelector('.progress-fill');
|
||||
const percent = progressItem.querySelector('.progress-percent');
|
||||
fill.style.width = `${progress}%`;
|
||||
percent.textContent = `${Math.round(progress)}%`;
|
||||
}
|
||||
}
|
||||
|
||||
function addToFileList(id, file) {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.dataset.id = id;
|
||||
fileItem.innerHTML = `
|
||||
<span class="file-icon"></span>
|
||||
<span class="file-name">${file.name}</span>
|
||||
<span class="file-size">${formatFileSize(file.size)}</span>
|
||||
`;
|
||||
|
||||
fileItem.addEventListener('click', () => selectFile(id));
|
||||
fileList.appendChild(fileItem);
|
||||
}
|
||||
|
||||
function selectFile(id) {
|
||||
// Update selected state
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
const fileItem = document.querySelector(`[data-id="${id}"]`);
|
||||
if (fileItem) {
|
||||
fileItem.classList.add('active');
|
||||
}
|
||||
|
||||
// Get file data
|
||||
const fileData = fileManager.files.find(f => f.id === id);
|
||||
if (fileData) {
|
||||
fileManager.selectedFile = fileData;
|
||||
showPreview(fileData);
|
||||
validateFile(fileData);
|
||||
updateStatus(`SELECTED: ${fileData.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
function showPreview(fileData) {
|
||||
const file = fileData.file;
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
previewContent.innerHTML = `<img src="${e.target.result}" class="preview-image" alt="${file.name}">`;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (file.type.startsWith('text/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const text = e.target.result.substring(0, 1000);
|
||||
previewContent.innerHTML = `
|
||||
<div style="padding: 20px; font-size: 12px; color: #ccc; white-space: pre-wrap; overflow: auto; width: 100%; height: 100%;">
|
||||
${text}${e.target.result.length > 1000 ? '...' : ''}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
} else {
|
||||
previewContent.innerHTML = `
|
||||
<div class="preview-placeholder">
|
||||
<div class="preview-icon">📄</div>
|
||||
<div>${file.name}</div>
|
||||
<div style="font-size: 12px; color: #666; margin-top: 10px;">${file.type || 'Unknown type'}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function validateFile(fileData) {
|
||||
const file = fileData.file;
|
||||
const validations = {
|
||||
type: document.getElementById('validationType'),
|
||||
size: document.getElementById('validationSize'),
|
||||
format: document.getElementById('validationFormat')
|
||||
};
|
||||
|
||||
// Reset validations
|
||||
Object.values(validations).forEach(v => {
|
||||
v.classList.remove('valid', 'invalid');
|
||||
});
|
||||
|
||||
// Validate after delay (simulate processing)
|
||||
setTimeout(() => {
|
||||
// File type validation
|
||||
const allowedTypes = ['image/', 'text/', 'application/pdf'];
|
||||
const isValidType = allowedTypes.some(type => file.type.startsWith(type));
|
||||
validations.type.classList.add(isValidType ? 'valid' : 'invalid');
|
||||
validations.type.querySelector('.validation-text').textContent =
|
||||
`File Type: ${file.type || 'Unknown'} ${isValidType ? '✓' : '✗'}`;
|
||||
|
||||
// File size validation (max 10MB)
|
||||
const maxSize = 10 * 1024 * 1024;
|
||||
const isValidSize = file.size <= maxSize;
|
||||
validations.size.classList.add(isValidSize ? 'valid' : 'invalid');
|
||||
validations.size.querySelector('.validation-text').textContent =
|
||||
`File Size: ${formatFileSize(file.size)} ${isValidSize ? '✓' : '✗'}`;
|
||||
|
||||
// Format validation
|
||||
const hasExtension = file.name.includes('.');
|
||||
validations.format.classList.add(hasExtension ? 'valid' : 'invalid');
|
||||
validations.format.querySelector('.validation-text').textContent =
|
||||
`Format Check: ${hasExtension ? 'Valid extension' : 'No extension'} ${hasExtension ? '✓' : '✗'}`;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function updateStatus(message) {
|
||||
statusText.textContent = message.toUpperCase();
|
||||
}
|
||||
|
||||
// Add some demo files
|
||||
setTimeout(() => {
|
||||
const demoFiles = [
|
||||
{ name: 'system.config', size: 2048, type: 'text/plain' },
|
||||
{ name: 'blueprint.pdf', size: 1048576, type: 'application/pdf' },
|
||||
{ name: 'component.png', size: 524288, type: 'image/png' }
|
||||
];
|
||||
|
||||
demoFiles.forEach((demo, index) => {
|
||||
const id = `demo-${index}`;
|
||||
const fakeFile = new File([''], demo.name, { type: demo.type });
|
||||
|
||||
fileManager.files.push({
|
||||
id,
|
||||
name: demo.name,
|
||||
size: demo.size,
|
||||
type: demo.type,
|
||||
file: fakeFile,
|
||||
progress: 100
|
||||
});
|
||||
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.dataset.id = id;
|
||||
fileItem.innerHTML = `
|
||||
<span class="file-icon"></span>
|
||||
<span class="file-name">${demo.name}</span>
|
||||
<span class="file-size">${formatFileSize(demo.size)}</span>
|
||||
`;
|
||||
|
||||
fileItem.addEventListener('click', () => selectFile(id));
|
||||
fileList.appendChild(fileItem);
|
||||
});
|
||||
|
||||
updateStatus('SYSTEM READY - 3 FILES LOADED');
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,876 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DATATERM v16.0 - Retro Computing Data Explorer</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||
|
||||
:root {
|
||||
--terminal-green: #00ff00;
|
||||
--terminal-amber: #ffb000;
|
||||
--terminal-dark-green: #00aa00;
|
||||
--terminal-dark-amber: #cc8800;
|
||||
--terminal-bg: #000000;
|
||||
--terminal-bg-light: #111111;
|
||||
--scan-line: rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'VT323', monospace;
|
||||
background: var(--terminal-bg);
|
||||
color: var(--terminal-green);
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT Effect */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
transparent 50%,
|
||||
var(--scan-line) 50%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
animation: scan-lines 8s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes scan-lines {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(4px); }
|
||||
}
|
||||
|
||||
/* Phosphor Glow */
|
||||
.glow {
|
||||
text-shadow:
|
||||
0 0 2px currentColor,
|
||||
0 0 4px currentColor,
|
||||
0 0 8px currentColor;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.terminal-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
background: radial-gradient(ellipse at center, #001100, #000000);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Terminal Header */
|
||||
.terminal-header {
|
||||
border: 2px solid var(--terminal-green);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, var(--terminal-green), transparent);
|
||||
animation: terminal-scan 4s linear infinite;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes terminal-scan {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink-animation 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Command Line Interface */
|
||||
.command-line {
|
||||
border: 1px solid var(--terminal-green);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--terminal-bg-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--terminal-amber);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.command-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--terminal-green);
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Control Panel */
|
||||
.control-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
border: 1px solid var(--terminal-dark-green);
|
||||
padding: 10px;
|
||||
background: var(--terminal-bg-light);
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: var(--terminal-amber);
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.control-input {
|
||||
width: 100%;
|
||||
background: var(--terminal-bg);
|
||||
border: 1px solid var(--terminal-green);
|
||||
color: var(--terminal-green);
|
||||
padding: 5px;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
background: var(--terminal-bg);
|
||||
border: 1px solid var(--terminal-green);
|
||||
color: var(--terminal-green);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
background: var(--terminal-green);
|
||||
color: var(--terminal-bg);
|
||||
box-shadow: 0 0 10px var(--terminal-green);
|
||||
}
|
||||
|
||||
/* Data Table */
|
||||
.data-viewport {
|
||||
flex: 1;
|
||||
border: 2px solid var(--terminal-green);
|
||||
overflow: auto;
|
||||
background: var(--terminal-bg-light);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.data-table th, .data-table td {
|
||||
border: 1px solid var(--terminal-dark-green);
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--terminal-bg);
|
||||
color: var(--terminal-amber);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.data-table th:hover {
|
||||
background: var(--terminal-dark-green);
|
||||
color: var(--terminal-bg);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-table tr.selected {
|
||||
background: rgba(255, 176, 0, 0.2);
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-checkbox {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
appearance: none;
|
||||
border: 1px solid var(--terminal-green);
|
||||
background: var(--terminal-bg);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-checkbox:checked::after {
|
||||
content: 'X';
|
||||
position: absolute;
|
||||
color: var(--terminal-green);
|
||||
font-size: 12px;
|
||||
left: 1px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.status-bar {
|
||||
border: 1px solid var(--terminal-green);
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: var(--terminal-bg-light);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-button {
|
||||
background: var(--terminal-bg);
|
||||
border: 1px solid var(--terminal-green);
|
||||
color: var(--terminal-green);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.page-button:hover:not(:disabled) {
|
||||
background: var(--terminal-green);
|
||||
color: var(--terminal-bg);
|
||||
}
|
||||
|
||||
.page-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
/* Loading Effect */
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
animation: loading-dots 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-dots {
|
||||
0% { content: ''; }
|
||||
25% { content: '.'; }
|
||||
50% { content: '..'; }
|
||||
75% { content: '...'; }
|
||||
}
|
||||
|
||||
/* Export Modal */
|
||||
.export-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--terminal-bg);
|
||||
border: 2px solid var(--terminal-green);
|
||||
padding: 20px;
|
||||
z-index: 2000;
|
||||
display: none;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.export-modal.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.export-content {
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
background: var(--terminal-bg-light);
|
||||
border: 1px solid var(--terminal-dark-green);
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
/* Typing Effect */
|
||||
.typing {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
animation: typing 3s steps(40, end);
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0 }
|
||||
to { width: 100% }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="terminal-container">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-title glow">
|
||||
<span>DATATERM v16.0 - RETRO COMPUTING DATA EXPLORER</span>
|
||||
<span>[SYSTEM: ONLINE]<span class="blink">█</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-line">
|
||||
<span class="prompt">DATATERM://></span>
|
||||
<input type="text" class="command-input" id="commandInput" placeholder="Type 'help' for commands...">
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="control-group">
|
||||
<div class="control-label">Search Query</div>
|
||||
<input type="text" class="control-input" id="searchInput" placeholder="ENTER SEARCH TERM...">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-label">Filter By Status</div>
|
||||
<select class="control-input" id="statusFilter">
|
||||
<option value="">ALL RECORDS</option>
|
||||
<option value="ACTIVE">ACTIVE</option>
|
||||
<option value="INACTIVE">INACTIVE</option>
|
||||
<option value="PENDING">PENDING</option>
|
||||
<option value="ARCHIVED">ARCHIVED</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-label">Filter By Department</div>
|
||||
<select class="control-input" id="deptFilter">
|
||||
<option value="">ALL DEPARTMENTS</option>
|
||||
<option value="ENGR">ENGINEERING</option>
|
||||
<option value="MRKT">MARKETING</option>
|
||||
<option value="FNCE">FINANCE</option>
|
||||
<option value="OPRS">OPERATIONS</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-label">Records Per Page</div>
|
||||
<select class="control-input" id="pageSizeSelect">
|
||||
<option value="10">10 RECORDS</option>
|
||||
<option value="25">25 RECORDS</option>
|
||||
<option value="50">50 RECORDS</option>
|
||||
<option value="100">100 RECORDS</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="control-group">
|
||||
<div class="control-label">Actions</div>
|
||||
<button class="control-button" id="selectAllBtn">[SELECT ALL]</button>
|
||||
<button class="control-button" id="clearAllBtn">[CLEAR ALL]</button>
|
||||
<button class="control-button" id="exportBtn">[EXPORT DATA]</button>
|
||||
<button class="control-button" id="refreshBtn">[REFRESH]</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-viewport">
|
||||
<div class="loading glow" id="loadingIndicator">LOADING DATA</div>
|
||||
<table class="data-table" id="dataTable" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="checkbox-cell">
|
||||
<input type="checkbox" class="data-checkbox" id="selectAllCheckbox">
|
||||
</th>
|
||||
<th data-sort="id">ID ↕</th>
|
||||
<th data-sort="timestamp">TIMESTAMP ↕</th>
|
||||
<th data-sort="user">USER ↕</th>
|
||||
<th data-sort="department">DEPT ↕</th>
|
||||
<th data-sort="operation">OPERATION ↕</th>
|
||||
<th data-sort="status">STATUS ↕</th>
|
||||
<th data-sort="size">SIZE (KB) ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dataTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">
|
||||
<div class="status-info">
|
||||
<span id="recordCount">0 RECORDS</span> |
|
||||
<span id="selectedCount">0 SELECTED</span> |
|
||||
<span id="filterStatus">NO FILTERS</span>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<button class="page-button" id="firstPageBtn">[<<]</button>
|
||||
<button class="page-button" id="prevPageBtn">[<]</button>
|
||||
<span class="page-info" id="pageInfo">PAGE 1/1</span>
|
||||
<button class="page-button" id="nextPageBtn">[>]</button>
|
||||
<button class="page-button" id="lastPageBtn">[>>]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="export-modal" id="exportModal">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-title glow">
|
||||
<span>EXPORT DATA</span>
|
||||
<button class="control-button" id="closeExportBtn">[X]</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Export Format</div>
|
||||
<select class="control-input" id="exportFormat">
|
||||
<option value="csv">CSV FORMAT</option>
|
||||
<option value="json">JSON FORMAT</option>
|
||||
<option value="txt">TEXT FORMAT</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="export-content" id="exportContent"></div>
|
||||
<button class="control-button" id="downloadBtn">[DOWNLOAD FILE]</button>
|
||||
<button class="control-button" id="copyBtn">[COPY TO CLIPBOARD]</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Generate sample data
|
||||
const departments = ['ENGR', 'MRKT', 'FNCE', 'OPRS'];
|
||||
const operations = ['CREATE', 'UPDATE', 'DELETE', 'READ', 'BACKUP', 'RESTORE', 'SYNC', 'VERIFY'];
|
||||
const statuses = ['ACTIVE', 'INACTIVE', 'PENDING', 'ARCHIVED'];
|
||||
const users = ['USER_001', 'USER_002', 'USER_003', 'USER_004', 'USER_005', 'ADMIN_01', 'ADMIN_02', 'SYS_USER'];
|
||||
|
||||
let allData = [];
|
||||
let filteredData = [];
|
||||
let currentPage = 1;
|
||||
let pageSize = 10;
|
||||
let sortColumn = 'id';
|
||||
let sortDirection = 'asc';
|
||||
let selectedRows = new Set();
|
||||
|
||||
// Generate data
|
||||
function generateData() {
|
||||
allData = [];
|
||||
for (let i = 1; i <= 500; i++) {
|
||||
const timestamp = new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000);
|
||||
allData.push({
|
||||
id: `REC_${String(i).padStart(5, '0')}`,
|
||||
timestamp: timestamp.toISOString().replace('T', ' ').substr(0, 19),
|
||||
user: users[Math.floor(Math.random() * users.length)],
|
||||
department: departments[Math.floor(Math.random() * departments.length)],
|
||||
operation: operations[Math.floor(Math.random() * operations.length)],
|
||||
status: statuses[Math.floor(Math.random() * statuses.length)],
|
||||
size: Math.floor(Math.random() * 1000) + 1
|
||||
});
|
||||
}
|
||||
filteredData = [...allData];
|
||||
}
|
||||
|
||||
// Initialize
|
||||
function init() {
|
||||
generateData();
|
||||
setTimeout(() => {
|
||||
document.getElementById('loadingIndicator').style.display = 'none';
|
||||
document.getElementById('dataTable').style.display = 'table';
|
||||
renderTable();
|
||||
updateStatus();
|
||||
}, 1500);
|
||||
|
||||
// Event listeners
|
||||
document.getElementById('searchInput').addEventListener('input', applyFilters);
|
||||
document.getElementById('statusFilter').addEventListener('change', applyFilters);
|
||||
document.getElementById('deptFilter').addEventListener('change', applyFilters);
|
||||
document.getElementById('pageSizeSelect').addEventListener('change', (e) => {
|
||||
pageSize = parseInt(e.target.value);
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
// Command input
|
||||
document.getElementById('commandInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
processCommand(e.target.value);
|
||||
e.target.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Sorting
|
||||
document.querySelectorAll('[data-sort]').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
const column = th.dataset.sort;
|
||||
if (sortColumn === column) {
|
||||
sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortColumn = column;
|
||||
sortDirection = 'asc';
|
||||
}
|
||||
sortData();
|
||||
renderTable();
|
||||
});
|
||||
});
|
||||
|
||||
// Selection
|
||||
document.getElementById('selectAllCheckbox').addEventListener('change', (e) => {
|
||||
const checkboxes = document.querySelectorAll('.row-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = e.target.checked;
|
||||
const row = cb.closest('tr');
|
||||
const id = row.dataset.id;
|
||||
if (e.target.checked) {
|
||||
selectedRows.add(id);
|
||||
row.classList.add('selected');
|
||||
} else {
|
||||
selectedRows.delete(id);
|
||||
row.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
updateStatus();
|
||||
});
|
||||
|
||||
// Buttons
|
||||
document.getElementById('selectAllBtn').addEventListener('click', () => {
|
||||
filteredData.forEach(item => selectedRows.add(item.id));
|
||||
renderTable();
|
||||
updateStatus();
|
||||
});
|
||||
|
||||
document.getElementById('clearAllBtn').addEventListener('click', () => {
|
||||
selectedRows.clear();
|
||||
document.getElementById('selectAllCheckbox').checked = false;
|
||||
renderTable();
|
||||
updateStatus();
|
||||
});
|
||||
|
||||
document.getElementById('exportBtn').addEventListener('click', showExportModal);
|
||||
document.getElementById('refreshBtn').addEventListener('click', () => {
|
||||
generateData();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
// Pagination
|
||||
document.getElementById('firstPageBtn').addEventListener('click', () => {
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
document.getElementById('prevPageBtn').addEventListener('click', () => {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderTable();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('nextPageBtn').addEventListener('click', () => {
|
||||
if (currentPage < getTotalPages()) {
|
||||
currentPage++;
|
||||
renderTable();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('lastPageBtn').addEventListener('click', () => {
|
||||
currentPage = getTotalPages();
|
||||
renderTable();
|
||||
});
|
||||
|
||||
// Export modal
|
||||
document.getElementById('closeExportBtn').addEventListener('click', hideExportModal);
|
||||
document.getElementById('exportFormat').addEventListener('change', updateExportPreview);
|
||||
document.getElementById('downloadBtn').addEventListener('click', downloadExport);
|
||||
document.getElementById('copyBtn').addEventListener('click', copyToClipboard);
|
||||
}
|
||||
|
||||
// Process commands
|
||||
function processCommand(command) {
|
||||
const cmd = command.toLowerCase().trim();
|
||||
|
||||
switch (cmd) {
|
||||
case 'help':
|
||||
alert('AVAILABLE COMMANDS:\n\n' +
|
||||
'HELP - Show this menu\n' +
|
||||
'CLEAR - Clear all filters\n' +
|
||||
'SELECT ALL - Select all records\n' +
|
||||
'EXPORT - Export selected data\n' +
|
||||
'REFRESH - Reload data\n' +
|
||||
'SORT [COLUMN] - Sort by column\n' +
|
||||
'FILTER [COLUMN] [VALUE] - Apply filter');
|
||||
break;
|
||||
case 'clear':
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.getElementById('statusFilter').value = '';
|
||||
document.getElementById('deptFilter').value = '';
|
||||
applyFilters();
|
||||
break;
|
||||
case 'select all':
|
||||
document.getElementById('selectAllBtn').click();
|
||||
break;
|
||||
case 'export':
|
||||
document.getElementById('exportBtn').click();
|
||||
break;
|
||||
case 'refresh':
|
||||
document.getElementById('refreshBtn').click();
|
||||
break;
|
||||
default:
|
||||
if (cmd.startsWith('sort ')) {
|
||||
const column = cmd.substr(5);
|
||||
const th = document.querySelector(`[data-sort="${column}"]`);
|
||||
if (th) th.click();
|
||||
} else if (cmd.startsWith('filter ')) {
|
||||
const parts = cmd.substr(7).split(' ');
|
||||
if (parts.length >= 2) {
|
||||
const [column, ...valueParts] = parts;
|
||||
const value = valueParts.join(' ');
|
||||
|
||||
if (column === 'status') {
|
||||
document.getElementById('statusFilter').value = value.toUpperCase();
|
||||
} else if (column === 'department' || column === 'dept') {
|
||||
document.getElementById('deptFilter').value = value.toUpperCase();
|
||||
} else {
|
||||
document.getElementById('searchInput').value = value;
|
||||
}
|
||||
applyFilters();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Apply filters
|
||||
function applyFilters() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
const deptFilter = document.getElementById('deptFilter').value;
|
||||
|
||||
filteredData = allData.filter(item => {
|
||||
const matchesSearch = !searchTerm ||
|
||||
Object.values(item).some(val =>
|
||||
String(val).toLowerCase().includes(searchTerm)
|
||||
);
|
||||
const matchesStatus = !statusFilter || item.status === statusFilter;
|
||||
const matchesDept = !deptFilter || item.department === deptFilter;
|
||||
|
||||
return matchesSearch && matchesStatus && matchesDept;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
sortData();
|
||||
renderTable();
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
// Sort data
|
||||
function sortData() {
|
||||
filteredData.sort((a, b) => {
|
||||
let aVal = a[sortColumn];
|
||||
let bVal = b[sortColumn];
|
||||
|
||||
if (sortColumn === 'size') {
|
||||
aVal = parseInt(aVal);
|
||||
bVal = parseInt(bVal);
|
||||
}
|
||||
|
||||
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
// Get total pages
|
||||
function getTotalPages() {
|
||||
return Math.ceil(filteredData.length / pageSize);
|
||||
}
|
||||
|
||||
// Render table
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById('dataTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const pageData = filteredData.slice(start, end);
|
||||
|
||||
pageData.forEach(item => {
|
||||
const row = document.createElement('tr');
|
||||
row.dataset.id = item.id;
|
||||
if (selectedRows.has(item.id)) {
|
||||
row.classList.add('selected');
|
||||
}
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" class="data-checkbox row-checkbox"
|
||||
${selectedRows.has(item.id) ? 'checked' : ''}>
|
||||
</td>
|
||||
<td>${item.id}</td>
|
||||
<td>${item.timestamp}</td>
|
||||
<td>${item.user}</td>
|
||||
<td>${item.department}</td>
|
||||
<td>${item.operation}</td>
|
||||
<td>${item.status}</td>
|
||||
<td>${item.size}</td>
|
||||
`;
|
||||
|
||||
const checkbox = row.querySelector('.row-checkbox');
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
selectedRows.add(item.id);
|
||||
row.classList.add('selected');
|
||||
} else {
|
||||
selectedRows.delete(item.id);
|
||||
row.classList.remove('selected');
|
||||
}
|
||||
updateStatus();
|
||||
});
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Update pagination
|
||||
document.getElementById('pageInfo').textContent = `PAGE ${currentPage}/${getTotalPages() || 1}`;
|
||||
document.getElementById('firstPageBtn').disabled = currentPage === 1;
|
||||
document.getElementById('prevPageBtn').disabled = currentPage === 1;
|
||||
document.getElementById('nextPageBtn').disabled = currentPage >= getTotalPages();
|
||||
document.getElementById('lastPageBtn').disabled = currentPage >= getTotalPages();
|
||||
}
|
||||
|
||||
// Update status
|
||||
function updateStatus() {
|
||||
document.getElementById('recordCount').textContent = `${filteredData.length} RECORDS`;
|
||||
document.getElementById('selectedCount').textContent = `${selectedRows.size} SELECTED`;
|
||||
|
||||
const filters = [];
|
||||
if (document.getElementById('searchInput').value) filters.push('SEARCH');
|
||||
if (document.getElementById('statusFilter').value) filters.push('STATUS');
|
||||
if (document.getElementById('deptFilter').value) filters.push('DEPT');
|
||||
|
||||
document.getElementById('filterStatus').textContent =
|
||||
filters.length ? `FILTERS: ${filters.join(', ')}` : 'NO FILTERS';
|
||||
}
|
||||
|
||||
// Export functions
|
||||
function showExportModal() {
|
||||
document.getElementById('exportModal').classList.add('show');
|
||||
updateExportPreview();
|
||||
}
|
||||
|
||||
function hideExportModal() {
|
||||
document.getElementById('exportModal').classList.remove('show');
|
||||
}
|
||||
|
||||
function updateExportPreview() {
|
||||
const format = document.getElementById('exportFormat').value;
|
||||
const dataToExport = selectedRows.size > 0
|
||||
? filteredData.filter(item => selectedRows.has(item.id))
|
||||
: filteredData;
|
||||
|
||||
let content = '';
|
||||
|
||||
if (format === 'csv') {
|
||||
content = 'ID,TIMESTAMP,USER,DEPARTMENT,OPERATION,STATUS,SIZE_KB\n';
|
||||
dataToExport.forEach(item => {
|
||||
content += `${item.id},${item.timestamp},${item.user},${item.department},${item.operation},${item.status},${item.size}\n`;
|
||||
});
|
||||
} else if (format === 'json') {
|
||||
content = JSON.stringify(dataToExport, null, 2);
|
||||
} else if (format === 'txt') {
|
||||
dataToExport.forEach(item => {
|
||||
content += `========================================\n`;
|
||||
content += `ID: ${item.id}\n`;
|
||||
content += `TIMESTAMP: ${item.timestamp}\n`;
|
||||
content += `USER: ${item.user}\n`;
|
||||
content += `DEPARTMENT: ${item.department}\n`;
|
||||
content += `OPERATION: ${item.operation}\n`;
|
||||
content += `STATUS: ${item.status}\n`;
|
||||
content += `SIZE: ${item.size} KB\n`;
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('exportContent').textContent = content;
|
||||
}
|
||||
|
||||
function downloadExport() {
|
||||
const format = document.getElementById('exportFormat').value;
|
||||
const content = document.getElementById('exportContent').textContent;
|
||||
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `dataterm_export_${Date.now()}.${format}`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const content = document.getElementById('exportContent').textContent;
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
const btn = document.getElementById('copyBtn');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = '[COPIED!]';
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
window.addEventListener('load', init);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,741 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Brutalist Navigation Center - Iteration 18</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Concrete texture overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255,255,255,0.03) 2px,
|
||||
rgba(255,255,255,0.03) 4px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255,255,255,0.03) 2px,
|
||||
rgba(255,255,255,0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Main Navigation Structure */
|
||||
.brutalist-nav {
|
||||
position: relative;
|
||||
background: #2a2a2a;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0,0,0,0.8),
|
||||
inset 0 1px 0 rgba(255,255,255,0.1),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.5);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Top Bar - Search and Quick Actions */
|
||||
.nav-top-bar {
|
||||
background: linear-gradient(180deg, #333 0%, #2a2a2a 100%);
|
||||
border-bottom: 3px solid #000;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-top-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: #666;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* Logo Block */
|
||||
.logo-block {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 900;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -2px;
|
||||
box-shadow:
|
||||
inset -3px -3px 10px rgba(255,255,255,0.1),
|
||||
inset 3px 3px 10px rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.logo-block:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset -3px -3px 10px rgba(255,255,255,0.2),
|
||||
inset 3px 3px 10px rgba(0,0,0,0.7),
|
||||
0 5px 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* Search Container */
|
||||
.search-container {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #1a1a1a;
|
||||
border: 3px solid #444;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 0 50px 0 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0,0,0,0.5),
|
||||
0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #666;
|
||||
background: #222;
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0,0,0,0.7),
|
||||
0 0 20px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #444;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #555;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
/* Quick Actions */
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #333;
|
||||
border: 2px solid #555;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
inset 0 -3px 0 rgba(0,0,0,0.5),
|
||||
0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset 0 -3px 0 rgba(0,0,0,0.5),
|
||||
0 5px 15px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.action-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Breadcrumb Bar */
|
||||
.breadcrumb-bar {
|
||||
background: #222;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
border-bottom: 2px solid #111;
|
||||
box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #555;
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #fff;
|
||||
background: #333;
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0,0,0,0.5),
|
||||
0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Tab Navigation */
|
||||
.tab-container {
|
||||
background: #1a1a1a;
|
||||
display: flex;
|
||||
border-bottom: 5px solid #000;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #444 #222;
|
||||
}
|
||||
|
||||
.tab-container::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.tab-container::-webkit-scrollbar-track {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.tab-container::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
min-width: 150px;
|
||||
padding: 20px 30px;
|
||||
background: #2a2a2a;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
border-right: 2px solid #000;
|
||||
box-shadow: inset 0 -5px 0 transparent;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: #333;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
inset 0 -5px 0 #666,
|
||||
0 5px 20px rgba(0,0,0,0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #222;
|
||||
color: #666;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab:hover .tab-close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-close:hover {
|
||||
background: #ff4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Navigation Memory */
|
||||
.nav-memory {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #2a2a2a;
|
||||
border: 3px solid #444;
|
||||
width: 60px;
|
||||
padding: 10px 0;
|
||||
box-shadow:
|
||||
-5px 5px 20px rgba(0,0,0,0.5),
|
||||
inset 0 0 20px rgba(0,0,0,0.3);
|
||||
z-index: 200;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-memory:hover {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.memory-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.memory-item:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.memory-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #444;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.memory-text {
|
||||
margin-left: 15px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.nav-memory:hover .memory-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.content {
|
||||
padding: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
background: #2a2a2a;
|
||||
border: 3px solid #444;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow:
|
||||
5px 5px 20px rgba(0,0,0,0.5),
|
||||
inset 0 0 30px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-block::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: linear-gradient(45deg, #666, #444, #666);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.content-block:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 3px 3px 0 #000;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #aaa;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* State indicator */
|
||||
.state-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
background: #333;
|
||||
border: 2px solid #555;
|
||||
padding: 15px 25px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.brutalist-nav {
|
||||
animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content-block {
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Brutalist Navigation Center -->
|
||||
<nav class="brutalist-nav">
|
||||
<!-- Top Bar -->
|
||||
<div class="nav-top-bar">
|
||||
<div class="logo-block">BN</div>
|
||||
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="SEARCH NAVIGATION..." />
|
||||
<button class="search-button">→</button>
|
||||
</div>
|
||||
|
||||
<div class="quick-actions">
|
||||
<button class="action-btn" title="Dashboard">⊞</button>
|
||||
<button class="action-btn" title="Settings">⚙</button>
|
||||
<button class="action-btn" title="Notifications">◉</button>
|
||||
<button class="action-btn" title="Profile">▣</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb Bar -->
|
||||
<div class="breadcrumb-bar">
|
||||
<a href="#" class="breadcrumb-item">HOME</a>
|
||||
<span class="breadcrumb-separator">▸</span>
|
||||
<a href="#" class="breadcrumb-item">PROJECTS</a>
|
||||
<span class="breadcrumb-separator">▸</span>
|
||||
<a href="#" class="breadcrumb-item">BRUTALISM</a>
|
||||
<span class="breadcrumb-separator">▸</span>
|
||||
<a href="#" class="breadcrumb-item active">NAVIGATION</a>
|
||||
</div>
|
||||
|
||||
<!-- Tab Container -->
|
||||
<div class="tab-container">
|
||||
<button class="tab active">
|
||||
OVERVIEW
|
||||
<button class="tab-close">×</button>
|
||||
</button>
|
||||
<button class="tab">
|
||||
COMPONENTS
|
||||
<button class="tab-close">×</button>
|
||||
</button>
|
||||
<button class="tab">
|
||||
DOCUMENTATION
|
||||
<button class="tab-close">×</button>
|
||||
</button>
|
||||
<button class="tab">
|
||||
EXAMPLES
|
||||
<button class="tab-close">×</button>
|
||||
</button>
|
||||
<button class="tab">
|
||||
RESOURCES
|
||||
<button class="tab-close">×</button>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Navigation Memory Panel -->
|
||||
<div class="nav-memory">
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">1</div>
|
||||
<span class="memory-text">Dashboard Overview</span>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">2</div>
|
||||
<span class="memory-text">Project Settings</span>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">3</div>
|
||||
<span class="memory-text">Component Library</span>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">4</div>
|
||||
<span class="memory-text">User Analytics</span>
|
||||
</div>
|
||||
<div class="memory-item">
|
||||
<div class="memory-icon">5</div>
|
||||
<span class="memory-text">System Config</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<main class="content">
|
||||
<div class="content-block">
|
||||
<h1>BRUTALIST NAVIGATION</h1>
|
||||
<p>A monolithic navigation system built with the principles of architectural brutalism. Raw concrete aesthetics meet functional navigation patterns.</p>
|
||||
<p>This navigation center combines multiple UI patterns into a cohesive, imposing structure that dominates the interface with purposeful weight and presence.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h1>FEATURES</h1>
|
||||
<p>▪ Multi-level navigation hierarchy with tabs, breadcrumbs, and quick actions</p>
|
||||
<p>▪ Integrated search functionality with brutalist styling</p>
|
||||
<p>▪ Navigation state memory for quick access to recent locations</p>
|
||||
<p>▪ Heavy, architectural animations that emphasize structure</p>
|
||||
<p>▪ Concrete texture overlays and stark geometric forms</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- State Indicator -->
|
||||
<div class="state-indicator">
|
||||
Navigation State: Active | Memory: 5 Items | Tabs: 5 Open
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab functionality
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
const tabCloseButtons = document.querySelectorAll('.tab-close');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
if (!e.target.classList.contains('tab-close')) {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
// Update state indicator
|
||||
updateStateIndicator();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Tab close functionality
|
||||
tabCloseButtons.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const tab = btn.parentElement;
|
||||
tab.style.transform = 'translateX(100%)';
|
||||
tab.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
tab.remove();
|
||||
updateStateIndicator();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
const searchButton = document.querySelector('.search-button');
|
||||
|
||||
searchButton.addEventListener('click', () => {
|
||||
if (searchInput.value.trim()) {
|
||||
// Add to navigation memory
|
||||
addToMemory(searchInput.value);
|
||||
searchInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && searchInput.value.trim()) {
|
||||
addToMemory(searchInput.value);
|
||||
searchInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Navigation memory
|
||||
const memoryItems = document.querySelectorAll('.memory-item');
|
||||
let memoryIndex = 6;
|
||||
|
||||
function addToMemory(text) {
|
||||
const navMemory = document.querySelector('.nav-memory');
|
||||
const newItem = document.createElement('div');
|
||||
newItem.className = 'memory-item';
|
||||
newItem.innerHTML = `
|
||||
<div class="memory-icon">${memoryIndex}</div>
|
||||
<span class="memory-text">${text}</span>
|
||||
`;
|
||||
navMemory.appendChild(newItem);
|
||||
memoryIndex++;
|
||||
|
||||
// Add click handler
|
||||
newItem.addEventListener('click', () => {
|
||||
console.log('Navigating to:', text);
|
||||
});
|
||||
|
||||
updateStateIndicator();
|
||||
}
|
||||
|
||||
// Memory item clicks
|
||||
memoryItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
const text = item.querySelector('.memory-text').textContent;
|
||||
console.log('Navigating to:', text);
|
||||
});
|
||||
});
|
||||
|
||||
// Quick action buttons
|
||||
const actionButtons = document.querySelectorAll('.action-btn');
|
||||
actionButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const action = btn.getAttribute('title');
|
||||
console.log('Quick action:', action);
|
||||
|
||||
// Visual feedback
|
||||
btn.style.transform = 'scale(0.9)';
|
||||
setTimeout(() => {
|
||||
btn.style.transform = '';
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
|
||||
// Breadcrumb navigation
|
||||
const breadcrumbItems = document.querySelectorAll('.breadcrumb-item');
|
||||
breadcrumbItems.forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
breadcrumbItems.forEach(bc => bc.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Logo animation
|
||||
const logo = document.querySelector('.logo-block');
|
||||
logo.addEventListener('click', () => {
|
||||
logo.style.transform = 'rotate(180deg) scale(0.8)';
|
||||
setTimeout(() => {
|
||||
logo.style.transform = '';
|
||||
}, 600);
|
||||
});
|
||||
|
||||
// Update state indicator
|
||||
function updateStateIndicator() {
|
||||
const indicator = document.querySelector('.state-indicator');
|
||||
const tabCount = document.querySelectorAll('.tab').length;
|
||||
const memoryCount = document.querySelectorAll('.memory-item').length;
|
||||
indicator.textContent = `Navigation State: Active | Memory: ${memoryCount} Items | Tabs: ${tabCount} Open`;
|
||||
}
|
||||
|
||||
// Parallax effect on scroll
|
||||
let lastScrollY = 0;
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
const nav = document.querySelector('.brutalist-nav');
|
||||
|
||||
if (scrollY > lastScrollY && scrollY > 100) {
|
||||
nav.style.transform = 'translateY(-50%)';
|
||||
} else {
|
||||
nav.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScrollY = scrollY;
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateStateIndicator();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,769 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Playful Input Intelligence - UI Hybrid 19</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 3em;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.input-playground {
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 20px 25px;
|
||||
font-size: 18px;
|
||||
border: 3px solid #e0e0e0;
|
||||
border-radius: 20px;
|
||||
outline: none;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
background: #f8f8f8;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #667eea;
|
||||
transform: scale(1.05);
|
||||
background: white;
|
||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label-emoji {
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
animation: wiggle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-10deg); }
|
||||
75% { transform: rotate(10deg); }
|
||||
}
|
||||
|
||||
.helper-bubble {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: 20px;
|
||||
background: #ffeb3b;
|
||||
color: #333;
|
||||
padding: 15px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transform: scale(0) translateY(20px);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.helper-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 30px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid #ffeb3b;
|
||||
}
|
||||
|
||||
.helper-bubble.show {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.autocomplete-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.autocomplete-list.show {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.autocomplete-item {
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.autocomplete-item:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.autocomplete-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
position: absolute;
|
||||
bottom: -35px;
|
||||
left: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.validation-message.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.validation-message.success {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.validation-message.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.validation-message.warning {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.character-counter {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.character-counter.warning {
|
||||
color: #ff9800;
|
||||
animation: shake 0.5s;
|
||||
}
|
||||
|
||||
.character-counter.error {
|
||||
color: #f44336;
|
||||
animation: shake 0.5s;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateY(-50%) translateX(0); }
|
||||
25% { transform: translateY(-50%) translateX(-5px); }
|
||||
75% { transform: translateY(-50%) translateX(5px); }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: #4caf50;
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-emoji {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
pointer-events: none;
|
||||
animation: float-up 2s ease-out forwards;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@keyframes float-up {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.format-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.format-button {
|
||||
padding: 10px 20px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.format-button:hover {
|
||||
transform: translateY(-3px) scale(1.1);
|
||||
background: #764ba2;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.format-button:active {
|
||||
transform: translateY(0) scale(0.95);
|
||||
}
|
||||
|
||||
.confetti {
|
||||
position: fixed;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ff6b6b;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes confetti-fall {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mascot {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #ff6b6b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mascot:hover {
|
||||
transform: scale(1.2) rotate(10deg);
|
||||
}
|
||||
|
||||
.mascot-speech {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mascot-speech.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.mascot-speech::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎮 Playful Input Playground 🎨</h1>
|
||||
|
||||
<div class="input-playground">
|
||||
<!-- Email Input with Validation -->
|
||||
<div class="input-group">
|
||||
<label class="label">
|
||||
<span class="label-emoji">📧</span>
|
||||
Magic Email Box
|
||||
</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="email" id="emailInput" placeholder="Enter your magical email...">
|
||||
<div class="helper-bubble" id="emailHelper">
|
||||
Try typing your email! I'll help you format it correctly! 🪄
|
||||
</div>
|
||||
<div class="validation-message" id="emailValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name Input with Autocomplete -->
|
||||
<div class="input-group">
|
||||
<label class="label">
|
||||
<span class="label-emoji">👤</span>
|
||||
Super Name Finder
|
||||
</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="nameInput" placeholder="Start typing a name...">
|
||||
<div class="autocomplete-list" id="nameAutocomplete"></div>
|
||||
<div class="validation-message" id="nameValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number with Formatting -->
|
||||
<div class="input-group">
|
||||
<label class="label">
|
||||
<span class="label-emoji">📱</span>
|
||||
Phone Number Formatter
|
||||
</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="tel" id="phoneInput" placeholder="Type your phone number...">
|
||||
<div class="helper-bubble" id="phoneHelper">
|
||||
I'll format your phone number as you type! 📞
|
||||
</div>
|
||||
<div class="validation-message" id="phoneValidation"></div>
|
||||
</div>
|
||||
<div class="format-buttons">
|
||||
<button class="format-button" onclick="formatPhone('us')">🇺🇸 US Format</button>
|
||||
<button class="format-button" onclick="formatPhone('uk')">🇬🇧 UK Format</button>
|
||||
<button class="format-button" onclick="formatPhone('intl')">🌍 International</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Input with Character Counter -->
|
||||
<div class="input-group">
|
||||
<label class="label">
|
||||
<span class="label-emoji">💬</span>
|
||||
Happy Message Box
|
||||
</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="messageInput" placeholder="Write something happy..." maxlength="50">
|
||||
<span class="character-counter" id="charCounter">0/50</span>
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
<div class="validation-message" id="messageValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Input with Suggestions -->
|
||||
<div class="input-group">
|
||||
<label class="label">
|
||||
<span class="label-emoji">🎨</span>
|
||||
Color Magic
|
||||
</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="colorInput" placeholder="Type a color name or hex code...">
|
||||
<div class="autocomplete-list" id="colorAutocomplete"></div>
|
||||
<div class="validation-message" id="colorValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mascot Helper -->
|
||||
<div class="mascot" id="mascot">
|
||||
🤖
|
||||
<div class="mascot-speech" id="mascotSpeech"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Playful animations and interactions
|
||||
function createFloatingEmoji(x, y, emoji) {
|
||||
const floater = document.createElement('div');
|
||||
floater.className = 'floating-emoji';
|
||||
floater.textContent = emoji;
|
||||
floater.style.left = x + 'px';
|
||||
floater.style.top = y + 'px';
|
||||
document.body.appendChild(floater);
|
||||
|
||||
setTimeout(() => floater.remove(), 2000);
|
||||
}
|
||||
|
||||
function createConfetti() {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
setTimeout(() => {
|
||||
const confetti = document.createElement('div');
|
||||
confetti.className = 'confetti';
|
||||
confetti.style.left = Math.random() * window.innerWidth + 'px';
|
||||
confetti.style.top = '-10px';
|
||||
confetti.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
|
||||
confetti.style.animation = `confetti-fall ${2 + Math.random() * 2}s ease-out forwards`;
|
||||
document.body.appendChild(confetti);
|
||||
|
||||
setTimeout(() => confetti.remove(), 4000);
|
||||
}, i * 50);
|
||||
}
|
||||
}
|
||||
|
||||
// Email validation with playful feedback
|
||||
const emailInput = document.getElementById('emailInput');
|
||||
const emailHelper = document.getElementById('emailHelper');
|
||||
const emailValidation = document.getElementById('emailValidation');
|
||||
|
||||
emailInput.addEventListener('focus', () => {
|
||||
emailHelper.classList.add('show');
|
||||
showMascotMessage('Let me help you with your email! 📧');
|
||||
});
|
||||
|
||||
emailInput.addEventListener('blur', () => {
|
||||
emailHelper.classList.remove('show');
|
||||
});
|
||||
|
||||
emailInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value;
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (value === '') {
|
||||
emailValidation.textContent = '';
|
||||
emailValidation.classList.remove('show');
|
||||
} else if (emailRegex.test(value)) {
|
||||
emailValidation.textContent = '✨ Perfect email! You\'re a star!';
|
||||
emailValidation.className = 'validation-message success show';
|
||||
createFloatingEmoji(e.target.offsetLeft + e.target.offsetWidth - 50, e.target.offsetTop, '⭐');
|
||||
} else if (value.includes('@')) {
|
||||
emailValidation.textContent = '🎯 Almost there! Just need the domain!';
|
||||
emailValidation.className = 'validation-message warning show';
|
||||
} else {
|
||||
emailValidation.textContent = '💫 Don\'t forget the @ symbol!';
|
||||
emailValidation.className = 'validation-message error show';
|
||||
}
|
||||
});
|
||||
|
||||
// Name autocomplete with suggestions
|
||||
const nameInput = document.getElementById('nameInput');
|
||||
const nameAutocomplete = document.getElementById('nameAutocomplete');
|
||||
const nameValidation = document.getElementById('nameValidation');
|
||||
|
||||
const names = [
|
||||
'Alice Wonderland',
|
||||
'Bob Builder',
|
||||
'Charlie Chocolate',
|
||||
'Diana Prince',
|
||||
'Edward Scissorhands',
|
||||
'Fiona Fairy',
|
||||
'George Curious',
|
||||
'Helen Hero',
|
||||
'Isaac Newton',
|
||||
'Julia Joy'
|
||||
];
|
||||
|
||||
nameInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
|
||||
if (value.length > 0) {
|
||||
const matches = names.filter(name => name.toLowerCase().includes(value));
|
||||
|
||||
if (matches.length > 0) {
|
||||
nameAutocomplete.innerHTML = matches.slice(0, 5).map(name =>
|
||||
`<div class="autocomplete-item" onclick="selectName('${name}')">${name}</div>`
|
||||
).join('');
|
||||
nameAutocomplete.classList.add('show');
|
||||
} else {
|
||||
nameAutocomplete.classList.remove('show');
|
||||
}
|
||||
|
||||
if (value.length >= 2) {
|
||||
nameValidation.textContent = '🌟 Great name!';
|
||||
nameValidation.className = 'validation-message success show';
|
||||
}
|
||||
} else {
|
||||
nameAutocomplete.classList.remove('show');
|
||||
nameValidation.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
function selectName(name) {
|
||||
nameInput.value = name;
|
||||
nameAutocomplete.classList.remove('show');
|
||||
createFloatingEmoji(nameInput.offsetLeft + nameInput.offsetWidth / 2, nameInput.offsetTop, '🎉');
|
||||
showMascotMessage('Excellent choice! 👏');
|
||||
}
|
||||
|
||||
// Phone number formatting
|
||||
const phoneInput = document.getElementById('phoneInput');
|
||||
const phoneHelper = document.getElementById('phoneHelper');
|
||||
const phoneValidation = document.getElementById('phoneValidation');
|
||||
|
||||
phoneInput.addEventListener('focus', () => {
|
||||
phoneHelper.classList.add('show');
|
||||
});
|
||||
|
||||
phoneInput.addEventListener('blur', () => {
|
||||
phoneHelper.classList.remove('show');
|
||||
});
|
||||
|
||||
phoneInput.addEventListener('input', (e) => {
|
||||
let value = e.target.value.replace(/\D/g, '');
|
||||
|
||||
if (value.length >= 10) {
|
||||
phoneValidation.textContent = '📞 Perfect phone number!';
|
||||
phoneValidation.className = 'validation-message success show';
|
||||
} else if (value.length > 0) {
|
||||
phoneValidation.textContent = `📱 ${10 - value.length} more digits to go!`;
|
||||
phoneValidation.className = 'validation-message warning show';
|
||||
} else {
|
||||
phoneValidation.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
function formatPhone(format) {
|
||||
let value = phoneInput.value.replace(/\D/g, '');
|
||||
|
||||
switch(format) {
|
||||
case 'us':
|
||||
if (value.length >= 10) {
|
||||
phoneInput.value = `(${value.slice(0,3)}) ${value.slice(3,6)}-${value.slice(6,10)}`;
|
||||
}
|
||||
break;
|
||||
case 'uk':
|
||||
if (value.length >= 10) {
|
||||
phoneInput.value = `+44 ${value.slice(0,4)} ${value.slice(4,7)} ${value.slice(7,10)}`;
|
||||
}
|
||||
break;
|
||||
case 'intl':
|
||||
if (value.length >= 10) {
|
||||
phoneInput.value = `+${value.slice(0,2)} ${value.slice(2,5)} ${value.slice(5,8)} ${value.slice(8)}`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
createFloatingEmoji(phoneInput.offsetLeft + phoneInput.offsetWidth / 2, phoneInput.offsetTop, '✨');
|
||||
}
|
||||
|
||||
// Message input with character counter
|
||||
const messageInput = document.getElementById('messageInput');
|
||||
const charCounter = document.getElementById('charCounter');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const messageValidation = document.getElementById('messageValidation');
|
||||
|
||||
messageInput.addEventListener('input', (e) => {
|
||||
const length = e.target.value.length;
|
||||
const maxLength = 50;
|
||||
const percentage = (length / maxLength) * 100;
|
||||
|
||||
charCounter.textContent = `${length}/${maxLength}`;
|
||||
progressBar.style.width = percentage + '%';
|
||||
|
||||
if (length >= maxLength * 0.9) {
|
||||
charCounter.classList.add('error');
|
||||
progressBar.style.background = '#f44336';
|
||||
messageValidation.textContent = '🚨 Almost at the limit!';
|
||||
messageValidation.className = 'validation-message error show';
|
||||
} else if (length >= maxLength * 0.7) {
|
||||
charCounter.classList.add('warning');
|
||||
charCounter.classList.remove('error');
|
||||
progressBar.style.background = '#ff9800';
|
||||
messageValidation.textContent = '⚡ You\'re on fire!';
|
||||
messageValidation.className = 'validation-message warning show';
|
||||
} else {
|
||||
charCounter.classList.remove('warning', 'error');
|
||||
progressBar.style.background = '#4caf50';
|
||||
if (length > 0) {
|
||||
messageValidation.textContent = '💖 Keep going!';
|
||||
messageValidation.className = 'validation-message success show';
|
||||
} else {
|
||||
messageValidation.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Check for happy words
|
||||
const happyWords = ['happy', 'joy', 'love', 'awesome', 'great', 'wonderful', 'amazing'];
|
||||
const foundHappy = happyWords.some(word => e.target.value.toLowerCase().includes(word));
|
||||
if (foundHappy) {
|
||||
createFloatingEmoji(e.target.offsetLeft + Math.random() * e.target.offsetWidth, e.target.offsetTop, '😊');
|
||||
}
|
||||
});
|
||||
|
||||
// Color input with suggestions
|
||||
const colorInput = document.getElementById('colorInput');
|
||||
const colorAutocomplete = document.getElementById('colorAutocomplete');
|
||||
const colorValidation = document.getElementById('colorValidation');
|
||||
|
||||
const colors = [
|
||||
{ name: 'Red', hex: '#FF0000' },
|
||||
{ name: 'Blue', hex: '#0000FF' },
|
||||
{ name: 'Green', hex: '#00FF00' },
|
||||
{ name: 'Purple', hex: '#800080' },
|
||||
{ name: 'Orange', hex: '#FFA500' },
|
||||
{ name: 'Pink', hex: '#FFC0CB' },
|
||||
{ name: 'Yellow', hex: '#FFFF00' },
|
||||
{ name: 'Turquoise', hex: '#40E0D0' },
|
||||
{ name: 'Magenta', hex: '#FF00FF' },
|
||||
{ name: 'Coral', hex: '#FF7F50' }
|
||||
];
|
||||
|
||||
colorInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
|
||||
if (value.length > 0) {
|
||||
const matches = colors.filter(color =>
|
||||
color.name.toLowerCase().includes(value) ||
|
||||
color.hex.toLowerCase().includes(value)
|
||||
);
|
||||
|
||||
if (matches.length > 0) {
|
||||
colorAutocomplete.innerHTML = matches.slice(0, 5).map(color =>
|
||||
`<div class="autocomplete-item" onclick="selectColor('${color.hex}')" style="background: linear-gradient(to right, ${color.hex} 20%, white 20%);">
|
||||
<span style="margin-left: 60px;">${color.name} (${color.hex})</span>
|
||||
</div>`
|
||||
).join('');
|
||||
colorAutocomplete.classList.add('show');
|
||||
} else {
|
||||
colorAutocomplete.classList.remove('show');
|
||||
}
|
||||
|
||||
// Validate hex color
|
||||
if (/^#[0-9A-F]{6}$/i.test(value)) {
|
||||
colorInput.style.borderColor = value;
|
||||
colorInput.style.boxShadow = `0 0 20px ${value}50`;
|
||||
colorValidation.textContent = '🎨 Beautiful color!';
|
||||
colorValidation.className = 'validation-message success show';
|
||||
createConfetti();
|
||||
}
|
||||
} else {
|
||||
colorAutocomplete.classList.remove('show');
|
||||
colorValidation.classList.remove('show');
|
||||
colorInput.style.borderColor = '';
|
||||
colorInput.style.boxShadow = '';
|
||||
}
|
||||
});
|
||||
|
||||
function selectColor(hex) {
|
||||
colorInput.value = hex;
|
||||
colorAutocomplete.classList.remove('show');
|
||||
colorInput.style.borderColor = hex;
|
||||
colorInput.style.boxShadow = `0 0 20px ${hex}50`;
|
||||
createFloatingEmoji(colorInput.offsetLeft + colorInput.offsetWidth / 2, colorInput.offsetTop, '🌈');
|
||||
}
|
||||
|
||||
// Mascot interactions
|
||||
const mascot = document.getElementById('mascot');
|
||||
const mascotSpeech = document.getElementById('mascotSpeech');
|
||||
|
||||
function showMascotMessage(message) {
|
||||
mascotSpeech.textContent = message;
|
||||
mascotSpeech.classList.add('show');
|
||||
setTimeout(() => {
|
||||
mascotSpeech.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
mascot.addEventListener('click', () => {
|
||||
const messages = [
|
||||
'You\'re doing great! 🌟',
|
||||
'Keep typing, superstar! ⭐',
|
||||
'I believe in you! 💪',
|
||||
'You\'re amazing! 🎉',
|
||||
'High five! 🖐️',
|
||||
'Woohoo! 🎊'
|
||||
];
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||
showMascotMessage(randomMessage);
|
||||
mascot.style.transform = 'scale(1.2) rotate(360deg)';
|
||||
setTimeout(() => {
|
||||
mascot.style.transform = 'scale(1) rotate(0deg)';
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Global click handlers for autocomplete
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.input-group')) {
|
||||
document.querySelectorAll('.autocomplete-list').forEach(list => {
|
||||
list.classList.remove('show');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Welcome animation
|
||||
setTimeout(() => {
|
||||
showMascotMessage('Welcome to the Input Playground! 🎮');
|
||||
createFloatingEmoji(window.innerWidth / 2, 100, '🎉');
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,984 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Liquid Metal Adaptive Flow Interface</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: linear-gradient(135deg, #0a0a0a, #1a1a1a, #2a2a2a);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Liquid Metal Base Styles */
|
||||
.liquid-surface {
|
||||
background: linear-gradient(45deg, #c0c0c0, #e8e8e8, #a8a8a8, #d0d0d0);
|
||||
background-size: 400% 400%;
|
||||
animation: liquidFlow 8s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.liquid-surface::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255,255,255,0.3) 25%,
|
||||
rgba(255,255,255,0.6) 50%,
|
||||
rgba(255,255,255,0.3) 75%,
|
||||
transparent 100%);
|
||||
animation: mercuryReflection 3s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes liquidFlow {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
25% { background-position: 100% 0%; }
|
||||
50% { background-position: 100% 100%; }
|
||||
75% { background-position: 0% 100%; }
|
||||
}
|
||||
|
||||
@keyframes mercuryReflection {
|
||||
0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateX(200%) skewX(-15deg); opacity: 0; }
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 2.5rem;
|
||||
background: linear-gradient(45deg, #c0c0c0, #ffffff, #a8a8a8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
|
||||
animation: metalShimmer 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes metalShimmer {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
/* Adaptive Flow Interface Container */
|
||||
.hybrid-component {
|
||||
background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0,0,0,0.3),
|
||||
inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hybrid-component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
|
||||
rgba(192, 192, 192, 0.1) 0%,
|
||||
transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hybrid-component:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Flow State Indicator */
|
||||
.flow-state {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, #4a90e2, #7bb3f0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.flow-state.adapting {
|
||||
animation: liquidPulse 2s ease-in-out infinite;
|
||||
background: linear-gradient(45deg, #f39c12, #e67e22);
|
||||
}
|
||||
|
||||
@keyframes liquidPulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4); }
|
||||
50% { transform: scale(1.1); box-shadow: 0 8px 25px rgba(243, 156, 18, 0.6); }
|
||||
}
|
||||
|
||||
/* Morphing Form Container */
|
||||
.form-flow {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 1fr;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.form-flow.expanded {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* Liquid Input Fields */
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.liquid-input {
|
||||
width: 100%;
|
||||
padding: 1rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(135deg, #4a4a4a, #5a5a5a);
|
||||
color: #e0e0e0;
|
||||
font-size: 1rem;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0,0,0,0.2),
|
||||
0 2px 10px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.liquid-input:focus {
|
||||
outline: none;
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0,0,0,0.2),
|
||||
0 8px 25px rgba(74, 144, 226, 0.3),
|
||||
0 0 0 2px rgba(74, 144, 226, 0.5);
|
||||
background: linear-gradient(135deg, #5a5a5a, #6a6a6a);
|
||||
}
|
||||
|
||||
.liquid-input::placeholder {
|
||||
color: #999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.liquid-input:focus::placeholder {
|
||||
color: #bbb;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
/* Floating Label */
|
||||
.floating-label {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1.5rem;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.liquid-input:focus + .floating-label,
|
||||
.liquid-input:not(:placeholder-shown) + .floating-label {
|
||||
top: -0.5rem;
|
||||
left: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #4a90e2;
|
||||
background: linear-gradient(90deg, #3a3a3a, #4a4a4a, #3a3a3a);
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Adaptive Suggestions */
|
||||
.suggestion-flow {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #3a3a3a, #4a4a4a);
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
z-index: 10;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.suggestion-flow.active {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 0.8rem 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
background: linear-gradient(90deg, #4a90e2, #5ba0f2);
|
||||
color: white;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Validation Flow */
|
||||
.validation-indicator {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.validation-indicator.valid {
|
||||
background: linear-gradient(45deg, #27ae60, #2ecc71);
|
||||
animation: validPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.validation-indicator.invalid {
|
||||
background: linear-gradient(45deg, #e74c3c, #c0392b);
|
||||
animation: invalidShake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes validPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
|
||||
50% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
|
||||
}
|
||||
|
||||
@keyframes invalidShake {
|
||||
0%, 100% { transform: translateY(-50%) translateX(0); }
|
||||
25% { transform: translateY(-50%) translateX(-5px); }
|
||||
75% { transform: translateY(-50%) translateX(5px); }
|
||||
}
|
||||
|
||||
/* Context-Aware Branching */
|
||||
.branch-container {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.branch-path {
|
||||
display: none;
|
||||
animation: liquidReveal 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.branch-path.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes liquidReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scaleY(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Morphing Layout Grid */
|
||||
.morphing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Liquid Button */
|
||||
.liquid-button {
|
||||
background: linear-gradient(45deg, #4a90e2, #5ba0f2);
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 1rem 2rem;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.liquid-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.liquid-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
|
||||
}
|
||||
|
||||
.liquid-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.liquid-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Progress Flow */
|
||||
.progress-flow {
|
||||
margin-top: 2rem;
|
||||
height: 4px;
|
||||
background: #2a2a2a;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-liquid {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4a90e2, #5ba0f2, #4a90e2);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 2px;
|
||||
width: 0%;
|
||||
transition: width 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: liquidProgress 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes liquidProgress {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Responsive Adaptations */
|
||||
@media (max-width: 768px) {
|
||||
.form-flow.expanded {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.morphing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Focus Indicators */
|
||||
.liquid-input:focus,
|
||||
.liquid-button:focus {
|
||||
outline: 2px solid #4a90e2;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Adaptive Flow Interface - Liquid Metal Theme</h1>
|
||||
<div class="hybrid-component liquid-surface" id="adaptiveFlow">
|
||||
<!-- Flow State Indicator -->
|
||||
<div class="flow-state" id="flowState">
|
||||
<span id="stateText">FLOW</span>
|
||||
</div>
|
||||
|
||||
<!-- Adaptive Form Flow -->
|
||||
<div class="form-flow" id="formFlow">
|
||||
<!-- Primary Input Section -->
|
||||
<div class="input-section">
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="nameInput" placeholder=" " required>
|
||||
<label class="floating-label" for="nameInput">Full Name</label>
|
||||
<div class="validation-indicator" id="nameValidation"></div>
|
||||
<div class="suggestion-flow" id="nameSuggestions"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="email" class="liquid-input" id="emailInput" placeholder=" " required>
|
||||
<label class="floating-label" for="emailInput">Email Address</label>
|
||||
<div class="validation-indicator" id="emailValidation"></div>
|
||||
<div class="suggestion-flow" id="emailSuggestions"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<select class="liquid-input" id="typeSelect" required>
|
||||
<option value="">Select Purpose</option>
|
||||
<option value="business">Business Inquiry</option>
|
||||
<option value="personal">Personal Project</option>
|
||||
<option value="enterprise">Enterprise Solution</option>
|
||||
<option value="startup">Startup Consultation</option>
|
||||
</select>
|
||||
<label class="floating-label" for="typeSelect">Purpose</label>
|
||||
<div class="validation-indicator" id="typeValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adaptive Branching Section -->
|
||||
<div class="input-section">
|
||||
<div class="branch-container" id="branchContainer">
|
||||
<!-- Business Branch -->
|
||||
<div class="branch-path" id="businessBranch">
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="companyInput" placeholder=" ">
|
||||
<label class="floating-label" for="companyInput">Company Name</label>
|
||||
<div class="validation-indicator" id="companyValidation"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="industryInput" placeholder=" ">
|
||||
<label class="floating-label" for="industryInput">Industry</label>
|
||||
<div class="validation-indicator" id="industryValidation"></div>
|
||||
<div class="suggestion-flow" id="industrySuggestions"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personal Branch -->
|
||||
<div class="branch-path" id="personalBranch">
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="projectInput" placeholder=" ">
|
||||
<label class="floating-label" for="projectInput">Project Type</label>
|
||||
<div class="validation-indicator" id="projectValidation"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="timelineInput" placeholder=" ">
|
||||
<label class="floating-label" for="timelineInput">Timeline</label>
|
||||
<div class="validation-indicator" id="timelineValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Branch -->
|
||||
<div class="branch-path" id="enterpriseBranch">
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="scaleInput" placeholder=" ">
|
||||
<label class="floating-label" for="scaleInput">Organization Size</label>
|
||||
<div class="validation-indicator" id="scaleValidation"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="budgetInput" placeholder=" ">
|
||||
<label class="floating-label" for="budgetInput">Budget Range</label>
|
||||
<div class="validation-indicator" id="budgetValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Startup Branch -->
|
||||
<div class="branch-path" id="startupBranch">
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="stageInput" placeholder=" ">
|
||||
<label class="floating-label" for="stageInput">Startup Stage</label>
|
||||
<div class="validation-indicator" id="stageValidation"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="liquid-input" id="fundingInput" placeholder=" ">
|
||||
<label class="floating-label" for="fundingInput">Funding Status</label>
|
||||
<div class="validation-indicator" id="fundingValidation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Morphing Action Grid -->
|
||||
<div class="morphing-grid" id="actionGrid">
|
||||
<button class="liquid-button" id="submitBtn">
|
||||
<span>Submit Flow</span>
|
||||
</button>
|
||||
<button class="liquid-button" id="resetBtn" style="background: linear-gradient(45deg, #95a5a6, #bdc3c7);">
|
||||
<span>Reset Flow</span>
|
||||
</button>
|
||||
<button class="liquid-button" id="saveBtn" style="background: linear-gradient(45deg, #f39c12, #e67e22);">
|
||||
<span>Save Progress</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Progress Flow Indicator -->
|
||||
<div class="progress-flow">
|
||||
<div class="progress-liquid" id="progressBar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Screen Reader Status -->
|
||||
<div class="sr-only" aria-live="polite" id="srStatus"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
class LiquidMetalAdaptiveFlow {
|
||||
constructor() {
|
||||
this.state = {
|
||||
currentBranch: null,
|
||||
validationStates: {},
|
||||
formProgress: 0,
|
||||
isAdapting: false,
|
||||
userContext: {},
|
||||
suggestions: {
|
||||
industries: ['Technology', 'Healthcare', 'Finance', 'Education', 'Manufacturing', 'Retail', 'Consulting'],
|
||||
names: ['John Doe', 'Jane Smith', 'Alex Johnson', 'Maria Garcia', 'David Chen'],
|
||||
emails: ['user@company.com', 'contact@business.org', 'info@startup.io']
|
||||
}
|
||||
};
|
||||
|
||||
this.initializeFlow();
|
||||
this.bindEvents();
|
||||
this.startAdaptiveMonitoring();
|
||||
}
|
||||
|
||||
initializeFlow() {
|
||||
// Initialize liquid metal interactions
|
||||
this.setupLiquidEffects();
|
||||
|
||||
// Set up validation patterns
|
||||
this.validationPatterns = {
|
||||
name: /^[a-zA-Z\s]{2,}$/,
|
||||
email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
||||
required: /^.+$/
|
||||
};
|
||||
|
||||
// Initialize progress tracking
|
||||
this.updateProgress();
|
||||
}
|
||||
|
||||
setupLiquidEffects() {
|
||||
const component = document.getElementById('adaptiveFlow');
|
||||
|
||||
// Mouse tracking for liquid effects
|
||||
component.addEventListener('mousemove', (e) => {
|
||||
const rect = component.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
|
||||
component.style.setProperty('--mouse-x', `${x}%`);
|
||||
component.style.setProperty('--mouse-y', `${y}%`);
|
||||
});
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Input validation and suggestion handling
|
||||
const inputs = document.querySelectorAll('.liquid-input');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('input', (e) => this.handleInputChange(e));
|
||||
input.addEventListener('focus', (e) => this.handleInputFocus(e));
|
||||
input.addEventListener('blur', (e) => this.handleInputBlur(e));
|
||||
});
|
||||
|
||||
// Branch selection handling
|
||||
const typeSelect = document.getElementById('typeSelect');
|
||||
typeSelect.addEventListener('change', (e) => this.handleBranchChange(e));
|
||||
|
||||
// Button interactions
|
||||
document.getElementById('submitBtn').addEventListener('click', () => this.handleSubmit());
|
||||
document.getElementById('resetBtn').addEventListener('click', () => this.handleReset());
|
||||
document.getElementById('saveBtn').addEventListener('click', () => this.handleSave());
|
||||
|
||||
// Suggestion item clicks
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('suggestion-item')) {
|
||||
this.applySuggestion(e.target);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleInputChange(event) {
|
||||
const input = event.target;
|
||||
const value = input.value;
|
||||
const fieldName = input.id.replace('Input', '').replace('Select', '');
|
||||
|
||||
// Update user context
|
||||
this.state.userContext[fieldName] = value;
|
||||
|
||||
// Validate input
|
||||
this.validateField(input);
|
||||
|
||||
// Show adaptive suggestions
|
||||
this.showSuggestions(input, value);
|
||||
|
||||
// Update progress
|
||||
this.updateProgress();
|
||||
|
||||
// Adapt form layout if needed
|
||||
this.adaptFormLayout();
|
||||
|
||||
// Announce changes to screen readers
|
||||
this.announceChange(fieldName, value);
|
||||
}
|
||||
|
||||
handleInputFocus(event) {
|
||||
const input = event.target;
|
||||
const suggestionContainer = input.parentNode.querySelector('.suggestion-flow');
|
||||
|
||||
if (suggestionContainer) {
|
||||
this.showSuggestions(input, input.value);
|
||||
}
|
||||
}
|
||||
|
||||
handleInputBlur(event) {
|
||||
const input = event.target;
|
||||
const suggestionContainer = input.parentNode.querySelector('.suggestion-flow');
|
||||
|
||||
// Delay hiding suggestions to allow for clicks
|
||||
setTimeout(() => {
|
||||
if (suggestionContainer) {
|
||||
suggestionContainer.classList.remove('active');
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
validateField(input) {
|
||||
const value = input.value;
|
||||
const fieldType = input.type || 'text';
|
||||
const fieldName = input.id.replace('Input', '').replace('Select', '');
|
||||
const indicator = document.getElementById(`${fieldName}Validation`);
|
||||
|
||||
let isValid = false;
|
||||
|
||||
if (input.hasAttribute('required') && !value) {
|
||||
isValid = false;
|
||||
} else if (fieldType === 'email') {
|
||||
isValid = this.validationPatterns.email.test(value);
|
||||
} else if (fieldName === 'name') {
|
||||
isValid = this.validationPatterns.name.test(value);
|
||||
} else if (value) {
|
||||
isValid = true;
|
||||
}
|
||||
|
||||
// Update validation state
|
||||
this.state.validationStates[fieldName] = isValid;
|
||||
|
||||
// Update indicator
|
||||
if (indicator) {
|
||||
indicator.className = 'validation-indicator';
|
||||
if (value) {
|
||||
indicator.classList.add(isValid ? 'valid' : 'invalid');
|
||||
}
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
showSuggestions(input, value) {
|
||||
const fieldName = input.id.replace('Input', '').replace('Select', '');
|
||||
const suggestionContainer = input.parentNode.querySelector('.suggestion-flow');
|
||||
|
||||
if (!suggestionContainer || !value || value.length < 2) {
|
||||
if (suggestionContainer) {
|
||||
suggestionContainer.classList.remove('active');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let suggestions = [];
|
||||
|
||||
// Generate context-aware suggestions
|
||||
switch (fieldName) {
|
||||
case 'industry':
|
||||
suggestions = this.state.suggestions.industries.filter(industry =>
|
||||
industry.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
break;
|
||||
case 'name':
|
||||
suggestions = this.state.suggestions.names.filter(name =>
|
||||
name.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
break;
|
||||
case 'email':
|
||||
if (value.includes('@')) {
|
||||
const [localPart] = value.split('@');
|
||||
suggestions = ['gmail.com', 'company.com', 'business.org'].map(domain =>
|
||||
`${localPart}@${domain}`
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (suggestions.length > 0) {
|
||||
suggestionContainer.innerHTML = suggestions.map(suggestion =>
|
||||
`<div class="suggestion-item" data-value="${suggestion}">${suggestion}</div>`
|
||||
).join('');
|
||||
suggestionContainer.classList.add('active');
|
||||
} else {
|
||||
suggestionContainer.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
applySuggestion(suggestionItem) {
|
||||
const input = suggestionItem.closest('.input-group').querySelector('.liquid-input');
|
||||
const value = suggestionItem.dataset.value;
|
||||
|
||||
input.value = value;
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
|
||||
// Hide suggestions
|
||||
const suggestionContainer = suggestionItem.closest('.suggestion-flow');
|
||||
suggestionContainer.classList.remove('active');
|
||||
}
|
||||
|
||||
handleBranchChange(event) {
|
||||
const selectedType = event.target.value;
|
||||
this.state.currentBranch = selectedType;
|
||||
|
||||
// Hide all branches
|
||||
const branches = document.querySelectorAll('.branch-path');
|
||||
branches.forEach(branch => {
|
||||
branch.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show selected branch
|
||||
if (selectedType) {
|
||||
const targetBranch = document.getElementById(`${selectedType}Branch`);
|
||||
if (targetBranch) {
|
||||
this.setAdaptingState(true);
|
||||
|
||||
setTimeout(() => {
|
||||
targetBranch.classList.add('active');
|
||||
this.adaptFormLayout();
|
||||
this.setAdaptingState(false);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
this.updateProgress();
|
||||
this.announceChange('branch', selectedType);
|
||||
}
|
||||
|
||||
adaptFormLayout() {
|
||||
const formFlow = document.getElementById('formFlow');
|
||||
const hasActiveBranch = document.querySelector('.branch-path.active');
|
||||
|
||||
if (hasActiveBranch) {
|
||||
formFlow.classList.add('expanded');
|
||||
} else {
|
||||
formFlow.classList.remove('expanded');
|
||||
}
|
||||
}
|
||||
|
||||
updateProgress() {
|
||||
const totalFields = document.querySelectorAll('.liquid-input[required]').length;
|
||||
const validFields = Object.values(this.state.validationStates).filter(Boolean).length;
|
||||
const progress = totalFields > 0 ? (validFields / totalFields) * 100 : 0;
|
||||
|
||||
this.state.formProgress = progress;
|
||||
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
|
||||
setAdaptingState(isAdapting) {
|
||||
this.state.isAdapting = isAdapting;
|
||||
const flowState = document.getElementById('flowState');
|
||||
const stateText = document.getElementById('stateText');
|
||||
|
||||
if (isAdapting) {
|
||||
flowState.classList.add('adapting');
|
||||
stateText.textContent = 'ADAPT';
|
||||
} else {
|
||||
flowState.classList.remove('adapting');
|
||||
stateText.textContent = 'FLOW';
|
||||
}
|
||||
}
|
||||
|
||||
startAdaptiveMonitoring() {
|
||||
// Monitor user behavior and adapt interface
|
||||
setInterval(() => {
|
||||
this.analyzeUserBehavior();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
analyzeUserBehavior() {
|
||||
// Adaptive logic based on user context
|
||||
const context = this.state.userContext;
|
||||
|
||||
// Auto-suggest based on patterns
|
||||
if (context.name && !context.email && context.name.includes(' ')) {
|
||||
const [firstName, lastName] = context.name.split(' ');
|
||||
const emailSuggestion = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@company.com`;
|
||||
|
||||
// Store for later suggestion
|
||||
if (!this.state.suggestions.emails.includes(emailSuggestion)) {
|
||||
this.state.suggestions.emails.unshift(emailSuggestion);
|
||||
}
|
||||
}
|
||||
|
||||
// Adapt form complexity based on progress
|
||||
if (this.state.formProgress > 80) {
|
||||
document.getElementById('actionGrid').style.transform = 'scale(1.02)';
|
||||
} else {
|
||||
document.getElementById('actionGrid').style.transform = 'scale(1)';
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
// Validate all required fields
|
||||
const requiredInputs = document.querySelectorAll('.liquid-input[required]');
|
||||
let allValid = true;
|
||||
|
||||
requiredInputs.forEach(input => {
|
||||
if (!this.validateField(input)) {
|
||||
allValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (allValid) {
|
||||
this.setAdaptingState(true);
|
||||
|
||||
// Simulate submission
|
||||
setTimeout(() => {
|
||||
alert('Form submitted successfully with liquid flow!');
|
||||
this.setAdaptingState(false);
|
||||
this.announceChange('form', 'submitted');
|
||||
}, 1500);
|
||||
} else {
|
||||
this.announceChange('validation', 'Please complete all required fields');
|
||||
}
|
||||
}
|
||||
|
||||
handleReset() {
|
||||
// Reset all inputs
|
||||
const inputs = document.querySelectorAll('.liquid-input');
|
||||
inputs.forEach(input => {
|
||||
input.value = '';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
});
|
||||
|
||||
// Reset state
|
||||
this.state = {
|
||||
...this.state,
|
||||
currentBranch: null,
|
||||
validationStates: {},
|
||||
formProgress: 0,
|
||||
userContext: {}
|
||||
};
|
||||
|
||||
// Hide all branches
|
||||
const branches = document.querySelectorAll('.branch-path');
|
||||
branches.forEach(branch => {
|
||||
branch.classList.remove('active');
|
||||
});
|
||||
|
||||
this.adaptFormLayout();
|
||||
this.updateProgress();
|
||||
this.announceChange('form', 'reset');
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
// Save current progress
|
||||
const progressData = {
|
||||
context: this.state.userContext,
|
||||
branch: this.state.currentBranch,
|
||||
progress: this.state.formProgress,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
localStorage.setItem('liquidFlowProgress', JSON.stringify(progressData));
|
||||
|
||||
this.setAdaptingState(true);
|
||||
setTimeout(() => {
|
||||
alert('Progress saved in liquid state!');
|
||||
this.setAdaptingState(false);
|
||||
this.announceChange('progress', 'saved');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
announceChange(type, value) {
|
||||
const srStatus = document.getElementById('srStatus');
|
||||
let message = '';
|
||||
|
||||
switch (type) {
|
||||
case 'branch':
|
||||
message = `Form adapted to ${value} workflow`;
|
||||
break;
|
||||
case 'validation':
|
||||
message = value;
|
||||
break;
|
||||
case 'form':
|
||||
message = `Form ${value}`;
|
||||
break;
|
||||
case 'progress':
|
||||
message = `Progress ${value}`;
|
||||
break;
|
||||
default:
|
||||
message = `${type} updated to ${value}`;
|
||||
}
|
||||
|
||||
srStatus.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the Liquid Metal Adaptive Flow Interface
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new LiquidMetalAdaptiveFlow();
|
||||
});
|
||||
|
||||
// Load saved progress if available
|
||||
window.addEventListener('load', () => {
|
||||
const savedProgress = localStorage.getItem('liquidFlowProgress');
|
||||
if (savedProgress) {
|
||||
const data = JSON.parse(savedProgress);
|
||||
|
||||
// Restore form state
|
||||
Object.entries(data.context).forEach(([field, value]) => {
|
||||
const input = document.getElementById(`${field}Input`) || document.getElementById(`${field}Select`);
|
||||
if (input && value) {
|
||||
input.value = value;
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
|
||||
// Restore branch if needed
|
||||
if (data.branch) {
|
||||
const typeSelect = document.getElementById('typeSelect');
|
||||
if (typeSelect) {
|
||||
typeSelect.value = data.branch;
|
||||
typeSelect.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,815 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Hybrid 20 - Digital Minimalism Action Controller</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--pure-white: #ffffff;
|
||||
--soft-black: #0a0a0a;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #e5e5e5;
|
||||
--neutral-300: #d4d4d4;
|
||||
--neutral-400: #a3a3a3;
|
||||
--neutral-500: #737373;
|
||||
--neutral-600: #525252;
|
||||
--neutral-700: #404040;
|
||||
--neutral-800: #262626;
|
||||
--neutral-900: #171717;
|
||||
|
||||
--accent-primary: #0066ff;
|
||||
--accent-success: #00d26a;
|
||||
--accent-error: #ff3838;
|
||||
--accent-warning: #ffab00;
|
||||
|
||||
--radius-small: 2px;
|
||||
--radius-medium: 4px;
|
||||
--radius-large: 8px;
|
||||
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: var(--pure-white);
|
||||
color: var(--soft-black);
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 16px;
|
||||
color: var(--neutral-500);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Action Controller Base */
|
||||
.action-controller {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
background: var(--pure-white);
|
||||
border: 1px solid var(--neutral-300);
|
||||
border-radius: var(--radius-medium);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-black);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all var(--transition-fast);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.action-controller:hover {
|
||||
border-color: var(--neutral-400);
|
||||
background: var(--neutral-100);
|
||||
}
|
||||
|
||||
.action-controller:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Primary Action */
|
||||
.action-controller.primary {
|
||||
background: var(--soft-black);
|
||||
border-color: var(--soft-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.action-controller.primary:hover {
|
||||
background: var(--neutral-800);
|
||||
border-color: var(--neutral-800);
|
||||
}
|
||||
|
||||
/* Action States */
|
||||
.action-controller .state-default,
|
||||
.action-controller .state-loading,
|
||||
.action-controller .state-confirm,
|
||||
.action-controller .state-success,
|
||||
.action-controller .state-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.action-controller[data-state="default"] .state-default {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-controller[data-state="loading"] .state-loading,
|
||||
.action-controller[data-state="confirm"] .state-confirm,
|
||||
.action-controller[data-state="success"] .state-success,
|
||||
.action-controller[data-state="error"] .state-error {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-controller:not([data-state="default"]) .state-default,
|
||||
.action-controller:not([data-state="loading"]) .state-loading,
|
||||
.action-controller:not([data-state="confirm"]) .state-confirm,
|
||||
.action-controller:not([data-state="success"]) .state-success,
|
||||
.action-controller:not([data-state="error"]) .state-error {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--neutral-300);
|
||||
border-top-color: var(--soft-black);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.action-controller.primary .loading-spinner {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-top-color: var(--pure-white);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.action-controller .progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent-primary);
|
||||
transform-origin: left;
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
/* Success/Error States */
|
||||
.action-controller[data-state="success"] {
|
||||
border-color: var(--accent-success);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.action-controller[data-state="error"] {
|
||||
border-color: var(--accent-error);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Action Groups */
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.action-group.vertical {
|
||||
flex-direction: column;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
/* Demo Sections */
|
||||
.demo-section {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 24px;
|
||||
color: var(--neutral-700);
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* Card Action */
|
||||
.action-card {
|
||||
background: var(--pure-white);
|
||||
border: 1px solid var(--neutral-200);
|
||||
border-radius: var(--radius-large);
|
||||
padding: 24px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
border-color: var(--neutral-300);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.action-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.action-card p {
|
||||
color: var(--neutral-600);
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Confirmation Dialog */
|
||||
.confirm-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
background: var(--pure-white);
|
||||
border-radius: var(--radius-large);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
padding: 32px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all var(--transition-medium);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.confirm-dialog.active {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.confirm-dialog h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.confirm-dialog p {
|
||||
color: var(--neutral-600);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.confirm-dialog .dialog-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition-medium);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--pure-white);
|
||||
border: 1px solid var(--neutral-300);
|
||||
border-radius: var(--radius-medium);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 280px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateX(400px);
|
||||
transition: transform var(--transition-medium);
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
border-color: var(--accent-success);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-color: var(--accent-error);
|
||||
}
|
||||
|
||||
/* Minimal Animations */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1>Minimal Action Controller</h1>
|
||||
<p>Precise control states with pure geometric design</p>
|
||||
</header>
|
||||
|
||||
<!-- Basic Actions -->
|
||||
<section class="demo-section">
|
||||
<h2>Primary Actions</h2>
|
||||
<div class="action-group">
|
||||
<button class="action-controller primary" data-state="default" onclick="handleAction(this, 'save')">
|
||||
<span class="state-default">Save Changes</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Saving...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Saved</span>
|
||||
</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
|
||||
<button class="action-controller" data-state="default" onclick="handleAction(this, 'export')">
|
||||
<span class="state-default">Export Data</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Exporting...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
<span>Exported</span>
|
||||
</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
|
||||
<button class="action-controller" data-state="default" onclick="handleAction(this, 'sync')">
|
||||
<span class="state-default">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="23 4 23 10 17 10"></polyline>
|
||||
<polyline points="1 20 1 14 7 14"></polyline>
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
||||
</svg>
|
||||
<span>Sync</span>
|
||||
</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Syncing...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Synced</span>
|
||||
</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Confirmation Actions -->
|
||||
<section class="demo-section">
|
||||
<h2>Confirmation Actions</h2>
|
||||
<div class="demo-grid">
|
||||
<div class="action-card">
|
||||
<h3>Delete Item</h3>
|
||||
<p>This action requires confirmation before proceeding.</p>
|
||||
<button class="action-controller" data-state="default" onclick="handleConfirmAction(this, 'delete')">
|
||||
<span class="state-default">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
<span>Delete</span>
|
||||
</span>
|
||||
<span class="state-confirm">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
<span>Confirm Delete?</span>
|
||||
</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Deleting...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Deleted</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="action-card">
|
||||
<h3>Archive Project</h3>
|
||||
<p>Move this project to archived items.</p>
|
||||
<button class="action-controller" data-state="default" onclick="handleConfirmAction(this, 'archive')">
|
||||
<span class="state-default">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="21 8 21 21 3 21 3 8"></polyline>
|
||||
<rect x="1" y="3" width="22" height="5"></rect>
|
||||
<line x1="10" y1="12" x2="14" y2="12"></line>
|
||||
</svg>
|
||||
<span>Archive</span>
|
||||
</span>
|
||||
<span class="state-confirm">
|
||||
<span>Archive Project?</span>
|
||||
</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Archiving...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Archived</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="action-card">
|
||||
<h3>Reset Settings</h3>
|
||||
<p>Restore all settings to default values.</p>
|
||||
<button class="action-controller" data-state="default" onclick="handleConfirmAction(this, 'reset')">
|
||||
<span class="state-default">Reset to Default</span>
|
||||
<span class="state-confirm">Reset All Settings?</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Resetting...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Reset Complete</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Error States -->
|
||||
<section class="demo-section">
|
||||
<h2>Error Handling</h2>
|
||||
<div class="action-group">
|
||||
<button class="action-controller" data-state="default" onclick="handleErrorAction(this)">
|
||||
<span class="state-default">Test Error State</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Processing...</span>
|
||||
</span>
|
||||
<span class="state-error">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
<span>Failed</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button class="action-controller" data-state="default" onclick="handleRetryAction(this)">
|
||||
<span class="state-default">Network Request</span>
|
||||
<span class="state-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Connecting...</span>
|
||||
</span>
|
||||
<span class="state-error">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
<span>Retry</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Connected</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Progress Actions -->
|
||||
<section class="demo-section">
|
||||
<h2>Progress Indicators</h2>
|
||||
<div class="action-group vertical">
|
||||
<button class="action-controller primary" data-state="default" onclick="handleProgressAction(this, 'upload')">
|
||||
<span class="state-default">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<span>Upload File</span>
|
||||
</span>
|
||||
<span class="state-loading">
|
||||
<span class="pulse">Uploading...</span>
|
||||
</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Upload Complete</span>
|
||||
</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
|
||||
<button class="action-controller" data-state="default" onclick="handleProgressAction(this, 'process')">
|
||||
<span class="state-default">Process Data</span>
|
||||
<span class="state-loading">Processing...</span>
|
||||
<span class="state-success">
|
||||
<svg class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span>Processed</span>
|
||||
</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
|
||||
<button class="action-controller" data-state="default" onclick="handleProgressAction(this, 'generate')">
|
||||
<span class="state-default">Generate Report</span>
|
||||
<span class="state-loading">Generating...</span>
|
||||
<span class="state-success">View Report</span>
|
||||
<div class="progress-bar"></div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Dialog -->
|
||||
<div class="overlay" onclick="closeDialog()"></div>
|
||||
<div class="confirm-dialog" id="confirmDialog">
|
||||
<h3>Confirm Action</h3>
|
||||
<p>Are you sure you want to proceed with this action?</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="action-controller" onclick="closeDialog()">Cancel</button>
|
||||
<button class="action-controller primary" id="confirmButton">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
<script>
|
||||
// Action Controller Functions
|
||||
function handleAction(button, type) {
|
||||
if (button.dataset.state !== 'default') return;
|
||||
|
||||
button.dataset.state = 'loading';
|
||||
|
||||
// Simulate async operation
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'success';
|
||||
showToast(`${type.charAt(0).toUpperCase() + type.slice(1)} completed successfully`, 'success');
|
||||
|
||||
// Reset after delay
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'default';
|
||||
}, 2000);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function handleConfirmAction(button, type) {
|
||||
const currentState = button.dataset.state;
|
||||
|
||||
if (currentState === 'default') {
|
||||
button.dataset.state = 'confirm';
|
||||
|
||||
// Auto-reset if no action taken
|
||||
setTimeout(() => {
|
||||
if (button.dataset.state === 'confirm') {
|
||||
button.dataset.state = 'default';
|
||||
}
|
||||
}, 3000);
|
||||
} else if (currentState === 'confirm') {
|
||||
button.dataset.state = 'loading';
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'success';
|
||||
showToast(`${type.charAt(0).toUpperCase() + type.slice(1)} completed`, 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'default';
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
function handleErrorAction(button) {
|
||||
if (button.dataset.state !== 'default') return;
|
||||
|
||||
button.dataset.state = 'loading';
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'error';
|
||||
showToast('Operation failed. Please try again.', 'error');
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'default';
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function handleRetryAction(button) {
|
||||
const currentState = button.dataset.state;
|
||||
|
||||
if (currentState === 'default' || currentState === 'error') {
|
||||
button.dataset.state = 'loading';
|
||||
|
||||
// Simulate network request with 50% failure rate
|
||||
setTimeout(() => {
|
||||
if (Math.random() > 0.5) {
|
||||
button.dataset.state = 'success';
|
||||
showToast('Connection established', 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'default';
|
||||
}, 2000);
|
||||
} else {
|
||||
button.dataset.state = 'error';
|
||||
showToast('Connection failed. Click to retry.', 'error');
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
function handleProgressAction(button, type) {
|
||||
if (button.dataset.state !== 'default') return;
|
||||
|
||||
button.dataset.state = 'loading';
|
||||
const progressBar = button.querySelector('.progress-bar');
|
||||
|
||||
// Animate progress
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 20;
|
||||
if (progress > 100) progress = 100;
|
||||
|
||||
progressBar.style.transform = `scaleX(${progress / 100})`;
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
button.dataset.state = 'success';
|
||||
showToast(`${type.charAt(0).toUpperCase() + type.slice(1)} completed`, 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
button.dataset.state = 'default';
|
||||
progressBar.style.transform = 'scaleX(0)';
|
||||
}, 2000);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Dialog Functions
|
||||
function showDialog() {
|
||||
document.getElementById('confirmDialog').classList.add('active');
|
||||
document.querySelector('.overlay').classList.add('active');
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
document.getElementById('confirmDialog').classList.remove('active');
|
||||
document.querySelector('.overlay').classList.remove('active');
|
||||
}
|
||||
|
||||
// Toast Functions
|
||||
function showToast(message, type = 'default') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
|
||||
let icon = '';
|
||||
if (type === 'success') {
|
||||
icon = '<svg class="icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>';
|
||||
} else if (type === 'error') {
|
||||
icon = '<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
|
||||
}
|
||||
|
||||
toast.innerHTML = `${icon}<span>${message}</span>`;
|
||||
|
||||
const container = document.getElementById('toastContainer');
|
||||
container.appendChild(toast);
|
||||
|
||||
// Trigger show animation
|
||||
setTimeout(() => toast.classList.add('show'), 10);
|
||||
|
||||
// Remove after delay
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Add click outside to close confirmation states
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.action-controller')) {
|
||||
document.querySelectorAll('.action-controller[data-state="confirm"]').forEach(btn => {
|
||||
btn.dataset.state = 'default';
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,998 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ocean Depths Calendar Dashboard - Iteration 21</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Aqua+Grotesque&family=Orbitron:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
background: #000814;
|
||||
color: #e0fbfc;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Ocean Background */
|
||||
.ocean-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg,
|
||||
#001845 0%,
|
||||
#001233 20%,
|
||||
#000814 50%,
|
||||
#000514 80%,
|
||||
#000000 100%);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
/* Caustic Light Effects */
|
||||
.caustics {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><filter id="turbulence"><feTurbulence baseFrequency="0.02" numOctaves="3" result="turbulence"/><feColorMatrix in="turbulence" type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23turbulence)" opacity="0.1"/></svg>');
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.3;
|
||||
z-index: -2;
|
||||
animation: causticMove 20s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes causticMove {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-20px, -20px) scale(1.1); }
|
||||
100% { transform: translate(0, 0) scale(1); }
|
||||
}
|
||||
|
||||
/* Bubbles */
|
||||
.bubble {
|
||||
position: absolute;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(224, 251, 252, 0.4), rgba(224, 251, 252, 0.1));
|
||||
border-radius: 50%;
|
||||
animation: float 10s infinite ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(100vh) translateX(0); }
|
||||
50% { transform: translateY(-20vh) translateX(20px); }
|
||||
}
|
||||
|
||||
/* Bioluminescent Particles */
|
||||
.bioluminescent {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #00f5ff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #00f5ff, 0 0 20px #00f5ff;
|
||||
animation: bioluminesce 5s infinite ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes bioluminesce {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.5); }
|
||||
}
|
||||
|
||||
/* Main Calendar Container */
|
||||
.calendar-dashboard {
|
||||
position: relative;
|
||||
max-width: 1400px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background: rgba(0, 18, 51, 0.8);
|
||||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 50px rgba(0, 245, 255, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 8, 20, 0.6);
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5em;
|
||||
background: linear-gradient(90deg, #00f5ff, #0077be, #00f5ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
/* View Selector */
|
||||
.view-selector {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
padding: 10px 20px;
|
||||
background: rgba(0, 119, 190, 0.3);
|
||||
border: 1px solid #0077be;
|
||||
border-radius: 25px;
|
||||
color: #e0fbfc;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: rgba(0, 119, 190, 0.5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 245, 255, 0.3);
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: #0077be;
|
||||
box-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 350px;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Calendar View */
|
||||
.calendar-view {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Month Navigation */
|
||||
.month-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.month-nav h2 {
|
||||
font-size: 1.8em;
|
||||
color: #00f5ff;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: 1px solid #0077be;
|
||||
color: #00f5ff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(0, 119, 190, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Calendar Grid */
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.day-header {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #0077be;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid rgba(0, 119, 190, 0.3);
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
aspect-ratio: 1;
|
||||
background: rgba(0, 18, 51, 0.5);
|
||||
border: 1px solid rgba(0, 245, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-day:hover {
|
||||
background: rgba(0, 119, 190, 0.2);
|
||||
border-color: #00f5ff;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 20px rgba(0, 245, 255, 0.3);
|
||||
}
|
||||
|
||||
.calendar-day.today {
|
||||
background: rgba(0, 119, 190, 0.4);
|
||||
border-color: #00f5ff;
|
||||
box-shadow: inset 0 0 20px rgba(0, 245, 255, 0.3);
|
||||
}
|
||||
|
||||
.calendar-day.other-month {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.day-events {
|
||||
font-size: 0.8em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.event-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 3px;
|
||||
box-shadow: 0 0 5px currentColor;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Weather Widget */
|
||||
.weather-widget {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
font-size: 3em;
|
||||
margin: 10px 0;
|
||||
animation: weatherFloat 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes weatherFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.weather-temp {
|
||||
font-size: 2em;
|
||||
color: #00f5ff;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Event List */
|
||||
.event-list {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.event-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.event-list::-webkit-scrollbar-track {
|
||||
background: rgba(0, 18, 51, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.event-list::-webkit-scrollbar-thumb {
|
||||
background: #0077be;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
background: rgba(0, 18, 51, 0.5);
|
||||
border-left: 3px solid #00f5ff;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: rgba(0, 119, 190, 0.2);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
color: #0077be;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Bottom Tools */
|
||||
.bottom-tools {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Quick Add */
|
||||
.quick-add {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
}
|
||||
|
||||
.quick-add input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: rgba(0, 18, 51, 0.8);
|
||||
border: 1px solid #0077be;
|
||||
border-radius: 10px;
|
||||
color: #e0fbfc;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.quick-add input:focus {
|
||||
outline: none;
|
||||
border-color: #00f5ff;
|
||||
box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(135deg, #0077be, #00f5ff);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #000814;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(0, 245, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Reminders */
|
||||
.reminders {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
}
|
||||
|
||||
.reminder-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: rgba(0, 18, 51, 0.5);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.reminder-item:hover {
|
||||
background: rgba(0, 119, 190, 0.2);
|
||||
}
|
||||
|
||||
.reminder-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scheduling Assistant */
|
||||
.scheduling-assistant {
|
||||
background: rgba(0, 12, 36, 0.6);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 18, 51, 0.5);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-slot:hover {
|
||||
background: rgba(0, 119, 190, 0.3);
|
||||
border: 1px solid #00f5ff;
|
||||
}
|
||||
|
||||
.time-slot.available {
|
||||
border-left: 3px solid #00ff88;
|
||||
}
|
||||
|
||||
/* Marine Life Decorations */
|
||||
.fish {
|
||||
position: absolute;
|
||||
font-size: 2em;
|
||||
color: rgba(0, 245, 255, 0.3);
|
||||
animation: swim 20s infinite linear;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes swim {
|
||||
0% { transform: translateX(-100px) translateY(0) scaleX(1); }
|
||||
49% { transform: translateX(calc(100vw + 100px)) translateY(20px) scaleX(1); }
|
||||
50% { transform: translateX(calc(100vw + 100px)) translateY(20px) scaleX(-1); }
|
||||
99% { transform: translateX(-100px) translateY(0) scaleX(-1); }
|
||||
100% { transform: translateX(-100px) translateY(0) scaleX(1); }
|
||||
}
|
||||
|
||||
/* Wave Effect */
|
||||
.wave {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%230077be" fill-opacity="0.1" d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path></svg>');
|
||||
background-size: 1200px 100px;
|
||||
animation: wave 10s infinite linear;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0% { background-position-x: 0; }
|
||||
100% { background-position-x: 1200px; }
|
||||
}
|
||||
|
||||
/* Depth Indicator */
|
||||
.depth-indicator {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 300px;
|
||||
background: linear-gradient(to bottom, #00f5ff, #0077be, #001845);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.depth-marker {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: #00f5ff;
|
||||
left: -10px;
|
||||
animation: depthPulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes depthPulse {
|
||||
0%, 100% { opacity: 0.5; width: 30px; }
|
||||
50% { opacity: 1; width: 40px; }
|
||||
}
|
||||
|
||||
/* Modal for Event Details */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 8, 20, 0.9);
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 18, 51, 0.95);
|
||||
border: 1px solid #00f5ff;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
width: 500px;
|
||||
box-shadow: 0 0 50px rgba(0, 245, 255, 0.5);
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
font-size: 2em;
|
||||
color: #00f5ff;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Ocean Background -->
|
||||
<div class="ocean-bg"></div>
|
||||
<div class="caustics"></div>
|
||||
|
||||
<!-- Bubbles -->
|
||||
<div class="bubble" style="width: 20px; height: 20px; left: 10%; animation-delay: 0s;"></div>
|
||||
<div class="bubble" style="width: 15px; height: 15px; left: 30%; animation-delay: 2s;"></div>
|
||||
<div class="bubble" style="width: 25px; height: 25px; left: 50%; animation-delay: 4s;"></div>
|
||||
<div class="bubble" style="width: 10px; height: 10px; left: 70%; animation-delay: 6s;"></div>
|
||||
<div class="bubble" style="width: 30px; height: 30px; left: 90%; animation-delay: 8s;"></div>
|
||||
|
||||
<!-- Bioluminescent Particles -->
|
||||
<div class="bioluminescent" style="top: 20%; left: 15%; animation-delay: 0s;"></div>
|
||||
<div class="bioluminescent" style="top: 40%; left: 80%; animation-delay: 1s;"></div>
|
||||
<div class="bioluminescent" style="top: 60%; left: 25%; animation-delay: 2s;"></div>
|
||||
<div class="bioluminescent" style="top: 80%; left: 60%; animation-delay: 3s;"></div>
|
||||
|
||||
<!-- Marine Life -->
|
||||
<div class="fish" style="top: 30%; animation-delay: 0s;">🐟</div>
|
||||
<div class="fish" style="top: 60%; animation-delay: 5s;">🐠</div>
|
||||
<div class="fish" style="top: 80%; animation-delay: 10s;">🦈</div>
|
||||
|
||||
<!-- Wave Effect -->
|
||||
<div class="wave"></div>
|
||||
|
||||
<!-- Depth Indicator -->
|
||||
<div class="depth-indicator">
|
||||
<div class="depth-marker" style="top: 20%;"></div>
|
||||
<div class="depth-marker" style="top: 50%; animation-delay: 0.5s;"></div>
|
||||
<div class="depth-marker" style="top: 80%; animation-delay: 1s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Calendar Dashboard -->
|
||||
<div class="calendar-dashboard">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<h1>Ocean Depths Calendar</h1>
|
||||
<div class="view-selector">
|
||||
<button class="view-btn active" data-view="month">Month</button>
|
||||
<button class="view-btn" data-view="week">Week</button>
|
||||
<button class="view-btn" data-view="day">Day</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Calendar View -->
|
||||
<div class="calendar-view">
|
||||
<div class="month-nav">
|
||||
<button class="nav-btn" id="prevMonth">‹</button>
|
||||
<h2 id="currentMonth">January 2024</h2>
|
||||
<button class="nav-btn" id="nextMonth">›</button>
|
||||
</div>
|
||||
<div class="calendar-grid" id="calendarGrid">
|
||||
<!-- Calendar will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Weather Widget -->
|
||||
<div class="weather-widget">
|
||||
<h3>Weather Forecast</h3>
|
||||
<div class="weather-icon">🌊</div>
|
||||
<div class="weather-temp">72°F</div>
|
||||
<p>Ocean Breeze</p>
|
||||
<p style="font-size: 0.9em; color: #0077be;">Perfect for diving</p>
|
||||
</div>
|
||||
|
||||
<!-- Event List -->
|
||||
<div class="event-list">
|
||||
<h3 style="margin-bottom: 15px;">Today's Events</h3>
|
||||
<div class="event-item">
|
||||
<div>
|
||||
<div class="event-time">9:00 AM</div>
|
||||
<div class="event-title">Deep Sea Exploration</div>
|
||||
<div style="font-size: 0.9em; color: #0077be;">Research vessel departure</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-item">
|
||||
<div>
|
||||
<div class="event-time">2:00 PM</div>
|
||||
<div class="event-title">Marine Biology Conference</div>
|
||||
<div style="font-size: 0.9em; color: #0077be;">Virtual meeting room</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-item">
|
||||
<div>
|
||||
<div class="event-time">6:00 PM</div>
|
||||
<div class="event-title">Sunset Dive</div>
|
||||
<div style="font-size: 0.9em; color: #0077be;">Coral reef observation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Tools -->
|
||||
<div class="bottom-tools">
|
||||
<!-- Quick Add -->
|
||||
<div class="quick-add">
|
||||
<h3 style="margin-bottom: 15px;">Quick Add Event</h3>
|
||||
<input type="text" placeholder="Event title..." id="eventTitle">
|
||||
<input type="datetime-local" id="eventDateTime">
|
||||
<button class="add-btn">Add to Calendar</button>
|
||||
</div>
|
||||
|
||||
<!-- Reminders -->
|
||||
<div class="reminders">
|
||||
<h3 style="margin-bottom: 15px;">Reminders</h3>
|
||||
<div class="reminder-item">
|
||||
<input type="checkbox" class="reminder-checkbox">
|
||||
<span>Check diving equipment</span>
|
||||
</div>
|
||||
<div class="reminder-item">
|
||||
<input type="checkbox" class="reminder-checkbox">
|
||||
<span>Review ocean current data</span>
|
||||
</div>
|
||||
<div class="reminder-item">
|
||||
<input type="checkbox" class="reminder-checkbox">
|
||||
<span>Prepare research notes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scheduling Assistant -->
|
||||
<div class="scheduling-assistant">
|
||||
<h3 style="margin-bottom: 15px;">Available Time Slots</h3>
|
||||
<div class="time-slot available">10:00 AM - 11:00 AM</div>
|
||||
<div class="time-slot available">3:00 PM - 4:00 PM</div>
|
||||
<div class="time-slot available">7:00 PM - 8:00 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal" id="eventModal">
|
||||
<div class="modal-content">
|
||||
<span class="close-modal" id="closeModal">×</span>
|
||||
<h2 style="color: #00f5ff; margin-bottom: 20px;">Event Details</h2>
|
||||
<div id="modalContent">
|
||||
<!-- Event details will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Calendar Logic
|
||||
const months = ['January', 'February', 'March', 'April', 'May', 'June',
|
||||
'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
let currentDate = new Date();
|
||||
let currentMonth = currentDate.getMonth();
|
||||
let currentYear = currentDate.getFullYear();
|
||||
|
||||
// Sample events data
|
||||
const events = {
|
||||
'2024-1-15': [
|
||||
{ time: '10:00 AM', title: 'Submarine Test', color: '#00ff88' },
|
||||
{ time: '2:00 PM', title: 'Ocean Mapping', color: '#00f5ff' }
|
||||
],
|
||||
'2024-1-20': [
|
||||
{ time: '9:00 AM', title: 'Deep Dive Training', color: '#ff6b6b' }
|
||||
],
|
||||
'2024-1-25': [
|
||||
{ time: '11:00 AM', title: 'Marine Research', color: '#4ecdc4' },
|
||||
{ time: '3:00 PM', title: 'Equipment Check', color: '#ffe66d' }
|
||||
]
|
||||
};
|
||||
|
||||
function generateCalendar() {
|
||||
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
||||
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
||||
const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate();
|
||||
|
||||
const calendarGrid = document.getElementById('calendarGrid');
|
||||
calendarGrid.innerHTML = '';
|
||||
|
||||
// Add day headers
|
||||
const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
dayHeaders.forEach(day => {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'day-header';
|
||||
header.textContent = day;
|
||||
calendarGrid.appendChild(header);
|
||||
});
|
||||
|
||||
// Add previous month days
|
||||
for (let i = firstDay - 1; i >= 0; i--) {
|
||||
const dayDiv = createDayElement(daysInPrevMonth - i, true);
|
||||
calendarGrid.appendChild(dayDiv);
|
||||
}
|
||||
|
||||
// Add current month days
|
||||
const today = new Date();
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const isToday = day === today.getDate() &&
|
||||
currentMonth === today.getMonth() &&
|
||||
currentYear === today.getFullYear();
|
||||
const dayDiv = createDayElement(day, false, isToday);
|
||||
calendarGrid.appendChild(dayDiv);
|
||||
}
|
||||
|
||||
// Add next month days
|
||||
const remainingDays = 42 - (firstDay + daysInMonth);
|
||||
for (let day = 1; day <= remainingDays; day++) {
|
||||
const dayDiv = createDayElement(day, true);
|
||||
calendarGrid.appendChild(dayDiv);
|
||||
}
|
||||
|
||||
// Update month display
|
||||
document.getElementById('currentMonth').textContent =
|
||||
`${months[currentMonth]} ${currentYear}`;
|
||||
}
|
||||
|
||||
function createDayElement(day, isOtherMonth, isToday) {
|
||||
const dayDiv = document.createElement('div');
|
||||
dayDiv.className = 'calendar-day';
|
||||
if (isOtherMonth) dayDiv.classList.add('other-month');
|
||||
if (isToday) dayDiv.classList.add('today');
|
||||
|
||||
const dayNumber = document.createElement('div');
|
||||
dayNumber.className = 'day-number';
|
||||
dayNumber.textContent = day;
|
||||
dayDiv.appendChild(dayNumber);
|
||||
|
||||
// Add events if any
|
||||
const dateKey = `${currentYear}-${currentMonth + 1}-${day}`;
|
||||
if (events[dateKey] && !isOtherMonth) {
|
||||
const dayEvents = document.createElement('div');
|
||||
dayEvents.className = 'day-events';
|
||||
events[dateKey].forEach(event => {
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'event-dot';
|
||||
dot.style.backgroundColor = event.color;
|
||||
dayEvents.appendChild(dot);
|
||||
});
|
||||
dayDiv.appendChild(dayEvents);
|
||||
}
|
||||
|
||||
// Add click event
|
||||
dayDiv.addEventListener('click', () => {
|
||||
if (!isOtherMonth) {
|
||||
showDayDetails(day);
|
||||
}
|
||||
});
|
||||
|
||||
// Add hover sound effect (visual feedback)
|
||||
dayDiv.addEventListener('mouseenter', () => {
|
||||
createRipple(dayDiv);
|
||||
});
|
||||
|
||||
return dayDiv;
|
||||
}
|
||||
|
||||
function createRipple(element) {
|
||||
const ripple = document.createElement('div');
|
||||
ripple.style.position = 'absolute';
|
||||
ripple.style.width = '20px';
|
||||
ripple.style.height = '20px';
|
||||
ripple.style.background = 'radial-gradient(circle, rgba(0, 245, 255, 0.6) 0%, transparent 70%)';
|
||||
ripple.style.borderRadius = '50%';
|
||||
ripple.style.top = '50%';
|
||||
ripple.style.left = '50%';
|
||||
ripple.style.transform = 'translate(-50%, -50%)';
|
||||
ripple.style.animation = 'rippleExpand 0.6s ease-out';
|
||||
element.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
}
|
||||
|
||||
// Add ripple animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rippleExpand {
|
||||
0% { width: 20px; height: 20px; opacity: 1; }
|
||||
100% { width: 100px; height: 100px; opacity: 0; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
function showDayDetails(day) {
|
||||
const modal = document.getElementById('eventModal');
|
||||
const modalContent = document.getElementById('modalContent');
|
||||
const dateKey = `${currentYear}-${currentMonth + 1}-${day}`;
|
||||
|
||||
modalContent.innerHTML = `
|
||||
<h3 style="color: #0077be; margin-bottom: 15px;">
|
||||
${months[currentMonth]} ${day}, ${currentYear}
|
||||
</h3>
|
||||
`;
|
||||
|
||||
if (events[dateKey]) {
|
||||
events[dateKey].forEach(event => {
|
||||
modalContent.innerHTML += `
|
||||
<div style="background: rgba(0, 18, 51, 0.5); padding: 15px;
|
||||
border-left: 3px solid ${event.color};
|
||||
margin-bottom: 10px; border-radius: 0 10px 10px 0;">
|
||||
<div style="color: #00f5ff; font-size: 0.9em;">${event.time}</div>
|
||||
<div style="font-weight: bold; margin-top: 5px;">${event.title}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
modalContent.innerHTML += '<p style="color: #0077be;">No events scheduled for this day.</p>';
|
||||
}
|
||||
|
||||
modal.style.display = 'block';
|
||||
}
|
||||
|
||||
// Navigation
|
||||
document.getElementById('prevMonth').addEventListener('click', () => {
|
||||
currentMonth--;
|
||||
if (currentMonth < 0) {
|
||||
currentMonth = 11;
|
||||
currentYear--;
|
||||
}
|
||||
generateCalendar();
|
||||
});
|
||||
|
||||
document.getElementById('nextMonth').addEventListener('click', () => {
|
||||
currentMonth++;
|
||||
if (currentMonth > 11) {
|
||||
currentMonth = 0;
|
||||
currentYear++;
|
||||
}
|
||||
generateCalendar();
|
||||
});
|
||||
|
||||
// View selector
|
||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
// In a real application, this would change the calendar view
|
||||
createRipple(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Quick add event
|
||||
document.querySelector('.add-btn').addEventListener('click', () => {
|
||||
const title = document.getElementById('eventTitle').value;
|
||||
const dateTime = document.getElementById('eventDateTime').value;
|
||||
|
||||
if (title && dateTime) {
|
||||
// In a real application, this would add the event to the calendar
|
||||
alert(`Event "${title}" scheduled for ${new Date(dateTime).toLocaleString()}`);
|
||||
document.getElementById('eventTitle').value = '';
|
||||
document.getElementById('eventDateTime').value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Modal close
|
||||
document.getElementById('closeModal').addEventListener('click', () => {
|
||||
document.getElementById('eventModal').style.display = 'none';
|
||||
});
|
||||
|
||||
// Reminder checkboxes
|
||||
document.querySelectorAll('.reminder-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
this.parentElement.style.textDecoration = 'line-through';
|
||||
this.parentElement.style.opacity = '0.5';
|
||||
} else {
|
||||
this.parentElement.style.textDecoration = 'none';
|
||||
this.parentElement.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Time slot selection
|
||||
document.querySelectorAll('.time-slot').forEach(slot => {
|
||||
slot.addEventListener('click', function() {
|
||||
this.style.background = 'rgba(0, 119, 190, 0.5)';
|
||||
this.style.border = '1px solid #00f5ff';
|
||||
setTimeout(() => {
|
||||
this.style.background = '';
|
||||
this.style.border = '';
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// Create more bubbles dynamically
|
||||
function createBubble() {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'bubble';
|
||||
bubble.style.width = Math.random() * 20 + 10 + 'px';
|
||||
bubble.style.height = bubble.style.width;
|
||||
bubble.style.left = Math.random() * 100 + '%';
|
||||
bubble.style.animationDuration = Math.random() * 10 + 10 + 's';
|
||||
bubble.style.animationDelay = Math.random() * 5 + 's';
|
||||
document.body.appendChild(bubble);
|
||||
|
||||
setTimeout(() => bubble.remove(), 20000);
|
||||
}
|
||||
|
||||
// Create bubbles periodically
|
||||
setInterval(createBubble, 3000);
|
||||
|
||||
// Initialize calendar
|
||||
generateCalendar();
|
||||
|
||||
// Animate bioluminescent particles
|
||||
document.querySelectorAll('.bioluminescent').forEach((particle, index) => {
|
||||
setInterval(() => {
|
||||
particle.style.left = Math.random() * 100 + '%';
|
||||
particle.style.top = Math.random() * 100 + '%';
|
||||
}, 10000 + index * 2000);
|
||||
});
|
||||
|
||||
// Sound effect simulation with visual feedback
|
||||
function playBubbleSound() {
|
||||
const indicator = document.createElement('div');
|
||||
indicator.style.position = 'fixed';
|
||||
indicator.style.bottom = '20px';
|
||||
indicator.style.right = '20px';
|
||||
indicator.style.padding = '10px 20px';
|
||||
indicator.style.background = 'rgba(0, 245, 255, 0.2)';
|
||||
indicator.style.border = '1px solid #00f5ff';
|
||||
indicator.style.borderRadius = '20px';
|
||||
indicator.style.color = '#00f5ff';
|
||||
indicator.textContent = '🔊 Bubble sound';
|
||||
indicator.style.zIndex = '1000';
|
||||
document.body.appendChild(indicator);
|
||||
|
||||
setTimeout(() => indicator.remove(), 1000);
|
||||
}
|
||||
|
||||
// Add sound feedback to interactions
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('calendar-day') ||
|
||||
e.target.classList.contains('view-btn') ||
|
||||
e.target.classList.contains('add-btn')) {
|
||||
playBubbleSound();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,852 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Art Nouveau Social Feed - Iteration 23</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Poiret+One&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poiret One', cursive;
|
||||
background: linear-gradient(135deg, #f4e8d0 0%, #e8d4b0 50%, #d4c4a0 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Art Nouveau Background Pattern */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, transparent 30%, rgba(139, 119, 101, 0.1) 30.5%),
|
||||
radial-gradient(circle at 80% 20%, transparent 30%, rgba(139, 119, 101, 0.1) 30.5%),
|
||||
radial-gradient(circle at 40% 40%, transparent 30%, rgba(139, 119, 101, 0.1) 30.5%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.social-garden {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Header with Art Nouveau Typography */
|
||||
.header-ornament {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-ornament h1 {
|
||||
font-family: 'Cinzel Decorative', cursive;
|
||||
font-size: 3em;
|
||||
color: #5a4a3a;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Decorative Flourish */
|
||||
.flourish {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flourish::before,
|
||||
.flourish::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 2px solid #8b7765;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.flourish::before {
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.flourish::after {
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Create Post Section */
|
||||
.create-post {
|
||||
background: rgba(255, 253, 248, 0.9);
|
||||
border: 2px solid #b8a590;
|
||||
border-radius: 30px 10px 30px 10px;
|
||||
padding: 30px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.create-post::before,
|
||||
.create-post::after {
|
||||
content: '❦';
|
||||
position: absolute;
|
||||
font-size: 2em;
|
||||
color: #b8a590;
|
||||
}
|
||||
|
||||
.create-post::before {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.create-post::after {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.post-textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: transparent;
|
||||
border: 1px solid #d4c4a0;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
font-family: 'Poiret One', cursive;
|
||||
font-size: 1.1em;
|
||||
resize: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.post-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #8b7765;
|
||||
box-shadow: 0 0 10px rgba(139, 119, 101, 0.2);
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.post-button {
|
||||
background: linear-gradient(135deg, #8b7765 0%, #a08970 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 25px;
|
||||
font-family: 'Cinzel Decorative', cursive;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.post-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Social Post Cards */
|
||||
.post-card {
|
||||
background: rgba(255, 253, 248, 0.95);
|
||||
border: 2px solid #b8a590;
|
||||
border-radius: 20px 5px 20px 5px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Ornate Corner Decorations */
|
||||
.corner-ornament {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #d4c4a0;
|
||||
}
|
||||
|
||||
.corner-ornament.top-left {
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-radius: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.corner-ornament.bottom-right {
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-radius: 0 0 20px 0;
|
||||
}
|
||||
|
||||
/* User Profile Section */
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e8d4b0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #b8a590;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #d4c4a0 0%, #b8a590 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-family: 'Cinzel Decorative', cursive;
|
||||
font-size: 1.2em;
|
||||
color: #5a4a3a;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.post-time {
|
||||
color: #8b7765;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Post Content */
|
||||
.post-content {
|
||||
padding: 20px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
color: #5a4a3a;
|
||||
}
|
||||
|
||||
/* Reaction Bar */
|
||||
.reaction-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #e8d4b0;
|
||||
background: rgba(232, 212, 176, 0.3);
|
||||
}
|
||||
|
||||
.reaction-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #8b7765;
|
||||
font-family: 'Poiret One', cursive;
|
||||
}
|
||||
|
||||
.reaction-btn:hover {
|
||||
background: rgba(139, 119, 101, 0.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.reaction-btn.active {
|
||||
color: #5a4a3a;
|
||||
background: rgba(139, 119, 101, 0.2);
|
||||
}
|
||||
|
||||
/* Comments Section */
|
||||
.comments-section {
|
||||
padding: 20px;
|
||||
background: rgba(232, 212, 176, 0.2);
|
||||
border-top: 1px solid #e8d4b0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 253, 248, 0.7);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #d4c4a0;
|
||||
background: linear-gradient(135deg, #e8d4b0 0%, #d4c4a0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
margin-left: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-family: 'Cinzel Decorative', cursive;
|
||||
color: #5a4a3a;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: #6a5a4a;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Comment Input */
|
||||
.comment-input-wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
flex: 1;
|
||||
background: rgba(255, 253, 248, 0.8);
|
||||
border: 1px solid #d4c4a0;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
font-family: 'Poiret One', cursive;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.comment-input:focus {
|
||||
outline: none;
|
||||
border-color: #8b7765;
|
||||
background: rgba(255, 253, 248, 1);
|
||||
}
|
||||
|
||||
/* Share Menu */
|
||||
.share-menu {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
right: 20px;
|
||||
background: rgba(255, 253, 248, 0.98);
|
||||
border: 2px solid #b8a590;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.share-menu.active {
|
||||
display: block;
|
||||
animation: unfold 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes unfold {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.share-option {
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.share-option:hover {
|
||||
background: rgba(139, 119, 101, 0.1);
|
||||
}
|
||||
|
||||
/* Floating Action Button */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #8b7765 0%, #a08970 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
transform: scale(1.1) rotate(90deg);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.post-card {
|
||||
animation: fadeInUp 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.post-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.post-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.post-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
/* Vine-like Decorative Elements */
|
||||
.vine-decoration {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vine-left {
|
||||
left: -50px;
|
||||
top: 100px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.vine-right {
|
||||
right: -50px;
|
||||
top: 300px;
|
||||
transform: rotate(15deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.vine-decoration svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="social-garden">
|
||||
<!-- Header Section -->
|
||||
<div class="header-ornament">
|
||||
<h1>Le Jardin Social</h1>
|
||||
<div class="flourish"></div>
|
||||
</div>
|
||||
|
||||
<!-- Create Post Section -->
|
||||
<div class="create-post">
|
||||
<textarea class="post-textarea" placeholder="Share your thoughts in the garden..."></textarea>
|
||||
<div class="post-actions">
|
||||
<div class="media-options">
|
||||
<button class="reaction-btn">
|
||||
<span>📷</span>
|
||||
<span>Photo</span>
|
||||
</button>
|
||||
<button class="reaction-btn">
|
||||
<span>🎨</span>
|
||||
<span>Art</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="post-button" onclick="createPost()">Bloom</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Feed -->
|
||||
<div id="socialFeed">
|
||||
<!-- Post 1 -->
|
||||
<div class="post-card">
|
||||
<div class="corner-ornament top-left"></div>
|
||||
<div class="corner-ornament bottom-right"></div>
|
||||
|
||||
<div class="post-header">
|
||||
<div class="user-avatar">AM</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">Alphonse Mucha</div>
|
||||
<div class="post-time">2 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">
|
||||
In every natural form, there exists a harmony that speaks to the soul. Today's sunrise reminded me why I paint - to capture these fleeting moments of beauty that nature gifts us daily. 🌅
|
||||
</div>
|
||||
|
||||
<div class="reaction-bar">
|
||||
<button class="reaction-btn active" onclick="toggleReaction(this)">
|
||||
<span>🌺</span>
|
||||
<span>42</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleComments(this)">
|
||||
<span>💬</span>
|
||||
<span>8</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleShare(this)">
|
||||
<span>🦋</span>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="comments-section" style="display: none;">
|
||||
<div class="comment">
|
||||
<div class="comment-avatar">GT</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Gustav Klimt</div>
|
||||
<div class="comment-text">Beautiful sentiment! Nature is indeed our greatest teacher.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-wrapper">
|
||||
<input type="text" class="comment-input" placeholder="Add your thoughts...">
|
||||
<button class="reaction-btn">
|
||||
<span>🌿</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-menu">
|
||||
<div class="share-option">
|
||||
<span>📧</span>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>🔗</span>
|
||||
<span>Copy Link</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>📌</span>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 2 -->
|
||||
<div class="post-card">
|
||||
<div class="corner-ornament top-left"></div>
|
||||
<div class="corner-ornament bottom-right"></div>
|
||||
|
||||
<div class="post-header">
|
||||
<div class="user-avatar">EG</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">Émile Gallé</div>
|
||||
<div class="post-time">5 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">
|
||||
Working on a new glass vase inspired by iris flowers. The way light dances through colored glass mirrors how sunlight filters through petals. Art is nature seen through a temperament. 🌷
|
||||
</div>
|
||||
|
||||
<div class="reaction-bar">
|
||||
<button class="reaction-btn" onclick="toggleReaction(this)">
|
||||
<span>🌺</span>
|
||||
<span>28</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleComments(this)">
|
||||
<span>💬</span>
|
||||
<span>5</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleShare(this)">
|
||||
<span>🦋</span>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="comments-section" style="display: none;">
|
||||
<div class="comment-input-wrapper">
|
||||
<input type="text" class="comment-input" placeholder="Add your thoughts...">
|
||||
<button class="reaction-btn">
|
||||
<span>🌿</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-menu">
|
||||
<div class="share-option">
|
||||
<span>📧</span>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>🔗</span>
|
||||
<span>Copy Link</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>📌</span>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<div class="fab" onclick="scrollToTop()">
|
||||
<span>✿</span>
|
||||
</div>
|
||||
|
||||
<!-- Decorative Vines -->
|
||||
<div class="vine-decoration vine-left">
|
||||
<svg viewBox="0 0 100 200">
|
||||
<path d="M50,0 Q30,50 40,100 T50,200" stroke="#b8a590" stroke-width="2" fill="none"/>
|
||||
<circle cx="35" cy="60" r="8" fill="#d4c4a0" opacity="0.6"/>
|
||||
<circle cx="45" cy="120" r="6" fill="#d4c4a0" opacity="0.6"/>
|
||||
<circle cx="40" cy="160" r="7" fill="#d4c4a0" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="vine-decoration vine-right">
|
||||
<svg viewBox="0 0 100 200">
|
||||
<path d="M50,0 Q30,50 40,100 T50,200" stroke="#b8a590" stroke-width="2" fill="none"/>
|
||||
<circle cx="35" cy="60" r="8" fill="#d4c4a0" opacity="0.6"/>
|
||||
<circle cx="45" cy="120" r="6" fill="#d4c4a0" opacity="0.6"/>
|
||||
<circle cx="40" cy="160" r="7" fill="#d4c4a0" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle reaction state
|
||||
function toggleReaction(btn) {
|
||||
btn.classList.toggle('active');
|
||||
const count = btn.querySelector('span:last-child');
|
||||
const currentCount = parseInt(count.textContent);
|
||||
|
||||
if (btn.classList.contains('active')) {
|
||||
count.textContent = currentCount + 1;
|
||||
// Animate the emoji
|
||||
btn.querySelector('span:first-child').style.animation = 'pulse 0.5s ease';
|
||||
} else {
|
||||
count.textContent = currentCount - 1;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
btn.querySelector('span:first-child').style.animation = '';
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Toggle comments section
|
||||
function toggleComments(btn) {
|
||||
const postCard = btn.closest('.post-card');
|
||||
const commentsSection = postCard.querySelector('.comments-section');
|
||||
|
||||
if (commentsSection.style.display === 'none') {
|
||||
commentsSection.style.display = 'block';
|
||||
commentsSection.style.animation = 'fadeInUp 0.3s ease';
|
||||
} else {
|
||||
commentsSection.style.animation = 'fadeOut 0.3s ease';
|
||||
setTimeout(() => {
|
||||
commentsSection.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle share menu
|
||||
function toggleShare(btn) {
|
||||
const postCard = btn.closest('.post-card');
|
||||
const shareMenu = postCard.querySelector('.share-menu');
|
||||
|
||||
// Close all other share menus
|
||||
document.querySelectorAll('.share-menu').forEach(menu => {
|
||||
if (menu !== shareMenu) {
|
||||
menu.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
shareMenu.classList.toggle('active');
|
||||
}
|
||||
|
||||
// Create new post
|
||||
function createPost() {
|
||||
const textarea = document.querySelector('.post-textarea');
|
||||
const content = textarea.value.trim();
|
||||
|
||||
if (content) {
|
||||
const feed = document.getElementById('socialFeed');
|
||||
const newPost = createPostElement(content);
|
||||
feed.insertBefore(newPost, feed.firstChild);
|
||||
|
||||
// Clear textarea
|
||||
textarea.value = '';
|
||||
|
||||
// Animate new post
|
||||
setTimeout(() => {
|
||||
newPost.style.animation = 'fadeInUp 0.5s ease forwards';
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Create post element
|
||||
function createPostElement(content) {
|
||||
const post = document.createElement('div');
|
||||
post.className = 'post-card';
|
||||
post.style.opacity = '0';
|
||||
|
||||
const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
post.innerHTML = `
|
||||
<div class="corner-ornament top-left"></div>
|
||||
<div class="corner-ornament bottom-right"></div>
|
||||
|
||||
<div class="post-header">
|
||||
<div class="user-avatar">ME</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">My Thoughts</div>
|
||||
<div class="post-time">Just now</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">${content}</div>
|
||||
|
||||
<div class="reaction-bar">
|
||||
<button class="reaction-btn" onclick="toggleReaction(this)">
|
||||
<span>🌺</span>
|
||||
<span>0</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleComments(this)">
|
||||
<span>💬</span>
|
||||
<span>0</span>
|
||||
</button>
|
||||
<button class="reaction-btn" onclick="toggleShare(this)">
|
||||
<span>🦋</span>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="comments-section" style="display: none;">
|
||||
<div class="comment-input-wrapper">
|
||||
<input type="text" class="comment-input" placeholder="Add your thoughts...">
|
||||
<button class="reaction-btn">
|
||||
<span>🌿</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-menu">
|
||||
<div class="share-option">
|
||||
<span>📧</span>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>🔗</span>
|
||||
<span>Copy Link</span>
|
||||
</div>
|
||||
<div class="share-option">
|
||||
<span>📌</span>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return post;
|
||||
}
|
||||
|
||||
// Scroll to top
|
||||
function scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
// Add comment functionality
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.closest('.reaction-btn') && e.target.closest('.comment-input-wrapper')) {
|
||||
const wrapper = e.target.closest('.comment-input-wrapper');
|
||||
const input = wrapper.querySelector('.comment-input');
|
||||
const comment = input.value.trim();
|
||||
|
||||
if (comment) {
|
||||
const commentsSection = wrapper.closest('.comments-section');
|
||||
const newComment = document.createElement('div');
|
||||
newComment.className = 'comment';
|
||||
newComment.innerHTML = `
|
||||
<div class="comment-avatar">ME</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">You</div>
|
||||
<div class="comment-text">${comment}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
commentsSection.insertBefore(newComment, wrapper);
|
||||
input.value = '';
|
||||
|
||||
// Update comment count
|
||||
const postCard = commentsSection.closest('.post-card');
|
||||
const commentBtn = postCard.querySelector('.reaction-bar button:nth-child(2) span:last-child');
|
||||
commentBtn.textContent = parseInt(commentBtn.textContent) + 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Close share menus when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.reaction-btn') && !e.target.closest('.share-menu')) {
|
||||
document.querySelectorAll('.share-menu').forEach(menu => {
|
||||
menu.classList.remove('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add pulse animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,794 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cosmic Analytics Command Center - Iteration 24</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Starfield Background */
|
||||
.starfield {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
background: radial-gradient(ellipse at center, #0a0a2e 0%, #000 100%);
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 4s infinite;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
/* Nebula Effect */
|
||||
.nebula {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.3;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.4) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 70%, rgba(30, 144, 255, 0.4) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(255, 20, 147, 0.3) 0%, transparent 70%);
|
||||
animation: nebulaPulse 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes nebulaPulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.command-center {
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 3em;
|
||||
background: linear-gradient(135deg, #00ffff, #ff00ff, #ffff00);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
|
||||
margin-bottom: 10px;
|
||||
animation: glowPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
font-size: 0.9em;
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #0f0;
|
||||
box-shadow: 0 0 10px #0f0;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.2); opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Dashboard Grid */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Widget Base */
|
||||
.widget {
|
||||
background: rgba(10, 10, 46, 0.8);
|
||||
border: 2px solid rgba(0, 255, 255, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow:
|
||||
0 0 30px rgba(0, 255, 255, 0.3),
|
||||
inset 0 0 20px rgba(138, 43, 226, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.widget:hover {
|
||||
border-color: rgba(255, 0, 255, 0.5);
|
||||
box-shadow:
|
||||
0 0 50px rgba(255, 0, 255, 0.4),
|
||||
inset 0 0 30px rgba(138, 43, 226, 0.2);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1.2em;
|
||||
color: #0ff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.widget-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Chart Containers */
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Bar Chart */
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 30px;
|
||||
background: linear-gradient(to top, #00ffff, #ff00ff);
|
||||
border-radius: 5px 5px 0 0;
|
||||
position: relative;
|
||||
animation: growBar 2s ease-out forwards;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes growBar {
|
||||
from { height: 0; }
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.8em;
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
/* Line Chart */
|
||||
.line-chart {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line-path {
|
||||
stroke: #0ff;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
filter: drop-shadow(0 0 10px #0ff);
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation: drawLine 3s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes drawLine {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
.data-point {
|
||||
fill: #ff00ff;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
filter: drop-shadow(0 0 15px #ff00ff);
|
||||
animation: pulsePoint 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulsePoint {
|
||||
0%, 100% { r: 5; }
|
||||
50% { r: 8; }
|
||||
}
|
||||
|
||||
/* Orbital Map */
|
||||
.orbital-map {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
animation: rotateOrbit 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateOrbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.planet {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 30px currentColor;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle, #ffff00, #ff8800);
|
||||
box-shadow: 0 0 60px #ff8800;
|
||||
animation: sunPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes sunPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
/* KPI Metrics */
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: rgba(138, 43, 226, 0.2);
|
||||
border: 1px solid rgba(138, 43, 226, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
background: rgba(138, 43, 226, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(135deg, #0ff, #f0f);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.kpi-trend {
|
||||
font-size: 0.8em;
|
||||
color: #0f0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Heat Map */
|
||||
.heat-map {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 2px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.heat-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heat-cell:hover {
|
||||
transform: scale(1.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Prediction Graph */
|
||||
.prediction-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prediction-line {
|
||||
stroke: #ff00ff;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-dasharray: 5,5;
|
||||
filter: drop-shadow(0 0 10px #ff00ff);
|
||||
}
|
||||
|
||||
.confidence-band {
|
||||
fill: rgba(255, 0, 255, 0.1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
/* Report Generator */
|
||||
.report-generator {
|
||||
background: rgba(30, 144, 255, 0.1);
|
||||
border: 1px solid rgba(30, 144, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.report-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border: 1px solid #0ff;
|
||||
color: #0ff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
background: rgba(0, 255, 255, 0.4);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Holographic Display */
|
||||
.holo-display {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: rgba(0, 255, 255, 0.05);
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.holo-content {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
animation: holoRotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes holoRotate {
|
||||
from { transform: rotateY(0deg); }
|
||||
to { transform: rotateY(360deg); }
|
||||
}
|
||||
|
||||
.holo-layer {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 2px solid rgba(0, 255, 255, 0.5);
|
||||
border-radius: 10px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Scanner Lines */
|
||||
.scanner-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, transparent, #0ff, transparent);
|
||||
animation: scan 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
from { top: 0; }
|
||||
to { top: 100%; }
|
||||
}
|
||||
|
||||
/* Data Stream */
|
||||
.data-stream {
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
font-family: monospace;
|
||||
font-size: 0.8em;
|
||||
color: #0f0;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.stream-line {
|
||||
margin: 2px 0;
|
||||
opacity: 0;
|
||||
animation: streamIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes streamIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Starfield Background -->
|
||||
<div class="starfield" id="starfield"></div>
|
||||
<div class="nebula"></div>
|
||||
|
||||
<div class="command-center">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<h1>COSMIC ANALYTICS COMMAND CENTER</h1>
|
||||
<div class="status-bar">
|
||||
<div class="status-item">
|
||||
<div class="status-indicator"></div>
|
||||
<span>System: OPTIMAL</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator"></div>
|
||||
<span>Data Feed: ACTIVE</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator"></div>
|
||||
<span>AI Models: ONLINE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Dashboard -->
|
||||
<div class="dashboard-grid">
|
||||
<!-- Stellar Performance Metrics -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Stellar Performance</h2>
|
||||
<div class="widget-icon">★</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="bar-chart" id="barChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orbital Trajectories -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Orbital Analytics</h2>
|
||||
<div class="widget-icon">◉</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<svg class="line-chart" viewBox="0 0 400 300">
|
||||
<path class="line-path" d="M20,280 L80,200 L140,220 L200,150 L260,180 L320,100 L380,120" />
|
||||
<circle class="data-point" cx="20" cy="280" r="5" />
|
||||
<circle class="data-point" cx="80" cy="200" r="5" />
|
||||
<circle class="data-point" cx="140" cy="220" r="5" />
|
||||
<circle class="data-point" cx="200" cy="150" r="5" />
|
||||
<circle class="data-point" cx="260" cy="180" r="5" />
|
||||
<circle class="data-point" cx="320" cy="100" r="5" />
|
||||
<circle class="data-point" cx="380" cy="120" r="5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission KPIs -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Mission KPIs</h2>
|
||||
<div class="widget-icon">▲</div>
|
||||
</div>
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Velocity</div>
|
||||
<div class="kpi-value">42.7K</div>
|
||||
<div class="kpi-trend">↑ 12.3%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Distance</div>
|
||||
<div class="kpi-value">384M</div>
|
||||
<div class="kpi-trend">↑ 8.5%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Efficiency</div>
|
||||
<div class="kpi-value">94.2%</div>
|
||||
<div class="kpi-trend">↑ 3.1%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Resources</div>
|
||||
<div class="kpi-value">78.5%</div>
|
||||
<div class="kpi-trend">↓ 2.4%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cosmic Heat Map -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Sector Heat Map</h2>
|
||||
<div class="widget-icon">◈</div>
|
||||
</div>
|
||||
<div class="heat-map" id="heatMap"></div>
|
||||
</div>
|
||||
|
||||
<!-- Predictive Models -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Trajectory Predictions</h2>
|
||||
<div class="widget-icon">⟳</div>
|
||||
</div>
|
||||
<div class="prediction-container">
|
||||
<svg viewBox="0 0 400 300" style="width: 100%; height: 100%;">
|
||||
<path class="confidence-band" d="M0,200 Q100,150 200,180 T400,100 L400,300 L0,300 Z" />
|
||||
<path class="line-path" d="M0,250 Q100,200 200,230 T400,150" />
|
||||
<path class="prediction-line" d="M200,230 Q300,180 400,150" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Planetary System Map -->
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">System Overview</h2>
|
||||
<div class="widget-icon">☉</div>
|
||||
</div>
|
||||
<div class="orbital-map">
|
||||
<div class="sun planet"></div>
|
||||
<div class="orbit" style="width: 150px; height: 150px;">
|
||||
<div class="planet" style="width: 20px; height: 20px; background: #87CEEB; top: -10px; left: 50%; margin-left: -10px;"></div>
|
||||
</div>
|
||||
<div class="orbit" style="width: 250px; height: 250px;">
|
||||
<div class="planet" style="width: 30px; height: 30px; background: #FFA500; top: -15px; left: 50%; margin-left: -15px;"></div>
|
||||
</div>
|
||||
<div class="orbit" style="width: 350px; height: 350px;">
|
||||
<div class="planet" style="width: 25px; height: 25px; background: #FF69B4; top: -12px; left: 50%; margin-left: -12px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Generator -->
|
||||
<div class="report-generator">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Mission Report Generator</h2>
|
||||
<div class="widget-icon">⎙</div>
|
||||
</div>
|
||||
<div class="report-controls">
|
||||
<button class="control-button" onclick="generateReport('daily')">Daily Report</button>
|
||||
<button class="control-button" onclick="generateReport('weekly')">Weekly Analysis</button>
|
||||
<button class="control-button" onclick="generateReport('monthly')">Monthly Overview</button>
|
||||
<button class="control-button" onclick="generateReport('custom')">Custom Range</button>
|
||||
</div>
|
||||
<div class="holo-display">
|
||||
<div class="holo-content">
|
||||
<div class="holo-layer" style="transform: translateZ(30px);"></div>
|
||||
<div class="holo-layer" style="transform: translateZ(0px);"></div>
|
||||
<div class="holo-layer" style="transform: translateZ(-30px);"></div>
|
||||
</div>
|
||||
<div class="scanner-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Stream -->
|
||||
<div class="widget" style="margin-top: 20px;">
|
||||
<div class="widget-header">
|
||||
<h2 class="widget-title">Live Data Stream</h2>
|
||||
<div class="widget-icon">⟋</div>
|
||||
</div>
|
||||
<div class="data-stream" id="dataStream"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Generate Starfield
|
||||
function createStarfield() {
|
||||
const starfield = document.getElementById('starfield');
|
||||
const starCount = 200;
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.left = Math.random() * 100 + '%';
|
||||
star.style.top = Math.random() * 100 + '%';
|
||||
star.style.width = Math.random() * 3 + 'px';
|
||||
star.style.height = star.style.width;
|
||||
star.style.animationDelay = Math.random() * 4 + 's';
|
||||
starfield.appendChild(star);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Bar Chart
|
||||
function createBarChart() {
|
||||
const chart = document.getElementById('barChart');
|
||||
const data = [75, 45, 90, 60, 85, 70, 95];
|
||||
const labels = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta'];
|
||||
|
||||
data.forEach((value, index) => {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'bar';
|
||||
bar.style.height = value + '%';
|
||||
bar.style.animationDelay = index * 0.1 + 's';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'bar-label';
|
||||
label.textContent = labels[index];
|
||||
bar.appendChild(label);
|
||||
|
||||
chart.appendChild(bar);
|
||||
});
|
||||
}
|
||||
|
||||
// Generate Heat Map
|
||||
function createHeatMap() {
|
||||
const heatMap = document.getElementById('heatMap');
|
||||
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'heat-cell';
|
||||
const intensity = Math.random();
|
||||
const hue = (1 - intensity) * 240; // Blue to red
|
||||
cell.style.background = `hsl(${hue}, 100%, 50%)`;
|
||||
cell.style.opacity = 0.3 + intensity * 0.7;
|
||||
cell.title = `Sector ${i + 1}: ${Math.round(intensity * 100)}%`;
|
||||
heatMap.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
// Data Stream
|
||||
function addStreamLine() {
|
||||
const stream = document.getElementById('dataStream');
|
||||
const messages = [
|
||||
'SCANNING: Sector 7G... anomaly detected',
|
||||
'DATA: Processing 1.2TB of telemetry data',
|
||||
'ALERT: Solar wind velocity increasing',
|
||||
'UPDATE: Navigation systems recalibrated',
|
||||
'SYNC: Quantum entanglement established',
|
||||
'ANALYSIS: Pattern recognition complete',
|
||||
'STATUS: All systems nominal',
|
||||
'TRANSMISSION: Receiving data from probe X-47'
|
||||
];
|
||||
|
||||
const line = document.createElement('div');
|
||||
line.className = 'stream-line';
|
||||
line.textContent = `[${new Date().toTimeString().split(' ')[0]}] ${messages[Math.floor(Math.random() * messages.length)]}`;
|
||||
|
||||
stream.insertBefore(line, stream.firstChild);
|
||||
|
||||
// Keep only last 10 lines
|
||||
while (stream.children.length > 10) {
|
||||
stream.removeChild(stream.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
// Report Generator
|
||||
function generateReport(type) {
|
||||
console.log(`Generating ${type} report...`);
|
||||
// Add visual feedback
|
||||
const buttons = document.querySelectorAll('.control-button');
|
||||
buttons.forEach(btn => {
|
||||
if (btn.textContent.toLowerCase().includes(type)) {
|
||||
btn.style.background = 'rgba(0, 255, 0, 0.3)';
|
||||
setTimeout(() => {
|
||||
btn.style.background = 'rgba(0, 255, 255, 0.2)';
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('load', () => {
|
||||
createStarfield();
|
||||
createBarChart();
|
||||
createHeatMap();
|
||||
|
||||
// Start data stream
|
||||
setInterval(addStreamLine, 2000);
|
||||
|
||||
// Add initial stream lines
|
||||
for (let i = 0; i < 5; i++) {
|
||||
setTimeout(addStreamLine, i * 100);
|
||||
}
|
||||
});
|
||||
|
||||
// Interactive hover effects
|
||||
document.querySelectorAll('.widget').forEach(widget => {
|
||||
widget.addEventListener('mouseenter', function() {
|
||||
this.style.borderColor = 'rgba(255, 0, 255, 0.5)';
|
||||
});
|
||||
|
||||
widget.addEventListener('mouseleave', function() {
|
||||
this.style.borderColor = 'rgba(0, 255, 255, 0.3)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,909 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bioelectric Living Data Ecosystem</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #0a0e1a;
|
||||
color: #00ffaa;
|
||||
overflow-x: hidden;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 30%, rgba(0, 255, 170, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 80%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: #00ffaa;
|
||||
text-shadow: 0 0 20px #00ffaa, 0 0 40px #00ffaa;
|
||||
margin-bottom: 2rem;
|
||||
animation: bioelectric-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bioelectric-pulse {
|
||||
0%, 100% { text-shadow: 0 0 20px #00ffaa, 0 0 40px #00ffaa; }
|
||||
50% { text-shadow: 0 0 30px #00ffaa, 0 0 60px #00ffaa, 0 0 80px #00ffaa; }
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: rgba(10, 20, 35, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
border: 2px solid #00ffaa;
|
||||
box-shadow:
|
||||
0 0 30px rgba(0, 255, 170, 0.3),
|
||||
inset 0 0 30px rgba(0, 255, 170, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hybrid-component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, #00ffaa, #8a2be2, #ffd700, #00ffaa);
|
||||
border-radius: 20px;
|
||||
z-index: -1;
|
||||
animation: bio-circuit-flow 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bio-circuit-flow {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 200% 200%; }
|
||||
}
|
||||
|
||||
.ecosystem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.data-panel {
|
||||
background: rgba(0, 20, 40, 0.9);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #00ffaa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.data-panel:hover {
|
||||
box-shadow: 0 0 25px rgba(0, 255, 170, 0.4);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.data-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #00ffaa, transparent);
|
||||
animation: electrical-scan 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes electrical-scan {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: #ffd700;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 10px #ffd700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bio-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00ffaa;
|
||||
box-shadow: 0 0 10px #00ffaa;
|
||||
animation: bio-heartbeat 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bio-heartbeat {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.3); opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Living Data Visualization */
|
||||
.data-viz {
|
||||
grid-column: span 2;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neural-network {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #00ffaa;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 15px #00ffaa;
|
||||
animation: node-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes node-pulse {
|
||||
0%, 100% { box-shadow: 0 0 15px #00ffaa; }
|
||||
50% { box-shadow: 0 0 25px #00ffaa, 0 0 35px #00ffaa; }
|
||||
}
|
||||
|
||||
.connection {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #00ffaa, #8a2be2);
|
||||
transform-origin: 0 50%;
|
||||
animation: data-flow 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes data-flow {
|
||||
0% { box-shadow: 0 0 5px #00ffaa; }
|
||||
50% { box-shadow: 0 0 15px #8a2be2; }
|
||||
100% { box-shadow: 0 0 5px #00ffaa; }
|
||||
}
|
||||
|
||||
/* Bio-responsive Charts */
|
||||
.chart-container {
|
||||
height: 150px;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.bio-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #00ffaa;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 255, 170, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #00ffaa;
|
||||
animation: bio-wave 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bio-wave {
|
||||
0%, 100% { height: 20%; }
|
||||
25% { height: 80%; }
|
||||
50% { height: 40%; }
|
||||
75% { height: 70%; }
|
||||
}
|
||||
|
||||
/* Living Metrics */
|
||||
.metric-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 255, 170, 0.1);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 255, 170, 0.3);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 15px #ffd700;
|
||||
animation: metric-glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes metric-glow {
|
||||
from { text-shadow: 0 0 15px #ffd700; }
|
||||
to { text-shadow: 0 0 25px #ffd700, 0 0 35px #ffd700; }
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #00ffaa;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Electrical Pulse Analytics */
|
||||
.pulse-monitor {
|
||||
height: 100px;
|
||||
background: rgba(0, 20, 40, 0.8);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.pulse-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
top: 50%;
|
||||
background: #00ffaa;
|
||||
box-shadow: 0 0 10px #00ffaa;
|
||||
animation: electrical-pulse 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes electrical-pulse {
|
||||
0% { transform: translateX(-100%) scaleY(1); }
|
||||
10% { transform: translateX(-80%) scaleY(3); }
|
||||
20% { transform: translateX(-60%) scaleY(1); }
|
||||
30% { transform: translateX(-40%) scaleY(2); }
|
||||
40% { transform: translateX(-20%) scaleY(1); }
|
||||
50% { transform: translateX(0%) scaleY(4); }
|
||||
60% { transform: translateX(20%) scaleY(1); }
|
||||
70% { transform: translateX(40%) scaleY(2); }
|
||||
80% { transform: translateX(60%) scaleY(1); }
|
||||
90% { transform: translateX(80%) scaleY(3); }
|
||||
100% { transform: translateX(100%) scaleY(1); }
|
||||
}
|
||||
|
||||
/* Bio-voltage Monitoring */
|
||||
.voltage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.voltage-cell {
|
||||
aspect-ratio: 1;
|
||||
background: rgba(0, 255, 170, 0.1);
|
||||
border: 1px solid #00ffaa;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.voltage-cell:hover {
|
||||
background: rgba(0, 255, 170, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 170, 0.5);
|
||||
}
|
||||
|
||||
.voltage-cell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.3), transparent);
|
||||
transform: translateX(-100%);
|
||||
animation: voltage-sweep 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes voltage-sweep {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* Ecosystem Health Indicator */
|
||||
.ecosystem-status {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(0, 255, 170, 0.05);
|
||||
border-radius: 15px;
|
||||
border: 2px solid #00ffaa;
|
||||
}
|
||||
|
||||
.status-orb {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, #00ffaa, #008866);
|
||||
box-shadow:
|
||||
0 0 30px #00ffaa,
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.2);
|
||||
animation: orb-rotation 10s linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-orb::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent);
|
||||
}
|
||||
|
||||
@keyframes orb-rotation {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 1.5rem;
|
||||
color: #ffd700;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 0 10px #ffd700;
|
||||
}
|
||||
|
||||
.status-description {
|
||||
color: #00ffaa;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Interactive Controls */
|
||||
.control-panel {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(138, 43, 226, 0.1);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8a2be2;
|
||||
}
|
||||
|
||||
.bio-button {
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: linear-gradient(45deg, #00ffaa, #008866);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #0a0e1a;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 170, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bio-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 25px rgba(0, 255, 170, 0.5);
|
||||
}
|
||||
|
||||
.bio-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.bio-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.bio-slider {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: rgba(0, 255, 170, 0.2);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bio-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #00ffaa;
|
||||
box-shadow: 0 0 15px #00ffaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.ecosystem-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.data-viz,
|
||||
.ecosystem-status,
|
||||
.control-panel {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.voltage-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 170, 0.3), transparent);
|
||||
animation: loading-sweep 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-sweep {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Living Data Ecosystem - Bioelectric Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="ecosystem-grid">
|
||||
<!-- Living Data Visualization -->
|
||||
<div class="data-panel data-viz">
|
||||
<div class="panel-title">
|
||||
<div class="bio-indicator"></div>
|
||||
Neural Data Network
|
||||
</div>
|
||||
<div class="neural-network" id="neuralNetwork">
|
||||
<!-- Neural nodes and connections generated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio-responsive Charts -->
|
||||
<div class="data-panel">
|
||||
<div class="panel-title">
|
||||
<div class="bio-indicator"></div>
|
||||
Bio-responsive Analytics
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="bio-chart" id="bioChart">
|
||||
<!-- Chart lines generated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div>
|
||||
<div class="metric-value" id="responseRate">94.7%</div>
|
||||
<div class="metric-label">Response Rate</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="metric-value" id="adaptability">8.3</div>
|
||||
<div class="metric-label">Adaptability</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Living Metrics -->
|
||||
<div class="data-panel">
|
||||
<div class="panel-title">
|
||||
<div class="bio-indicator"></div>
|
||||
Living Metrics Stream
|
||||
</div>
|
||||
<div class="metric-display">
|
||||
<div>
|
||||
<div class="metric-value" id="dataFlow">2.4k</div>
|
||||
<div class="metric-label">Data Flow/sec</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="metric-value" id="energyLevel">87%</div>
|
||||
<div class="metric-label">Energy Level</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pulse-monitor">
|
||||
<div class="pulse-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio-voltage Monitoring -->
|
||||
<div class="data-panel">
|
||||
<div class="panel-title">
|
||||
<div class="bio-indicator"></div>
|
||||
Bio-voltage Grid
|
||||
</div>
|
||||
<div class="voltage-grid" id="voltageGrid">
|
||||
<!-- Voltage cells generated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ecosystem Health Status -->
|
||||
<div class="data-panel ecosystem-status">
|
||||
<div class="status-orb"></div>
|
||||
<div class="status-info">
|
||||
<div class="status-title">Ecosystem Status: Optimal</div>
|
||||
<div class="status-description">
|
||||
All bioelectric systems operating within normal parameters.
|
||||
Data flows are stable, electrical currents are balanced,
|
||||
and the living ecosystem is thriving with 98.7% efficiency.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Controls -->
|
||||
<div class="control-panel">
|
||||
<button class="bio-button" onclick="toggleDataFlow()">
|
||||
Toggle Data Flow
|
||||
</button>
|
||||
<button class="bio-button" onclick="resetEcosystem()">
|
||||
Reset Ecosystem
|
||||
</button>
|
||||
<button class="bio-button" onclick="enhanceBioelectrics()">
|
||||
Enhance Bio-electrics
|
||||
</button>
|
||||
<label for="voltageSlider" class="visually-hidden">Voltage Level Control</label>
|
||||
<input type="range" class="bio-slider" id="voltageSlider"
|
||||
min="0" max="100" value="75"
|
||||
onchange="adjustVoltage(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
class BioelectricEcosystem {
|
||||
constructor() {
|
||||
this.isActive = true;
|
||||
this.dataFlowRate = 2400;
|
||||
this.voltageLevel = 75;
|
||||
this.energyLevel = 87;
|
||||
this.responseRate = 94.7;
|
||||
this.adaptability = 8.3;
|
||||
|
||||
this.init();
|
||||
this.startLifeCycle();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.generateNeuralNetwork();
|
||||
this.generateVoltageGrid();
|
||||
this.generateBioChart();
|
||||
this.updateMetrics();
|
||||
}
|
||||
|
||||
generateNeuralNetwork() {
|
||||
const network = document.getElementById('neuralNetwork');
|
||||
network.innerHTML = '';
|
||||
|
||||
// Generate neural nodes
|
||||
const nodeCount = 12;
|
||||
const nodes = [];
|
||||
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'node';
|
||||
|
||||
const x = Math.random() * 90 + 5; // 5-95%
|
||||
const y = Math.random() * 80 + 10; // 10-90%
|
||||
|
||||
node.style.left = x + '%';
|
||||
node.style.top = y + '%';
|
||||
node.style.animationDelay = Math.random() * 2 + 's';
|
||||
|
||||
network.appendChild(node);
|
||||
nodes.push({ element: node, x, y });
|
||||
}
|
||||
|
||||
// Generate connections
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
if (Math.random() < 0.3) { // 30% chance of connection
|
||||
this.createConnection(network, nodes[i], nodes[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createConnection(parent, node1, node2) {
|
||||
const connection = document.createElement('div');
|
||||
connection.className = 'connection';
|
||||
|
||||
const dx = node2.x - node1.x;
|
||||
const dy = node2.y - node1.y;
|
||||
const length = Math.sqrt(dx * dx + dy * dy);
|
||||
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||||
|
||||
connection.style.left = node1.x + '%';
|
||||
connection.style.top = node1.y + '%';
|
||||
connection.style.width = length + '%';
|
||||
connection.style.transform = `rotate(${angle}deg)`;
|
||||
connection.style.animationDelay = Math.random() * 3 + 's';
|
||||
|
||||
parent.appendChild(connection);
|
||||
}
|
||||
|
||||
generateVoltageGrid() {
|
||||
const grid = document.getElementById('voltageGrid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < 16; i++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'voltage-cell';
|
||||
|
||||
const voltage = (Math.random() * 50 + 25).toFixed(1);
|
||||
cell.textContent = voltage + 'V';
|
||||
cell.style.animationDelay = Math.random() * 3 + 's';
|
||||
|
||||
// Add hover effect for bio-feedback
|
||||
cell.addEventListener('mouseenter', () => {
|
||||
cell.style.background = 'rgba(255, 215, 0, 0.3)';
|
||||
this.playBioFeedback();
|
||||
});
|
||||
|
||||
cell.addEventListener('mouseleave', () => {
|
||||
cell.style.background = 'rgba(0, 255, 170, 0.1)';
|
||||
});
|
||||
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
generateBioChart() {
|
||||
const chart = document.getElementById('bioChart');
|
||||
chart.innerHTML = '';
|
||||
|
||||
const lineCount = 50;
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'chart-line';
|
||||
line.style.left = (i * 2) + '%';
|
||||
line.style.animationDelay = (i * 0.1) + 's';
|
||||
line.style.animationDuration = (Math.random() * 2 + 3) + 's';
|
||||
chart.appendChild(line);
|
||||
}
|
||||
}
|
||||
|
||||
updateMetrics() {
|
||||
// Simulate living data changes
|
||||
const responseRateEl = document.getElementById('responseRate');
|
||||
const adaptabilityEl = document.getElementById('adaptability');
|
||||
const dataFlowEl = document.getElementById('dataFlow');
|
||||
const energyLevelEl = document.getElementById('energyLevel');
|
||||
|
||||
setInterval(() => {
|
||||
if (this.isActive) {
|
||||
// Small random fluctuations
|
||||
this.responseRate += (Math.random() - 0.5) * 0.5;
|
||||
this.adaptability += (Math.random() - 0.5) * 0.2;
|
||||
this.dataFlowRate += Math.random() * 200 - 100;
|
||||
this.energyLevel += (Math.random() - 0.5) * 2;
|
||||
|
||||
// Keep within bounds
|
||||
this.responseRate = Math.max(80, Math.min(100, this.responseRate));
|
||||
this.adaptability = Math.max(1, Math.min(10, this.adaptability));
|
||||
this.dataFlowRate = Math.max(1000, Math.min(5000, this.dataFlowRate));
|
||||
this.energyLevel = Math.max(60, Math.min(100, this.energyLevel));
|
||||
|
||||
// Update display
|
||||
responseRateEl.textContent = this.responseRate.toFixed(1) + '%';
|
||||
adaptabilityEl.textContent = this.adaptability.toFixed(1);
|
||||
dataFlowEl.textContent = (this.dataFlowRate / 1000).toFixed(1) + 'k';
|
||||
energyLevelEl.textContent = Math.round(this.energyLevel) + '%';
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
startLifeCycle() {
|
||||
// Regenerate neural network periodically
|
||||
setInterval(() => {
|
||||
if (this.isActive) {
|
||||
this.generateNeuralNetwork();
|
||||
}
|
||||
}, 15000);
|
||||
|
||||
// Update voltage grid
|
||||
setInterval(() => {
|
||||
if (this.isActive) {
|
||||
this.updateVoltageGrid();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
updateVoltageGrid() {
|
||||
const cells = document.querySelectorAll('.voltage-cell');
|
||||
cells.forEach(cell => {
|
||||
const voltage = (Math.random() * 50 + 25).toFixed(1);
|
||||
cell.textContent = voltage + 'V';
|
||||
|
||||
// Add electrical discharge effect
|
||||
cell.style.boxShadow = '0 0 20px rgba(0, 255, 170, 0.8)';
|
||||
setTimeout(() => {
|
||||
cell.style.boxShadow = '';
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
playBioFeedback() {
|
||||
// Visual feedback for user interactions
|
||||
document.body.style.background = '#0a0e1a';
|
||||
setTimeout(() => {
|
||||
document.body.style.background = '';
|
||||
}, 100);
|
||||
}
|
||||
|
||||
toggleDataFlow() {
|
||||
this.isActive = !this.isActive;
|
||||
const component = document.querySelector('.hybrid-component');
|
||||
|
||||
if (!this.isActive) {
|
||||
component.classList.add('loading');
|
||||
} else {
|
||||
component.classList.remove('loading');
|
||||
}
|
||||
}
|
||||
|
||||
resetEcosystem() {
|
||||
this.responseRate = 94.7;
|
||||
this.adaptability = 8.3;
|
||||
this.dataFlowRate = 2400;
|
||||
this.energyLevel = 87;
|
||||
this.voltageLevel = 75;
|
||||
|
||||
document.getElementById('voltageSlider').value = 75;
|
||||
this.init();
|
||||
this.playBioFeedback();
|
||||
}
|
||||
|
||||
enhanceBioelectrics() {
|
||||
// Temporary enhancement effect
|
||||
const nodes = document.querySelectorAll('.node');
|
||||
const connections = document.querySelectorAll('.connection');
|
||||
|
||||
nodes.forEach(node => {
|
||||
node.style.boxShadow = '0 0 30px #00ffaa, 0 0 50px #00ffaa';
|
||||
});
|
||||
|
||||
connections.forEach(connection => {
|
||||
connection.style.boxShadow = '0 0 20px #8a2be2';
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
nodes.forEach(node => {
|
||||
node.style.boxShadow = '';
|
||||
});
|
||||
connections.forEach(connection => {
|
||||
connection.style.boxShadow = '';
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
this.playBioFeedback();
|
||||
}
|
||||
|
||||
adjustVoltage(value) {
|
||||
this.voltageLevel = parseInt(value);
|
||||
|
||||
// Adjust visual intensity based on voltage
|
||||
const intensity = value / 100;
|
||||
const component = document.querySelector('.hybrid-component');
|
||||
component.style.boxShadow = `
|
||||
0 0 ${30 + intensity * 20}px rgba(0, 255, 170, ${0.3 + intensity * 0.2}),
|
||||
inset 0 0 ${30 + intensity * 20}px rgba(0, 255, 170, ${0.1 + intensity * 0.1})
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Global functions for button interactions
|
||||
let ecosystem;
|
||||
|
||||
function toggleDataFlow() {
|
||||
ecosystem.toggleDataFlow();
|
||||
}
|
||||
|
||||
function resetEcosystem() {
|
||||
ecosystem.resetEcosystem();
|
||||
}
|
||||
|
||||
function enhanceBioelectrics() {
|
||||
ecosystem.enhanceBioelectrics();
|
||||
}
|
||||
|
||||
function adjustVoltage(value) {
|
||||
ecosystem.adjustVoltage(value);
|
||||
}
|
||||
|
||||
// Initialize the bioelectric ecosystem when the page loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
ecosystem = new BioelectricEcosystem();
|
||||
});
|
||||
|
||||
// Add keyboard accessibility
|
||||
document.addEventListener('keydown', (e) => {
|
||||
switch(e.key) {
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
if (e.target.classList.contains('bio-button')) {
|
||||
e.target.click();
|
||||
}
|
||||
break;
|
||||
case 'r':
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
e.preventDefault();
|
||||
resetEcosystem();
|
||||
}
|
||||
break;
|
||||
case 't':
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
e.preventDefault();
|
||||
toggleDataFlow();
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Responsive behavior
|
||||
window.addEventListener('resize', () => {
|
||||
if (ecosystem) {
|
||||
setTimeout(() => {
|
||||
ecosystem.generateNeuralNetwork();
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,914 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quantum Entanglement Synchronous Collaboration</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: radial-gradient(ellipse at center, #0a0a1a 0%, #1a0a2a 100%);
|
||||
color: #e0e0ff;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Quantum field background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(102, 51, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255, 102, 51, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 80%, rgba(204, 51, 255, 0.05) 0%, transparent 30%);
|
||||
animation: quantumField 8s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes quantumField {
|
||||
0% { opacity: 0.3; transform: scale(1); }
|
||||
100% { opacity: 0.7; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
background: linear-gradient(45deg, #6633ff, #ff6633, #cc33ff);
|
||||
background-size: 200% 200%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: quantumShift 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes quantumShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.hybrid-component {
|
||||
background: rgba(15, 15, 35, 0.95);
|
||||
border: 2px solid rgba(102, 51, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow:
|
||||
0 0 30px rgba(102, 51, 255, 0.3),
|
||||
inset 0 0 30px rgba(255, 102, 51, 0.1);
|
||||
}
|
||||
|
||||
/* Quantum entanglement visualization */
|
||||
.entanglement-network {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.quantum-connection {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background: linear-gradient(90deg, #6633ff, #ff6633);
|
||||
opacity: 0;
|
||||
animation: entanglementPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes entanglementPulse {
|
||||
0%, 100% { opacity: 0; transform: scaleY(0); }
|
||||
50% { opacity: 0.8; transform: scaleY(1); }
|
||||
}
|
||||
|
||||
/* Collaboration interface layout */
|
||||
.collaboration-interface {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 2rem;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* Real-time editor with quantum cursors */
|
||||
.quantum-editor {
|
||||
position: relative;
|
||||
background: rgba(10, 10, 30, 0.8);
|
||||
border: 1px solid rgba(102, 51, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
justify-content: between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(102, 51, 255, 0.2);
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
color: #6633ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sync-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #00ff88;
|
||||
box-shadow: 0 0 10px #00ff88;
|
||||
animation: quantumHeartbeat 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes quantumHeartbeat {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.3); opacity: 0.7; }
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
background: rgba(5, 5, 20, 0.9);
|
||||
border: 1px solid rgba(255, 102, 51, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
resize: none;
|
||||
color: #e0e0ff;
|
||||
}
|
||||
|
||||
/* Quantum-paired cursors */
|
||||
.quantum-cursor {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: linear-gradient(180deg, #6633ff, #ff6633);
|
||||
animation: cursorBlink 1s ease-in-out infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.quantum-cursor.entangled {
|
||||
box-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
.quantum-cursor::before {
|
||||
content: attr(data-user);
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
background: rgba(102, 51, 255, 0.9);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* Selection highlighting with quantum correlation */
|
||||
.quantum-selection {
|
||||
position: absolute;
|
||||
background: rgba(102, 51, 255, 0.2);
|
||||
border: 1px solid rgba(102, 51, 255, 0.5);
|
||||
pointer-events: none;
|
||||
animation: quantumGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes quantumGlow {
|
||||
0%, 100% { box-shadow: 0 0 5px rgba(102, 51, 255, 0.3); }
|
||||
50% { box-shadow: 0 0 15px rgba(102, 51, 255, 0.6); }
|
||||
}
|
||||
|
||||
/* Collaboration panel */
|
||||
.collaboration-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Entangled presence indicators */
|
||||
.presence-panel {
|
||||
background: rgba(10, 10, 30, 0.8);
|
||||
border: 1px solid rgba(255, 102, 51, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.presence-title {
|
||||
color: #ff6633;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quantum-particle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff6633;
|
||||
animation: particleSpin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes particleSpin {
|
||||
0% { transform: rotate(0deg) scale(1); }
|
||||
50% { transform: rotate(180deg) scale(1.2); }
|
||||
100% { transform: rotate(360deg) scale(1); }
|
||||
}
|
||||
|
||||
.user-presence {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(5, 5, 20, 0.6);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-presence:hover {
|
||||
background: rgba(15, 15, 40, 0.8);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.presence-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, #6633ff, #ff6633);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
animation: quantumRotate 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes quantumRotate {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
33% { transform: rotate(120deg); }
|
||||
66% { transform: rotate(240deg); }
|
||||
}
|
||||
|
||||
.presence-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.presence-name {
|
||||
font-weight: bold;
|
||||
color: #e0e0ff;
|
||||
}
|
||||
|
||||
.presence-status {
|
||||
font-size: 12px;
|
||||
color: #a0a0c0;
|
||||
}
|
||||
|
||||
.entanglement-strength {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.entanglement-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6633ff, #ff6633);
|
||||
border-radius: 2px;
|
||||
animation: strengthPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes strengthPulse {
|
||||
0%, 100% { width: 60%; }
|
||||
50% { width: 90%; }
|
||||
}
|
||||
|
||||
/* Quantum communication channels */
|
||||
.communication-panel {
|
||||
background: rgba(10, 10, 30, 0.8);
|
||||
border: 1px solid rgba(204, 51, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.comm-title {
|
||||
color: #cc33ff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quantum-wave {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: linear-gradient(90deg, #cc33ff, transparent, #cc33ff);
|
||||
animation: wavePropagate 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wavePropagate {
|
||||
0% { transform: scaleX(1); opacity: 1; }
|
||||
50% { transform: scaleX(2); opacity: 0.5; }
|
||||
100% { transform: scaleX(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.message-stream {
|
||||
flex: 1;
|
||||
background: rgba(5, 5, 20, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
overflow-y: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.quantum-message {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: rgba(102, 51, 255, 0.1);
|
||||
border-left: 3px solid #6633ff;
|
||||
opacity: 0;
|
||||
animation: messageEntangle 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes messageEntangle {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-size: 12px;
|
||||
color: #6633ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
margin-top: 0.25rem;
|
||||
color: #e0e0ff;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quantum-input {
|
||||
flex: 1;
|
||||
background: rgba(5, 5, 20, 0.8);
|
||||
border: 1px solid rgba(204, 51, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
color: #e0e0ff;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.quantum-input:focus {
|
||||
outline: none;
|
||||
border-color: #cc33ff;
|
||||
box-shadow: 0 0 10px rgba(204, 51, 255, 0.3);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: linear-gradient(45deg, #cc33ff, #6633ff);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(204, 51, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Workflow correlation panel */
|
||||
.workflow-panel {
|
||||
background: rgba(10, 10, 30, 0.8);
|
||||
border: 1px solid rgba(102, 51, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.workflow-title {
|
||||
color: #6633ff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.correlation-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: linear-gradient(45deg, #6633ff, #ff6633);
|
||||
border-radius: 50%;
|
||||
animation: correlationPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes correlationPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.4); opacity: 0.6; }
|
||||
}
|
||||
|
||||
.workflow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(5, 5, 20, 0.6);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.workflow-item:hover {
|
||||
background: rgba(15, 15, 40, 0.8);
|
||||
}
|
||||
|
||||
.workflow-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00ff88;
|
||||
animation: statusBlink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusBlink {
|
||||
0%, 80%, 100% { opacity: 1; }
|
||||
40% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.workflow-text {
|
||||
flex: 1;
|
||||
color: #e0e0ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Consciousness sync visualization */
|
||||
.consciousness-sync {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px solid rgba(102, 51, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(102, 51, 255, 0.1), transparent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: consciousnessRotate 6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes consciousnessRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.sync-core {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(45deg, #6633ff, #ff6633, #cc33ff);
|
||||
border-radius: 50%;
|
||||
animation: coreEnergy 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes coreEnergy {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.collaboration-interface {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.collaboration-panel {
|
||||
grid-row: 1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.quantum-editor {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Synchronous Collaboration - Quantum Entanglement Theme</h1>
|
||||
<div class="hybrid-component">
|
||||
<div class="entanglement-network" id="entanglementNetwork"></div>
|
||||
|
||||
<div class="collaboration-interface">
|
||||
<!-- Real-time quantum editor -->
|
||||
<div class="quantum-editor">
|
||||
<div class="editor-header">
|
||||
<span class="editor-title">Quantum Document</span>
|
||||
<div class="sync-indicator" title="Entanglement Active"></div>
|
||||
</div>
|
||||
<div class="editor-content" id="quantumEditor" contenteditable="true">
|
||||
// Quantum Entanglement Collaboration Protocol
|
||||
class QuantumCollaboration {
|
||||
constructor() {
|
||||
this.entangledPairs = new Map();
|
||||
this.quantumState = 'superposition';
|
||||
this.observerCount = 0;
|
||||
}
|
||||
|
||||
establishEntanglement(userA, userB) {
|
||||
// Create quantum correlation between users
|
||||
const entanglementId = this.generateQuantumId();
|
||||
this.entangledPairs.set(entanglementId, {
|
||||
participants: [userA, userB],
|
||||
correlationStrength: 1.0,
|
||||
lastInteraction: Date.now()
|
||||
});
|
||||
return entanglementId;
|
||||
}
|
||||
|
||||
synchronizeStates(change) {
|
||||
// Instantaneous state propagation
|
||||
this.entangledPairs.forEach(pair => {
|
||||
pair.participants.forEach(participant => {
|
||||
participant.applyQuantumChange(change);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
measureCollaboration() {
|
||||
// Collapse superposition to definite state
|
||||
this.quantumState = 'measured';
|
||||
this.triggerStateCollapse();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize quantum collaboration
|
||||
const quantum = new QuantumCollaboration();
|
||||
quantum.establishEntanglement(alice, bob);
|
||||
</div>
|
||||
<div class="quantum-cursor" data-user="Alice" style="top: 120px; left: 50px;"></div>
|
||||
<div class="quantum-cursor entangled" data-user="Bob" style="top: 180px; left: 200px;"></div>
|
||||
<div class="quantum-selection" style="top: 140px; left: 30px; width: 180px; height: 20px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Collaboration panel -->
|
||||
<div class="collaboration-panel">
|
||||
<!-- Entangled presence indicators -->
|
||||
<div class="presence-panel">
|
||||
<div class="presence-title">
|
||||
<div class="quantum-particle"></div>
|
||||
Entangled Participants
|
||||
</div>
|
||||
|
||||
<div class="user-presence" style="border-left-color: #6633ff;">
|
||||
<div class="presence-avatar">A</div>
|
||||
<div class="presence-info">
|
||||
<div class="presence-name">Alice Quantum</div>
|
||||
<div class="presence-status">Actively editing line 15</div>
|
||||
<div class="entanglement-strength">
|
||||
<div class="entanglement-bar" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-presence" style="border-left-color: #ff6633;">
|
||||
<div class="presence-avatar" style="background: linear-gradient(45deg, #ff6633, #cc33ff);">B</div>
|
||||
<div class="presence-info">
|
||||
<div class="presence-name">Bob Correlation</div>
|
||||
<div class="presence-status">Selecting function block</div>
|
||||
<div class="entanglement-strength">
|
||||
<div class="entanglement-bar" style="width: 92%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-presence" style="border-left-color: #cc33ff;">
|
||||
<div class="presence-avatar" style="background: linear-gradient(45deg, #cc33ff, #6633ff);">C</div>
|
||||
<div class="presence-info">
|
||||
<div class="presence-name">Charlie Entangled</div>
|
||||
<div class="presence-status">Reviewing changes</div>
|
||||
<div class="entanglement-strength">
|
||||
<div class="entanglement-bar" style="width: 67%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quantum communication channels -->
|
||||
<div class="communication-panel">
|
||||
<div class="comm-title">
|
||||
<div class="quantum-wave"></div>
|
||||
Quantum Channels
|
||||
</div>
|
||||
|
||||
<div class="message-stream" id="messageStream">
|
||||
<div class="quantum-message">
|
||||
<div class="message-author">Alice</div>
|
||||
<div class="message-content">Entanglement established on line 15 - instant correlation active</div>
|
||||
</div>
|
||||
<div class="quantum-message">
|
||||
<div class="message-author">Bob</div>
|
||||
<div class="message-content">Quantum state synchronized - seeing your changes instantaneously</div>
|
||||
</div>
|
||||
<div class="quantum-message">
|
||||
<div class="message-author">Charlie</div>
|
||||
<div class="message-content">Superposition resolved - ready for collaborative measurement</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-input">
|
||||
<input type="text" class="quantum-input" placeholder="Send quantum message..." id="messageInput">
|
||||
<button class="send-btn" onclick="sendQuantumMessage()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correlated workflow management -->
|
||||
<div class="workflow-panel">
|
||||
<div class="workflow-title">
|
||||
<div class="correlation-indicator"></div>
|
||||
Correlated Workflows
|
||||
</div>
|
||||
|
||||
<div class="workflow-item">
|
||||
<div class="workflow-status"></div>
|
||||
<span class="workflow-text">Code review entangled with testing</span>
|
||||
</div>
|
||||
|
||||
<div class="workflow-item">
|
||||
<div class="workflow-status" style="background: #ff6633;"></div>
|
||||
<span class="workflow-text">Documentation sync with implementation</span>
|
||||
</div>
|
||||
|
||||
<div class="workflow-item">
|
||||
<div class="workflow-status" style="background: #cc33ff;"></div>
|
||||
<span class="workflow-text">Feature correlation active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consciousness synchronization indicator -->
|
||||
<div class="consciousness-sync">
|
||||
<div class="sync-core"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Quantum entanglement network visualization
|
||||
function createEntanglementNetwork() {
|
||||
const network = document.getElementById('entanglementNetwork');
|
||||
const connections = 12;
|
||||
|
||||
for (let i = 0; i < connections; i++) {
|
||||
const connection = document.createElement('div');
|
||||
connection.className = 'quantum-connection';
|
||||
|
||||
const startX = Math.random() * 100;
|
||||
const startY = Math.random() * 100;
|
||||
const endX = Math.random() * 100;
|
||||
const endY = Math.random() * 100;
|
||||
|
||||
const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
|
||||
const length = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
|
||||
|
||||
connection.style.left = startX + '%';
|
||||
connection.style.top = startY + '%';
|
||||
connection.style.height = length + '%';
|
||||
connection.style.transform = `rotate(${angle + 90}deg)`;
|
||||
connection.style.animationDelay = (i * 0.2) + 's';
|
||||
|
||||
network.appendChild(connection);
|
||||
}
|
||||
}
|
||||
|
||||
// Real-time cursor tracking with quantum entanglement
|
||||
function initializeQuantumCursors() {
|
||||
const editor = document.getElementById('quantumEditor');
|
||||
const cursors = document.querySelectorAll('.quantum-cursor');
|
||||
|
||||
editor.addEventListener('click', (e) => {
|
||||
const rect = editor.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
// Update cursor positions with quantum correlation
|
||||
cursors.forEach((cursor, index) => {
|
||||
setTimeout(() => {
|
||||
const correlatedX = x + (Math.random() - 0.5) * 40;
|
||||
const correlatedY = y + (Math.random() - 0.5) * 20;
|
||||
cursor.style.left = correlatedX + 'px';
|
||||
cursor.style.top = correlatedY + 'px';
|
||||
|
||||
// Trigger entanglement effect
|
||||
cursor.style.boxShadow = '0 0 20px currentColor';
|
||||
setTimeout(() => {
|
||||
cursor.style.boxShadow = '0 0 10px currentColor';
|
||||
}, 300);
|
||||
}, index * 50); // Instantaneous but with visual delay for effect
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Quantum message system
|
||||
function sendQuantumMessage() {
|
||||
const input = document.getElementById('messageInput');
|
||||
const stream = document.getElementById('messageStream');
|
||||
const message = input.value.trim();
|
||||
|
||||
if (message) {
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.className = 'quantum-message';
|
||||
messageElement.innerHTML = `
|
||||
<div class="message-author">You</div>
|
||||
<div class="message-content">${message}</div>
|
||||
`;
|
||||
|
||||
stream.appendChild(messageElement);
|
||||
stream.scrollTop = stream.scrollHeight;
|
||||
input.value = '';
|
||||
|
||||
// Simulate entangled response
|
||||
setTimeout(() => {
|
||||
const responses = [
|
||||
"Quantum correlation confirmed - message received instantaneously",
|
||||
"Entanglement maintained - synchronizing state changes",
|
||||
"Superposition collapsed - definite agreement reached",
|
||||
"Spooky action at distance - simultaneous understanding achieved"
|
||||
];
|
||||
|
||||
const responseElement = document.createElement('div');
|
||||
responseElement.className = 'quantum-message';
|
||||
responseElement.innerHTML = `
|
||||
<div class="message-author">Entangled Partner</div>
|
||||
<div class="message-content">${responses[Math.floor(Math.random() * responses.length)]}</div>
|
||||
`;
|
||||
|
||||
stream.appendChild(responseElement);
|
||||
stream.scrollTop = stream.scrollHeight;
|
||||
}, 1000 + Math.random() * 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// Synchronous state management
|
||||
function initializeQuantumSync() {
|
||||
const editor = document.getElementById('quantumEditor');
|
||||
let lastState = editor.innerHTML;
|
||||
|
||||
// Monitor changes and synchronize instantly
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.type === 'childList' || mutation.type === 'characterData') {
|
||||
// Simulate instantaneous synchronization
|
||||
triggerQuantumCorrelation();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(editor, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
});
|
||||
}
|
||||
|
||||
// Quantum correlation effects
|
||||
function triggerQuantumCorrelation() {
|
||||
const indicators = document.querySelectorAll('.sync-indicator, .correlation-indicator');
|
||||
|
||||
indicators.forEach(indicator => {
|
||||
indicator.style.boxShadow = '0 0 20px currentColor';
|
||||
setTimeout(() => {
|
||||
indicator.style.boxShadow = '0 0 10px currentColor';
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Update entanglement strength randomly
|
||||
const bars = document.querySelectorAll('.entanglement-bar');
|
||||
bars.forEach(bar => {
|
||||
const newWidth = 60 + Math.random() * 35;
|
||||
bar.style.width = newWidth + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// Workflow correlation simulation
|
||||
function simulateWorkflowCorrelation() {
|
||||
const workflowItems = document.querySelectorAll('.workflow-status');
|
||||
|
||||
setInterval(() => {
|
||||
const randomItem = workflowItems[Math.floor(Math.random() * workflowItems.length)];
|
||||
const colors = ['#00ff88', '#ff6633', '#cc33ff', '#6633ff'];
|
||||
const newColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
|
||||
randomItem.style.background = newColor;
|
||||
randomItem.style.transform = 'scale(1.3)';
|
||||
|
||||
setTimeout(() => {
|
||||
randomItem.style.transform = 'scale(1)';
|
||||
}, 300);
|
||||
|
||||
}, 3000 + Math.random() * 4000);
|
||||
}
|
||||
|
||||
// Presence update simulation
|
||||
function simulatePresenceUpdates() {
|
||||
const statuses = [
|
||||
"Editing line 23", "Selecting code block", "Adding comments",
|
||||
"Reviewing changes", "Debugging function", "Optimizing logic",
|
||||
"Testing implementation", "Documenting features"
|
||||
];
|
||||
|
||||
const presenceElements = document.querySelectorAll('.presence-status');
|
||||
|
||||
setInterval(() => {
|
||||
presenceElements.forEach(element => {
|
||||
if (Math.random() > 0.7) {
|
||||
element.textContent = statuses[Math.floor(Math.random() * statuses.length)];
|
||||
element.parentElement.parentElement.style.transform = 'translateX(5px)';
|
||||
setTimeout(() => {
|
||||
element.parentElement.parentElement.style.transform = 'translateX(0)';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Handle Enter key for quantum messages
|
||||
document.getElementById('messageInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendQuantumMessage();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize all quantum systems
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
createEntanglementNetwork();
|
||||
initializeQuantumCursors();
|
||||
initializeQuantumSync();
|
||||
simulateWorkflowCorrelation();
|
||||
simulatePresenceUpdates();
|
||||
|
||||
// Continuous quantum field updates
|
||||
setInterval(triggerQuantumCorrelation, 8000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue