Update app.py

app.py

@@ -566,6 +566,173 @@ def get_random_placeholder():
 def update_placeholder():
     return gr.update(placeholder=get_random_placeholder())
 
+custom_css = """
+     /* 전체 컨테이너 스타일링 */
+     .main-tabs {
+          background: #ffffff;
+          border-radius: 15px;
+          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+          padding: 20px;
+          margin: 20px;
+     }
+
+     /* 좌측 패널 스타일링 */
+     .left-panel {
+          background: #f8f9fa;
+          border-radius: 12px;
+          padding: 20px;
+          margin: 10px;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+     }
+
+     /* 우측 패널 스타일링 */
+     .right-panel {
+          background: #ffffff;
+          border-radius: 12px;
+          padding: 20px;
+          margin: 10px;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+     }
+
+     /* 입력 영역 스타일링 */
+     .custom-textarea {
+          background: #ffffff !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 10px !important;
+          padding: 15px !important;
+          min-height: 150px !important;
+          font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
+          margin-bottom: 20px !important;
+     }
+
+     .custom-textarea:focus {
+          border-color: #007aff !important;
+          box-shadow: 0 0 0 2px rgba(0,122,255,0.2) !important;
+     }
+
+     /* 버튼 스타일링 */
+     .generate-btn {
+          background: #007aff !important;
+          color: white !important;
+          border-radius: 8px !important;
+          padding: 10px 20px !important;
+          font-weight: 500 !important;
+          transition: all 0.3s ease !important;
+          border: none !important;
+          box-shadow: 0 2px 4px rgba(0,122,255,0.2) !important;
+     }
+
+     .enhance-btn, .share-btn {
+          background: white !important;
+          border-radius: 8px !important;
+          padding: 10px 20px !important;
+          font-weight: 500 !important;
+          transition: all 0.3s ease !important;
+     }
+
+     .enhance-btn {
+          color: #007aff !important;
+          border: 1px solid #007aff !important;
+     }
+
+     .share-btn {
+          color: #28c840 !important;
+          border: 1px solid #28c840 !important;
+     }
+
+     /* 버튼 호버 효과 */
+     .generate-btn:hover {
+          background: #0056b3 !important;
+          transform: translateY(-1px);
+     }
+
+     .enhance-btn:hover {
+          background: rgba(0,122,255,0.1) !important;
+          transform: translateY(-1px);
+     }
+
+     .share-btn:hover {
+          background: rgba(40,200,64,0.1) !important;
+          transform: translateY(-1px);
+     }
+
+     /* 모드 선택기 스타일링 */
+     .mode-selector {
+          background: white !important;
+          padding: 15px !important;
+          border-radius: 10px !important;
+          margin-bottom: 20px !important;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
+     }
+
+     /* 미리보기 창 스타일링 */
+     .window-frame {
+          background: white;
+          border-radius: 10px;
+          overflow: hidden;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+     }
+
+     .window-header {
+          background: #f8f9fa;
+          padding: 10px 15px;
+          border-bottom: 1px solid #e0e0e0;
+          display: flex;
+          align-items: center;
+     }
+
+     .window-controls {
+          display: flex;
+          gap: 8px;
+     }
+
+     .control {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+     }
+
+     .close { background: #ff5f57; }
+     .minimize { background: #febc2e; }
+     .maximize { background: #28c840; }
+
+     /* 결과 영역 스타일링 */
+     .html_content {
+          background: white;
+          border-radius: 10px;
+          padding: 20px;
+          margin-top: 15px;
+          min-height: 400px;
+     }
+
+     /* 로딩 상태 스타일링 */
+     .right_content {
+          padding: 40px;
+          text-align: center;
+     }
+
+     /* 에러 상태 스타일링 */
+     .error-content {
+          background: #fff2f0;
+          border: 1px solid #ff4d4f;
+          padding: 20px;
+          border-radius: 8px;
+          margin-top: 15px;
+     }
+
+     /* 반응형 디자인 */
+     @media (max-width: 768px) {
+          .main-tabs {
+               margin: 10px;
+               padding: 10px;
+          }
+
+          .left-panel, .right-panel {
+               margin: 5px;
+               padding: 10px;
+          }
+     }
+"""
 
 def create_main_interface():
      """메인 인터페이스 생성 함수"""