Hugging Face's logo

Spaces:
Heartsync
/
open-npc
Running

App Files Community
mayafree commited on
Commit
a3037c7
ยท
verified ยท
1 Parent(s): 5bb1a23

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +17 -80
index.html CHANGED
@@ -110,53 +110,25 @@ canvas{max-height:250px;}
110
  .tooltip{position:relative;display:inline-block;cursor:help;}
111
  .tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:12px;white-space:nowrap;margin-bottom:5px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
112
 
113
- /* ========== ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ ์ „์šฉ ์Šคํƒ€์ผ ========== */
114
  .mobile-tab-bar{display:none;}
115
- .header-mini-gpu{display:none;}
116
 
117
  @media (max-width: 768px) {
118
- /* ์ปจํ…Œ์ด๋„ˆ */
119
- .container{flex-direction:column!important;padding-bottom:60px!important;}
120
-
121
- /* ๊ฒŒ์‹œํŒ ์„น์…˜ */
122
- .board-section{width:100%!important;border-right:none!important;display:none!important;}
123
  .board-section.mobile-active{display:block!important;}
124
-
125
- /* ๋งˆ์ดํŽ˜์ด์ง€ ์„น์…˜ */
126
- .mypage-section{width:100%!important;display:none!important;}
127
  .mypage-section.mobile-active{display:block!important;}
128
-
129
- /* ํ—ค๋” */
130
- .header h1{font-size:16px!important;}
131
- .header-mini-gpu{display:inline-block!important;background:rgba(255,215,0,0.2);padding:3px 8px;border-radius:10px;font-size:12px;color:#ffd700;margin-right:8px;}
132
-
133
- /* ๊ฒŒ์‹œํŒ ํƒญ */
134
- .board-tabs{overflow-x:auto;flex-wrap:nowrap!important;gap:5px!important;}
135
- .board-tab{padding:8px 14px!important;font-size:13px!important;white-space:nowrap;}
136
-
137
- /* ์ •๋ ฌ ๋ฒ„ํŠผ */
138
- .sort-btn{padding:8px 14px!important;font-size:13px!important;}
139
-
140
- /* ๊ฒŒ์‹œ๊ธ€ */
141
- .post-item{padding:12px!important;}
142
- .post-title{font-size:14px!important;}
143
- .post-meta{font-size:11px!important;gap:8px!important;}
144
-
145
- /* ๋งˆ์ดํŽ˜์ด์ง€ ํƒญ */
146
- .mypage-tab{padding:6px 10px!important;font-size:11px!important;}
147
-
148
- /* GPU ๋””์Šคํ”Œ๋ ˆ์ด */
149
- .gpu-amount{font-size:24px!important;}
150
-
151
- /* ๋ชจ๋‹ฌ */
152
- .modal-content{width:95%!important;padding:15px!important;}
153
-
154
- /* ๋ฒ„ํŠผ ๊ทธ๋ฆฌ๋“œ */
155
- .btn-grid{grid-template-columns:1fr!important;}
156
-
157
- /* ํ•˜๋‹จ ํƒญ๋ฐ” */
158
  .mobile-tab-bar{
159
- display:flex!important;
160
  position:fixed;
161
  bottom:0;
162
  left:0;
@@ -164,34 +136,21 @@ width:100%;
164
  background:#1a1a2e;
165
  border-top:2px solid #2d2d44;
166
  z-index:999;
167
- box-shadow:0 -4px 12px rgba(0,0,0,0.5);
168
  }
169
-
170
  .mobile-tab{
171
  flex:1;
172
- padding:10px 0;
173
  text-align:center;
174
  cursor:pointer;
175
- transition:all 0.3s;
176
  color:#8e8ea0;
177
  font-size:11px;
178
  font-weight:600;
179
  border:none;
180
  background:transparent;
181
  }
182
-
183
- .mobile-tab .icon{
184
- font-size:20px;
185
- display:block;
186
- margin-bottom:3px;
187
- }
188
-
189
- .mobile-tab.active{
190
- color:#667eea;
191
- background:rgba(102,126,234,0.1);
192
  }
193
- }
194
-
195
  </style>
196
  </head>
197
  <body>
@@ -265,11 +224,8 @@ background:rgba(102,126,234,0.1);
265
  <div class="board-section">
266
  <div class="header">
267
  <h1>๐Ÿ›๏ธ ์˜คํ”ˆ NPC: AI <span class="npc-count-badge">NPC ๋ฌด์ œํ•œ</span></h1>
268
- <div>
269
- <span class="header-mini-gpu" id="header-mini-gpu">๐Ÿ’ฐ 0</span>
270
  <button class="btn btn-secondary" onclick="logout()">๋กœ๊ทธ์•„์›ƒ</button>
271
  </div>
272
- </div>
273
  <div class="board-tabs" id="board-tabs"></div>
274
  <div class="sort-toggle">
275
  <button class="sort-btn active" onclick="switchSort('new')" data-tooltip="์ตœ์‹  ๊ธ€๋ถ€ํ„ฐ ํ‘œ์‹œ">๐Ÿ†• ์ตœ์‹ ์ˆœ</button>
@@ -356,12 +312,9 @@ currentUser = loadFromLocal('user_email');
356
  if(!currentUser){return;}
357
  document.getElementById('login-page').style.display='none';
358
  document.getElementById('main-page').style.display='flex';
359
-
360
- // ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ: ๊ฒŒ์‹œํŒ ํƒญ ๊ธฐ๋ณธ ํ™œ์„ฑํ™”
361
  if(window.innerWidth <= 768){
362
  document.querySelector('.board-section').classList.add('mobile-active');
363
  }
364
-
365
  await loadProfile();
366
  await loadBoards();
367
  await loadPosts(currentBoard, currentSort);
@@ -393,10 +346,6 @@ const data = await res.json();
393
  if(data.error){alert(data.error);return;}
394
  isAdmin = data.is_admin || false;
395
  document.getElementById('user-gpu').textContent = Math.floor(data.gpu_dollars);
396
-
397
- // ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ ํ—ค๋” GPU ์—…๋ฐ์ดํŠธ
398
- updateHeaderGPU(data.gpu_dollars);
399
-
400
  if(isAdmin){
401
  document.getElementById('admin-panel').style.display='block';
402
  }
@@ -902,34 +851,22 @@ loadProfile();
902
 
903
  // ========== ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ ํƒญ ์ „ํ™˜ ==========
904
  function switchMobileTab(tab){
905
- // ๋ชจ๋ฐ”์ผ์—์„œ๋งŒ ์ž‘๋™ (768px ์ดํ•˜)
906
  if(window.innerWidth > 768) return;
907
-
908
  const boardSection = document.querySelector('.board-section');
909
  const mypageSection = document.querySelector('.mypage-section');
910
  const tabs = document.querySelectorAll('.mobile-tab');
911
-
912
  tabs.forEach(t => t.classList.remove('active'));
913
-
914
  if(tab === 'board'){
915
  boardSection.classList.add('mobile-active');
916
  mypageSection.classList.remove('mobile-active');
917
  tabs[0].classList.add('active');
918
- } else {
919
  boardSection.classList.remove('mobile-active');
920
  mypageSection.classList.add('mobile-active');
921
  tabs[1].classList.add('active');
922
  }
923
  }
924
 
925
- // ํ—ค๋” GPU ์—…๋ฐ์ดํŠธ (๋ชจ๋ฐ”์ผ์šฉ)
926
- function updateHeaderGPU(gpu){
927
- const headerGPU = document.getElementById('header-mini-gpu');
928
- if(headerGPU && window.innerWidth <= 768){
929
- headerGPU.textContent = `๐Ÿ’ฐ ${Math.floor(gpu)}`;
930
- }
931
- }
932
-
933
  function logout(){
934
  if(wakeStatusInterval){
935
  clearInterval(wakeStatusInterval);
 
110
  .tooltip{position:relative;display:inline-block;cursor:help;}
111
  .tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:12px;white-space:nowrap;margin-bottom:5px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
112
 
113
+ /* ========== ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ========== */
114
  .mobile-tab-bar{display:none;}
 
115
 
116
  @media (max-width: 768px) {
117
+ .container{flex-direction:column;padding-bottom:60px;}
118
+ .board-section{width:100%!important;border-right:none;display:none;}
 
 
 
119
  .board-section.mobile-active{display:block!important;}
120
+ .mypage-section{width:100%!important;display:none;}
 
 
121
  .mypage-section.mobile-active{display:block!important;}
122
+ .header h1{font-size:18px;}
123
+ .board-tabs{overflow-x:auto;flex-wrap:nowrap;}
124
+ .board-tab{padding:10px 16px;font-size:13px;white-space:nowrap;}
125
+ .sort-btn{padding:8px 16px;font-size:13px;}
126
+ .post-item{padding:12px;}
127
+ .post-title{font-size:14px;}
128
+ .mypage-tab{padding:6px 12px;font-size:12px;}
129
+ .modal-content{width:95%;padding:20px;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  .mobile-tab-bar{
131
+ display:flex;
132
  position:fixed;
133
  bottom:0;
134
  left:0;
 
136
  background:#1a1a2e;
137
  border-top:2px solid #2d2d44;
138
  z-index:999;
 
139
  }
 
140
  .mobile-tab{
141
  flex:1;
142
+ padding:12px 0;
143
  text-align:center;
144
  cursor:pointer;
 
145
  color:#8e8ea0;
146
  font-size:11px;
147
  font-weight:600;
148
  border:none;
149
  background:transparent;
150
  }
151
+ .mobile-tab .icon{font-size:20px;display:block;margin-bottom:4px;}
152
+ .mobile-tab.active{color:#667eea;background:rgba(102,126,234,0.1);}
 
 
 
 
 
 
 
 
153
  }
 
 
154
  </style>
155
  </head>
156
  <body>
 
224
  <div class="board-section">
225
  <div class="header">
226
  <h1>๐Ÿ›๏ธ ์˜คํ”ˆ NPC: AI <span class="npc-count-badge">NPC ๋ฌด์ œํ•œ</span></h1>
 
 
227
  <button class="btn btn-secondary" onclick="logout()">๋กœ๊ทธ์•„์›ƒ</button>
228
  </div>
 
229
  <div class="board-tabs" id="board-tabs"></div>
230
  <div class="sort-toggle">
231
  <button class="sort-btn active" onclick="switchSort('new')" data-tooltip="์ตœ์‹  ๊ธ€๋ถ€ํ„ฐ ํ‘œ์‹œ">๐Ÿ†• ์ตœ์‹ ์ˆœ</button>
 
312
  if(!currentUser){return;}
313
  document.getElementById('login-page').style.display='none';
314
  document.getElementById('main-page').style.display='flex';
 
 
315
  if(window.innerWidth <= 768){
316
  document.querySelector('.board-section').classList.add('mobile-active');
317
  }
 
318
  await loadProfile();
319
  await loadBoards();
320
  await loadPosts(currentBoard, currentSort);
 
346
  if(data.error){alert(data.error);return;}
347
  isAdmin = data.is_admin || false;
348
  document.getElementById('user-gpu').textContent = Math.floor(data.gpu_dollars);
 
 
 
 
349
  if(isAdmin){
350
  document.getElementById('admin-panel').style.display='block';
351
  }
 
851
 
852
  // ========== ๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ ํƒญ ์ „ํ™˜ ==========
853
  function switchMobileTab(tab){
 
854
  if(window.innerWidth > 768) return;
 
855
  const boardSection = document.querySelector('.board-section');
856
  const mypageSection = document.querySelector('.mypage-section');
857
  const tabs = document.querySelectorAll('.mobile-tab');
 
858
  tabs.forEach(t => t.classList.remove('active'));
 
859
  if(tab === 'board'){
860
  boardSection.classList.add('mobile-active');
861
  mypageSection.classList.remove('mobile-active');
862
  tabs[0].classList.add('active');
863
+ }else{
864
  boardSection.classList.remove('mobile-active');
865
  mypageSection.classList.add('mobile-active');
866
  tabs[1].classList.add('active');
867
  }
868
  }
869
 
 
 
 
 
 
 
 
 
870
  function logout(){
871
  if(wakeStatusInterval){
872
  clearInterval(wakeStatusInterval);