Update app.py

app.py

@@ -405,30 +405,41 @@ button:hover {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
-/* 시간대 드롭다운 스타일 */
-.timezone-dropdown {
+/* 시간대 슬라이더 스타일 */
+.timezone-slider {
+    margin: 20px 0;
+    padding: 20px;
     background: linear-gradient(135deg, #ffffff, #f8f9fa);
     border-radius: 10px;
-    padding: 15px;
-    margin: 15px 0;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(110, 142, 251, 0.2);
-    transition: all 0.3s ease;
 }
 
-.timezone-dropdown:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+.timezone-slider .slider {
+    height: 10px !important;
+    background: linear-gradient(90deg, #6e8efb, #a777e3) !important;
+    border-radius: 5px !important;
+}
+
+.timezone-slider .thumb {
+    width: 20px !important;
+    height: 20px !important;
+    background: white !important;
+    border: 2px solid #6e8efb !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
 }
 
-.timezone-dropdown select {
-    width: 100%;
-    padding: 12px;
+.timezone-cities-display {
+    background: rgba(110, 142, 251, 0.1);
+    padding: 15px;
     border-radius: 8px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin: 10px 0;
     font-size: 14px;
-    color: #2d3748;
-    background-color: white;
+    color: #4a5568;
+    border-left: 4px solid #6e8efb;
+}
+
+.timezone-cities {
+    line-height: 1.6;
 }
 
 .timezone-info {
@@ -547,18 +558,6 @@ input:focus, select:focus, textarea:focus {
     transform: translateY(-1px);
 }
 
-/* 드롭다운 옵션 스타일 */
-select option {
-    padding: 12px;
-    font-size: 14px;
-    background-color: white;
-    color: #2d3748;
-}
-
-select option:hover {
-    background-color: #f7fafc;
-}
-
 /* 스크롤바 스타일 */
 ::-webkit-scrollbar {
     width: 8px;
@@ -579,17 +578,6 @@ select option:hover {
     background: linear-gradient(135deg, #a777e3, #6e8efb);
 }
 
-/* 드롭다운 화살표 스타일 */
-select {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    background-size: 1em;
-}
-
 /* 호버 효과 애니메이션 */
 @keyframes float {
     0% {
@@ -604,7 +592,7 @@ select {
 }
 
 .input-container:hover,
-.timezone-dropdown:hover,
+.timezone-slider:hover,
 .large-output-box:hover,
 .newyear-container:hover {
     animation: float 2s ease-in-out infinite;
@@ -635,21 +623,32 @@ with gr.Blocks(css=css) as demo:
                 label="⏰ 생시 (예: 1030)", 
                 placeholder="24시간 형식으로 입력하세요 (예: 2230)"
             )
-            timezone_select = gr.Dropdown(
-                choices=sorted(list(TIMEZONE_CITIES.keys())),
-                value="서울, 도쿄, 평양 (UTC+9)",
-                label="🌍 출생 지역 시간대",
-                info="출생 지역의 시간대를 선택하세요. 기본값은 서울(UTC+9) 입니다.",
-                elem_classes="timezone-dropdown"
+            
+            # 시간대 슬라이더
+            timezone_slider = gr.Slider(
+                minimum=-12,
+                maximum=14,
+                value=9,
+                step=0.5,
+                label="🌍 출생 지역 시간대 (UTC)",
+                info="서울은 UTC+9 입니다. 출생 지역의 UTC 시간대를 선택하세요.",
+                elem_classes="timezone-slider"
+            )
+            
+            # 선택된 시간대의 도시들 표시
+            timezone_cities_display = gr.HTML(
+                value="<div class='timezone-cities'>현재 선택: 서울, 도쿄, 평양 (UTC+9)</div>",
+                elem_classes="timezone-cities-display"
             )
+            
             gr.Markdown(
                 """
                 <div class="timezone-info">
                     ℹ️ <b>시간대 정보</b>
+                    <br>• 슬라이더를 움직여 출생 지역의 시간대를 선택하세요.
                     <br>• 선택한 시간대는 자동으로 서울 시간으로 변환됩니다.
-                    <br>• 예시: 뉴욕(UTC-5) 1월 1일 오후 2시 → 서울 기준 1월 2일 오전 4시
-                    <br>• 정확한 시간대를 모르시면 가장 가까운 대도시를 선택하세요.
-                    <br>• 모든 시간은 24시간 형식으로 입력해 주세요. (예: 오후 2시 = 1400)
+                    <br>• 예시: UTC-5(뉴욕) 1월 1일 오후 2시 → 서울 기준 1월 2일 오전 4시
+                    <br>• 시간대를 모르시면 위의 도시 목록에서 가장 가까운 도시를 확인하세요.
                 </div>
                 """,
                 elem_classes="timezone-info"
@@ -701,10 +700,23 @@ with gr.Blocks(css=css) as demo:
                 size="lg"
             )
 
+    # 시간대 변경 시 도시 목록 업데이트 함수
+    def update_timezone_cities(value):
+        cities = [k for k, v in TIMEZONE_CITIES.items() if abs(v - value) < 0.1]
+        if cities:
+            return f"<div class='timezone-cities'>현재 선택된 시간대의 주요 도시:<br>{', '.join(cities)}</div>"
+        return "<div class='timezone-cities'>해당 시간대의 주요 도시 정보가 없습니다.</div>"
+
     # 이벤트 연결
+    timezone_slider.change(
+        fn=update_timezone_cities,
+        inputs=[timezone_slider],
+        outputs=[timezone_cities_display]
+    )
+    
     get_lunar_info_btn.click(
         fn=get_lunar_info,
-        inputs=[solYear, solMonth, solDay, solHour, timezone_select],
+        inputs=[solYear, solMonth, solDay, solHour, timezone_slider],
         outputs=[output1, lunIljin_state, analysis_result]
     )