1009 lines
58 KiB
HTML
1009 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file:; img-src 'self' data: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
|
||
<title>Edge & Punishment - How long can you last?</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="game-container">
|
||
<!-- Game Header -->
|
||
<header class="game-header">
|
||
<h1>Edge & Punishment</h1>
|
||
<p class="tagline">How long can you last?</p>
|
||
|
||
<!-- Compact Timer (top-right corner) -->
|
||
<div class="timer-compact">
|
||
<span id="timer" class="timer">00:00</span>
|
||
<span id="timer-status" class="timer-status"></span>
|
||
</div>
|
||
|
||
<!-- Compact Music Controls (expandable) -->
|
||
<div class="music-controls-compact">
|
||
<button id="music-toggle-compact" class="music-icon-btn" title="Music Controls">🎵</button>
|
||
<div class="music-panel-expanded">
|
||
<div class="music-row">
|
||
<button id="music-toggle" class="music-btn-small" title="Play/Pause">▶️</button>
|
||
<button id="loop-btn" class="music-btn-small" title="Loop">🔁</button>
|
||
<button id="shuffle-btn" class="music-btn-small" title="Shuffle">🔀</button>
|
||
</div>
|
||
<div class="music-row">
|
||
<select id="track-selector" class="track-dropdown-compact">
|
||
<option value="0">Colorful Flowers</option>
|
||
<option value="1">New Beginnings</option>
|
||
<option value="2">Storm Clouds</option>
|
||
<option value="3">Brunch For Two</option>
|
||
</select>
|
||
</div>
|
||
<div class="music-row">
|
||
<div class="volume-control-compact">
|
||
<span class="volume-icon">🔊</span>
|
||
<input type="range" id="volume-slider" min="0" max="100" value="30" class="volume-slider-compact">
|
||
<span class="volume-percent" id="volume-percent">30%</span>
|
||
</div>
|
||
</div>
|
||
<div class="music-status-compact" id="music-status">Music: Off</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Game Content -->
|
||
<main class="game-content">
|
||
<!-- Start Screen -->
|
||
<div id="start-screen" class="screen active">
|
||
<h2>Ready to Start?</h2>
|
||
<p>Complete tasks, but beware of skipping - there are consequences!</p>
|
||
|
||
<!-- Main Action Buttons -->
|
||
<div class="main-actions">
|
||
<button id="start-btn" class="btn btn-primary">Start Game</button>
|
||
<button id="manage-tasks-btn" class="btn btn-secondary">Manage Tasks</button>
|
||
<button id="manage-images-btn" class="btn btn-secondary">Manage Images</button>
|
||
<button id="manage-audio-btn" class="btn btn-secondary">🎵 Manage Audio</button>
|
||
<button id="manage-annoyance-btn" class="btn btn-secondary">😈 Annoyance</button>
|
||
</div>
|
||
|
||
<!-- Game Mode Selection -->
|
||
<div class="game-mode-selection">
|
||
<h3>Game Mode</h3>
|
||
<div class="game-mode-options">
|
||
<div class="game-mode-option">
|
||
<input type="radio" id="mode-complete-all" name="gameMode" value="complete-all" checked>
|
||
<label for="mode-complete-all">
|
||
<strong>🎯 Complete All Tasks</strong>
|
||
<p>Finish every task in the game</p>
|
||
</label>
|
||
</div>
|
||
<div class="game-mode-option">
|
||
<input type="radio" id="mode-timed" name="gameMode" value="timed">
|
||
<label for="mode-timed">
|
||
<strong>⏱️ Timed Challenge</strong>
|
||
<p>Complete as many tasks as possible within the time limit</p>
|
||
<div class="mode-config" id="timed-config" style="display: none;">
|
||
<label>Time Limit:
|
||
<select id="time-limit-select">
|
||
<option value="300">5 minutes</option>
|
||
<option value="600">10 minutes</option>
|
||
<option value="900">15 minutes</option>
|
||
<option value="1200">20 minutes</option>
|
||
<option value="1800">30 minutes</option>
|
||
<option value="custom">Custom...</option>
|
||
</select>
|
||
</label>
|
||
<div id="custom-time-input" style="display: none; margin-top: 10px;">
|
||
<label>Custom time (minutes):
|
||
<input type="number" id="custom-time-value" min="1" max="180" value="15" style="width: 60px;">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="game-mode-option">
|
||
<input type="radio" id="mode-score-target" name="gameMode" value="score-target">
|
||
<label for="mode-score-target">
|
||
<strong>🏆 Score Target</strong>
|
||
<p>Reach the target score to win</p>
|
||
<div class="mode-config" id="score-target-config" style="display: none;">
|
||
<label>Target Score:
|
||
<select id="score-target-select">
|
||
<option value="100">100 points</option>
|
||
<option value="200">200 points</option>
|
||
<option value="300">300 points</option>
|
||
<option value="custom">Custom...</option>
|
||
</select>
|
||
</label>
|
||
<div id="custom-score-input" style="display: none; margin-top: 10px;">
|
||
<label>Custom target score:
|
||
<input type="number" id="custom-score-value" min="50" max="10000" value="300" style="width: 80px;">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Options Menu -->
|
||
<div class="options-section">
|
||
<button id="options-menu-btn" class="btn btn-tertiary">⚙️ Options</button>
|
||
<div id="options-menu" class="options-menu" style="display: none;">
|
||
<!-- Theme Selector -->
|
||
<div class="option-item theme-selector">
|
||
<label for="theme-dropdown" class="option-label">Choose Your Vibe:</label>
|
||
<select id="theme-dropdown" class="theme-dropdown">
|
||
<option value="ocean">🌊 Ocean Blue</option>
|
||
<option value="sunset">🌅 Warm Sunset</option>
|
||
<option value="forest">🌲 Nature Green</option>
|
||
<option value="midnight">🌙 Midnight Dark</option>
|
||
<option value="pastel">🌸 Soft Pastel</option>
|
||
<option value="neon">⚡ Neon Cyber</option>
|
||
<option value="autumn">🍂 Autumn Vibes</option>
|
||
<option value="monochrome">⚫ Monochrome</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Data Management -->
|
||
<div class="option-item data-controls">
|
||
<button id="import-btn" class="btn btn-option" title="Import Save File">
|
||
<span class="btn-text"><EFBFBD> Import</span>
|
||
<span class="btn-loading" style="display: none;">⏳ Importing...</span>
|
||
</button>
|
||
<button id="export-btn" class="btn btn-option" title="Export Save File">
|
||
<span class="btn-text"><EFBFBD> Export</span>
|
||
<span class="btn-loading" style="display: none;">⏳ Exporting...</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Other Options -->
|
||
<div class="option-item other-controls">
|
||
<button id="stats-btn" class="btn btn-option" title="View Statistics">📊 Stats</button>
|
||
<button id="help-btn" class="btn btn-option" title="Keyboard Shortcuts & Help">❓ Help</button>
|
||
</div>
|
||
</div>
|
||
<input type="file" id="import-file" accept=".json" style="display: none;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Task Management Screen -->
|
||
<div id="task-management-screen" class="screen">
|
||
<h2>Manage Your Tasks</h2>
|
||
|
||
<!-- Add New Task Section -->
|
||
<div class="task-editor-section">
|
||
<h3>Add New Task</h3>
|
||
<div class="task-input-group">
|
||
<label for="new-task-text">Task Description:</label>
|
||
<textarea id="new-task-text" placeholder="Enter your task description..." rows="3"></textarea>
|
||
</div>
|
||
<div class="task-input-group">
|
||
<label for="new-task-type">Task Type:</label>
|
||
<select id="new-task-type">
|
||
<option value="main">Main Task</option>
|
||
<option value="consequence">Consequence Task</option>
|
||
</select>
|
||
</div>
|
||
<div class="task-input-group" id="difficulty-input-group">
|
||
<label for="new-task-difficulty">Difficulty:</label>
|
||
<select id="new-task-difficulty">
|
||
<option value="Easy">🟢 Easy (1 point)</option>
|
||
<option value="Medium" selected>🟡 Medium (3 points)</option>
|
||
<option value="Hard">🔴 Hard (5 points)</option>
|
||
</select>
|
||
</div>
|
||
<button id="add-task-btn" class="btn btn-success">Add Task</button>
|
||
</div>
|
||
|
||
<!-- Existing Tasks Section -->
|
||
<div class="task-list-section">
|
||
<h3>Your Tasks</h3>
|
||
<div class="task-tabs">
|
||
<button id="main-tasks-tab" class="tab-btn active">Main Tasks</button>
|
||
<button id="consequence-tasks-tab" class="tab-btn">Consequence Tasks</button>
|
||
</div>
|
||
|
||
<div id="main-tasks-list" class="task-list active">
|
||
<!-- Main tasks will be populated here -->
|
||
</div>
|
||
|
||
<div id="consequence-tasks-list" class="task-list">
|
||
<!-- Consequence tasks will be populated here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="management-buttons">
|
||
<button id="back-to-start-btn" class="btn btn-secondary">Back to Start</button>
|
||
<button id="reset-tasks-btn" class="btn btn-warning">Reset to Defaults</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Management Screen -->
|
||
<div id="image-management-screen" class="screen">
|
||
<h2>Manage Your Images</h2>
|
||
|
||
<!-- Upload Section -->
|
||
<div class="upload-section">
|
||
<h3>📁 Import Images</h3>
|
||
<div class="upload-controls">
|
||
<button id="import-task-images-btn" class="btn btn-primary"><EFBFBD> Import Task Images</button>
|
||
<button id="import-consequence-images-btn" class="btn btn-warning">⚠️ Import Consequence Images</button>
|
||
<input type="file" id="image-upload-input" accept="image/*" multiple style="display: none;">
|
||
<span class="upload-info desktop-feature">Desktop: Native file dialogs with unlimited storage</span>
|
||
<span class="upload-info web-feature" style="display: none;">Web: Limited browser upload</span>
|
||
</div>
|
||
<div class="directory-controls">
|
||
<button id="storage-info-btn" class="btn btn-outline">📊 Storage Info</button>
|
||
<span class="scan-info">Images automatically scanned on startup</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Gallery Section -->
|
||
<div class="gallery-section">
|
||
<div class="gallery-header">
|
||
<h3>Current Images</h3>
|
||
<div class="gallery-controls">
|
||
<button id="select-all-images-btn" class="btn btn-small">Select All</button>
|
||
<button id="deselect-all-images-btn" class="btn btn-small">Deselect All</button>
|
||
<button id="delete-selected-btn" class="btn btn-danger btn-small">Delete Selected</button>
|
||
<span class="image-count">Loading images...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Tabs -->
|
||
<div class="image-tabs">
|
||
<button id="task-images-tab" class="tab-btn active">Task Images</button>
|
||
<button id="consequence-images-tab" class="tab-btn">Consequence Images</button>
|
||
</div>
|
||
|
||
<div id="task-images-gallery" class="image-gallery active">
|
||
<!-- Task images will be populated here -->
|
||
</div>
|
||
|
||
<div id="consequence-images-gallery" class="image-gallery">
|
||
<!-- Consequence images will be populated here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="management-buttons">
|
||
<button id="back-to-start-from-images-btn" class="btn btn-secondary">Back to Start</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Audio Management Screen -->
|
||
<div id="audio-management-screen" class="screen">
|
||
<h2>Manage Your Audio</h2>
|
||
|
||
<!-- Upload Section -->
|
||
<div class="upload-section">
|
||
<h3>🎵 Import Audio Files</h3>
|
||
<div class="upload-controls">
|
||
<button id="import-background-audio-btn" class="btn btn-primary">🎶 Import Background Music</button>
|
||
<button id="import-ambient-audio-btn" class="btn btn-success">🌿 Import Ambient Sounds</button>
|
||
<button id="import-effects-audio-btn" class="btn btn-warning">🔊 Import Sound Effects</button>
|
||
<input type="file" id="audio-upload-input" accept="audio/*" multiple style="display: none;">
|
||
<span class="upload-info desktop-feature">Desktop: Native file dialogs • MP3, WAV, OGG, M4A, AAC, FLAC</span>
|
||
<span class="upload-info web-feature" style="display: none;">Web: Limited browser upload</span>
|
||
</div>
|
||
<div class="directory-controls">
|
||
<button id="audio-storage-info-btn" class="btn btn-outline">📊 Audio Storage Info</button>
|
||
<span class="scan-info">Audio files automatically scanned on startup</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Audio Gallery Section -->
|
||
<div class="gallery-section">
|
||
<div class="gallery-header">
|
||
<h3>Current Audio Files</h3>
|
||
<div class="gallery-controls">
|
||
<button id="select-all-audio-btn" class="btn btn-small">Select All</button>
|
||
<button id="deselect-all-audio-btn" class="btn btn-small">Deselect All</button>
|
||
<button id="delete-selected-audio-btn" class="btn btn-danger btn-small">Delete Selected</button>
|
||
<button id="preview-selected-audio-btn" class="btn btn-info btn-small">🎧 Preview</button>
|
||
<span class="audio-count">Loading audio files...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Audio Tabs -->
|
||
<div class="audio-tabs">
|
||
<button id="background-audio-tab" class="tab-btn active">Background Music</button>
|
||
<button id="ambient-audio-tab" class="tab-btn">Ambient Sounds</button>
|
||
<button id="effects-audio-tab" class="tab-btn">Sound Effects</button>
|
||
</div>
|
||
|
||
<div id="background-audio-gallery" class="audio-gallery active">
|
||
<!-- Background audio files will be populated here -->
|
||
</div>
|
||
|
||
<div id="ambient-audio-gallery" class="audio-gallery">
|
||
<!-- Ambient audio files will be populated here -->
|
||
</div>
|
||
|
||
<div id="effects-audio-gallery" class="audio-gallery">
|
||
<!-- Effects audio files will be populated here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Audio Preview Section -->
|
||
<div class="audio-preview-section" id="audio-preview-section" style="display: none;">
|
||
<h4>🎧 Audio Preview</h4>
|
||
<div class="preview-controls">
|
||
<audio id="audio-preview-player" controls style="width: 100%; max-width: 500px;">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
<div class="preview-info">
|
||
<span id="preview-file-name">No file selected</span>
|
||
<button id="close-preview-btn" class="btn btn-small btn-outline">Close Preview</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="management-buttons">
|
||
<button id="back-to-start-from-audio-btn" class="btn btn-secondary">Back to Start</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Annoyance Management Screen -->
|
||
<div id="annoyance-management-screen" class="screen">
|
||
<h2>😈 Annoyance Management</h2>
|
||
<p>Configure flash messages and motivational features to enhance your experience!</p>
|
||
|
||
<!-- Tab Navigation -->
|
||
<div class="annoyance-tabs">
|
||
<button id="messages-tab" class="annoyance-tab active">💬 Messages</button>
|
||
<button id="appearance-tab" class="annoyance-tab">🎨 Appearance</button>
|
||
<button id="behavior-tab" class="annoyance-tab">⚡ Behavior</button>
|
||
<button id="popup-images-tab" class="annoyance-tab">🖼️ Popup Images</button>
|
||
<button id="import-export-tab" class="annoyance-tab">📁 Import/Export</button>
|
||
</div>
|
||
|
||
<!-- Messages Tab -->
|
||
<div id="messages-tab-content" class="annoyance-tab-content active">
|
||
<div class="annoyance-section">
|
||
<div class="section-header">
|
||
<h3>💬 Message Management</h3>
|
||
<div class="header-controls">
|
||
<label>
|
||
<input type="checkbox" id="flash-messages-enabled" checked>
|
||
Enable Flash Messages
|
||
</label>
|
||
<button id="add-new-message-btn" class="btn btn-success btn-small">+ Add Message</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Message Editor -->
|
||
<div id="message-editor" class="message-editor" style="display: none;">
|
||
<div class="editor-header">
|
||
<h4 id="editor-title">Add New Message</h4>
|
||
<button id="close-editor-btn" class="btn btn-outline btn-small">✕ Close</button>
|
||
</div>
|
||
<div class="editor-form">
|
||
<div class="form-group">
|
||
<label>Message Text:</label>
|
||
<textarea id="message-text" placeholder="Enter your motivational message..." maxlength="200" rows="3"></textarea>
|
||
<div class="char-counter">
|
||
<span id="char-count">0</span>/200 characters
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Category:</label>
|
||
<select id="message-category">
|
||
<option value="motivational">💪 Motivational</option>
|
||
<option value="encouraging">🌟 Encouraging</option>
|
||
<option value="achievement">🏆 Achievement</option>
|
||
<option value="persistence">🔥 Persistence</option>
|
||
<option value="custom">✨ Custom</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Priority:</label>
|
||
<select id="message-priority">
|
||
<option value="normal">Normal</option>
|
||
<option value="high">High</option>
|
||
<option value="low">Low</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="editor-actions">
|
||
<button id="save-message-btn" class="btn btn-primary">Save Message</button>
|
||
<button id="preview-current-message-btn" class="btn btn-info">Preview</button>
|
||
<button id="cancel-edit-btn" class="btn btn-secondary">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Message List -->
|
||
<div class="message-list-section">
|
||
<div class="list-header">
|
||
<div class="list-filters">
|
||
<label>Filter by Category:
|
||
<select id="category-filter">
|
||
<option value="all">All Categories</option>
|
||
<option value="motivational">💪 Motivational</option>
|
||
<option value="encouraging">🌟 Encouraging</option>
|
||
<option value="achievement">🏆 Achievement</option>
|
||
<option value="persistence">🔥 Persistence</option>
|
||
<option value="custom">✨ Custom</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" id="show-disabled-messages"> Show Disabled
|
||
</label>
|
||
</div>
|
||
<div class="list-stats">
|
||
<span id="message-stats">20 messages (18 enabled, 2 disabled)</span>
|
||
</div>
|
||
</div>
|
||
<div id="message-list" class="message-list">
|
||
<!-- Messages will be populated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Appearance Tab -->
|
||
<div id="appearance-tab-content" class="annoyance-tab-content">
|
||
<div class="annoyance-section">
|
||
<h3>🎨 Visual Appearance</h3>
|
||
<div class="appearance-controls">
|
||
<div class="control-row">
|
||
<div class="control-group">
|
||
<label>Position:</label>
|
||
<select id="message-position">
|
||
<option value="center">Center</option>
|
||
<option value="top-center">Top Center</option>
|
||
<option value="bottom-center">Bottom Center</option>
|
||
<option value="top-left">Top Left</option>
|
||
<option value="top-right">Top Right</option>
|
||
<option value="bottom-left">Bottom Left</option>
|
||
<option value="bottom-right">Bottom Right</option>
|
||
<option value="center-left">Center Left</option>
|
||
<option value="center-right">Center Right</option>
|
||
</select>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Animation:</label>
|
||
<select id="animation-style">
|
||
<option value="fade">Fade</option>
|
||
<option value="slide">Slide</option>
|
||
<option value="bounce">Bounce</option>
|
||
<option value="pulse">Pulse</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-group">
|
||
<label>Font Size: <span id="font-size-display">24px</span></label>
|
||
<input type="range" id="font-size" min="16" max="48" value="24" step="2">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Opacity: <span id="opacity-display">90%</span></label>
|
||
<input type="range" id="message-opacity" min="50" max="100" value="90" step="5">
|
||
</div>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-group">
|
||
<label>Text Color:</label>
|
||
<input type="color" id="text-color" value="#ffffff">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Background Color:</label>
|
||
<input type="color" id="background-color" value="#007bff">
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<button id="reset-appearance-btn" class="btn btn-outline">Reset to Defaults</button>
|
||
<button id="preview-appearance-btn" class="btn btn-info">Preview Style</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Behavior Tab -->
|
||
<div id="behavior-tab-content" class="annoyance-tab-content">
|
||
<div class="annoyance-section">
|
||
<h3>⚡ Behavior Settings</h3>
|
||
<div class="behavior-controls">
|
||
<div class="control-group">
|
||
<label>Display Duration: <span id="duration-display">3.0s</span></label>
|
||
<input type="range" id="display-duration" min="1000" max="10000" value="3000" step="500">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Interval Between Messages: <span id="interval-display">45s</span></label>
|
||
<input type="range" id="interval-delay" min="10000" max="300000" value="45000" step="5000">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Random Variation: <span id="variation-display">±5s</span></label>
|
||
<input type="range" id="time-variation" min="0" max="30000" value="5000" step="1000">
|
||
<small class="help-text">Adds random time variation to prevent predictability</small>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-group">
|
||
<label>
|
||
<input type="checkbox" id="event-based-messages" checked>
|
||
Enable Event-Based Messages
|
||
</label>
|
||
<small class="help-text">Show special messages for task completion, streaks, etc.</small>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>
|
||
<input type="checkbox" id="pause-on-hover">
|
||
Pause Timer on Message Hover
|
||
</label>
|
||
<small class="help-text">Pause message fade when hovering (useful for reading)</small>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<button id="test-behavior-btn" class="btn btn-success">Test Current Settings</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Popup Images Tab -->
|
||
<div id="popup-images-tab-content" class="annoyance-tab-content">
|
||
<div class="annoyance-section">
|
||
<h3>🖼️ Punishment Popups</h3>
|
||
<p class="help-text">Configure consequence images that appear when tasks are skipped</p>
|
||
|
||
<!-- Enable/Disable -->
|
||
<div class="control-section">
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-images-enabled" />
|
||
<span class="switch"></span>
|
||
Enable Punishment Popups
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Count Settings -->
|
||
<div class="control-section">
|
||
<h4>📊 Number of Images</h4>
|
||
<div class="control-group">
|
||
<label for="popup-count-mode">Count Mode:</label>
|
||
<select id="popup-count-mode">
|
||
<option value="fixed">Fixed Amount</option>
|
||
<option value="random">Random (1-10)</option>
|
||
<option value="range">Custom Range</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="popup-fixed-count" class="control-group">
|
||
<label for="popup-image-count">Number of Images:</label>
|
||
<input type="range" id="popup-image-count" min="1" max="40" value="3" />
|
||
<span id="popup-image-count-value">3</span>
|
||
</div>
|
||
|
||
<div id="popup-range-count" class="control-group" style="display: none;">
|
||
<div class="range-inputs">
|
||
<div>
|
||
<label for="popup-min-count">Minimum:</label>
|
||
<input type="number" id="popup-min-count" min="1" max="20" value="2" />
|
||
</div>
|
||
<div>
|
||
<label for="popup-max-count">Maximum:</label>
|
||
<input type="number" id="popup-max-count" min="2" max="40" value="5" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Display Duration Settings -->
|
||
<div class="control-section">
|
||
<h4>⏱️ Display Duration</h4>
|
||
<div class="control-group">
|
||
<label for="popup-duration-mode">Duration Mode:</label>
|
||
<select id="popup-duration-mode">
|
||
<option value="fixed">Fixed Duration</option>
|
||
<option value="random">Random (5-15s)</option>
|
||
<option value="range">Custom Range</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="popup-fixed-duration" class="control-group">
|
||
<label for="popup-display-duration">Duration (seconds):</label>
|
||
<input type="range" id="popup-display-duration" min="3" max="30" value="8" />
|
||
<span id="popup-display-duration-value">8s</span>
|
||
</div>
|
||
|
||
<div id="popup-range-duration" class="control-group" style="display: none;">
|
||
<div class="range-inputs">
|
||
<div>
|
||
<label for="popup-min-duration">Min (seconds):</label>
|
||
<input type="number" id="popup-min-duration" min="2" max="20" value="5" />
|
||
</div>
|
||
<div>
|
||
<label for="popup-max-duration">Max (seconds):</label>
|
||
<input type="number" id="popup-max-duration" min="5" max="60" value="15" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Positioning & Appearance -->
|
||
<div class="control-section">
|
||
<h4>🎯 Positioning</h4>
|
||
<div class="control-group">
|
||
<label for="popup-positioning">Layout Style:</label>
|
||
<select id="popup-positioning">
|
||
<option value="random">Random Positions</option>
|
||
<option value="cascade">Cascading</option>
|
||
<option value="grid">Grid Layout</option>
|
||
<option value="center">Centered (stacked)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-allow-overlap" />
|
||
<span class="switch"></span>
|
||
Allow Overlapping
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Size Settings -->
|
||
<div class="control-section">
|
||
<h4>📏 Size Settings</h4>
|
||
<p class="help-text">Popups automatically size to match image proportions within these limits</p>
|
||
|
||
<div class="control-group">
|
||
<label for="popup-viewport-width">Max Viewport Width:</label>
|
||
<input type="range" id="popup-viewport-width" min="20" max="60" value="35" />
|
||
<span id="popup-viewport-width-value">35%</span>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="popup-viewport-height">Max Viewport Height:</label>
|
||
<input type="range" id="popup-viewport-height" min="20" max="60" value="40" />
|
||
<span id="popup-viewport-height-value">40%</span>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<div class="range-inputs">
|
||
<div>
|
||
<label for="popup-min-width">Min Width (px):</label>
|
||
<input type="number" id="popup-min-width" min="150" max="400" value="200" />
|
||
</div>
|
||
<div>
|
||
<label for="popup-max-width">Max Width (px):</label>
|
||
<input type="number" id="popup-max-width" min="300" max="800" value="500" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<div class="range-inputs">
|
||
<div>
|
||
<label for="popup-min-height">Min Height (px):</label>
|
||
<input type="number" id="popup-min-height" min="100" max="300" value="150" />
|
||
</div>
|
||
<div>
|
||
<label for="popup-max-height">Max Height (px):</label>
|
||
<input type="number" id="popup-max-height" min="200" max="600" value="400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Visual Effects -->
|
||
<div class="control-section">
|
||
<h4>✨ Visual Effects</h4>
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-fade-animation" />
|
||
<span class="switch"></span>
|
||
Fade In/Out Animation
|
||
</label>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-blur-background" />
|
||
<span class="switch"></span>
|
||
Blur Background
|
||
</label>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-show-timer" />
|
||
<span class="switch"></span>
|
||
Show Countdown Timer
|
||
</label>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="switch-label">
|
||
<input type="checkbox" id="popup-prevent-close" />
|
||
<span class="switch"></span>
|
||
Prevent Manual Close
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Test & Preview -->
|
||
<div class="control-section">
|
||
<h4>🧪 Testing</h4>
|
||
<div class="test-buttons">
|
||
<button id="test-popup-single" class="btn btn-info">Test 1 Popup</button>
|
||
<button id="test-popup-multiple" class="btn btn-primary">Test Multiple</button>
|
||
<button id="clear-all-popups" class="btn btn-danger">Clear All</button>
|
||
</div>
|
||
<p class="help-text">Test your popup settings to see how they look</p>
|
||
<div id="popup-warning" class="warning-text" style="display: none;">
|
||
⚠️ High popup counts (>20) may impact performance and visibility
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status & Info -->
|
||
<div class="control-section">
|
||
<div class="info-display">
|
||
<div class="info-item">
|
||
<span class="info-label">Available Images:</span>
|
||
<span id="available-images-count">0</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Active Popups:</span>
|
||
<span id="active-popups-count">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import/Export Tab -->
|
||
<div id="import-export-tab-content" class="annoyance-tab-content">
|
||
<div class="annoyance-section">
|
||
<h3><EFBFBD> Import & Export</h3>
|
||
<div class="import-export-controls">
|
||
<div class="control-section">
|
||
<h4>💾 Export Messages</h4>
|
||
<div class="export-options">
|
||
<button id="export-all-messages-btn" class="btn btn-primary">Export All Messages</button>
|
||
<button id="export-enabled-messages-btn" class="btn btn-secondary">Export Enabled Only</button>
|
||
<button id="export-custom-messages-btn" class="btn btn-info">Export Custom Only</button>
|
||
</div>
|
||
<p class="help-text">Export your messages as a JSON file for backup or sharing</p>
|
||
</div>
|
||
<div class="control-section">
|
||
<h4><EFBFBD> Import Messages</h4>
|
||
<div class="import-options">
|
||
<button id="import-messages-btn" class="btn btn-success">Import Messages</button>
|
||
<input type="file" id="import-messages-file" accept=".json" style="display: none;">
|
||
<div class="import-mode">
|
||
<label>Import Mode:</label>
|
||
<div class="radio-group">
|
||
<label><input type="radio" name="importMode" value="merge" checked> Merge with existing</label>
|
||
<label><input type="radio" name="importMode" value="replace"> Replace all messages</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="help-text">Import messages from a JSON file</p>
|
||
</div>
|
||
<div class="control-section">
|
||
<h4>🔄 Reset Options</h4>
|
||
<div class="reset-options">
|
||
<button id="reset-to-defaults-btn" class="btn btn-warning">Reset to Default Messages</button>
|
||
<button id="clear-all-messages-btn" class="btn btn-danger">Clear All Messages</button>
|
||
</div>
|
||
<p class="help-text danger">⚠️ Reset operations cannot be undone!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="management-buttons">
|
||
<button id="back-to-start-from-annoyance-btn" class="btn btn-secondary">Back to Start</button>
|
||
<button id="save-annoyance-settings" class="btn btn-primary">Save All Settings</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game Screen -->
|
||
<div id="game-screen" class="screen">
|
||
<div class="task-container">
|
||
<div class="task-type">
|
||
<span id="task-type-indicator">MAIN TASK</span>
|
||
<span id="task-difficulty" class="task-difficulty">MEDIUM</span>
|
||
<span id="task-points" class="task-points">+3 pts</span>
|
||
</div>
|
||
|
||
<div class="task-image-container">
|
||
<img id="task-image" src="" alt="Task Image" class="task-image">
|
||
</div>
|
||
|
||
<div class="task-text-container">
|
||
<h3 id="task-text" class="task-text">Loading task...</h3>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<button id="complete-btn" class="btn btn-success">Complete</button>
|
||
<button id="skip-btn" class="btn btn-warning">Skip</button>
|
||
<button id="mercy-skip-btn" class="btn btn-danger" style="display: none;">
|
||
<span id="mercy-skip-text">Mercy Skip</span>
|
||
<span id="mercy-skip-cost" class="mercy-cost"></span>
|
||
</button>
|
||
<button id="pause-btn" class="btn btn-info">Pause</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-stats">
|
||
<div class="stat">
|
||
<span class="stat-label">Score:</span>
|
||
<span id="score" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Completed:</span>
|
||
<span id="completed-count" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat streak-stat">
|
||
<span class="stat-label">Streak:</span>
|
||
<span id="current-streak" class="stat-value">0</span>🔥
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Skipped:</span>
|
||
<span id="skipped-count" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Consequences:</span>
|
||
<span id="consequence-count" class="stat-value">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paused Screen -->
|
||
<div id="paused-screen" class="screen">
|
||
<h2>Game Paused</h2>
|
||
<p>Take a break! Click resume when ready.</p>
|
||
<button id="resume-btn" class="btn btn-primary">Resume</button>
|
||
<button id="quit-btn" class="btn btn-secondary">Quit Game</button>
|
||
</div>
|
||
|
||
<!-- Game Over Screen -->
|
||
<div id="game-over-screen" class="screen">
|
||
<h2>Game Complete!</h2>
|
||
<p>Congratulations! You've completed all available tasks!</p>
|
||
<div id="final-stats" class="final-stats">
|
||
<p><strong>Game Mode:</strong> <span id="final-game-mode"></span></p>
|
||
<p>Final Score: <span id="final-score"></span> points</p>
|
||
<p>Final Time: <span id="final-time"></span></p>
|
||
<p>Tasks Completed: <span id="final-completed"></span></p>
|
||
<p>Tasks Skipped: <span id="final-skipped"></span></p>
|
||
<p>Consequence Tasks: <span id="final-consequences"></span></p>
|
||
<p>Best Streak: <span id="final-best-streak"></span> 🔥</p>
|
||
<p>Streak Bonus Points: <span id="final-streak-bonuses"></span></p>
|
||
</div>
|
||
<button id="play-again-btn" class="btn btn-primary">Play Again</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="gameData.js"></script>
|
||
<script src="flashMessageManager.js"></script>
|
||
<script src="popupImageManager.js"></script>
|
||
<script src="desktop-file-manager.js"></script>
|
||
<script src="game.js"></script>
|
||
<!-- Statistics Modal -->
|
||
<div id="stats-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>📊 Game Statistics</h2>
|
||
<span class="close" id="close-stats">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<h3>Games Played</h3>
|
||
<div class="stat-value" id="stat-games">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>Tasks Completed</h3>
|
||
<div class="stat-value" id="stat-completed">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>Best Score</h3>
|
||
<div class="stat-value" id="stat-score">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>Current Streak</h3>
|
||
<div class="stat-value" id="stat-streak">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>Completion Rate</h3>
|
||
<div class="stat-value" id="stat-rate">0%</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>Hours Played</h3>
|
||
<div class="stat-value" id="stat-hours">0.0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-actions">
|
||
<button id="reset-stats-btn" class="btn btn-warning">Reset Statistics</button>
|
||
<button id="export-stats-btn" class="btn btn-secondary">
|
||
<span class="btn-text">Export Stats Only</span>
|
||
<span class="btn-loading" style="display: none;">⏳ Exporting...</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Help Menu Modal -->
|
||
<div id="help-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>⌨️ Keyboard Shortcuts & Help</h2>
|
||
<span class="close" id="close-help">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="help-section">
|
||
<h3>🎮 Game Controls</h3>
|
||
<div class="shortcut-list">
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">Enter</span>
|
||
<span class="shortcut-action">Complete Current Task</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">Ctrl</span>
|
||
<span class="shortcut-action">Skip Task (get consequence task)</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">Shift+Ctrl</span>
|
||
<span class="shortcut-action">Mercy Skip (spend points to avoid consequence)</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">Space</span>
|
||
<span class="shortcut-action">Pause/Resume Game</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">P</span>
|
||
<span class="shortcut-action">Pause/Resume Game</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="help-section">
|
||
<h3>🎵 Music Controls</h3>
|
||
<div class="shortcut-list">
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">M</span>
|
||
<span class="shortcut-action">Toggle Music On/Off</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="help-section">
|
||
<h3>🧭 Navigation</h3>
|
||
<div class="shortcut-list">
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">Escape</span>
|
||
<span class="shortcut-action">Close Modals / Back / Pause Game</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span class="shortcut-key">H</span>
|
||
<span class="shortcut-action">Show/Hide This Help Menu</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="help-section">
|
||
<h3>💡 Tips</h3>
|
||
<ul class="help-tips">
|
||
<li>Use Enter and Ctrl for lightning-fast task progression</li>
|
||
<li>Ctrl gives you a consequence task - complete it to save points!</li>
|
||
<li>Shift+Ctrl spends points for mercy skip - use strategically</li>
|
||
<li>Choose your skipping strategy: face the consequence or pay points</li>
|
||
<li>Shortcuts are disabled when typing in input fields</li>
|
||
<li>The game auto-saves when paused and offers to resume</li>
|
||
<li>Export your progress regularly to avoid data loss</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |