chore: remove non-app files from repository
This commit is contained in:
Gemini AI
473
index_game.html
473
index_game.html
@@ -1,473 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>TRAE Aurora | Crystalline Christmas</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;500&display=swap"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Floating Back Button -->
|
||||
<a href="/tools/"
|
||||
style="position:fixed;top:20px;left:20px;z-index:9999;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);color:white;text-decoration:none;padding:10px 20px;border-radius:20px;font-family:'Space Grotesk',sans-serif;font-size:14px;border:1px solid rgba(255,255,255,0.2);transition:all 0.3s;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,0.2);"
|
||||
onmouseover="this.style.background='rgba(255,255,255,0.2)'"
|
||||
onmouseout="this.style.background='rgba(255,255,255,0.1)'">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to Tools
|
||||
</a>
|
||||
|
||||
<!-- Background Canvas for Aurora/Snow -->
|
||||
<canvas id="bgCanvas"></canvas>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- Navigation -->
|
||||
<nav class="glass-nav">
|
||||
<div class="logo">TRAE <span>AURORA</span></div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#hero">Home</a></li>
|
||||
<li><a href="#registration">Register</a></li>
|
||||
<li><a href="#game">Gift Catcher</a></li>
|
||||
<li><a href="#traoom">Traoom</a></li>
|
||||
<li><a href="#neonpuzzle">Puzzle</a></li>
|
||||
<li><a href="#rhythm">Rhythm</a></li>
|
||||
<li><a href="#arena">Arena</a></li>
|
||||
<li><a href="#tetris">Tetris</a></li>
|
||||
<li><a href="#platformer">Jumper</a></li>
|
||||
<li><a href="#forge">Forge</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1 class="glitch-text" data-text="TRAE CHRISTMAS">TRAE CHRISTMAS</h1>
|
||||
<p class="subtitle">Built using <strong>TRAE.AI IDE</strong>, <a
|
||||
href="https://z.ai/subscribe?ic=R0K78RJKNW" target="_blank" class="glm-link">GLM 4.7</a>, and
|
||||
<strong>Google Gemini 3 Flash</strong>.
|
||||
</p>
|
||||
|
||||
<a href="#game" class="play-banner">
|
||||
<div class="banner-inner">
|
||||
<span class="banner-tag">LIVE NOW</span>
|
||||
<h2 class="banner-title">PLAY TRAE AURORA</h2>
|
||||
<p class="banner-subtitle">Experience the full crystalline adventure</p>
|
||||
<div class="banner-glow"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div id="countdown" class="countdown-container">
|
||||
<div class="time-block">
|
||||
<span id="days">00</span>
|
||||
<label>Days</label>
|
||||
</div>
|
||||
<div class="time-block">
|
||||
<span id="hours">00</span>
|
||||
<label>Hours</label>
|
||||
</div>
|
||||
<div class="time-block">
|
||||
<span id="minutes">00</span>
|
||||
<label>Mins</label>
|
||||
</div>
|
||||
<div class="time-block">
|
||||
<span id="seconds">00</span>
|
||||
<label>Secs</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-icons">
|
||||
<div class="app-icon" onclick="scrollToSection('game')">
|
||||
<div class="app-icon-inner gift-icon">
|
||||
<span class="app-icon-emoji">🎁</span>
|
||||
</div>
|
||||
<span class="app-label">Gift Catcher</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('traoom')">
|
||||
<div class="app-icon-inner traoom-icon">
|
||||
<span class="app-icon-emoji">🐛</span>
|
||||
</div>
|
||||
<span class="app-label">Traoom</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('neonpuzzle')">
|
||||
<div class="app-icon-inner neonpuzzle-icon">
|
||||
<span class="app-icon-emoji">🧩</span>
|
||||
</div>
|
||||
<span class="app-label">Neon Puzzle</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('rhythm')">
|
||||
<div class="app-icon-inner rhythm-icon">
|
||||
<span class="app-icon-emoji">🎵</span>
|
||||
</div>
|
||||
<span class="app-label">Rhythm Beat</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('arena')">
|
||||
<div class="app-icon-inner arena-icon">
|
||||
<span class="app-icon-emoji">⚔️</span>
|
||||
</div>
|
||||
<span class="app-label">Cosmic Arena</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('tetris')">
|
||||
<div class="app-icon-inner tetris-icon">
|
||||
<span class="app-icon-emoji">💎</span>
|
||||
</div>
|
||||
<span class="app-label">Crystal Tetris</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('platformer')">
|
||||
<div class="app-icon-inner platformer-icon">
|
||||
<span class="app-icon-emoji">🏃</span>
|
||||
</div>
|
||||
<span class="app-label">Aurora Jumper</span>
|
||||
</div>
|
||||
<div class="app-icon" onclick="scrollToSection('forge')">
|
||||
<div class="app-icon-inner forge-icon">
|
||||
<span class="app-icon-emoji">✨</span>
|
||||
</div>
|
||||
<span class="app-label">Message Forge</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<button onclick="scrollToSection('forge')" class="btn-primary">Forge a Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Message Forge Section -->
|
||||
<section id="forge" class="forge-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Magical Message Forge</h2>
|
||||
<p>Cast your festive wishes into the crystalline grid.</p>
|
||||
<div class="forge-input-group">
|
||||
<input type="text" id="messageInput" placeholder="Type your festive message..." maxlength="50">
|
||||
<button id="forgeBtn" class="btn-primary">Crystalize</button>
|
||||
</div>
|
||||
<div id="crystalDisplay" class="crystal-display">
|
||||
<p id="outputMessage"></p>
|
||||
<canvas id="snowflakeCanvas"></canvas>
|
||||
</div>
|
||||
<div id="messageCloud" class="message-cloud glass">
|
||||
<h3>Community Cloud</h3>
|
||||
<div id="cloudContainer"></div>
|
||||
<div class="export-buttons">
|
||||
<button class="export-btn" onclick="exportMessages()">Download Messages</button>
|
||||
<button class="export-btn"
|
||||
onclick="document.getElementById('importMessagesFile').click()">Import Messages</button>
|
||||
<input type="file" id="importMessagesFile" accept=".json" style="display:none"
|
||||
onchange="importMessages(event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Registration Section -->
|
||||
<section id="registration" class="glass-section">
|
||||
<div class="section-card glass">
|
||||
<h2>🎮 Player Registration</h2>
|
||||
<p>Register once to save your scores across all games</p>
|
||||
<div class="input-group" style="justify-content: center; max-width: 400px; margin: 0 auto;">
|
||||
<input type="text" id="regUsername" placeholder="Username" maxlength="15" style="flex: 1;">
|
||||
<button id="registerBtn" class="btn-primary">Register</button>
|
||||
</div>
|
||||
<p id="regStatus" style="text-align: center; margin-top: 15px; font-weight: bold;"></p>
|
||||
<div id="currentUserInfo" class="user-info"
|
||||
style="display: none; text-align: center; margin-top: 15px;">
|
||||
<p>🎉 Your Name: <strong id="currentUserDisplay"></strong></p>
|
||||
<p style="font-size: 0.8rem; color: #888;">Your PIN: <strong id="currentUserPin"></strong></p>
|
||||
<p style="font-size: 0.7rem; color: #666; margin-top: 5px;">Use this Name + PIN for all games</p>
|
||||
<button onclick="logoutUser()" class="btn-secondary"
|
||||
style="margin-top: 10px; background: #ff4444;">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Game Section -->
|
||||
<section id="game" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Gift Catcher</h2>
|
||||
<p>Catch the falling TRAE gifts to power the Aurora.</p>
|
||||
<div class="game-container" id="gameContainer">
|
||||
<div id="gameUI">
|
||||
<div class="score">Score: <span id="scoreVal">0</span></div>
|
||||
<div class="time-selector">
|
||||
<span class="selector-label">Challenge:</span>
|
||||
<button class="time-btn active" data-time="15">15s</button>
|
||||
<button class="time-btn" data-time="30">30s</button>
|
||||
<button class="time-btn" data-time="60">60s</button>
|
||||
</div>
|
||||
<div id="gameOverlay" class="game-overlay hidden">
|
||||
<h3 id="overlayTitle">GAME OVER</h3>
|
||||
<p id="finalScore">Final Score: <span id="gameFinalScore">0</span></p>
|
||||
<div id="saveScoreButtons" class="input-group">
|
||||
<button id="saveScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="loginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startGameBtn" class="btn-primary">Start Mission</button>
|
||||
</div>
|
||||
<div class="game-timer">
|
||||
<span id="timerDisplay">60s</span>
|
||||
</div>
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
</div>
|
||||
<div class="leaderboard glass">
|
||||
<div class="leaderboard-header">
|
||||
<h3>Global Leaderboard</h3>
|
||||
<button class="tab-btn active" data-tab="total">Total</button>
|
||||
<button class="tab-btn" data-tab="gift">Gift Catcher</button>
|
||||
<button class="tab-btn" data-tab="traoom">Traoom</button>
|
||||
<button class="tab-btn" data-tab="neonpuzzle">Neon Puzzle</button>
|
||||
<button class="tab-btn" data-tab="rhythm">Rhythm Beat</button>
|
||||
<button class="tab-btn" data-tab="arena">Cosmic Arena</button>
|
||||
<button class="tab-btn" data-tab="tetris">Crystal Tetris</button>
|
||||
<button class="tab-btn" data-tab="platformer">Aurora Jumper</button>
|
||||
</div>
|
||||
<div id="leaderboardList"></div>
|
||||
<div class="export-buttons">
|
||||
<button class="export-btn" onclick="exportLeaderboard()">Download Scores</button>
|
||||
<button class="export-btn" onclick="document.getElementById('importFile').click()">Import
|
||||
Scores</button>
|
||||
<input type="file" id="importFile" accept=".json" style="display:none"
|
||||
onchange="importLeaderboard(event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Traoom Section - Bug Hunter -->
|
||||
<section id="traoom" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Traoom</h2>
|
||||
<p>Fight against code bugs! Use WASD/Arrows to move, Click to shoot.</p>
|
||||
<div class="traoom-container" id="traoomContainer">
|
||||
<div id="traoomUI">
|
||||
<div class="traoom-stats">
|
||||
<div class="traoom-stat">Kills: <span id="killVal">0</span></div>
|
||||
<div class="traoom-stat">Time: <span id="traoomTime">0:00</span></div>
|
||||
<div class="traoom-stat">Wave: <span id="waveVal">1</span></div>
|
||||
</div>
|
||||
<div id="traoomOverlay" class="game-overlay hidden">
|
||||
<h3 id="traoomOverlayTitle">GAME OVER</h3>
|
||||
<p id="traoomOverlayScore">Bugs Fixed: <span id="finalKills">0</span></p>
|
||||
<p id="traoomOverlayTime">Time Survived: <span id="finalTime">0:00</span></p>
|
||||
<div class="input-group">
|
||||
<button id="saveTraoomScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playTraoomAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="traoomLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button>
|
||||
</div>
|
||||
<canvas id="traoomCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows to move | Click to shoot | Space to dash</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Neon Puzzle Section -->
|
||||
<section id="neonpuzzle" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Neon Puzzle</h2>
|
||||
<p>Connect neon paths to complete circuits! Click nodes to rotate.</p>
|
||||
<div class="neonpuzzle-container" id="neonpuzzleContainer">
|
||||
<div id="neonpuzzleUI">
|
||||
<div class="neonpuzzle-stats">
|
||||
<div class="neonpuzzle-stat">Level: <span id="puzzleLevel">1</span></div>
|
||||
<div class="neonpuzzle-stat">Moves: <span id="puzzleMoves">0</span></div>
|
||||
</div>
|
||||
<div id="neonpuzzleOverlay" class="game-overlay hidden">
|
||||
<h3 id="puzzleOverlayTitle">LEVEL COMPLETE</h3>
|
||||
<p id="puzzleOverlayScore">Moves: <span id="finalMoves">0</span></p>
|
||||
<div class="input-group">
|
||||
<button id="savePuzzleScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playPuzzleAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="puzzleLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button>
|
||||
</div>
|
||||
<canvas id="neonpuzzleCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Click nodes to rotate paths | Complete all connections</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rhythm Beat Section -->
|
||||
<section id="rhythm" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Rhythm Beat</h2>
|
||||
<p>Hit the beats in sync with the aurora rhythm!</p>
|
||||
<div class="rhythm-container" id="rhythmContainer">
|
||||
<div id="rhythmUI">
|
||||
<div class="rhythm-stats">
|
||||
<div class="rhythm-stat">Score: <span id="rhythmScore">0</span></div>
|
||||
<div class="rhythm-stat">Combo: <span id="rhythmCombo">0</span></div>
|
||||
<div class="rhythm-stat">Streak: <span id="rhythmStreak">0</span></div>
|
||||
</div>
|
||||
<div id="rhythmOverlay" class="game-overlay hidden">
|
||||
<h3 id="rhythmOverlayTitle">BEAT OVER</h3>
|
||||
<p id="rhythmOverlayScore">Final Score: <span id="finalRhythmScore">0</span></p>
|
||||
<div class="input-group">
|
||||
<button id="saveRhythmScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playRhythmAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="rhythmLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startRhythmBtn" class="btn-primary">Start Rhythm</button>
|
||||
</div>
|
||||
<canvas id="rhythmCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Press keys when beats reach center | Perfect timing = more points</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cosmic Arena Section -->
|
||||
<section id="arena" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Cosmic Arena</h2>
|
||||
<p>Duel in the cosmic void! Defeat opponents to survive.</p>
|
||||
<div class="arena-container" id="arenaContainer">
|
||||
<div id="arenaUI">
|
||||
<div class="arena-stats">
|
||||
<div class="arena-stat">HP: <span id="arenaHP">100</span></div>
|
||||
<div class="arena-stat">Kills: <span id="arenaKills">0</span></div>
|
||||
<div class="arena-stat">Wave: <span id="arenaWave">1</span></div>
|
||||
</div>
|
||||
<div id="arenaOverlay" class="game-overlay hidden">
|
||||
<h3 id="arenaOverlayTitle">GAME OVER</h3>
|
||||
<p id="arenaOverlayScore">Enemies Defeated: <span id="finalArenaKills">0</span></p>
|
||||
<div class="input-group">
|
||||
<button id="saveArenaScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playArenaAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="arenaLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startArenaBtn" class="btn-primary">Enter Arena</button>
|
||||
</div>
|
||||
<canvas id="arenaCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows move | Click to attack | Dodge and counter</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tetris Section -->
|
||||
<section id="tetris" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Crystal Tetris</h2>
|
||||
<p>Stack crystals in TRAE aurora style!</p>
|
||||
<div class="neonpuzzle-container" id="tetrisContainer">
|
||||
<div id="tetrisUI">
|
||||
<div class="neonpuzzle-stats">
|
||||
<div class="neonpuzzle-stat">Score: <span id="tetrisScore">0</span></div>
|
||||
<div class="neonpuzzle-stat">Lines: <span id="tetrisLines">0</span></div>
|
||||
<div class="neonpuzzle-stat">Level: <span id="tetrisLevel">1</span></div>
|
||||
</div>
|
||||
<div id="tetrisOverlay" class="game-overlay hidden">
|
||||
<h3 id="tetrisOverlayTitle">GAME OVER</h3>
|
||||
<p id="tetrisOverlayScore">Final Score: <span id="finalTetrisScore">0</span></p>
|
||||
<div class="input-group">
|
||||
<button id="saveTetrisScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playTetrisAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="tetrisLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startTetrisBtn" class="btn-primary">Start Game</button>
|
||||
</div>
|
||||
<canvas id="tetrisCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> Arrow keys to move/rotate | Space to drop | Complete lines</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mario Platformer Section -->
|
||||
<section id="platformer" class="game-section">
|
||||
<div class="section-card glass">
|
||||
<h2>Aurora Jumper</h2>
|
||||
<p>Jump through crystalline platforms to reach the aurora!</p>
|
||||
<div class="rhythm-container" id="platformerContainer">
|
||||
<div id="platformerUI">
|
||||
<div class="rhythm-stats">
|
||||
<div class="rhythm-stat">Coins: <span id="coinsVal">0</span></div>
|
||||
<div class="rhythm-stat">Time: <span id="platformerTime">0:00</span></div>
|
||||
</div>
|
||||
<div id="platformerOverlay" class="game-overlay hidden">
|
||||
<h3 id="platformerOverlayTitle">LEVEL COMPLETE</h3>
|
||||
<p id="platformerOverlayScore">Coins: <span id="finalCoins">0</span></p>
|
||||
<p id="platformerOverlayTime">Time: <span id="finalPlatformerTime">0:00</span></p>
|
||||
<div class="input-group">
|
||||
<button id="savePlatformerScoreBtn" class="btn-primary">Save Score</button>
|
||||
<button id="playPlatformerAgainBtn" class="btn-secondary"
|
||||
style="background: var(--trae-green);">Play Again</button>
|
||||
</div>
|
||||
<p id="platformerLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
|
||||
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save
|
||||
scores
|
||||
</p>
|
||||
</div>
|
||||
<button id="startPlatformerBtn" class="btn-primary">Start Game</button>
|
||||
</div>
|
||||
<canvas id="platformerCanvas"></canvas>
|
||||
</div>
|
||||
<div class="traoom-controls">
|
||||
<p><strong>Controls:</strong> WASD/Arrows move | Space to jump | Collect coins</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="glass-footer">
|
||||
<p>MADE BY <a href="https://github.rommark.dev/admin/chrismas_trae_game" target="_blank"
|
||||
class="author-link">Roman | RyzenAdvanced</a> using <span>TRAE.AI</span>, <a
|
||||
href="https://z.ai/subscribe?ic=R0K78RJKNW" target="_blank" class="glm-link">GLM 4.7</a> & <span
|
||||
class="gemini-link">Gemini 3 Flash</span></p>
|
||||
<p class="copyright">© 2025 Coded with Crystalline Precision.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import Link from "next/link"
|
||||
import { Sparkles, Github, FileText, Home } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-md">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-6 w-6 text-blue-600" />
|
||||
<span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600">
|
||||
NanoJason
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex items-center gap-4 lg:gap-6">
|
||||
<a
|
||||
href="https://www.rommark.dev"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium flex items-center gap-1"
|
||||
>
|
||||
<Home className="h-4 w-4" />
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="https://github.rommark.dev/admin/NanoJasonPro?tab=readme-ov-file"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium flex items-center gap-1"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://jasonformat.org/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-blue-600 transition-colors font-medium flex items-center gap-1"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
Docs
|
||||
</a>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<Link href="/">
|
||||
Get Started
|
||||
</Link>
|
||||
</Button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
server {
|
||||
listen 80 default_server;
|
||||
server_name _;
|
||||
|
||||
root /hosting/rommark.dev/public;
|
||||
index index.html;
|
||||
|
||||
# Proxy PromptArch at /tools/promptarch/
|
||||
location /tools/promptarch/ {
|
||||
proxy_pass http://172.17.0.1:3005/tools/promptarch/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
# Proxy Gitea at /hosting/github/
|
||||
location /hosting/github/ {
|
||||
proxy_pass http://gitea:3000/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
|
||||
# Fix sub-path issues
|
||||
proxy_cookie_path /hosting/github/ /;
|
||||
proxy_redirect http://$host/ http://$host/hosting/github/;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name _;
|
||||
|
||||
root /hosting/rommark.dev/public;
|
||||
index index.html;
|
||||
|
||||
# Proxy PromptArch at /tools/promptarch/
|
||||
location /tools/promptarch/ {
|
||||
proxy_pass http://172.17.0.1:3005/tools/promptarch/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
# Proxy Gitea at /hosting/github/
|
||||
location /hosting/github/ {
|
||||
proxy_pass http://gitea:3000/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
|
||||
# Fix sub-path issues
|
||||
proxy_cookie_path /hosting/github/ /;
|
||||
proxy_redirect http://$host/ http://$host/hosting/github/;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/rommark.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/rommark.dev/privkey.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
ssl_prefer_server_ciphers on;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
#!/bin/bash
|
||||
game_path="/hosting/rommark.dev/public/tools/game/index.html"
|
||||
sudo sed -i 's|github.com/roman-ryzenadvanced/chrismas_trae_game|github.rommark.dev/admin/chrismas_trae_game|g' "$game_path"
|
||||
back_link='<a href="/tools/" style="position:fixed;top:20px;left:20px;z-index:9999;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);color:white;text-decoration:none;padding:10px 20px;border-radius:20px;border:1px solid rgba(255,255,255,0.3);">← Back</a>'
|
||||
# Only add if not already there
|
||||
if ! grep -q "← Back" "$game_path"; then
|
||||
sudo sed -i "s|<body>|<body>$back_link|g" "$game_path"
|
||||
fi
|
||||
57
rommark.conf
57
rommark.conf
@@ -1,57 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name www.rommark.dev rommark.dev;
|
||||
|
||||
root /hosting/rommark.dev/public;
|
||||
index index.html;
|
||||
|
||||
# Proxy PromptArch at /tools/promptarch/
|
||||
location /tools/promptarch/ {
|
||||
proxy_pass http://172.17.0.1:3005/tools/promptarch/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name www.rommark.dev rommark.dev;
|
||||
|
||||
root /hosting/rommark.dev/public;
|
||||
index index.html;
|
||||
|
||||
# Proxy PromptArch at /tools/promptarch/
|
||||
location /tools/promptarch/ {
|
||||
proxy_pass http://172.17.0.1:3005/tools/promptarch/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/rommark.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/rommark.dev/privkey.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
ssl_prefer_server_ciphers on;
|
||||
}
|
||||
281
tools-index.html
281
tools-index.html
@@ -1,281 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tools | Roman RyzenAdvanced</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Product+Sans:wght@400;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ios-bg: #000000;
|
||||
--glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--glass-border: rgba(255, 255, 255, 0.2);
|
||||
--text-color: #ffffff;
|
||||
--accent-blue: #007AFF;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #000;
|
||||
color: var(--text-color);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, #1a1a2e 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 80%, #16213e 0%, transparent 40%),
|
||||
radial-gradient(circle at 50% 50%, #0f3460 0%, transparent 60%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Status Bar Style Header */
|
||||
header {
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: 'Product Sans', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* App Grid */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 120px));
|
||||
gap: 2rem 3rem;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.app-item:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 18px;
|
||||
/* Squircle approximation */
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.icon-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-item:hover .icon-container {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(66, 133, 244, 0.4);
|
||||
}
|
||||
|
||||
.app-icon-text {
|
||||
font-family: 'Product Sans', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mock placeholders for "iPhone" feel */
|
||||
.app-item.placeholder .icon-container {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.app-item.placeholder .app-icon-text {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.app-item.placeholder .app-name {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
.app-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<a href="/" class="back-link">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
<h1 class="page-title">Tools</h1>
|
||||
<div style="width: 40px"></div> <!-- Spacer -->
|
||||
</header>
|
||||
|
||||
<div class="app-grid">
|
||||
<!-- Active Tool: PromptArch -->
|
||||
<a href="/tools/promptarch/" class="app-item">
|
||||
<div class="icon-container">
|
||||
<span class="app-icon-text">PA</span>
|
||||
</div>
|
||||
<span class="app-name">PromptArch</span>
|
||||
</a>
|
||||
|
||||
<!-- Active Tool: NanoJasonPro -->
|
||||
<a href="/tools/nanojason/" class="app-item">
|
||||
<div class="icon-container" style="background: linear-gradient(135deg, #9333ea 0%, #db2777 100%);">
|
||||
<span class="app-icon-text">NJ</span>
|
||||
</div>
|
||||
<span class="app-name">NanoJasonPro</span>
|
||||
</a>
|
||||
|
||||
<!-- Active Tool: Trae Game -->
|
||||
<a href="/tools/game/" class="app-item">
|
||||
<div class="icon-container" style="background: linear-gradient(135deg, #ef4444 0%, #10b981 100%);">
|
||||
<span class="app-icon-text">TG</span>
|
||||
</div>
|
||||
<span class="app-name">Trae Game</span>
|
||||
</a>
|
||||
|
||||
<!-- Placeholders -->
|
||||
<div class="app-item placeholder">
|
||||
<div class="icon-container">
|
||||
<span class="app-icon-text">+</span>
|
||||
</div>
|
||||
<span class="app-name">Coming Soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Subtle interaction: Icons "jiggle" slightly on load like iOS setup
|
||||
window.addEventListener('load', () => {
|
||||
const items = document.querySelectorAll('.app-item:not(.placeholder)');
|
||||
items.forEach((item, index) => {
|
||||
item.style.animation = `scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards`;
|
||||
item.style.animationDelay = `${index * 0.1 + 0.2}s`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user