extended themes to user profile. added username and profile picture to home screen.

index.html

@@ -163,53 +163,13 @@
             
             <!-- Utility Navigation -->
             <div class="hero-utility-nav">
-                <button id="user-profile-btn" class="utility-btn" title="View Profile">
+                <!-- User Profile Display -->
-                    <span class="utility-icon">👤</span>
+                <div class="user-profile-display">
-                    <span class="utility-label">Profile</span>
+                    <div class="profile-avatar-small" id="header-profile-avatar">
-                </button>
+                        <div class="avatar-placeholder">👤</div>
-                <button id="game-guide-btn" class="utility-btn" title="Game Guide">
+                    </div>
-                    <span class="utility-icon">📖</span>
+                    <div class="profile-info">
-                    <span class="utility-label">Guide</span>
+                        <div class="profile-username" id="header-username">Player</div>
-                </button>
-                <button id="options-menu-btn" class="utility-btn" title="Options">
-                    <span class="utility-icon">⚙️</span>
-                    <span class="utility-label">Options</span>
-                </button>
-            </div>
-            
-            <div class="hero-content">
-                <div class="hero-title-section">
-                    <h1 class="hero-title">
-                        <span class="hero-title-main">Gooner Training Academy</span>
-                        <span class="hero-title-accent">Professional Development</span>
-                    </h1>
-                    <p class="hero-tagline">
-                        <span class="tagline-emphasis">Master Your Dedication</span>
-                        <span class="tagline-subtitle">� Advanced Training System � v3.0</span>
-                    </p>
-                    
-                    <!-- Feature Highlights - Now Main Action Buttons -->
-                    <div class="hero-features">
-                        <button class="hero-feature btn-feature" id="training-academy-btn">
-                            <span class="feature-icon">🎯</span>
-                            <span class="feature-text">Training Academy</span>
-                        </button>
-                        <button class="hero-feature btn-feature" id="quick-play-btn">
-                            <span class="feature-icon">⚡</span>
-                            <span class="feature-text">Quick Play</span>
-                        </button>
-                        <button class="hero-feature btn-feature" id="porn-cinema-btn">
-                            <span class="feature-icon">🎬</span>
-                            <span class="feature-text">Porn Cinema</span>
-                        </button>
-                        <button class="hero-feature btn-feature" id="hypno-gallery-btn">
-                            <span class="feature-icon">🌀</span>
-                            <span class="feature-text">Hypno Gallery</span>
-                        </button>
-                        <button class="hero-feature btn-feature" id="library-btn" onclick="window.location.href='library.html'">
-                            <span class="cassie-icon"></span>
-                            <span class="feature-text">Library</span>
-                        </button>
                     </div>
                 </div>
                 
@@ -237,7 +197,56 @@
                             </div>
                         </div>
                     </div>
+                </div>
+                
+                <button id="user-profile-btn" class="utility-btn" title="View Profile">
+                    <span class="utility-icon">👤</span>
+                    <span class="utility-label">Profile</span>
+                </button>
+                <button id="game-guide-btn" class="utility-btn" title="Game Guide">
+                    <span class="utility-icon">📖</span>
+                    <span class="utility-label">Guide</span>
+                </button>
+                <button id="options-menu-btn" class="utility-btn" title="Options">
+                    <span class="utility-icon">⚙️</span>
+                    <span class="utility-label">Options</span>
+                </button>
+            </div>
+            
+            <div class="hero-content">
+                <div class="hero-title-section">
+                    <h1 class="hero-title">
+                        <span class="hero-title-main">Gooner Training Academy</span>
+                        <span class="hero-title-accent">Professional Development</span>
+                    </h1>
+                    <p class="hero-tagline">
+                        <span class="tagline-emphasis">Master Your Dedication</span>
+                        <span class="tagline-subtitle">★ Advanced Training System ★ v0.41</span>
+                    </p>
                     
+                    <!-- Feature Highlights - Now Main Action Buttons -->
+                    <div class="hero-features">
+                        <button class="hero-feature btn-feature" id="training-academy-btn">
+                            <span class="feature-icon">🎯</span>
+                            <span class="feature-text">Training Academy</span>
+                        </button>
+                        <button class="hero-feature btn-feature" id="quick-play-btn">
+                            <span class="feature-icon">⚡</span>
+                            <span class="feature-text">Quick Play</span>
+                        </button>
+                        <button class="hero-feature btn-feature" id="porn-cinema-btn">
+                            <span class="feature-icon">🎬</span>
+                            <span class="feature-text">Porn Cinema</span>
+                        </button>
+                        <button class="hero-feature btn-feature" id="hypno-gallery-btn">
+                            <span class="feature-icon">🌀</span>
+                            <span class="feature-text">Hypno Gallery</span>
+                        </button>
+                        <button class="hero-feature btn-feature" id="library-btn" onclick="window.location.href='library.html'">
+                            <span class="cassie-icon"></span>
+                            <span class="feature-text">Library</span>
+                        </button>
+                    </div>
                 </div>
                 
                 <!-- Cyberpunk Video Billboard -->
@@ -1356,6 +1365,7 @@
                 if (allImages.length === 0) {
                     // No images available - show placeholder or fall back to hentai theme
                     console.log('No library images found, falling back to hentai theme');
+                    localStorage.removeItem('userLibraryImages');
                     characterSides.forEach((element, index) => {
                         element.style.display = 'block';
                         // Fallback to hentai theme
@@ -1369,6 +1379,9 @@
                     return;
                 }
                 
+                // Save library images to localStorage for other pages to use
+                localStorage.setItem('userLibraryImages', JSON.stringify(allImages));
+                
                 // Dynamic layout variables
                 const FIXED_WIDTH = 150; // Fixed width for all images
                 const MIN_HEIGHT = 100;  // Minimum height
@@ -2034,11 +2047,50 @@
                 console.error('? Options menu initialization failed - missing elements');
             }
         }
+        
+        // Load profile data into header
+        function loadHeaderProfile() {
+            // Get username from userProfile object
+            let username = 'Player';
+            const userProfile = localStorage.getItem('userProfile');
+            if (userProfile) {
+                try {
+                    const profile = JSON.parse(userProfile);
+                    username = profile.username || 'Player';
+                } catch (e) {
+                    console.error('Error parsing user profile:', e);
+                }
+            }
+            
+            const profilePicture = localStorage.getItem('profilePicture');
+            
+            const usernameElement = document.getElementById('header-username');
+            const avatarContainer = document.getElementById('header-profile-avatar');
+            
+            if (usernameElement) {
+                usernameElement.textContent = username;
+            }
+            
+            if (avatarContainer && profilePicture) {
+                avatarContainer.innerHTML = `<img src="${profilePicture}" alt="Profile">`;
+            }
+            
+            // Make profile display clickable to open profile page
+            const profileDisplay = document.querySelector('.user-profile-display');
+            if (profileDisplay) {
+                profileDisplay.addEventListener('click', () => {
+                    window.location.href = 'user-profile.html';
+                });
+            }
+        }
 
         // Initialize application when page loads
         window.addEventListener('DOMContentLoaded', () => {
             console.log(' DOM Content Loaded - Initializing UI components...');
             
+            // Load profile data
+            loadHeaderProfile();
+            
             // Initialize options menu early
             initializeOptionsMenu();
             
@@ -3412,12 +3464,12 @@
                 const pauseBtn = document.getElementById('billboard-pause');
                 
                 if (muteBtn) {
-                    muteBtn.textContent = this.isMuted ? '🔇' : '🔊';
+                    muteBtn.textContent = this.isMuted ? '' : '';
                     muteBtn.title = this.isMuted ? 'Unmute' : 'Mute';
                 }
                 
                 if (pauseBtn) {
-                    pauseBtn.textContent = this.isPlaying ? '⏸️' : '▶️';
+                    pauseBtn.textContent = this.isPlaying ? '' : '';
                     pauseBtn.title = this.isPlaying ? 'Pause' : 'Play';
                 }
             },
@@ -7122,3 +7174,4 @@
 
 
 
+

player-stats.html

@@ -88,6 +88,20 @@
     </style>
 </head>
 <body>
+    <!-- Side Characters -->
+    <div class="character-side left" style="background-image: url('assets/hentai/1.png'); top: 10%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/11.png'); top: 15%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/3.png'); top: 30%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/4.png'); top: 35%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/5.png'); top: 50%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/6.png'); top: 55%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/7.png'); top: 70%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/8.png'); top: 75%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/9.png'); top: 90%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/10.png'); top: 95%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/12.png'); top: 110%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/13.png'); top: 115%;"></div>
+
     <div class="stats-container">
         <div id="theme-switcher-container" style="position: absolute; top: 20px; right: 20px;"></div>
         <div class="stats-header">
@@ -229,6 +243,46 @@
             
             alert('Statistics exported successfully!');
         }
