Hugging Face's logo

Spaces:
awacke1
/
ChooseYourOwnAdventure
Running

App Files Community
awacke1 commited on
Commit
2c77579
·
verified ·
1 Parent(s): 418989c

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +179 -0
index.html ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Choose Your Own 3D Adventure Map</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Courier New', monospace;
10
+ background-color: #1a1a1a; /* Slightly lighter dark */
11
+ color: #e0e0e0; /* Slightly softer white */
12
+ margin: 0;
13
+ padding: 0;
14
+ overflow: hidden;
15
+ display: flex;
16
+ flex-direction: column;
17
+ height: 100vh;
18
+ }
19
+
20
+ #game-container {
21
+ display: flex;
22
+ flex-grow: 1;
23
+ overflow: hidden;
24
+ }
25
+
26
+ #scene-container {
27
+ flex-grow: 3;
28
+ position: relative;
29
+ border-right: 2px solid #444; /* Darker border */
30
+ background-color: #000; /* Black background for scene */
31
+ }
32
+
33
+ #ui-container {
34
+ flex-grow: 2;
35
+ padding: 20px;
36
+ overflow-y: auto;
37
+ background-color: #2a2a2a; /* Dark UI area */
38
+ display: flex;
39
+ flex-direction: column;
40
+ border-left: 1px solid #444;
41
+ }
42
+
43
+ #story-title {
44
+ color: #ffd700; /* Gold */
45
+ margin-top: 0;
46
+ border-bottom: 1px solid #555;
47
+ padding-bottom: 10px;
48
+ font-size: 1.4em;
49
+ }
50
+
51
+ #story-content {
52
+ margin-bottom: 20px;
53
+ line-height: 1.6;
54
+ flex-grow: 1; /* Allow story to take up space */
55
+ }
56
+ #story-content p { margin: 0 0 1em 0; }
57
+
58
+ #choices-container {
59
+ margin-top: 10px; /* Reduced margin */
60
+ padding-top: 15px;
61
+ border-top: 1px solid #555;
62
+ }
63
+
64
+ #choices-container h3 {
65
+ margin-top: 0;
66
+ margin-bottom: 10px;
67
+ color: #aaa;
68
+ font-size: 1em;
69
+ text-transform: uppercase;
70
+ letter-spacing: 1px;
71
+ }
72
+
73
+ .choice-button {
74
+ display: block;
75
+ width: calc(100% - 22px); /* Account for padding/border */
76
+ padding: 12px 10px; /* Slightly more padding */
77
+ margin-bottom: 10px;
78
+ background-color: #444; /* Darker buttons */
79
+ color: #e0e0e0;
80
+ border: 1px solid #666;
81
+ border-radius: 5px;
82
+ cursor: pointer;
83
+ text-align: left;
84
+ font-family: 'Courier New', monospace;
85
+ font-size: 1em;
86
+ transition: background-color 0.2s, color 0.2s;
87
+ }
88
+
89
+ .choice-button:hover:not(:disabled) {
90
+ background-color: #ffd700; /* Gold hover */
91
+ color: #1a1a1a;
92
+ border-color: #fff;
93
+ }
94
+ .choice-button:disabled {
95
+ background-color: #333; /* Darker disabled */
96
+ color: #777;
97
+ cursor: not-allowed;
98
+ border-color: #555;
99
+ opacity: 0.7;
100
+ }
101
+ .choice-button[title]:disabled {
102
+ text-decoration: line-through; /* Indicate locked */
103
+ }
104
+
105
+ #stats-inventory-container {
106
+ margin-top: 20px;
107
+ padding: 15px 0;
108
+ border-top: 1px solid #555;
109
+ font-size: 0.9em;
110
+ }
111
+ #stats-inventory-container h4 {
112
+ margin: 0 0 8px 0;
113
+ color: #aaa;
114
+ font-size: 0.9em;
115
+ text-transform: uppercase;
116
+ letter-spacing: 1px;
117
+ }
118
+ #stats-display, #inventory-display {
119
+ margin-bottom: 15px;
120
+ line-height: 1.8; /* Spacing for badges */
121
+ }
122
+ #stats-display span, #inventory-display span {
123
+ display: inline-block;
124
+ background-color: #3a3a3a;
125
+ padding: 3px 10px;
126
+ border-radius: 15px;
127
+ margin-right: 8px;
128
+ margin-bottom: 6px; /* Wrap nicely */
129
+ border: 1px solid #555;
130
+ white-space: nowrap; /* Prevent badges breaking */
131
+ }
132
+ #inventory-display span { cursor: help; } /* Add tooltip cursor */
133
+ #inventory-display .item-quest { background-color: #666030; border-color: #999048;}
134
+ #inventory-display .item-weapon { background-color: #663030; border-color: #994848;}
135
+ #inventory-display .item-armor { background-color: #306630; border-color: #489948;}
136
+ #inventory-display .item-spell { background-color: #303066; border-color: #484899;}
137
+ #inventory-display .item-unknown { background-color: #555; border-color: #777;}
138
+
139
+ canvas { display: block; }
140
+ </style>
141
+ </head>
142
+ <body>
143
+
144
+ <div id="game-container">
145
+ <div id="scene-container"></div>
146
+
147
+ <div id="ui-container">
148
+ <h2 id="story-title">Loading Adventure...</h2>
149
+ <div id="story-content">
150
+ <p>Please wait while the adventure loads.</p>
151
+ </div>
152
+
153
+ <div id="stats-inventory-container">
154
+ <h4>Status</h4>
155
+ <div id="stats-display"></div>
156
+ <h4>Inventory</h4>
157
+ <div id="inventory-display"></div>
158
+ </div>
159
+
160
+ <div id="choices-container">
161
+ <h3>What will you do?</h3>
162
+ <div id="choices"></div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <script type="importmap">
168
+ {
169
+ "imports": {
170
+ "three": "https://unpkg.com/[email protected]/build/three.module.js",
171
+ "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
172
+ }
173
+ }
174
+ </script>
175
+
176
+ <script type="module" src="game.js"></script>
177
+
178
+ </body>
179
+ </html>