Hugging Face's logo

Spaces:
ginipick
/
AI-BOOK
Paused

App Files Community
2
ginipick commited on
Commit
9e3d558
Β·
verified Β·
1 Parent(s): 733101e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +80 -6
app.py CHANGED
@@ -100,9 +100,9 @@ h2{margin:0;font-size:1.5rem;font-weight:600}
100
  }
101
  button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;border-radius:6px;background:#fff;margin:0 8px}
102
  #viewer{
103
- width:80%;
104
- height:80vh; /* 전체 ν™”λ©΄ λ†’μ΄μ˜ 80%둜 μΆ•μ†Œ */
105
- max-width:80%; /* μ΅œλŒ€ λ„ˆλΉ„ 80%둜 μ œν•œ */
106
  margin:0;
107
  background:#fff;
108
  border:1px solid #ddd;
@@ -114,10 +114,40 @@ button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;bo
114
  z-index:1000; /* μ΅œμƒμœ„ ν‘œμ‹œ */
115
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
116
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </style></head><body>
118
 
119
  <header>
120
- <button id="homeBtn" title="ν™ˆμœΌλ‘œ">βŒ‚</button>
121
  <h2>My FlipBook Projects</h2>
122
  </header>
123
 
@@ -318,9 +348,51 @@ function createFlipBook(pages) {
318
  /* πŸ”Š λ‚΄μž₯ μ‚¬μš΄λ“œ */
319
  sound: true,
320
  assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
321
- controlsProps: {enableFullscreen: true, thumbnails: true}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  });
323
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
324
  console.log('FlipBook 생성 μ™„λ£Œ');
325
  } catch (error) {
326
  console.error('FlipBook 생성 쀑 였λ₯˜ λ°œμƒ:', error);
@@ -348,10 +420,11 @@ function toggle(showHome){
348
  $id('homeBtn').style.position = 'fixed';
349
  $id('homeBtn').style.top = '20px';
350
  $id('homeBtn').style.left = '20px';
351
- $id('homeBtn').style.zIndex = '1001'; // 뷰어보닀 높은 z-index
352
  $id('homeBtn').style.fontSize = '24px'; // 크기 증가
353
  $id('homeBtn').style.width = '48px';
354
  $id('homeBtn').style.height = '48px';
 
355
 
356
  // λ°°κ²½ μ˜€λ²„λ ˆμ΄ μΆ”κ°€
357
  document.body.style.backgroundColor = '#3a3a3a';
@@ -363,6 +436,7 @@ function toggle(showHome){
363
  $id('homeBtn').style.fontSize = '';
364
  $id('homeBtn').style.width = '';
365
  $id('homeBtn').style.height = '';
 
366
 
367
  // λ°°κ²½ οΏ½οΏ½λž˜λŒ€λ‘œ
368
  document.body.style.backgroundColor = '#f0f0f0';
 
100
  }
101
  button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;border-radius:6px;background:#fff;margin:0 8px}
102
  #viewer{
103
+ width:88%;
104
+ height:88vh; /* 전체 ν™”λ©΄ λ†’μ΄μ˜ 88%둜 μ‘°μ • (κΈ°μ‘΄ 80%μ—μ„œ 10% 증가) */
105
+ max-width:88%; /* μ΅œλŒ€ λ„ˆλΉ„ 88%둜 μ œν•œ (κΈ°μ‘΄ 80%μ—μ„œ 10% 증가) */
106
  margin:0;
107
  background:#fff;
108
  border:1px solid #ddd;
 
114
  z-index:1000; /* μ΅œμƒμœ„ ν‘œμ‹œ */
115
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
116
  }
117
+
118
+ /* FlipBook μ»¨νŠΈλ‘€λ°” κ΄€λ ¨ μŠ€νƒ€μΌ μ˜€λ²„λΌμ΄λ“œ */
119
+ .flipbook-container .fb3d-menu-bar {
120
+ z-index: 2000 !important; /* μ»¨νŠΈλ‘€λ°”κ°€ λ‹€λ₯Έ μš”μ†Œλ³΄λ‹€ μœ„μ— μ˜€λ„λ‘ 함 */
121
+ opacity: 1 !important; /* 항상 ν‘œμ‹œλ˜λ„λ‘ 함 */
122
+ bottom: 0 !important; /* ν•˜λ‹¨μ— κ³ μ • */
123
+ background-color: rgba(0,0,0,0.7) !important; /* 배경색 μ„€μ • */
124
+ border-radius: 0 0 8px 8px !important; /* ν•˜λ‹¨ λͺ¨μ„œλ¦¬λ§Œ λ‘₯κΈ€κ²Œ */
125
+ padding: 8px 0 !important; /* μƒν•˜ νŒ¨λ”© μΆ”κ°€ */
126
+ }
127
+
128
+ .flipbook-container .fb3d-menu-bar > ul > li > img,
129
+ .flipbook-container .fb3d-menu-bar > ul > li > div {
130
+ opacity: 1 !important; /* 메뉴 μ•„μ΄μ½˜ 항상 ν‘œμ‹œ */
131
+ transform: scale(1.2) !important; /* μ•„μ΄μ½˜ 크기 μ•½κ°„ 킀움 */
132
+ }
133
+
134
+ .flipbook-container .fb3d-menu-bar > ul > li {
135
+ margin: 0 8px !important; /* 메뉴 μ•„μ΄ν…œ 간격 μ‘°μ • */
136
+ }
137
+
138
+ /* 메뉴 툴팁 μŠ€νƒ€μΌ κ°œμ„  */
139
+ .flipbook-container .fb3d-menu-bar > ul > li > span {
140
+ background-color: rgba(0,0,0,0.8) !important;
141
+ color: white !important;
142
+ border-radius: 4px !important;
143
+ padding: 4px 8px !important;
144
+ font-size: 12px !important;
145
+ bottom: 45px !important; /* 툴팁 μœ„μΉ˜ μ‘°μ • */
146
+ }
147
  </style></head><body>
148
 
149
  <header>
150
+ <button id="homeBtn" title="ν™ˆμœΌλ‘œ">🏠</button>
151
  <h2>My FlipBook Projects</h2>
152
  </header>
153
 
 
348
  /* πŸ”Š λ‚΄μž₯ μ‚¬μš΄λ“œ */
349
  sound: true,
350
  assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
351
+ controlsProps: {
352
+ enableFullscreen: true,
353
+ enableToc: true,
354
+ enableDownload: false,
355
+ enablePrint: false,
356
+ enableZoom: true,
357
+ enableShare: false,
358
+ enableSearch: true,
359
+ enableAutoPlay: true,
360
+ enableAnnotation: false,
361
+ enableSound: true,
362
+ enableLightbox: false,
363
+ layout: 10, // λ ˆμ΄μ•„μ›ƒ μ˜΅μ…˜
364
+ skin: 'light', // μŠ€ν‚¨ μŠ€νƒ€μΌ
365
+ autoNavigationTime: 3600, // μžλ™ λ„˜κΉ€ μ‹œκ°„(초)
366
+ hideControls: false, // 컨트둀 μˆ¨κΉ€ λΉ„ν™œμ„±ν™”
367
+ paddingTop: 10, // 상단 νŒ¨λ”©
368
+ paddingLeft: 10, // 쒌츑 νŒ¨λ”©
369
+ paddingRight: 10, // 우츑 νŒ¨λ”©
370
+ paddingBottom: 10, // ν•˜λ‹¨ νŒ¨λ”©
371
+ pageTextureSize: 1024, // νŽ˜μ΄μ§€ ν…μŠ€μ²˜ 크기
372
+ thumbnails: true, // 섬넀일 ν™œμ„±ν™”
373
+ autoHideControls: false, // μžλ™ μˆ¨κΉ€ λΉ„ν™œμ„±ν™”
374
+ controlsTimeout: 8000 // 컨트둀 ν‘œμ‹œ μ‹œκ°„ μ—°μž₯
375
+ }
376
  });
