Created
January 16, 2026 02:44
-
-
Save Elyorbe/6088309bdf74ea230b0bee11edd02dae to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Guui → Itaewon Guide</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { max-width: 500px; margin: 0 auto; } | |
| h1 { | |
| color: white; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| font-size: 1.5rem; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 25px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.2); | |
| } | |
| .step { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: 2px dashed #e0e0e0; | |
| } | |
| .step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } | |
| .step-num { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: white; | |
| flex-shrink: 0; | |
| margin-right: 15px; | |
| font-size: 1.2rem; | |
| } | |
| .step-content { flex: 1; } | |
| .step-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 8px; } | |
| .line-badge { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 15px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 0.85rem; | |
| } | |
| .line-2 { background: #3CB44A; } | |
| .line-6 { background: #9E5A17; } | |
| .direction { | |
| background: #f5f5f5; | |
| padding: 10px 15px; | |
| border-radius: 10px; | |
| margin-top: 10px; | |
| font-size: 0.95rem; | |
| } | |
| .direction strong { color: #333; } | |
| .arrow { color: #667eea; font-size: 1.2rem; margin: 0 5px; } | |
| /* Train Diagram */ | |
| .train-section { | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| } | |
| .train-title { | |
| font-weight: bold; | |
| margin-bottom: 15px; | |
| color: #333; | |
| text-align: center; | |
| } | |
| .train { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3px; | |
| margin-bottom: 10px; | |
| } | |
| .car { | |
| width: 35px; | |
| height: 25px; | |
| background: #ddd; | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| font-weight: bold; | |
| color: #666; | |
| } | |
| .car.highlight { | |
| background: #FFD700; | |
| color: #333; | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .car-label { | |
| text-align: center; | |
| font-size: 0.8rem; | |
| color: #666; | |
| margin-top: 5px; | |
| } | |
| .car-arrow { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: #999; | |
| margin-top: 5px; | |
| } | |
| /* Transfer Diagram */ | |
| .transfer-diagram { | |
| background: linear-gradient(180deg, #e8f5e9 0%, #fff3e0 100%); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| } | |
| .platform { | |
| background: white; | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin: 10px 0; | |
| border-left: 5px solid; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .platform.line2 { border-color: #3CB44A; } | |
| .platform.line6 { border-color: #9E5A17; } | |
| .platform-label { | |
| font-weight: bold; | |
| font-size: 0.9rem; | |
| margin-bottom: 5px; | |
| } | |
| .connector { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 15px 0; | |
| } | |
| .connector-icon { | |
| font-size: 2rem; | |
| color: #667eea; | |
| } | |
| .connector-text { | |
| font-size: 0.85rem; | |
| color: #666; | |
| text-align: center; | |
| margin-top: 5px; | |
| } | |
| /* Tips */ | |
| .tip { | |
| background: #fff8e1; | |
| border-left: 4px solid #ffc107; | |
| padding: 15px; | |
| border-radius: 0 10px 10px 0; | |
| margin: 15px 0; | |
| } | |
| .tip-title { | |
| font-weight: bold; | |
| color: #f57c00; | |
| margin-bottom: 5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tip-content { font-size: 0.9rem; color: #666; } | |
| .baby-tip { | |
| background: #e3f2fd; | |
| border-left: 4px solid #2196f3; | |
| padding: 15px; | |
| border-radius: 0 10px 10px 0; | |
| margin: 15px 0; | |
| } | |
| .baby-tip .tip-title { color: #1976d2; } | |
| .warning { | |
| background: #ffebee; | |
| border-left: 4px solid #f44336; | |
| padding: 15px; | |
| border-radius: 0 10px 10px 0; | |
| margin: 15px 0; | |
| } | |
| .warning .tip-title { color: #d32f2f; } | |
| /* Summary */ | |
| .summary { | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| text-align: center; | |
| } | |
| .summary-title { font-size: 1.1rem; margin-bottom: 10px; } | |
| .summary-route { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .summary-station { | |
| background: rgba(255,255,255,0.2); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| } | |
| .summary-arrow { font-size: 1.5rem; } | |
| .summary-time { | |
| margin-top: 15px; | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🚇 Guui → Itaewon<br>Metro Yo'riqnomasi</h1> | |
| <!-- Summary Card --> | |
| <div class="summary"> | |
| <div class="summary-title">Umumiy marshrut</div> | |
| <div class="summary-route"> | |
| <span class="summary-station">Guui</span> | |
| <span class="summary-arrow">→</span> | |
| <span class="summary-station">Sindang</span> | |
| <span class="summary-arrow">→</span> | |
| <span class="summary-station">Itaewon</span> | |
| </div> | |
| <div class="summary-time">⏱️ ~33 daqiqa</div> | |
| </div> | |
| <!-- Step 1 --> | |
| <div class="card"> | |
| <div class="step"> | |
| <div class="step-num line-2">1</div> | |
| <div class="step-content"> | |
| <div class="step-title">Guui stationda <span class="line-badge line-2">2-chi liniya</span></div> | |
| <div class="direction"> | |
| <strong>📍 Yo'nalish:</strong> "Sindang" / "City Hall" / "Inner Circle" (내선순환) yo'nalishi | |
| </div> | |
| </div> | |
| </div> | |
| <div class="train-section"> | |
| <div class="train-title">🚃 Qaysi vagonga chiqish kerak?</div> | |
| <div class="train"> | |
| <div class="car highlight">1</div> | |
| <div class="car highlight">2</div> | |
| <div class="car">3</div> | |
| <div class="car">4</div> | |
| <div class="car">5</div> | |
| <div class="car">6</div> | |
| <div class="car">7</div> | |
| <div class="car">8</div> | |
| <div class="car">9</div> | |
| <div class="car">10</div> | |
| </div> | |
| <div class="car-label">⬆️ <strong>1-2 vagonlar</strong> eng yaqin o'tkazish joyiga!</div> | |
| <div class="car-arrow"> | |
| <span>← Old</span> | |
| <span>Orqa →</span> | |
| </div> | |
| </div> | |
| <div class="tip"> | |
| <div class="tip-title">💡 Maslahat</div> | |
| <div class="tip-content">Platformada "City Hall" yoki "내선순환" (ichki halqa) deb yozilgan tomonga boring.</div> | |
| </div> | |
| </div> | |
| <!-- Step 2 - Transfer --> | |
| <div class="card"> | |
| <div class="step"> | |
| <div class="step-num" style="background: #9E5A17;">2</div> | |
| <div class="step-content"> | |
| <div class="step-title">Sindang stationda O'TKAZISH</div> | |
| <div class="direction"> | |
| <strong>🔄 O'tkazish:</strong> <span class="line-badge line-2">2-chi</span> → <span class="line-badge line-6">6-chi liniya</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transfer-diagram"> | |
| <div class="platform line2"> | |
| <div class="platform-label">🟢 2-chi liniya platformasi</div> | |
| <div style="font-size: 0.85rem; color: #666;">1-2 vagon eshigidan chiqing</div> | |
| </div> | |
| <div class="connector"> | |
| <div class="connector-icon">⬇️</div> | |
| <div class="connector-text"> | |
| <strong>Eskalator</strong> → Do'konlar → <strong>Uzun eskalator</strong> → <strong>Moving walk</strong> | |
| <br><span style="color: #f44336;">(~5-7 daqiqa yurish)</span> | |
| </div> | |
| </div> | |
| <div class="platform line6"> | |
| <div class="platform-label">🟤 6-chi liniya platformasi</div> | |
| <div style="font-size: 0.85rem; color: #666;">"Itaewon" / "Samgakji" yo'nalishiga boring</div> | |
| </div> | |
| </div> | |
| <div class="warning"> | |
| <div class="tip-title">⚠️ Muhim!</div> | |
| <div class="tip-content">Sindangdagi o'tkazish <strong>ancha uzoq</strong> (~300m). "환승" (Transfer) belgilariga ergashing. Moving walk (harakatlanuvchi yo'lak) bor, lekin har doim ishlamaydi.</div> | |
| </div> | |
| <div class="baby-tip"> | |
| <div class="tip-title">👶 Bolali onalar uchun</div> | |
| <div class="tip-content"> | |
| <strong>Lift (엘리베이터) mavjud!</strong><br> | |
| • Ko'k ♿ belgilariga qarang<br> | |
| • Stasiya xodimlaridan yordam so'rashingiz mumkin<br> | |
| • Keng eshikli "wheelchair gate"dan o'ting | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="card"> | |
| <div class="step"> | |
| <div class="step-num" style="background: #9E5A17;">3</div> | |
| <div class="step-content"> | |
| <div class="step-title"><span class="line-badge line-6">6-chi liniya</span>da Itaewonga</div> | |
| <div class="direction"> | |
| <strong>📍 Yo'nalish:</strong> "Itaewon" / "Samgakji" / "Eungam" (응암) yo'nalishi | |
| </div> | |
| </div> | |
| </div> | |
| <div class="train-section"> | |
| <div class="train-title">📍 Bekatlar ketma-ketligi</div> | |
| <div style="text-align: center; padding: 10px;"> | |
| <div style="display: inline-block; padding: 8px 15px; background: #9E5A17; color: white; border-radius: 20px; margin: 5px;">Sindang</div> | |
| <span style="color: #9E5A17; font-weight: bold;">→</span> | |
| <div style="display: inline-block; padding: 8px 15px; background: #f5f5f5; border-radius: 20px; margin: 5px;">Cheonggu</div> | |
| <span style="color: #9E5A17; font-weight: bold;">→</span> | |
| <div style="display: inline-block; padding: 8px 15px; background: #f5f5f5; border-radius: 20px; margin: 5px;">Yaksu</div> | |
| <span style="color: #9E5A17; font-weight: bold;">→</span> | |
| <div style="display: inline-block; padding: 8px 15px; background: #f5f5f5; border-radius: 20px; margin: 5px;">Beotigogae</div> | |
| <span style="color: #9E5A17; font-weight: bold;">→</span> | |
| <div style="display: inline-block; padding: 8px 15px; background: #f5f5f5; border-radius: 20px; margin: 5px;">Hangangjin</div> | |
| <span style="color: #9E5A17; font-weight: bold;">→</span> | |
| <div style="display: inline-block; padding: 8px 15px; background: #FFD700; color: #333; border-radius: 20px; margin: 5px; font-weight: bold;">🎯 Itaewon</div> | |
| </div> | |
| <div style="text-align: center; color: #666; font-size: 0.85rem;">Sindangdan 5 ta bekat (taxminan 10 daqiqa)</div> | |
| </div> | |
| </div> | |
| <!-- Final Tips --> | |
| <div class="card"> | |
| <h3 style="margin-bottom: 15px; color: #333;">📝 Qo'shimcha maslahatlar</h3> | |
| <div class="baby-tip"> | |
| <div class="tip-title">🍼 6 oylik chaqaloq bilan</div> | |
| <div class="tip-content"> | |
| • Har bir vagonda <strong>stroller uchun joy</strong> bor (ko'k ♿ belgisi)<br> | |
| • Metro eshiklari va platforma orasidagi bo'shliq <strong>kichik</strong><br> | |
| • Piyonyer o'rindiqlar (priority seats) vagon uchlarida<br> | |
| • Yordam kerak bo'lsa: "도와주세요" (Do-wa-ju-se-yo) | |
| </div> | |
| </div> | |
| <div class="tip"> | |
| <div class="tip-title">💳 To'lov</div> | |
| <div class="tip-content"> | |
| T-money yoki Cashbee kartasi bilan to'lang. Bir martalik chipta olsangiz, 500 won depozit qaytariladi. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment