Skip to content

Instantly share code, notes, and snippets.

@Elyorbe

Elyorbe/guide.html

Created January 16, 2026 02:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Elyorbe/6088309bdf74ea230b0bee11edd02dae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Elyorbe/6088309bdf74ea230b0bee11edd02dae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
guide.html
<!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