Update app.py

app.py

@@ -837,122 +837,41 @@ HTML = """
     min-height: 100vh;
   }
 
-  /* HOME Button Container - Z-Image Style */
-  .home-button-container {
-    position: fixed;
-    top: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 15px;
-    padding: 12px 25px;
-    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
-    border: 4px solid #1F2937;
-    border-radius: 12px;
-    box-shadow: 6px 6px 0 #1F2937;
-    z-index: 9998;
-  }
-
-  .home-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 25px;
-    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%);
-    color: #1F2937;
-    font-family: 'Bangers', cursive;
-    font-size: 1.4rem;
-    letter-spacing: 2px;
-    text-decoration: none;
-    border: 3px solid #1F2937;
-    border-radius: 8px;
-    box-shadow: 4px 4px 0 #1F2937;
-    transition: all 0.2s ease;
-    cursor: pointer;
-  }
-
-  .home-button:hover {
-    background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
-    transform: translate(-2px, -2px);
-    box-shadow: 6px 6px 0 #1F2937;
-    text-decoration: none;
-    color: #1F2937;
-  }
-
-  .home-button:active {
-    transform: translate(2px, 2px);
-    box-shadow: 2px 2px 0 #1F2937;
-  }
-
-  .url-display {
-    font-family: 'Comic Neue', cursive;
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: #FFF;
-    background: rgba(0,0,0,0.3);
-    padding: 8px 16px;
-    border-radius: 6px;
-    border: 2px solid rgba(255,255,255,0.3);
-  }
-
-  /* Header Info - Comic Style */
+  /* Header Info - Compact Comic Style */
   .header-info {
     position: fixed;
-    top: 85px;
+    top: 10px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     z-index: 100;
     background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-    border: 4px solid #1F2937;
-    padding: 15px 35px;
-    border-radius: 12px;
-    box-shadow: var(--shadow-lg);
+    border: 3px solid #1F2937;
+    padding: 8px 25px;
+    border-radius: 10px;
+    box-shadow: 4px 4px 0 #1F2937;
   }
   
   .header-info .title {
     font-family: 'Bangers', cursive;
-    font-size: 2rem;
+    font-size: 1.3rem;
     color: #FFF;
-    text-shadow: 3px 3px 0 #1F2937;
-    letter-spacing: 3px;
-    margin-bottom: 6px;
-  }
-  
-  .header-info .description {
-    font-family: 'Comic Neue', cursive;
-    font-size: 0.95rem;
-    font-weight: 700;
-    color: #FEF9C3;
-    max-width: 500px;
-  }
-
-  .stats-badge {
-    display: inline-block;
-    background: #FACC15;
-    color: #1F2937;
-    padding: 5px 12px;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    margin: 3px;
-    font-weight: 700;
-    border: 2px solid #1F2937;
-    box-shadow: 2px 2px 0 #1F2937;
+    text-shadow: 2px 2px 0 #1F2937;
+    letter-spacing: 2px;
+    margin: 0;
   }
 
   /* Floating AI Button - Comic Style */
   .floating-ai {
     position: fixed;
-    top: 20px;
+    top: 10px;
     right: 20px;
-    width: 65px;
-    height: 65px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
-    border: 4px solid #1F2937;
-    box-shadow: 5px 5px 0 #1F2937;
+    border: 3px solid #1F2937;
+    box-shadow: 4px 4px 0 #1F2937;
     z-index: 9999;
     display: flex;
     justify-content: center;
@@ -964,12 +883,12 @@ HTML = """
   
   .floating-ai:hover {
     transform: translate(-2px, -2px);
-    box-shadow: 7px 7px 0 #1F2937;
+    box-shadow: 6px 6px 0 #1F2937;
   }
 
   .floating-ai:active {
     transform: translate(2px, 2px);
-    box-shadow: 3px 3px 0 #1F2937;
+    box-shadow: 2px 2px 0 #1F2937;
   }
   
   .floating-ai .icon {
@@ -978,22 +897,22 @@ HTML = """
     align-items: center;
     width: 100%;
     height: 100%;
-    font-size: 26px;
+    font-size: 20px;
     color: white;
-    text-shadow: 2px 2px 0 #1F2937;
+    text-shadow: 1px 1px 0 #1F2937;
     transition: var(--transition);
   }
   
   .floating-ai .ai-title {
     position: absolute;
-    right: 75px;
+    right: 58px;
     background: #FFF;
-    padding: 10px 20px;
+    padding: 8px 14px;
     border-radius: 8px;
-    border: 3px solid #1F2937;
-    box-shadow: 4px 4px 0 #1F2937;
+    border: 2px solid #1F2937;
+    box-shadow: 3px 3px 0 #1F2937;
     font-family: 'Bangers', cursive;
-    font-size: 1.1rem;
+    font-size: 0.95rem;
     letter-spacing: 1px;
     white-space: nowrap;
     pointer-events: none;
@@ -1010,20 +929,19 @@ HTML = """
 
   /* Viewer Container - Comic Style */
   #viewer {
-    width: 90%;
-    height: 78vh;
-    max-width: 90%;
+    width: 94%;
+    height: 90vh;
+    max-width: 94%;
     margin: 0;
     background: var(--card-bg);
     border: 4px solid #1F2937;
     border-radius: var(--radius-md);
     position: fixed;
-    top: 58%;
+    top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
     box-shadow: var(--shadow-lg);
-    max-height: calc(78vh - 40px);
     overflow: hidden;
   }
 