377
 
378
+ // FlipBook 생성 ν›„ μ»¨νŠΈλ‘€λ°” κ°•μ œ ν‘œμ‹œ
379
+ setTimeout(() => {
380
+ try {
381
+ // μ»¨νŠΈλ‘€λ°” κ΄€λ ¨ μš”μ†Œ μ°ΎκΈ° 및 μŠ€νƒ€μΌ 적용
382
+ const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
383
+ if (menuBars && menuBars.length > 0) {
384
+ menuBars.forEach(menuBar => {
385
+ menuBar.style.display = 'block';
386
+ menuBar.style.opacity = '1';
387
+ menuBar.style.visibility = 'visible';
388
+ menuBar.style.zIndex = '9999';
389
+ });
390
+ }
391
+ } catch (e) {
392
+ console.warn('μ»¨νŠΈλ‘€λ°” μŠ€νƒ€μΌ 적용 쀑 였λ₯˜:', e);
393
+ }
394
+ }, 1000);
395
+
396
  console.log('FlipBook 생성 μ™„λ£Œ');
397
  } catch (error) {
398
  console.error('FlipBook 생성 쀑 였λ₯˜ λ°œμƒ:', error);
 
420
  $id('homeBtn').style.position = 'fixed';
421
  $id('homeBtn').style.top = '20px';
422
  $id('homeBtn').style.left = '20px';
423
+ $id('homeBtn').style.zIndex = '9999'; // μ΅œμƒμœ„ z-index둜 λ³€κ²½
424
  $id('homeBtn').style.fontSize = '24px'; // 크기 증가
425
  $id('homeBtn').style.width = '48px';
426
  $id('homeBtn').style.height = '48px';
427
+ $id('homeBtn').style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)'; // 그림자 μΆ”κ°€
428
 
429
  // λ°°κ²½ μ˜€λ²„λ ˆμ΄ μΆ”κ°€
430
  document.body.style.backgroundColor = '#3a3a3a';
 
436
  $id('homeBtn').style.fontSize = '';
437
  $id('homeBtn').style.width = '';
438
  $id('homeBtn').style.height = '';
439
+ $id('homeBtn').style.boxShadow = '';
440
 
441
  // λ°°κ²½ οΏ½οΏ½λž˜λŒ€λ‘œ
442
  document.body.style.backgroundColor = '#f0f0f0';