Update app.py

app.py

@@ -11,34 +11,49 @@ from zoneinfo import ZoneInfo
 # OpenAI API 키를 환경변수에서 가져오기
 API_KEY = os.getenv("API_KEY")
 
-TIMEZONE_MAPPING = {
-    -12: "태평양/베이커 섬 (UTC-12)",
-    -11: "태평양/미드웨이 (UTC-11)",
-    -10: "태평양/호놀룰루 (UTC-10)",
-    -9: "미국/앵커리지 (UTC-9)",
-    -8: "미국/로스앤젤레스 (UTC-8)",
-    -7: "미국/덴버 (UTC-7)",
-    -6: "미국/시카고 (UTC-6)",
-    -5: "미국/뉴욕 (UTC-5)",
-    -4: "캐나다/핼리팩스 (UTC-4)",
-    -3: "브라질/상파울루 (UTC-3)",
-    -2: "대서양/남조지아 (UTC-2)",
-    -1: "대서양/아조레스 (UTC-1)",
-    0: "영국/런던 (UTC+0)",
-    1: "유럽/파리 (UTC+1)",
-    2: "유럽/아테네 (UTC+2)",
-    3: "유럽/모스크바 (UTC+3)",
-    4: "아시아/두바이 (UTC+4)",
-    5: "아시아/카라치 (UTC+5)",
-    6: "아시아/다카 (UTC+6)",
-    7: "아시아/방콕 (UTC+7)",
-    8: "아시아/싱가포르 (UTC+8)",
-    9: "아시아/서울 (UTC+9)",
-    10: "아시아/시드니 (UTC+10)",
-    11: "태평양/누메아 (UTC+11)",
-    12: "태평양/오클랜드 (UTC+12)",
-    13: "태평양/통가 (UTC+13)",
-    14: "태평양/키리티마티 (UTC+14)"
+TIMEZONE_CITIES = {
+    # 아시아
+    "서울, 도쿄, 평양 (UTC+9)": 9,
+    "베이징, 홍콩, 싱가포르, 타이페이, 마닐라 (UTC+8)": 8,
+    "방콕, 자카르타, 하노이, 프놈펜 (UTC+7)": 7,
+    "양곤 (UTC+6.5)": 6.5,
+    "다카, 알마티 (UTC+6)": 6,
+    "뉴델리, 뭄바이, 콜롬보 (UTC+5.5)": 5.5,
+    "타슈켄트, 이슬라마바드, 카라치 (UTC+5)": 5,
+    "카불 (UTC+4.5)": 4.5,
+    "두바이, 아부다비, 무스카트 (UTC+4)": 4,
+    "테헤란 (UTC+3.5)": 3.5,
+    "모스크바, 이스탄불, 리야드, 바그다드 (UTC+3)": 3,
+
+    # 유럽
+    "아테네, 헬싱키, 키예프, 카이로 (UTC+2)": 2,
+    "파리, 로마, 베를린, 마드리드, 암스테르담 (UTC+1)": 1,
+    "런던, 리스본, 더블린 (UTC+0)": 0,
+
+    # 아메리카
+    "아조레스 제도 (UTC-1)": -1,
+    "페르난도 데 노로냐 (UTC-2)": -2,
+    "상파울루, 부에노스아이레스, 몬테비데오 (UTC-3)": -3,
+    "산티아고, 아순시온 (UTC-4)": -4,
+    "뉴욕, 마이애미, 보스턴, 토론토 (UTC-5)": -5,
+    "시카고, 멕시코시티, 달라스 (UTC-6)": -6,
+    "덴버, 피닉스, 솔트레이크시티 (UTC-7)": -7,
+    "로스앤젤레스, 샌프란시스코, 라스베가스, 시애틀 (UTC-8)": -8,
+    "앵커리지, 페어뱅크스 (UTC-9)": -9,
+    "하와이, 타히티 (UTC-10)": -10,
+    "사모아 (UTC-11)": -11,
+    "베이커 섬 (UTC-12)": -12,
+
+    # 오세아니아
+    "오클랜드, 웰링턴 (UTC+12)": 12,
+    "시드니, 멜버른, 캔버라 (UTC+10)": 10,
+    "다윈 (UTC+9.5)": 9.5,
+    "애들레이드 (UTC+9.5)": 9.5,
+
+    # 아프리카
+    "요하네스버그, 하라레 (UTC+2)": 2,
+    "라고스, 알제 (UTC+1)": 1,
+    "다카르, 카사블랑카 (UTC+0)": 0,
 }
 
 def convert_to_seoul_time(year, month, day, hour, minute, timezone_offset):
@@ -385,42 +400,46 @@ button:hover {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
-/* 시간대 슬라이더 스타일 */
-.timezone-slider {
-    margin: 20px 0;
-    padding: 15px;
+/* 시간대 드롭다운 스타일 */
+.timezone-dropdown {
     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-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:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }
 
-.timezone-slider .label {
+.timezone-dropdown select {
+    width: 100%;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
     font-size: 14px;
-    font-weight: 500;
     color: #2d3748;
-    margin-bottom: 10px;
+    background-color: white;
 }
 
-#selected-timezone-display {
-    text-align: center;
+.timezone-info {
+    background: linear-gradient(135deg, rgba(110, 142, 251, 0.1), rgba(167, 119, 227, 0.1));
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
     font-size: 14px;
     color: #4a5568;
-    margin-top: 5px;
-    font-weight: 500;
+    border-left: 4px solid #6e8efb;
+    line-height: 1.8;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.timezone-info b {
+    color: #2d3748;
 }
 
 /* 분석 결과 스타일 */
@@ -522,6 +541,69 @@ input:focus, select:focus, textarea:focus {
     box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2) !important;
     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;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb: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% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-5px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+.input-container:hover,
+.timezone-dropdown:hover,
+.large-output-box:hover,
+.newyear-container:hover {
+    animation: float 2s ease-in-out infinite;
+}
 """
 
 # Gradio UI 부분
@@ -529,7 +611,7 @@ with gr.Blocks(css=css) as demo:
     gr.Markdown("# 🔮 AI 사주 운세 분석 시스템 ✨", elem_id="title")
     gr.Markdown("### 🌟 양력 생년월일시와 출생 지역을 입력하시면 AI가 당신의 운세를 분석해드립니다! 💫", elem_id="description1")
     gr.Markdown("### 💫 커뮤니티: https://discord.gg/openfreeai 🌈", elem_id="description3")
-    
+
     with gr.Tab("📝 기본 정보 입력 및 요약"):
         with gr.Group(elem_classes="input-container"):
             solYear = gr.Textbox(label="🎂 생년 (예: 1990)")
@@ -539,19 +621,25 @@ with gr.Blocks(css=css) as demo:
                 label="⏰ 생시 (예: 1030)", 
                 placeholder="24시간 형식으로 입력 (예: 2230)"
             )
-            timezone_slider = gr.Slider(
-                minimum=-12,
-                maximum=14,
-                value=9,
-                step=1,
-                label="🌍 출생 지역 시간대 (UTC)",
-                info="서울은 UTC+9 입니다. 출생 지역의 UTC 시간대를 선택하세요.",
-                elem_classes="timezone-slider"
+            timezone_select = gr.Dropdown(
+                choices=sorted(list(TIMEZONE_CITIES.keys())),  # 알파벳 순으로 정렬
+                value="서울, 도쿄, 평양 (UTC+9)",
+                label="🌍 출생 지역 시간대",
+                info="출생 지역의 시간대를 선택하세요. 기본값은 서울(UTC+9) 입니다.",
+                elem_classes="timezone-dropdown"
             )
             gr.Markdown(
-                "현재 선택된 시간대: " + TIMEZONE_MAPPING[9],
-                elem_id="selected-timezone-display"
+                """
+                <div class="timezone-info">
+                    ℹ️ <b>시간대 정보</b>
+                    <br>• 선택한 시간대는 자동으로 서울 시간으로 변환되어 계산됩니다.
+                    <br>• 예시: 뉴욕 1월 1일 오후 2시 → 서울 기준 1월 2일 오전 4시
+                    <br>• 정확한 시간대를 모르시면 가장 가까운 대도시를 선택하세요.
+                </div>
+                """,
+                elem_classes="timezone-info"
             )
+    
         
         with gr.Group(elem_classes="output-container"):
             output1 = gr.JSON(label="🎯 사주 분석 결과")