Hugging Face's logo

Spaces:
Mistral-AI-Game-Jam
/
le-mot
Running

App Files Community
5
MikeDoes commited on
Commit
1c56e08
·
verified ·
1 Parent(s): 68d5b30

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +18 -127
index.html CHANGED
@@ -1,131 +1,22 @@
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>Word Game Interface</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
10
- <style>
11
- :root {
12
- --cerulean: #227c9dff;
13
- --light-sea-green: #17c3b2ff;
14
- --sunset: #ffcb77ff;
15
- --floral-white: #fef9efff;
16
- --light-red: #fe6d73ff;
17
- }
18
- .cerulean { background-color: var(--cerulean); }
19
- .light-sea-green { background-color: var(--light-sea-green); }
20
- .sunset { background-color: var(--sunset); }
21
- .floral-white { background-color: var(--floral-white); }
22
- .light-red { background-color: var(--light-red); }
23
- .pop-in { animation: pop-in 0.3s ease-out; }
24
- .pop-out { animation: pop-out 0.3s ease-out; }
25
- @keyframes pop-in {
26
- from { transform: scale(0.5); opacity: 0; }
27
- to { transform: scale(1); opacity: 1; }
28
- }
29
- @keyframes pop-out {
30
- from { transform: scale(1); opacity: 1; }
31
- to { transform: scale(0.5); opacity: 0; }
32
- }
33
- </style>
34
  </head>
35
- <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center relative">
36
- <!-- Title -->
37
- <div class="flex justify-center items-start mt-4">
38
- <img src="./lemot.webp" alt="Lemot Logo" class="h-48 w-auto">
39
- </div>
40
-
41
- <!-- Professor Section -->
42
- <div id="large-square" class="mb-10 w-48 h-48 bg-purple-500 flex flex-col items-center justify-center rounded-lg shadow-lg text-white font-bold text-xl">
43
- <span class="iconify" data-icon="mdi:account-tie" data-width="48" data-height="48"></span>
44
- Professor
45
- </div>
46
-
47
- <!-- Dynamic Grid -->
48
- <div id="grid-container" class="grid gap-4 p-4"></div>
49
-
50
- <!-- Chat Section -->
51
- <div id="chat-box" class="w-96 bg-white p-4 flex flex-col overflow-y-auto border-l border-gray-300 absolute right-4 top-4 rounded-lg shadow-md h-[50vh]">
52
- <h2 class="text-lg font-bold text-gray-700 mb-4">Stream</h2>
53
- <div id="chat-content" class="flex-1 flex flex-col gap-2 overflow-y-auto h-[50vh]"></div>
54
- </div>
55
-
56
- <!-- Input Field -->
57
- <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-lg">
58
- <div class="flex items-center gap-2">
59
- <input
60
- id="guess-input"
61
- type="text"
62
- placeholder="Enter your advice..."
63
- class="flex-1 border border-gray-300 rounded px-4 py-2 focus:ring focus:ring-blue-400 focus:outline-none"
64
- />
65
- <button
66
- id="submit-guess"
67
- class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition"
68
- >
69
- Send
70
- </button>
71
- </div>
72
- </div>
73
-
74
- <!-- Dev Interface (Bottom Left) -->
75
-
76
- <div id="dev_dbug"class="fixed bottom-4 left-4 w-64 bg-white shadow-lg rounded-lg p-4 text-sm">
77
- <div id="status" class="text-xs mb-2"></div>
78
- <div id="timer" class="text-sm font-bold mb-2"></div>
79
- <div id="game-info" class="text-xs"></div>
80
-
81
- <div class="mt-2">
82
- <select id="personality-select" class="w-full text-xs p-1 border rounded">
83
- <option value="normal">normal</option>
84
- <option value="genuine_friend">genuine friend</option>
85
- <option value="sensitive_to_compliments">sensitive to compliments</option>
86
- <!-- <option value="rebellious">rebel</option> -->
87
- </select>
88
- <input id="dev-guess-input" type="text" placeholder="Enter advice..." class="w-full text-xs p-1 mt-1 border rounded"/>
89
- <button id="submit-guess-btn" class="w-full bg-indigo-600 text-white text-xs p-1 mt-1 rounded">
90
- Submit
91
- </button>
92
- </div>
93
-
94
- <div id="feedback-section" class="mt-2 text-xs hidden">
95
- <div class="flex justify-between">
96
- <span id="guessed-word"></span>
97
- <span id="guess-score"></span>
98
- </div>
99
- <p id="feedback-text" class="mt-1"></p>
100
- </div>
101
- </div>
102
-
103
- <script src="./game_logic.js"></script>
104
- <script src="./eleven_labs_script.js"></script>
105
- <script src="./personality_allocation.js"></script>
106
- <script src="./populate_interface.js"></script>
107
-
108
-
109
- <script>
110
- const toggleBtn = document.createElement('button');
111
- toggleBtn.innerHTML = '👁️‍🗨️';
112
- toggleBtn.style.cssText = 'position: fixed; bottom: 16px; left: 16px; background: #1f2937; border: none; border-radius: 50%; padding: 8px; cursor: pointer; color: white;';
113
-
114
- let isVisible = false;
115
- const debugEl = document.getElementById('dev_dbug');
116
- if (debugEl) {
117
- debugEl.style.opacity = '0';
118
- }
119
-
120
- toggleBtn.onclick = () => {
121
- if (debugEl) {
122
- isVisible = !isVisible;
123
- debugEl.style.opacity = isVisible ? '1' : '0';
124
- toggleBtn.innerHTML = isVisible ? '👁️' : '👁️‍🗨️';
125
- }
126
- };
127
-
128
- document.body.appendChild(toggleBtn);
129
- </script>
130
  </body>
131
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
+ <style>
5
+ body, html {
6
+ margin: 0;
7
+ padding: 0;
8
+ width: 100%;
9
+ height: 100%;
10
+ overflow: hidden;
11
+ }
12
+ iframe {
13
+ width: 100%;
14
+ height: 100%;
15
+ border: none;
16
+ }
17
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </head>
19
+ <body>
20
+ <iframe src="https://lemot.online/game/" allowfullscreen></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  </body>
22
+ </html>