Hugging Face's logo

Spaces:
Mistral-AI-Game-Jam
/
team_16trial
Running

App Files Community
1
dcrey7 commited on
Commit
cf1115a
·
verified ·
1 Parent(s): 8e5f40f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +20 -129
templates/index.html CHANGED
@@ -3,136 +3,27 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="NOT ME - A voice deduction game powered by AI">
7
-
8
- <title>NOT ME - Voice Deduction Game</title>
9
-
10
- <!-- Import the Pixelify Sans font for our game's unique style -->
11
- <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
12
-
13
- <!-- Main stylesheet -->
14
- <link rel="stylesheet" href="static/css/styles.css">
15
-
16
- <!-- Socket.IO client for real-time communication -->
17
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
18
-
19
- <!-- Three.js for background animations -->
20
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
21
  </head>
22
  <body>
23
- <!-- WebGL background container for particle effects -->
24
- <canvas id="webgl-background"></canvas>
25
-
26
- <!-- Settings button that appears after game starts -->
27
- <button id="settings-button" class="settings-button hidden">
28
- <span class="settings-icon">⚙️</span>
29
- </button>
30
-
31
- <!-- Main game container -->
32
- <div id="game-container">
33
- <!-- Landing Page -->
34
- <div id="landing-page" class="game-page active">
35
- <h1 class="game-title">
36
- <span class="title-not">NOT</span>
37
- <span class="title-emphasis">ME</span>
38
- </h1>
39
- <a href="https://kzmfxhmwlhhk4744jex5.lite.vusercontent.net/">
40
- <button id="play-button" class="button primary-button">PLAY</button>
41
- </div>
42
-
43
- <!-- Player Setup Page -->
44
- <div id="setup-page" class="game-page">
45
- <h2 class="page-title">Player Setup</h2>
46
- <div id="player-list" class="player-grid"></div>
47
- <div class="setup-controls">
48
- <button id="add-player-button" class="button secondary-button">Add Player</button>
49
- <button id="start-button" class="button primary-button" disabled>Start Game</button>
50
- </div>
51
- </div>
52
-
53
- <!-- Game Page (Recording Phase) -->
54
- <div id="recording-page" class="game-page">
55
- <div id="timer-display" class="timer"></div>
56
- <div id="question-display" class="question-box"></div>
57
-
58
- <!-- Recording interface -->
59
- <div class="recording-controls">
60
- <canvas id="recording-visualizer" class="visualizer"></canvas>
61
- <button id="record-button" class="button record-button">Start Recording</button>
62
- <div class="recording-time"></div>
63
- </div>
64
- </div>
65
-
66
- <!-- Listening Phase -->
67
- <div id="listening-page" class="game-page">
68
- <div id="timer-display" class="timer"></div>
69
- <h2 class="page-title">Listen to Responses</h2>
70
- <div id="recordings-list" class="recordings-grid">
71
- <!-- Recording playback buttons will be dynamically added here -->
72
- </div>
73
- </div>
74
-
75
- <!-- Voting Phase -->
76
- <div id="voting-page" class="game-page">
77
- <div id="timer-display" class="timer"></div>
78
- <h2 class="page-title">Vote for the Impostor</h2>
79
- <div id="voting-options" class="voting-grid">
80
- <!-- Voting buttons will be dynamically added here -->
81
- </div>
82
- </div>
83
-
84
- <!-- Results Page -->
85
- <div id="results-page" class="game-page">
86
- <h2 class="page-title">Round Results</h2>
87
- <div id="results-content" class="results-container">
88
- <!-- Results will be dynamically added here -->
89
- </div>
90
- <button id="next-round-button" class="button primary-button">Next Round</button>
91
- </div>
92
- </div>
93
-
94
- <!-- Overlay containers -->
95
- <div id="loading-overlay" class="overlay">
96
- <div class="loading-spinner"></div>
97
- <div class="loading-message">Loading...</div>
98
- </div>
99
-
100
- <div id="error-overlay" class="overlay">
101
- <div class="error-message"></div>
102
- </div>
103
-
104
- <div id="settings-overlay" class="overlay">
105
- <div class="settings-panel">
106
- <h3>Game Settings</h3>
107
- <div class="settings-options">
108
- <div class="setting-item">
109
- <label for="dark-mode">Dark Mode</label>
110
- <input type="checkbox" id="dark-mode" checked>
111
- </div>
112
- <div class="setting-item">
113
- <label for="sound-effects">Sound Effects</label>
114
- <input type="checkbox" id="sound-effects" checked>
115
- </div>
116
- </div>
117
- <button id="exit-game" class="button secondary-button">Exit Game</button>
118
- </div>
119
- </div>
120
-
121
- <!-- Game scripts -->
122
- <script type="module" src="static/js/background.js"></script>
123
- <script type="module" src="static/js/audio.js"></script>
124
- <script type="module" src="static/js/ui.js"></script>
125
- <script type="module" src="static/js/game.js"></script>
126
-
127
- <!-- Audio context initialization script -->
128
- <script>
129
- // Initialize audio context on user interaction
130
- document.addEventListener('click', function initAudioContext() {
131
- if (!window.audioContext) {
132
- window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
133
- }
134
- document.removeEventListener('click', initAudioContext);
135
- }, { once: true });
136
- </script>
137
  </body>
138
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Embedded Website</title>
7
+ <style>
8
+ body, html {
9
+ margin: 0;
10
+ padding: 0;
11
+ width: 100%;
12
+ height: 100%;
13
+ overflow: hidden;
14
+ }
15
+ iframe {
16
+ width: 100%;
17
+ height: 100%;
18
+ border: none;
19
+ }
20
+ </style>
21
  </head>
22
  <body>
23
+ <iframe
24
+ src="https://kzmfxhmwlhhk4744jex5.lite.vusercontent.net/"
25
+ allow="camera; microphone; geolocation; fullscreen; autoplay; clipboard-read; clipboard-write"
26
+ sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-presentation allow-modals">
27
+ </iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </body>
29
  </html>