187 lines
8.1 KiB
HTML
187 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Resonance Rumble</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
<script src="/static/js/skinselector.js" defer></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="ui" style="display: none;">
|
|
<button id="quitButton" class="button">Quit</button>
|
|
<button id="uiButton" class="button">Menu</button>
|
|
</div>
|
|
<div id="uiWidget" class="hidden">
|
|
<div class="widget-tabs">
|
|
<button class="tab-button" data-tab="settings">Settings</button>
|
|
<button class="tab-button" data-tab="customization">Customization</button>
|
|
<button class="tab-button" data-tab="account">Account</button>
|
|
</div>
|
|
|
|
<div class="widget-content">
|
|
<div id="settings" class="tab-content">
|
|
<h2>Settings</h2>
|
|
<div class="setting-option">
|
|
<input type="checkbox" id="debugCheckbox" name="debugMode">
|
|
<label for="debugCheckbox">Enable Debugging</label>
|
|
</div>
|
|
<div class="setting-option">
|
|
<input type="checkbox" id="autoFireCheckbox">
|
|
<label for="autoFireCheckbox">Enable Auto Fire</label>
|
|
</div>
|
|
</div>
|
|
<div id="account" class="tab-content">
|
|
<h2>Account</h2>
|
|
<div id="accountContent">
|
|
<!-- Content will be dynamically updated based on login status -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="customization" class="tab-content">
|
|
<h2>Customization</h2>
|
|
<div id="skinCustomization">
|
|
<h3></h3>
|
|
<div id="colorSelector" class="skin-section">
|
|
<h4>Colors</h4>
|
|
<div id="colorOptions"></div>
|
|
</div>
|
|
<div id="hatSelector" class="skin-section">
|
|
<h4>Hats</h4>
|
|
<div id="hatOptions"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="close-button">Close</button>
|
|
</div>
|
|
<div id="infoWidget" class="hidden">
|
|
<div class="widget-tabs">
|
|
<button class="tab-button" data-tab="socials">Socials</button>
|
|
<button class="tab-button" data-tab="about">About</button>
|
|
<button class="tab-button" data-tab="news">News</button>
|
|
</div>
|
|
<div class="widget-content">
|
|
<div id="socials" class="tab-content">
|
|
<h2>Socials</h2>
|
|
<div class="social-links">
|
|
<a href="https://x.com/resonancerumble" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-twitter"></i> Twitter/X
|
|
</a>
|
|
<a href="https://discord.gg/eJGeM7SuFP" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-discord"></i> Discord
|
|
</a>
|
|
<a href="https://www.facebook.com/resonancerumblegame" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-facebook"></i> Facebook
|
|
</a>
|
|
<a href="https://www.youtube.com/@ResonanceRumble" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-youtube"></i> YouTube
|
|
</a>
|
|
<a href="https://www.tiktok.com/@resonance.rumble" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-tiktok"></i> TikTok
|
|
</a>
|
|
<a href="https://www.reddit.com/r/ResonanceRumble/" target="_blank" rel="noopener noreferrer" class="social-link">
|
|
<i class="fab fa-reddit"></i> Reddit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="about" class="tab-content">
|
|
<h2>About</h2>
|
|
<!-- Add information about your game here -->
|
|
</div>
|
|
<div id="news" class="tab-content">
|
|
<h2>News</h2>
|
|
<!-- Add your news content here -->
|
|
</div>
|
|
</div>
|
|
<button class="close-button">Close</button>
|
|
</div>
|
|
<div id="classWidget" class="hidden">
|
|
<div class="widget-tabs">
|
|
<button class="tab-button" data-tab="classes">Classes</button>
|
|
</div>
|
|
<div class="widget-content">
|
|
<div id="classes" class="tab-content active">
|
|
<h2>Select Your Class</h2>
|
|
<div id="classInfoBox">
|
|
<div id="classImage"></div>
|
|
<div id="classDetails">
|
|
<h3 id="className"></h3>
|
|
<div id="classStats"></div>
|
|
</div>
|
|
</div>
|
|
<div id="classSelector"></div>
|
|
</div>
|
|
</div>
|
|
<button class="close-button">Close</button>
|
|
</div>
|
|
|
|
|
|
|
|
<canvas id="gameCanvas"></canvas>
|
|
<div id="gameControls">
|
|
<div id="authButtons">
|
|
<button id="signupButton" class="button auth-button">Sign Up</button>
|
|
<button id="loginButton" class="button auth-button">Login</button>
|
|
</div>
|
|
<button id="logoutButton" class="button auth-button">Logout</button>
|
|
<div id="signupForm" class="auth-form">
|
|
<input type="text" id="signupUsername" autocomplete="username" placeholder="Username">
|
|
<input type="email" id="signupEmail" autocomplete="email" placeholder="Email">
|
|
<input type="password" id="signupPassword" autocomplete="new-password" placeholder="Password">
|
|
<button id="submitSignup" class="button auth-button">Sign Up</button>
|
|
</div>
|
|
<div id="loginForm" class="auth-form">
|
|
<input type="text" id="loginUsername" autocomplete="username" placeholder="Username">
|
|
<input type="password" id="loginPassword" autocomplete="current-password" placeholder="Password">
|
|
<button id="submitLogin" class="button auth-button">Login</button>
|
|
</div>
|
|
<div id="welcomeMessage">Welcome to Resonance Rumble</div>
|
|
<button id="playButton" class="button">Join Game</button>
|
|
<button id="classSelectorButton" class="button">Select Class</button>
|
|
<div id="infoMenuButtons">
|
|
<button id="infoButton" class="button">INFO</button>
|
|
<button id="menuButton" class="button">MENU</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div id="minimap-container" style="display: none;">
|
|
<canvas id="minimap"></canvas>
|
|
<button id="toggle-minimap">Map</button>
|
|
</div>
|
|
<script src="cursor.js"></script>
|
|
<script src="draggable.js"></script>
|
|
<script src="security.js"></script>
|
|
<script src="/game.js"></script>
|
|
|
|
<div id="shopWidget" class="hidden">
|
|
<div class="widget-tabs">
|
|
<button class="tab-button active" data-tab="shop">Shop</button>
|
|
</div>
|
|
<div class="widget-content">
|
|
<div id="shop" class="tab-content active">
|
|
<div id="weaponInfoBox">
|
|
<div id="weaponImage"></div>
|
|
<div id="weaponDetails">
|
|
<h3 id="weaponName"></h3>
|
|
<div id="weaponStats"></div>
|
|
<button id="buyWeaponButton" class="buy-button">Buy</button>
|
|
</div>
|
|
</div>
|
|
<div id="weaponSelector"></div>
|
|
</div>
|
|
</div>
|
|
<button class="close-button">Close</button>
|
|
</div>
|
|
</body>
|
|
</html> |