+
+        // Apply sidebar theme on page load
+        window.addEventListener('DOMContentLoaded', async function() {
+            const savedTheme = localStorage.getItem('selectedTheme') || 'hentai';
+            const characterSides = document.querySelectorAll('.character-side');
+            
+            console.log('Applying sidebar theme:', savedTheme);
+            
+            if (savedTheme === 'none') {
+                characterSides.forEach(element => {
+                    element.style.display = 'none';
+                });
+                return;
+            }
+            
+            // Show all sides
+            characterSides.forEach(element => {
+                element.style.display = 'block';
+            });
+            
+            if (savedTheme === 'library') {
+                // Use user library images if available
+                const libraryImages = JSON.parse(localStorage.getItem('userLibraryImages') || '[]');
+                if (libraryImages.length > 0) {
+                    characterSides.forEach((element, index) => {
+                        const randomImage = libraryImages[Math.floor(Math.random() * libraryImages.length)];
+                        const imagePath = randomImage.path || randomImage;
+                        element.style.backgroundImage = `url('file:///${imagePath.replace(/\\/g, '/')}')`;
+                    });
+                }
+                return;
+            }
+            
+            // For asset themes (hentai, pornstars, BBC, feet)
+            const themePath = `assets/${savedTheme}`;
+            characterSides.forEach((element, index) => {
+                const imageNum = [1,11,3,4,5,6,7,8,9,10,12,13][index] || 1;
+                element.style.backgroundImage = `url('${themePath}/${imageNum}.png')`;
+            });
+        });
     </script>
 </body>
 </html>

src/styles/styles.css

