Clean up legacy code and unused files
REMOVED FILES: - cyberpunk-hero-option1.html, option2.html, option3.html (unused alternative designs) - scripts/scenario-extractor.js (one-time utility script) - UNITY_MIGRATION_PLAN.md, UNITY_SETUP_GUIDE.md (obsolete documentation) CLEANED UP CODE: - Remove 'emergency fix' language from index.html, make fixes permanent - Remove migration success logs from game.js (cleanup completed) - Simplified library button handler setup - Reduced console noise from temporary fixes RESULT: Cleaner codebase with ~500 lines removed and better maintainability
This commit is contained in:
dilgenfritz
parent
52cd3329f1
commit
8c355ed54e
|
|
@ -1,194 +0,0 @@
|
|||
# Unity Migration Plan - Gooner Training Academy
|
||||
|
||||
## 🎯 **Migration Priority: HIGH**
|
||||
**Performance bottlenecks identified in multi-video system justify Unity migration**
|
||||
|
||||
---
|
||||
|
||||
## 📊 **Current Web Architecture Analysis**
|
||||
|
||||
### **Media System Complexity (Primary Migration Driver):**
|
||||
- **QuadVideoPlayer**: 4 simultaneous video streams with individual controls
|
||||
- **OverlayVideoPlayer**: Popup video system with full controls
|
||||
- **FocusVideoPlayer**: Minimal focus session player
|
||||
- **BaseVideoPlayer**: 400+ line shared video foundation
|
||||
- **VideoPlayerManager**: Centralized video orchestration
|
||||
- **Real-time video management**: Live switching, volume mixing, progress tracking
|
||||
|
||||
### **Web Performance Limitations:**
|
||||
- ✅ **HTML5 Video Limitations**: Browser video element limitations with 4+ simultaneous streams
|
||||
- ✅ **CSS Animation Overhead**: Synthwave effects causing repainting issues
|
||||
- ✅ **DOM Complexity**: Heavy video DOM manipulation and control overlays
|
||||
- ✅ **Memory Management**: No fine-grained video memory control in web
|
||||
- ✅ **GPU Utilization**: Limited GPU optimization in browser context
|
||||
|
||||
---
|
||||
|
||||
## 🎮 **Unity Architecture Design**
|
||||
|
||||
### **Phase 1: Core Video Engine (Month 1)**
|
||||
```csharp
|
||||
// Unity Video Architecture
|
||||
VideoManager {
|
||||
- QuadVideoDisplay (4 RenderTextures)
|
||||
- OverlayVideoSystem (UI Canvas overlay)
|
||||
- FocusVideoPlayer (minimal UI)
|
||||
- VideoLibraryManager (asset streaming)
|
||||
- PerformanceProfiler (frame rate monitoring)
|
||||
}
|
||||
|
||||
// Video Performance Optimization
|
||||
- Native video decoding (AVPro or Unity VideoPlayer)
|
||||
- GPU texture streaming for multiple videos
|
||||
- Memory pooling for video assets
|
||||
- Async video loading with progress tracking
|
||||
- Hardware-accelerated video compositing
|
||||
```
|
||||
|
||||
### **Phase 2: Game Logic Port (Month 2)**
|
||||
```csharp
|
||||
// Core Game Systems
|
||||
TaskChallengeGame {
|
||||
- GameStateManager (JSON persistence)
|
||||
- GameModeManager (scenario handling)
|
||||
- ProgressionSystem (statistics & achievements)
|
||||
- EventSystem (task completion, timers)
|
||||
}
|
||||
|
||||
// Data Architecture
|
||||
- ScriptableObject-based game data
|
||||
- JSON import/export for web compatibility
|
||||
- Event-driven architecture for loose coupling
|
||||
- Modular game mode system
|
||||
```
|
||||
|
||||
### **Phase 3: Advanced Features (Month 3)**
|
||||
```csharp
|
||||
// Unity-Specific Enhancements
|
||||
- 3D UI elements (rotating panels, depth-based layouts)
|
||||
- Particle effects for rewards/achievements
|
||||
- Advanced audio mixing (Unity AudioMixer)
|
||||
- VR/AR readiness (future expansion)
|
||||
- Console platform support
|
||||
- Advanced input handling (gamepads, touch)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 **Migration Strategy: Modular Approach**
|
||||
|
||||
### **Week 1-2: Video System Proof of Concept**
|
||||
1. **Unity Project Setup**: 2022.3 LTS with Video packages
|
||||
2. **Basic Video Player**: Single video with controls in Unity UI
|
||||
3. **Quad Layout Test**: 4 videos rendering to RenderTextures
|
||||
4. **Performance Baseline**: Frame rate testing vs web version
|
||||
|
||||
### **Week 3-4: Core Video Features**
|
||||
1. **Video Library Integration**: File system scanning in Unity
|
||||
2. **Control Systems**: Play/pause, volume, progress for each video
|
||||
3. **Video Switching**: Smooth transitions between videos
|
||||
4. **Memory Management**: Proper video asset loading/unloading
|
||||
|
||||
### **Week 5-6: Game Logic Foundation**
|
||||
1. **Data Layer**: Game state, progression, statistics
|
||||
2. **Event System**: Task completion, mode switching
|
||||
3. **UI Framework**: Menus, modals, notifications
|
||||
4. **Settings System**: User preferences and configuration
|
||||
|
||||
### **Week 7-8: Feature Parity**
|
||||
1. **Game Modes**: Port all game scenarios and rules
|
||||
2. **Audio Integration**: Background music and TTS
|
||||
3. **Image Systems**: Task images and consequences
|
||||
4. **Save/Load**: Complete persistence system
|
||||
|
||||
---
|
||||
|
||||
## 🔧 **Technical Architecture**
|
||||
|
||||
### **Unity Package Requirements:**
|
||||
```
|
||||
- Video Player (built-in)
|
||||
- AVPro Video (optional, for advanced codec support)
|
||||
- TextMeshPro (UI text rendering)
|
||||
- JSON.NET (for data serialization)
|
||||
- Modern UI Pack (optional, for polished UI)
|
||||
```
|
||||
|
||||
### **Performance Targets:**
|
||||
- **60+ FPS** with 4 simultaneous videos
|
||||
- **<2GB RAM** usage for video streaming
|
||||
- **<100ms** video switching latency
|
||||
- **<5 second** cold startup time
|
||||
|
||||
### **Cross-Platform Strategy:**
|
||||
```
|
||||
Primary: Windows (PC)
|
||||
Secondary: macOS, Linux (desktop expansion)
|
||||
Future: Android/iOS (mobile adaptation)
|
||||
Long-term: VR platforms (Quest, PCVR)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 **Migration Phases**
|
||||
|
||||
### **Phase 1: Video Engine (Priority 1)**
|
||||
**Goal**: Solve performance bottlenecks with native video processing
|
||||
- Multi-video rendering system
|
||||
- GPU-optimized video playback
|
||||
- Advanced video controls and overlays
|
||||
- **Success Metric**: 4 videos @ 60fps consistently
|
||||
|
||||
### **Phase 2: Game Logic (Priority 2)**
|
||||
**Goal**: Feature parity with web version
|
||||
- Complete game mechanics port
|
||||
- Data persistence and statistics
|
||||
- All game modes and scenarios
|
||||
- **Success Metric**: 100% feature parity
|
||||
|
||||
### **Phase 3: Unity Enhancements (Priority 3)**
|
||||
**Goal**: Leverage Unity-specific features
|
||||
- 3D UI elements and effects
|
||||
- Advanced audio systems
|
||||
- Platform-specific optimizations
|
||||
- **Success Metric**: Enhanced user experience beyond web
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **Decision Matrix**
|
||||
|
||||
### **Migrate Now If:**
|
||||
- ✅ Video performance continues to degrade
|
||||
- ✅ Need for mobile/console platforms
|
||||
- ✅ Want advanced 3D UI effects
|
||||
- ✅ Development team ready to learn Unity/C#
|
||||
|
||||
### **Stay Web If:**
|
||||
- ❌ Performance issues can be web-optimized
|
||||
- ❌ Rapid iteration is more important
|
||||
- ❌ Team lacks Unity expertise
|
||||
- ❌ Web-first distribution is critical
|
||||
|
||||
---
|
||||
|
||||
## 💡 **Immediate Actions**
|
||||
|
||||
### **This Week:**
|
||||
1. **Performance Test Current Fixes**: Validate if CSS optimizations resolve issues
|
||||
2. **Unity Learning**: Install Unity 2022.3 LTS and test basic video playback
|
||||
3. **Architecture Planning**: Design Unity class structure based on current system
|
||||
4. **Team Preparation**: Begin Unity/C# learning if needed
|
||||
|
||||
### **Next Week:**
|
||||
1. **Unity Prototype**: Build minimal 4-video system in Unity
|
||||
2. **Performance Comparison**: Direct fps comparison web vs Unity
|
||||
3. **Migration Timeline**: Finalize timeline based on prototype results
|
||||
4. **Resource Planning**: Assess development time and learning curve
|
||||
|
||||
---
|
||||
|
||||
## 🏁 **Recommendation: START UNITY MIGRATION**
|
||||
|
||||
**The media system complexity and performance requirements justify Unity migration now rather than later. The modular web architecture will translate well to Unity, and the advanced video processing capabilities will solve current bottlenecks.**
|
||||
|
||||
**Timeline: 2-3 months for full migration with enhanced features**
|
||||
|
|
@ -1,306 +0,0 @@
|
|||
# Unity Setup & Prototype Guide - Phase 1
|
||||
|
||||
## 🎯 **Goal: Validate Unity Video Performance vs Web**
|
||||
|
||||
---
|
||||
|
||||
## 📋 **Step 1: Unity Project Setup**
|
||||
|
||||
### **Create New Project:**
|
||||
1. **Open Unity Hub**
|
||||
2. **New Project** → **3D Core** template
|
||||
3. **Project Name**: `Gooner-Training-Academy-Unity`
|
||||
4. **Unity Version**: 2022.3 LTS (recommended)
|
||||
5. **Location**: Choose appropriate folder
|
||||
|
||||
### **Essential Packages to Install:**
|
||||
1. **Window** → **Package Manager**
|
||||
2. **Install these packages:**
|
||||
- **TextMeshPro** (for UI text)
|
||||
- **Video Player** (should be built-in)
|
||||
- **UI Toolkit** (modern UI system)
|
||||
- **Newtonsoft Json** (for data serialization)
|
||||
|
||||
---
|
||||
|
||||
## 🎬 **Step 2: Basic Video Player Test**
|
||||
|
||||
### **Create Basic Scene:**
|
||||
1. **Create Empty GameObject** → Name: `VideoManager`
|
||||
2. **Add Component** → **Video Player**
|
||||
3. **Create UI Canvas** → **Screen Space - Overlay**
|
||||
4. **Add Button** to Canvas → Name: `PlayButton`
|
||||
|
||||
### **Test Single Video:**
|
||||
```csharp
|
||||
// Create: Assets/Scripts/BasicVideoTest.cs
|
||||
using UnityEngine;
|
||||
using UnityEngine.Video;
|
||||
using UnityEngine.UI;
|
||||
|
||||
public class BasicVideoTest : MonoBehaviour
|
||||
{
|
||||
[Header("Video Settings")]
|
||||
public VideoPlayer videoPlayer;
|
||||
public Button playButton;
|
||||
public RenderTexture renderTexture;
|
||||
|
||||
void Start()
|
||||
{
|
||||
// Setup render texture for video output
|
||||
renderTexture = new RenderTexture(1920, 1080, 24);
|
||||
videoPlayer.targetTexture = renderTexture;
|
||||
|
||||
// Setup button
|
||||
playButton.onClick.AddListener(ToggleVideo);
|
||||
|
||||
// Load test video (you'll need to provide a video file)
|
||||
videoPlayer.url = System.IO.Path.Combine(Application.streamingAssetsPath, "test-video.mp4");
|
||||
videoPlayer.Prepare();
|
||||
}
|
||||
|
||||
void ToggleVideo()
|
||||
{
|
||||
if (videoPlayer.isPlaying)
|
||||
{
|
||||
videoPlayer.Pause();
|
||||
playButton.GetComponentInChildren<Text>().text = "Play";
|
||||
}
|
||||
else
|
||||
{
|
||||
videoPlayer.Play();
|
||||
playButton.GetComponentInChildren<Text>().text = "Pause";
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎮 **Step 3: Quad Video Prototype**
|
||||
|
||||
### **Create Quad Layout:**
|
||||
1. **Create 4 UI Panels** in Canvas (2x2 grid layout)
|
||||
2. **Add RawImage** to each panel
|
||||
3. **Create 4 VideoPlayer GameObjects**
|
||||
|
||||
### **Quad Video Manager:**
|
||||
```csharp
|
||||
// Create: Assets/Scripts/QuadVideoManager.cs
|
||||
using UnityEngine;
|
||||
using UnityEngine.Video;
|
||||
using UnityEngine.UI;
|
||||
using System.Collections.Generic;
|
||||
|
||||
public class QuadVideoManager : MonoBehaviour
|
||||
{
|
||||
[Header("Video Players")]
|
||||
public VideoPlayer[] videoPlayers = new VideoPlayer[4];
|
||||
|
||||
[Header("UI Elements")]
|
||||
public RawImage[] videoDisplays = new RawImage[4];
|
||||
public Button[] playButtons = new Button[4];
|
||||
public Slider[] volumeSliders = new Slider[4];
|
||||
|
||||
[Header("Video Settings")]
|
||||
public RenderTexture[] renderTextures = new RenderTexture[4];
|
||||
public string[] testVideoUrls = new string[4];
|
||||
|
||||
void Start()
|
||||
{
|
||||
SetupQuadVideos();
|
||||
}
|
||||
|
||||
void SetupQuadVideos()
|
||||
{
|
||||
for (int i = 0; i < 4; i++)
|
||||
{
|
||||
// Create render texture for each video
|
||||
renderTextures[i] = new RenderTexture(1920, 1080, 24);
|
||||
|
||||
// Setup video player
|
||||
videoPlayers[i].targetTexture = renderTextures[i];
|
||||
videoPlayers[i].isLooping = true;
|
||||
videoPlayers[i].audioOutputMode = VideoAudioOutputMode.Direct;
|
||||
|
||||
// Assign render texture to UI
|
||||
videoDisplays[i].texture = renderTextures[i];
|
||||
|
||||
// Setup controls
|
||||
int index = i; // Capture for closure
|
||||
playButtons[i].onClick.AddListener(() => ToggleVideo(index));
|
||||
volumeSliders[i].onValueChanged.AddListener((value) => SetVolume(index, value));
|
||||
|
||||
// Load test video
|
||||
if (i < testVideoUrls.Length && !string.IsNullOrEmpty(testVideoUrls[i]))
|
||||
{
|
||||
videoPlayers[i].url = testVideoUrls[i];
|
||||
videoPlayers[i].Prepare();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void ToggleVideo(int index)
|
||||
{
|
||||
if (videoPlayers[index].isPlaying)
|
||||
{
|
||||
videoPlayers[index].Pause();
|
||||
}
|
||||
else
|
||||
{
|
||||
videoPlayers[index].Play();
|
||||
}
|
||||
}
|
||||
|
||||
void SetVolume(int index, float volume)
|
||||
{
|
||||
videoPlayers[index].SetDirectAudioVolume(0, volume);
|
||||
}
|
||||
|
||||
void Update()
|
||||
{
|
||||
// Monitor performance
|
||||
if (Input.GetKeyDown(KeyCode.P))
|
||||
{
|
||||
Debug.Log($"FPS: {1f / Time.deltaTime:F1}");
|
||||
Debug.Log($"Videos playing: {GetPlayingVideoCount()}");
|
||||
}
|
||||
}
|
||||
|
||||
int GetPlayingVideoCount()
|
||||
{
|
||||
int count = 0;
|
||||
for (int i = 0; i < videoPlayers.Length; i++)
|
||||
{
|
||||
if (videoPlayers[i].isPlaying) count++;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 **Step 4: Setup Test Videos**
|
||||
|
||||
### **Create StreamingAssets Folder:**
|
||||
1. **Assets** → **Create** → **Folder** → Name: `StreamingAssets`
|
||||
2. **Copy 4 test videos** into this folder (MP4 format recommended)
|
||||
3. **Name them**: `test-video-1.mp4`, `test-video-2.mp4`, etc.
|
||||
|
||||
### **Update Video URLs:**
|
||||
```csharp
|
||||
// In QuadVideoManager, set testVideoUrls in inspector:
|
||||
testVideoUrls[0] = Application.streamingAssetsPath + "/test-video-1.mp4";
|
||||
testVideoUrls[1] = Application.streamingAssetsPath + "/test-video-2.mp4";
|
||||
testVideoUrls[2] = Application.streamingAssetsPath + "/test-video-3.mp4";
|
||||
testVideoUrls[3] = Application.streamingAssetsPath + "/test-video-4.mp4";
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 **Step 5: Performance Testing**
|
||||
|
||||
### **Performance Monitor Script:**
|
||||
```csharp
|
||||
// Create: Assets/Scripts/PerformanceMonitor.cs
|
||||
using UnityEngine;
|
||||
using UnityEngine.UI;
|
||||
|
||||
public class PerformanceMonitor : MonoBehaviour
|
||||
{
|
||||
[Header("UI")]
|
||||
public Text fpsText;
|
||||
public Text memoryText;
|
||||
public Text videoCountText;
|
||||
|
||||
private float deltaTime = 0.0f;
|
||||
private QuadVideoManager quadManager;
|
||||
|
||||
void Start()
|
||||
{
|
||||
quadManager = FindObjectOfType<QuadVideoManager>();
|
||||
}
|
||||
|
||||
void Update()
|
||||
{
|
||||
deltaTime += (Time.unscaledDeltaTime - deltaTime) * 0.1f;
|
||||
|
||||
if (fpsText != null)
|
||||
{
|
||||
float fps = 1.0f / deltaTime;
|
||||
fpsText.text = $"FPS: {fps:0.}";
|
||||
|
||||
// Color code based on performance
|
||||
if (fps >= 60) fpsText.color = Color.green;
|
||||
else if (fps >= 30) fpsText.color = Color.yellow;
|
||||
else fpsText.color = Color.red;
|
||||
}
|
||||
|
||||
if (memoryText != null)
|
||||
{
|
||||
long memory = System.GC.GetTotalMemory(false);
|
||||
memoryText.text = $"Memory: {memory / 1024 / 1024}MB";
|
||||
}
|
||||
|
||||
if (videoCountText != null && quadManager != null)
|
||||
{
|
||||
videoCountText.text = $"Playing: {quadManager.GetPlayingVideoCount()}/4";
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **Step 6: Test Plan**
|
||||
|
||||
### **Performance Benchmarks:**
|
||||
1. **Baseline Test**: Single video @ 1080p
|
||||
2. **Dual Test**: 2 videos simultaneously
|
||||
3. **Quad Test**: 4 videos simultaneously
|
||||
4. **Stress Test**: 4 videos + UI interactions
|
||||
|
||||
### **Metrics to Track:**
|
||||
- **FPS**: Target 60+ with 4 videos
|
||||
- **Memory Usage**: Target <2GB
|
||||
- **CPU Usage**: Monitor in Task Manager
|
||||
- **Video Switching Speed**: Target <100ms
|
||||
|
||||
### **Comparison to Web:**
|
||||
- **Run your web QuadVideoPlayer** alongside Unity
|
||||
- **Monitor both performance profiles**
|
||||
- **Document frame rate differences**
|
||||
|
||||
---
|
||||
|
||||
## 📋 **Your Immediate Tasks:**
|
||||
|
||||
### **Today:**
|
||||
1. ✅ Create Unity project with packages
|
||||
2. ✅ Implement BasicVideoTest script
|
||||
3. ✅ Test single video playback
|
||||
|
||||
### **This Week:**
|
||||
1. ✅ Build QuadVideoManager system
|
||||
2. ✅ Add performance monitoring
|
||||
3. ✅ Compare web vs Unity performance
|
||||
4. ✅ Document results for migration decision
|
||||
|
||||
---
|
||||
|
||||
## 🚀 **Expected Results:**
|
||||
|
||||
**If Unity performs significantly better:**
|
||||
- **Proceed with full migration**
|
||||
- **Start porting game logic systems**
|
||||
- **Plan Unity-specific enhancements**
|
||||
|
||||
**If performance is similar:**
|
||||
- **Re-evaluate web optimizations**
|
||||
- **Consider hybrid approach**
|
||||
- **Focus on Unity for future features**
|
||||
|
||||
---
|
||||
|
||||
**Ready to start? Begin with the Unity project setup and let me know when you have the basic project created!** 🎮
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cyberpunk Hero Option 1 - Neon Matrix</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
color: #00ff41;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-option1 {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.05) 50%, transparent 70%),
|
||||
linear-gradient(135deg, #000000 0%, #001a00 30%, #000000 70%, #003300 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.matrix-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0px,
|
||||
rgba(0, 255, 65, 0.03) 1px,
|
||||
transparent 2px,
|
||||
transparent 40px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0px,
|
||||
rgba(0, 255, 65, 0.03) 1px,
|
||||
transparent 2px,
|
||||
transparent 40px
|
||||
);
|
||||
animation: matrixShift 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes matrixShift {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(40px, 40px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60px 40px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-title-main {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: clamp(3rem, 8vw, 7rem);
|
||||
font-weight: 900;
|
||||
color: #00ff41;
|
||||
text-shadow:
|
||||
0 0 10px #00ff41,
|
||||
0 0 20px #00ff41,
|
||||
0 0 40px #00ff41,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 20px;
|
||||
animation: titlePulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes titlePulse {
|
||||
from {
|
||||
text-shadow:
|
||||
0 0 10px #00ff41,
|
||||
0 0 20px #00ff41,
|
||||
0 0 40px #00ff41,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
to {
|
||||
text-shadow:
|
||||
0 0 20px #00ff41,
|
||||
0 0 40px #00ff41,
|
||||
0 0 80px #00ff41,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-accent {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: clamp(1rem, 2.5vw, 1.8rem);
|
||||
color: #00cc33;
|
||||
font-weight: 400;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 2px;
|
||||
margin-left: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.tagline-emphasis {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 15px #00ff41,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
animation: taglineGlow 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes taglineGlow {
|
||||
from { text-shadow: 0 0 15px #00ff41, 0 2px 4px rgba(0, 0, 0, 0.8); }
|
||||
to { text-shadow: 0 0 30px #00ff41, 0 0 40px #00ff41, 0 2px 4px rgba(0, 0, 0, 0.8); }
|
||||
}
|
||||
|
||||
.tagline-subtitle {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 1.2rem;
|
||||
color: #00cc33;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.hero-feature {
|
||||
background: rgba(0, 255, 65, 0.1);
|
||||
border: 1px solid #00ff41;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-feature::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.hero-feature:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.hero-feature:hover {
|
||||
background: rgba(0, 255, 65, 0.2);
|
||||
box-shadow:
|
||||
0 0 20px #00ff41,
|
||||
inset 0 0 20px rgba(0, 255, 65, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid #00ff41;
|
||||
border-radius: 0;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #00ff41, transparent);
|
||||
animation: scanLine 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: #00cc33;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #00ff41;
|
||||
text-shadow: 0 0 15px #00ff41;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 3px;
|
||||
background: rgba(0, 255, 65, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ff41, #00cc33);
|
||||
box-shadow: 0 0 10px #00ff41;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero-option1">
|
||||
<div class="matrix-bg"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title-section">
|
||||
<h1 class="hero-title-main">
|
||||
GOONER TRAINING<br>
|
||||
<span class="hero-title-accent">// academy_v3.0</span>
|
||||
</h1>
|
||||
<div class="hero-tagline">
|
||||
<span class="tagline-emphasis">MASTER YOUR DEDICATION</span>
|
||||
<span class="tagline-subtitle">> ADVANCED_NEURAL_TRAINING <</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-features">
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎬</span>
|
||||
<span class="feature-text">Multi-Stream Interface</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">Neural Analytics</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">Achievement Protocol</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎵</span>
|
||||
<span class="feature-text">Audio Matrix</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-status-panel">
|
||||
<div class="status-card">
|
||||
<div class="status-label">TOTAL_XP</div>
|
||||
<div class="status-value">1,337</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card">
|
||||
<div class="status-label">SESSION_TIME</div>
|
||||
<div class="status-value">42:13</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card">
|
||||
<div class="status-label">NEURAL_SYNC</div>
|
||||
<div class="status-value">98%</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,354 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cyberpunk Hero Option 2 - Purple Synthwave</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize:wght@400&family=Michroma&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
color: #ff00ff;
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-option2 {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
linear-gradient(45deg, #0a0015 0%, #1a0030 25%, #2d0060 50%, #1a0030 75%, #0a0015 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.synthwave-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
linear-gradient(transparent 50%, rgba(255, 0, 255, 0.05) 50%),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 98px,
|
||||
rgba(255, 0, 255, 0.1) 100px
|
||||
);
|
||||
animation: synthwaveMove 6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes synthwaveMove {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); }
|
||||
}
|
||||
|
||||
.neon-grid {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg);
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 0, 255, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridFloat 8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes gridFloat {
|
||||
from { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(0); }
|
||||
to { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(20px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60px 40px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-title-main {
|
||||
font-family: 'Michroma', monospace;
|
||||
font-size: clamp(3rem, 8vw, 7rem);
|
||||
font-weight: 400;
|
||||
color: #ff00ff;
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 80px #ff00ff,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 8px;
|
||||
line-height: 0.8;
|
||||
margin-bottom: 30px;
|
||||
animation: neonFlicker 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes neonFlicker {
|
||||
0%, 18%, 22%, 25%, 53%, 57%, 100% {
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 0 80px #ff00ff,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
20%, 24%, 55% {
|
||||
text-shadow:
|
||||
0 0 10px #ff00ff,
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 4px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-accent {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
font-size: clamp(1rem, 2.5vw, 1.8rem);
|
||||
color: #00ffff;
|
||||
font-weight: 400;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 4px;
|
||||
margin-left: 12px;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.tagline-emphasis {
|
||||
font-family: 'Audiowide', cursive;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
animation: textGlow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes textGlow {
|
||||
from {
|
||||
text-shadow:
|
||||
0 0 20px #ff00ff,
|
||||
0 0 40px #ff00ff,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
to {
|
||||
text-shadow:
|
||||
0 0 30px #ff00ff,
|
||||
0 0 60px #ff00ff,
|
||||
0 0 90px #ff00ff,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.tagline-subtitle {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
color: #00ffff;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 25px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.hero-feature {
|
||||
background: linear-gradient(135deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
|
||||
}
|
||||
|
||||
.hero-feature:hover {
|
||||
background: linear-gradient(135deg, rgba(255, 0, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 0, 255, 0.5),
|
||||
0 0 60px rgba(0, 255, 255, 0.3);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
filter: hue-rotate(300deg);
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 0, 255, 0.1) 100%);
|
||||
border: 2px solid #ff00ff;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 0, 255, 0.5),
|
||||
inset 0 0 20px rgba(255, 0, 255, 0.1);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #00ffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-family: 'Michroma', monospace;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #ff00ff;
|
||||
text-shadow: 0 0 20px #ff00ff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 0, 255, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
animation: progressPulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes progressPulse {
|
||||
from { box-shadow: 0 0 15px #ff00ff; }
|
||||
to { box-shadow: 0 0 25px #ff00ff, 0 0 35px #00ffff; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero-option2">
|
||||
<div class="synthwave-bg"></div>
|
||||
<div class="neon-grid"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title-section">
|
||||
<h1 class="hero-title-main">
|
||||
GOONER<br>TRAINING<br>
|
||||
<span class="hero-title-accent">academy.exe</span>
|
||||
</h1>
|
||||
<div class="hero-tagline">
|
||||
<span class="tagline-emphasis">MASTER YOUR DEDICATION</span>
|
||||
<span class="tagline-subtitle">◤ SYNTHWAVE PROTOCOL ◢</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-features">
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎬</span>
|
||||
<span class="feature-text">Quad Stream Tech</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">Data Analytics</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">Achievement Grid</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎵</span>
|
||||
<span class="feature-text">Synth Audio</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-status-panel">
|
||||
<div class="status-card">
|
||||
<div class="status-label">TOTAL XP</div>
|
||||
<div class="status-value">1337</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card">
|
||||
<div class="status-label">SESSION TIME</div>
|
||||
<div class="status-value">42:13</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card">
|
||||
<div class="status-label">SYNC LEVEL</div>
|
||||
<div class="status-value">98%</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,392 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cyberpunk Hero Option 3 - Terminal Hacker</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&family=Fira+Code:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #00ff00;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-option3 {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 79px, rgba(0, 255, 0, 0.05) 81px, transparent 82px),
|
||||
linear-gradient(rgba(0, 255, 0, 0.02) 50%, transparent 50%);
|
||||
background-size: 82px 4px;
|
||||
animation: terminalScan 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes terminalScan {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 82px 4px; }
|
||||
}
|
||||
|
||||
.scanline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #00ff00, transparent);
|
||||
animation: scanlineMove 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanlineMove {
|
||||
0% { top: 0%; opacity: 1; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60px 40px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.terminal-prompt {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 1.2rem;
|
||||
color: #00ff00;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
background: #00ff00;
|
||||
width: 12px;
|
||||
height: 1.2rem;
|
||||
animation: cursorBlink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.hero-title-main {
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: clamp(3rem, 8vw, 6.5rem);
|
||||
font-weight: 700;
|
||||
color: #00ff00;
|
||||
text-shadow:
|
||||
0 0 5px #00ff00,
|
||||
0 0 10px #00ff00,
|
||||
0 0 20px #00ff00;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
font-feature-settings: 'liga' 1, 'calt' 1;
|
||||
animation: textFlicker 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes textFlicker {
|
||||
0%, 95% { opacity: 1; }
|
||||
96%, 100% { opacity: 0.95; }
|
||||
}
|
||||
|
||||
.hero-title-accent {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: clamp(1rem, 2.5vw, 1.6rem);
|
||||
color: #ffff00;
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 4px;
|
||||
text-shadow: 0 0 8px #ffff00;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
margin: 40px 0;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.tagline-emphasis {
|
||||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 10px #00ff00,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
animation: textPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes textPulse {
|
||||
0%, 100% {
|
||||
text-shadow:
|
||||
0 0 10px #00ff00,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0 0 20px #00ff00,
|
||||
0 0 30px #00ff00,
|
||||
0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.tagline-subtitle {
|
||||
font-size: 1rem;
|
||||
color: #ffff00;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 0 5px #ffff00;
|
||||
}
|
||||
|
||||
.command-line {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid #00ff00;
|
||||
padding: 20px;
|
||||
margin: 30px 0;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.command-line::before {
|
||||
content: "root@gooner-academy:~$ ";
|
||||
color: #ffff00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.hero-feature {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #00ff00;
|
||||
border-left: 4px solid #00ff00;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.hero-feature::before {
|
||||
content: '> ';
|
||||
color: #ffff00;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.hero-feature:hover {
|
||||
background: rgba(0, 255, 0, 0.05);
|
||||
border-color: #ffff00;
|
||||
border-left-color: #ffff00;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 255, 0, 0.3);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
border: 1px solid #00ff00;
|
||||
border-top: 3px solid #00ff00;
|
||||
padding: 25px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-card::before {
|
||||
content: '[' attr(data-module) ']';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 10px;
|
||||
background: #0a0a0a;
|
||||
padding: 0 8px;
|
||||
font-size: 0.8rem;
|
||||
color: #ffff00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 0.85rem;
|
||||
color: #00ff00;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10px #00ff00;
|
||||
margin-bottom: 15px;
|
||||
font-feature-settings: 'tnum' 1;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 3px;
|
||||
background: rgba(0, 255, 0, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ff00, #ffff00);
|
||||
box-shadow: 0 0 8px #00ff00;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-progress::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: progressSweep 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes progressSweep {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero-option3">
|
||||
<div class="terminal-bg"></div>
|
||||
<div class="scanline"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title-section">
|
||||
<div class="terminal-prompt">user@system:~$ sudo ./initiate_training.sh<span class="cursor"></span></div>
|
||||
|
||||
<h1 class="hero-title-main">
|
||||
GOONER_TRAINING<br>
|
||||
<span class="hero-title-accent">//academy_v3.0.exe</span>
|
||||
</h1>
|
||||
|
||||
<div class="hero-tagline">
|
||||
<span class="tagline-emphasis">MASTER_YOUR_DEDICATION</span>
|
||||
<span class="tagline-subtitle">NEURAL_ENHANCEMENT_PROTOCOL_ACTIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="command-line">
|
||||
./execute --mode=advanced --protocol=cybernetic<br>
|
||||
[INFO] Multi-stream interface: ONLINE<br>
|
||||
[INFO] Neural analytics: ACTIVE<br>
|
||||
[SUCCESS] System ready for training sequence
|
||||
</div>
|
||||
|
||||
<div class="hero-features">
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎬</span>
|
||||
<span class="feature-text">Multi_Stream_Array</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">Data_Mining_Core</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">Achievement_Parser</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎵</span>
|
||||
<span class="feature-text">Audio_Subprocess</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-status-panel">
|
||||
<div class="status-card" data-module="XP_MODULE">
|
||||
<div class="status-label">total_experience</div>
|
||||
<div class="status-value">1337</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card" data-module="TIME_SYS">
|
||||
<div class="status-label">session_duration</div>
|
||||
<div class="status-value">42:13</div>
|
||||
</div>
|
||||
|
||||
<div class="status-card" data-module="SYNC_CORE">
|
||||
<div class="status-label">neural_sync_rate</div>
|
||||
<div class="status-value">98%</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
index.html
21
index.html
|
|
@ -1948,9 +1948,8 @@
|
|||
<script src="src/utils/desktop-file-manager.js"></script>
|
||||
<script src="src/core/game.js"></script>
|
||||
<script>
|
||||
// Force apply emergency fix
|
||||
// Initialize application when page loads
|
||||
window.addEventListener('load', () => {
|
||||
console.log('🚨 Page loaded - applying emergency fixes...');
|
||||
setTimeout(() => {
|
||||
if (window.forceFixGame) {
|
||||
window.forceFixGame();
|
||||
|
|
@ -3446,21 +3445,18 @@
|
|||
console.log('Library handlers setup complete');
|
||||
}
|
||||
|
||||
// Emergency library button fix - add direct event listener
|
||||
function setupEmergencyLibraryButton() {
|
||||
// Library button click handler setup
|
||||
function setupLibraryButtonHandler() {
|
||||
const libraryBtn = document.getElementById('library-btn');
|
||||
if (libraryBtn) {
|
||||
console.log('🚨 Emergency: Found library button, adding click handler');
|
||||
libraryBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
console.log('🚨 Emergency: Library button clicked via onclick');
|
||||
|
||||
// Try to show library screen directly
|
||||
// Show library screen directly
|
||||
const libraryScreen = document.getElementById('library-screen');
|
||||
const startScreen = document.getElementById('start-screen');
|
||||
|
||||
if (libraryScreen && startScreen) {
|
||||
console.log('🚨 Emergency: Hiding start screen, showing library screen');
|
||||
startScreen.classList.remove('active');
|
||||
libraryScreen.classList.add('active');
|
||||
|
||||
|
|
@ -3469,17 +3465,14 @@
|
|||
setupLibraryHandlers();
|
||||
}, 100);
|
||||
} else {
|
||||
console.error('🚨 Emergency: Could not find library or start screen');
|
||||
console.error('Could not find library or start screen');
|
||||
}
|
||||
};
|
||||
console.log('🚨 Emergency: Library button onclick handler attached');
|
||||
} else {
|
||||
console.error('🚨 Emergency: Library button not found');
|
||||
}
|
||||
}
|
||||
|
||||
// Run emergency fix after a delay
|
||||
setTimeout(setupEmergencyLibraryButton, 2000);
|
||||
// Setup library button handler after page load
|
||||
setTimeout(setupLibraryButtonHandler, 2000);
|
||||
|
||||
// Setup individual library tab functionality
|
||||
async function setupLibraryImagesTab(retryCount = 0) {
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
/**
|
||||
* Scenario Extractor Utility
|
||||
* Analyzes gameModeManager.js to find scenario boundaries and extract them
|
||||
*/
|
||||
|
||||
const fs = require('fs').promises;
|
||||
const path = require('path');
|
||||
|
||||
async function analyzeScenarios() {
|
||||
const filePath = path.join(__dirname, '..', 'src', 'core', 'gameModeManager.js');
|
||||
const content = await fs.readFile(filePath, 'utf8');
|
||||
const lines = content.split('\n');
|
||||
|
||||
console.log('🔍 Analyzing scenario structure in gameModeManager.js...\n');
|
||||
|
||||
// Find key markers
|
||||
let scenarioMapStart = -1;
|
||||
let additionalScenariosStart = -1;
|
||||
let scenarioMapEnd = -1;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
if (line.includes('const scenarioMap = {')) {
|
||||
scenarioMapStart = i;
|
||||
console.log(`📍 scenarioMap starts at line: ${i + 1}`);
|
||||
}
|
||||
|
||||
if (line.includes('const additionalScenarios = {')) {
|
||||
additionalScenariosStart = i;
|
||||
console.log(`📍 additionalScenarios starts at line: ${i + 1}`);
|
||||
}
|
||||
|
||||
if (line.includes('Object.assign(scenarioMap, additionalScenarios);')) {
|
||||
scenarioMapEnd = i;
|
||||
console.log(`📍 Scenario data ends at line: ${i + 1}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Find individual scenarios
|
||||
console.log('\n🎯 Individual Scenarios Found:');
|
||||
const scenarioPattern = /^\s*'(scenario-[^']+)':\s*{/;
|
||||
|
||||
for (let i = scenarioMapStart; i < scenarioMapEnd; i++) {
|
||||
const line = lines[i];
|
||||
const match = line.match(scenarioPattern);
|
||||
|
||||
if (match) {
|
||||
const scenarioId = match[1];
|
||||
console.log(` - ${scenarioId} at line ${i + 1}`);
|
||||
|
||||
// Find the end of this scenario (look for closing brace at same indent level)
|
||||
const indent = line.search(/\S/);
|
||||
let endLine = -1;
|
||||
let braceCount = 0;
|
||||
|
||||
for (let j = i; j < scenarioMapEnd; j++) {
|
||||
const currentLine = lines[j];
|
||||
|
||||
// Count braces
|
||||
for (const char of currentLine) {
|
||||
if (char === '{') braceCount++;
|
||||
if (char === '}') braceCount--;
|
||||
}
|
||||
|
||||
// If we're back to the original indent level and braces are balanced
|
||||
if (j > i && braceCount === 0 && currentLine.trim().endsWith('},')) {
|
||||
endLine = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (endLine > 0) {
|
||||
console.log(` └─ ends at line ${endLine + 1} (${endLine - i + 1} lines)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n✅ Analysis complete!');
|
||||
console.log(`📝 Total scenario data spans lines ${scenarioMapStart + 1} to ${scenarioMapEnd + 1}`);
|
||||
}
|
||||
|
||||
// Run if called directly
|
||||
if (require.main === module) {
|
||||
analyzeScenarios().catch(console.error);
|
||||
}
|
||||
|
||||
module.exports = { analyzeScenarios };
|
||||
|
|
@ -6204,7 +6204,6 @@ class DataManager {
|
|||
const difficulty = localStorage.getItem('selectedDifficulty');
|
||||
if (difficulty) data.settings.difficulty = difficulty;
|
||||
|
||||
console.log('Migrated data from old format');
|
||||
this.saveData(); // Save in new format
|
||||
this.cleanupOldStorage(); // Remove old keys
|
||||
|
||||
|
|
@ -6252,7 +6251,6 @@ class DataManager {
|
|||
];
|
||||
|
||||
oldKeys.forEach(key => localStorage.removeItem(key));
|
||||
console.log('Cleaned up old storage keys');
|
||||
}
|
||||
|
||||
saveData() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue