extended themes to user profile. added username and profile picture to home screen.
This commit is contained in:
dilgenfritz
parent
0f94b1f893
commit
55c477afc2
151
index.html
151
index.html
|
|
@ -163,53 +163,13 @@
|
|||
|
||||
<!-- Utility Navigation -->
|
||||
<div class="hero-utility-nav">
|
||||
<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 � 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>
|
||||
<!-- User Profile Display -->
|
||||
<div class="user-profile-display">
|
||||
<div class="profile-avatar-small" id="header-profile-avatar">
|
||||
<div class="avatar-placeholder">👤</div>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-username" id="header-username">Player</div>
|
||||
</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 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
right: 50px;
|
||||
top: 22.5%;
|
||||
right: 20px;
|
||||
width: 500px;
|
||||
height: 320px;
|
||||
z-index: 10;
|
||||
|
|
|
|||
|
|
@ -15,21 +15,30 @@
|
|||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
background: linear-gradient(135deg, #1a0033 0%, #0a0015 50%, #1a0033 100%);
|
||||
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;
|
||||
padding: 30px 20px;
|
||||
background: var(--color-gradient);
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
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;
|
||||
margin-bottom: 30px;
|
||||
gap: 20px;
|
||||
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;
|
||||
height: 120px;
|
||||
width: 150px;
|
||||
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">
|
||||
<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>
|
||||
<!-- 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="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>
|
||||
Loading…
Reference in New Issue