@@ -175,6 +175,54 @@ body {
     display: flex;
     gap: 10px;
     z-index: 100;
+    align-items: flex-start;
+}
+
+.user-profile-display {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.user-profile-display:hover {
+    opacity: 0.8;
+}
+
+.profile-avatar-small {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(218, 112, 214, 0.3));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.profile-avatar-small img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.avatar-placeholder {
+    font-size: 1.5rem;
+}
+
+.profile-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-username {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 0.95em;
+    line-height: 1.2;
 }
 
 .utility-btn {
@@ -191,6 +239,7 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
+    flex-shrink: 0;
 }
 
 .utility-btn:hover {
@@ -7057,8 +7106,8 @@ button#start-mirror-btn:disabled {
 /* ===== CYBERPUNK VIDEO BILLBOARD ===== */
 .video-billboard-container {
     position: absolute;
-    top: 15%;
+    top: 22.5%;
-    right: 50px;
+    right: 20px;
     width: 500px;
     height: 320px;
     z-index: 10;

user-profile.html

@@ -15,21 +15,30 @@
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--color-background);
+            background: linear-gradient(135deg, #1a0033 0%, #0a0015 50%, #1a0033 100%);
-            color: var(--color-text);
+            color: #e0e0e0;
             line-height: 1.6;
             padding: 20px;
             min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .main-content-wrapper {
+            width: calc(100vw - 350px);
+            max-width: calc(100vw - 350px);
+            margin: 10px auto;
         }
 
         .header {
             position: relative;
             text-align: center;
-            margin-bottom: 40px;
+            margin-bottom: 20px;
-            padding: 30px 20px;
+            padding: 20px;
-            background: var(--color-gradient);
+            background: linear-gradient(180deg, rgba(138, 43, 226, 0.2) 0%, transparent 100%);
             border-radius: 20px;
-            box-shadow: 0 10px 30px var(--color-secondary-transparent);
+            box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
         }
 
         .header h1 {
@@ -44,25 +53,25 @@
         }
 
         .profile-container {
-            max-width: 1400px;
+            max-width: 100%;
             margin: 0 auto;
             display: grid;
             grid-template-columns: 1fr 2fr;
-            gap: 30px;
+            gap: 20px;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
         }
 
         .profile-info {
-            background: var(--color-surface);
+            background: rgba(26, 26, 26, 0.8);
             border-radius: 15px;
             padding: 30px;
-            border: 1px solid var(--color-border);
+            border: 1px solid rgba(138, 43, 226, 0.3);
             height: fit-content;
         }
 
         .profile-avatar {
-            width: 120px;
+            width: 150px;
-            height: 120px;
+            height: 150px;
             background: var(--gradient);
             border-radius: 50%;
             margin: 0 auto 20px;
@@ -73,12 +82,58 @@
             font-weight: bold;
             cursor: pointer;
             transition: transform 0.3s ease;
+            overflow: hidden;
+            position: relative;
+            border: 3px solid var(--color-primary);
+        }
+
+        .profile-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
 
         .profile-avatar:hover {
             transform: scale(1.05);
         }
 
+        .profile-avatar:hover::after {
+            content: '📷 Change Photo';
+            position: absolute;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            color: white;
+        }
+
+        .character-side {
+            position: fixed;
+            z-index: 3;
+            pointer-events: none;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        .character-side.left {
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 150px;
+            height: 300px;
+        }
+
+        .character-side.right {
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 150px;
+            height: 300px;
+        }
+
         .profile-details h2 {
             font-size: 1.8rem;
             margin-bottom: 15px;
@@ -418,17 +473,35 @@
     </style>
 </head>
 <body>
-    <div class="header">
+    <!-- Side Characters -->
-        <div id="theme-switcher-container" style="position: absolute; top: 20px; right: 20px;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/1.png'); top: 10%;"></div>
-        <h1>👤 User Profile</h1>
+    <div class="character-side right" style="background-image: url('assets/hentai/11.png'); top: 15%;"></div>
-        <p>Customize your gaming experience and track your progress</p>
+    <div class="character-side left" style="background-image: url('assets/hentai/3.png'); top: 30%;"></div>
-    </div>
+    <div class="character-side right" style="background-image: url('assets/hentai/4.png'); top: 35%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/5.png'); top: 50%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/6.png'); top: 55%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/7.png'); top: 70%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/8.png'); top: 75%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/9.png'); top: 90%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/10.png'); top: 95%;"></div>
+    <div class="character-side left" style="background-image: url('assets/hentai/12.png'); top: 110%;"></div>
+    <div class="character-side right" style="background-image: url('assets/hentai/13.png'); top: 115%;"></div>
 
-    <div class="profile-container">
+    <div class="main-content-wrapper">
+        <div class="header">
+            <div id="theme-switcher-container" style="position: absolute; top: 20px; right: 20px;"></div>
+            <h1>👤 User Profile</h1>
+            <p>Customize your gaming experience and track your progress</p>
+        </div>
+
+        <div class="profile-container">
         <div class="profile-info">
             <div class="profile-avatar" id="profile-avatar">
                 <span id="avatar-text">U</span>
+                <img id="avatar-image" style="display: none;">
             </div>
+            <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
+            <button class="btn btn-primary" onclick="document.getElementById('avatar-upload').click()" style="width: 100%; margin-bottom: 20px;">Upload Profile Picture</button>
             <div class="profile-details">
                 <h2>Profile Information</h2>
                 
@@ -1100,7 +1173,104 @@
             }
             
             window.userProfile = new UserProfile();
+            
+            // Profile Picture Upload Handler
+            document.getElementById('avatar-upload').addEventListener('change', function(e) {
+                const file = e.target.files[0];
+                if (file && file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        const avatarImage = document.getElementById('avatar-image');
+                        const avatarText = document.getElementById('avatar-text');
+                        
+                        avatarImage.src = event.target.result;
+                        avatarImage.style.display = 'block';
+                        avatarText.style.display = 'none';
+                        
+                        // Save to localStorage
+                        localStorage.setItem('profilePicture', event.target.result);
+                        
+                        if (window.userProfile) {
+                            window.userProfile.showNotification('Profile picture updated!', 'success');
+                        }
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+
+            // Load saved profile picture
+            const savedPicture = localStorage.getItem('profilePicture');
+            if (savedPicture) {
+                const avatarImage = document.getElementById('avatar-image');
+                const avatarText = document.getElementById('avatar-text');
+                
+                avatarImage.src = savedPicture;
+                avatarImage.style.display = 'block';
+                avatarText.style.display = 'none';
+            }
+
+            // Profile avatar click handler
+            document.getElementById('profile-avatar').addEventListener('click', function() {
+                document.getElementById('avatar-upload').click();
+            });
+
+            // Apply sidebar image theme from home page settings
+            applySidebarTheme();
         });
+        
+        // Function to apply sidebar image theme
+        async function applySidebarTheme() {
+            const savedTheme = localStorage.getItem('selectedTheme') || 'hentai';
+            const characterSides = document.querySelectorAll('.character-side');
+            
+            console.log('Applying sidebar theme:', savedTheme);
+            
+            if (savedTheme === 'none') {
+                characterSides.forEach(element => {
+                    element.style.display = 'none';
+                });
+                return;
+            }
+            
+            // Show all sides
+            characterSides.forEach(element => {
+                element.style.display = 'block';
+            });
+            
+            // Update image sources based on theme
+            const availableImages = [];
+            
+            if (savedTheme === 'library') {
+                // Use user library images if available
+                const libraryImages = JSON.parse(localStorage.getItem('userLibraryImages') || '[]');
+                console.log('Library images from localStorage:', libraryImages.length, 'images found');
+                if (libraryImages.length > 0) {
+                    characterSides.forEach((element, index) => {
+                        const randomImage = libraryImages[Math.floor(Math.random() * libraryImages.length)];
+                        const imagePath = randomImage.path || randomImage;
+                        console.log(`Setting sidebar ${index} to:`, imagePath);
+                        element.style.backgroundImage = `url('file:///${imagePath.replace(/\\/g, '/')}')`;
+                    });
+                    return;
+                } else {
+                    // No library images available, hide sidebar
+                    console.log('No library images in localStorage, hiding sidebar');
+                    characterSides.forEach(element => {
+                        element.style.display = 'none';
+                    });
+                    return;
+                }
+            }
+            
+            // For asset themes (hentai, pornstars, BBC, feet)
+            const themePath = `assets/${savedTheme}`;
+            characterSides.forEach((element, index) => {
+                // Keep the existing image numbering but update the folder
+                const imageNum = index < 10 ? [1,11,3,4,5,6,7,8,9,10,12,13][index] : 1;
+                element.style.backgroundImage = `url('${themePath}/${imageNum}.png')`;
+            });
+        }
     </script>
+    </div>
 </body>
 </html>