Spaces:
Running
Running
Update index.html
Browse files- index.html +90 -60
index.html
CHANGED
|
@@ -1,60 +1,90 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
<
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
<div class="
|
| 13 |
-
|
| 14 |
-
<div
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Procedural Text Adventure</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<h1>Choose Your Own Procedural Adventure</h1>
|
| 11 |
+
|
| 12 |
+
<div class="game-container">
|
| 13 |
+
|
| 14 |
+
<div id="scene-container">
|
| 15 |
+
</div>
|
| 16 |
+
|
| 17 |
+
<div class="ui-container">
|
| 18 |
+
|
| 19 |
+
<div id="story-ui" class="panel">
|
| 20 |
+
<h2 id="story-title">Loading...</h2>
|
| 21 |
+
<div id="story-content">
|
| 22 |
+
<p>Please wait while the adventure loads.</p>
|
| 23 |
+
</div>
|
| 24 |
+
<div id="choices">
|
| 25 |
+
</div>
|
| 26 |
+
</div>
|
| 27 |
+
|
| 28 |
+
<div id="character-sheet-container" class="panel">
|
| 29 |
+
<h2>Character Sheet</h2>
|
| 30 |
+
|
| 31 |
+
<div class="char-section char-header">
|
| 32 |
+
<label for="char-name">Name:</label>
|
| 33 |
+
<input type="text" id="char-name" value="Hero">
|
| 34 |
+
<button id="save-char-btn" class="sheet-button" title="Save Character Locally">Save</button>
|
| 35 |
+
<button id="export-char-btn" class="sheet-button" title="Export Character to File">Export</button>
|
| 36 |
+
</div>
|
| 37 |
+
|
| 38 |
+
<div class="char-section char-details">
|
| 39 |
+
<div><label>Race:</label> <span id="char-race">Human</span></div>
|
| 40 |
+
<div><label>Alignment:</label> <span id="char-alignment">Neutral Good</span></div>
|
| 41 |
+
<div><label>Class:</label> <span id="char-class">Fighter</span></div>
|
| 42 |
+
</div>
|
| 43 |
+
|
| 44 |
+
<div class="char-section char-level-xp">
|
| 45 |
+
<div><label>Level:</label> <span id="char-level">1</span></div>
|
| 46 |
+
<div>
|
| 47 |
+
<label>XP:</label> <span id="char-xp">0</span> / <span id="char-xp-next">100</span>
|
| 48 |
+
<button id="levelup-btn" class="sheet-button" title="Level Up!" disabled>Level Up</button>
|
| 49 |
+
</div>
|
| 50 |
+
</div>
|
| 51 |
+
|
| 52 |
+
<div class="char-section char-stats">
|
| 53 |
+
<h3>Stats</h3>
|
| 54 |
+
<div class="stats-grid">
|
| 55 |
+
<div>HP: <span id="char-hp">30</span> / <span id="char-max-hp">30</span></div>
|
| 56 |
+
<div>Str: <span id="stat-strength">7</span> <button class="sheet-button stat-increase" data-stat="strength" title="Increase Strength" disabled>+</button></div>
|
| 57 |
+
<div>Int: <span id="stat-intelligence">5</span> <button class="sheet-button stat-increase" data-stat="intelligence" title="Increase Intelligence" disabled>+</button></div>
|
| 58 |
+
<div>Wis: <span id="stat-wisdom">5</span> <button class="sheet-button stat-increase" data-stat="wisdom" title="Increase Wisdom" disabled>+</button></div>
|
| 59 |
+
<div>Dex: <span id="stat-dexterity">6</span> <button class="sheet-button stat-increase" data-stat="dexterity" title="Increase Dexterity" disabled>+</button></div>
|
| 60 |
+
<div>Con: <span id="stat-constitution">6</span> <button class="sheet-button stat-increase" data-stat="constitution" title="Increase Constitution" disabled>+</button></div>
|
| 61 |
+
<div>Cha: <span id="stat-charisma">5</span> <button class="sheet-button stat-increase" data-stat="charisma" title="Increase Charisma" disabled>+</button></div>
|
| 62 |
+
</div>
|
| 63 |
+
<p><small>Cost to increase: <span id="stat-increase-cost">?</span> XP / Available points: <span id="stat-points-available">0</span></small></p>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="char-section char-possessions">
|
| 67 |
+
<h3>Possessions</h3>
|
| 68 |
+
<ol id="char-inventory-list" start="1">
|
| 69 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 70 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 71 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 72 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 73 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 74 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 75 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 76 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 77 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 78 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 79 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 80 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 81 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 82 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 83 |
+
<li><span class="item-slot">[Empty]</span></li>
|
| 84 |
+
</ol>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
|
| 88 |
+
</div> </div> <script src="script.js" type="module"></script>
|
| 89 |
+
</body>
|
| 90 |
+
</html>
|