@@ -1477,45 +1395,25 @@ HTML = """
   }
 
   @media (max-width: 768px) {
-    .home-button-container {
-      padding: 10px 15px;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-    
-    .home-button {
-      font-size: 1.1rem;
-      padding: 8px 18px;
-    }
-    
-    .url-display {
-      font-size: 0.9rem;
-      padding: 6px 12px;
-    }
-    
     .header-info {
-      top: 80px;
-      padding: 12px 20px;
-      max-width: 90%;
+      top: 8px;
+      padding: 6px 15px;
+      max-width: 70%;
     }
     
     .header-info .title {
-      font-size: 1.5rem;
-    }
-    
-    .header-info .description {
-      font-size: 0.8rem;
+      font-size: 1.1rem;
     }
     
     .floating-ai {
-      width: 55px;
-      height: 55px;
-      top: 15px;
-      right: 15px;
+      width: 45px;
+      height: 45px;
+      top: 8px;
+      right: 10px;
     }
     
     .floating-ai .icon {
-      font-size: 22px;
+      font-size: 18px;
     }
     
     #aiChatContainer {
@@ -1523,9 +1421,9 @@ HTML = """
     }
     
     #viewer {
-      width: 95%;
-      height: 72vh;
-      top: 60%;
+      width: 98%;
+      height: 92vh;
+      top: 50%;
     }
 
     .footer-comic {
@@ -1535,23 +1433,9 @@ HTML = """
   </style>
 </head>
 <body>
-  <!-- HOME Button Container - Z-Image Style -->
-  <div class="home-button-container">
-    <a href="https://ginigen.ai" target="_blank" class="home-button">
-      🏠 HOME
-    </a>
-    <span class="url-display">🌐 ginigen.ai</span>
-  </div>
-
-  <!-- Header Info - Comic Style -->
+  <!-- Header Info - Compact Comic Style -->
   <div class="header-info">
-    <div class="title">📚 AI 플립북 📚</div>
-    <div class="description">나만의 PDF 전자책을 더욱 가치있게! 입체적인 비주얼과 AI챗봇을 통해 상호 인터렉티브를 지원합니다.</div>
-    <div style="margin-top:10px">
-      <span class="stats-badge">⚡ 빠른 로딩</span>
-      <span class="stats-badge">🤖 AI 챗봇</span>
-      <span class="stats-badge">📖 3D 플립북</span>
-    </div>
+    <div class="title">📚 AI 플립북</div>
   </div>
 
   <!-- Floating AI Button - Comic Style -->
@@ -1895,18 +1779,20 @@ HTML = """
         
         let width, height;
         if (aspectRatio > 1) {
-          height = Math.min(windowHeight * 0.78, windowHeight - 150);
+          // 가로 모드: 높이 기준으로 90% 사용
+          height = Math.min(windowHeight * 0.88, windowHeight - 60);
           width = height * aspectRatio * 0.75;
-          if (width > windowWidth * 0.9) {
-            width = windowWidth * 0.9;
+          if (width > windowWidth * 0.94) {
+            width = windowWidth * 0.94;
             height = width / (aspectRatio * 0.75);
           }
         } else {
-          width = Math.min(windowWidth * 0.95, windowWidth - 20);
-          height = width / aspectRatio * 0.85;
-          if (height > windowHeight * 0.72) {
-            height = windowHeight * 0.72;
-            width = height * aspectRatio * 0.85;
+          // 세로 모드: 너비 기준으로 98% 사용
+          width = Math.min(windowWidth * 0.98, windowWidth - 10);
+          height = width / aspectRatio * 0.9;
+          if (height > windowHeight * 0.9) {
+            height = windowHeight * 0.9;
+            width = height * aspectRatio * 0.9;
           }
         }