GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Transit Detail</title>7<style>8  :root{9    --orange:#E67E22;10    --text:#222;11    --muted:#757575;12    --line:#E0E0E0;13    --bg:#FFFFFF;14    --img-bg:#E0E0E0;15    --img-border:#BDBDBD;16    --green:#0FA15A;17  }18  body{ margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }19  #render-target{20    width:1080px; height:2400px;21    position:relative; overflow:hidden;22    background:#fff;23    color:var(--text);24  }25 26  /* Status bar */27  .status-bar{28    position:absolute; top:0; left:0; right:0;29    height:84px;30    background:rgba(0,0,0,0.25);31    color:#fff; font-size:32px;32    display:flex; align-items:center; justify-content:space-between;33    padding:0 32px;34    z-index:5;35  }36  .status-icons{ display:flex; gap:28px; align-items:center; opacity:0.9; }37  .status-dot{ width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; opacity:0.8; }38 39  /* Hero image */40  .hero{41    width:100%; height:420px; position:relative;42  }43  .hero .img{44    width:100%; height:100%;45    background:var(--img-bg);46    border-bottom:1px solid var(--img-border);47    display:flex; align-items:center; justify-content:center;48    color:#555; font-size:36px; letter-spacing:0.2px;49  }50  .back-btn{51    position:absolute; left:28px; top:160px;52    width:64px; height:64px; display:flex; align-items:center; justify-content:center;53  }54 55  /* Agency header */56  .agency{57    background:#fff;58    padding:34px 40px;59    display:flex; align-items:center; gap:24px;60    border-bottom:1px solid var(--line);61  }62  .agency h1{ margin:0; font-size:44px; font-weight:700; letter-spacing:0.2px; }63  .go-logo{ width:72px; height:36px; }64 65  /* Route card */66  .route-card{67    background:#F4F4F4;68    padding:40px;69    border-bottom:1px solid var(--line);70    display:grid;71    grid-template-columns:120px 1fr;72    column-gap:24px;73  }74  .timeline{75    position:relative;76    width:14px; height:320px; background:var(--orange); border-radius:8px; margin:8px 0 0 40px;77  }78  .timeline::before, .timeline::after{79    content:""; position:absolute; left:50%; transform:translateX(-50%);80    width:40px; height:40px; border-radius:50%; border:8px solid var(--orange); background:#F4F4F4;81  }82  .timeline::before{ top:-14px; }83  .timeline::after{ bottom:-14px; }84  .route-title{ font-size:36px; font-weight:500; margin:6px 0 22px 0; }85  .detail-row{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }86  .duration{ font-size:34px; font-weight:600; }87  .mid-dot{ color:var(--muted); }88  .bus-icon{ width:36px; height:30px; opacity:0.6; }89  .pill{90    background:var(--orange); color:#fff; font-weight:700;91    font-size:30px; padding:6px 14px; border-radius:10px;92  }93  .show-stops{ color:var(--muted); font-size:30px; display:flex; align-items:center; gap:14px; }94  .dest{ font-size:36px; margin-top:36px; }95 96  /* Information section */97  .section{98    padding:40px; background:#fff; border-bottom:1px solid var(--line);99  }100  .section h2{ margin:0 0 28px 0; font-size:44px; font-weight:700; }101  .info-row{ display:flex; justify-content:space-between; align-items:flex-start; padding:22px 0; border-top:1px solid var(--line); }102  .info-row:first-of-type{ border-top:none; }103  .info-left h3{ margin:0 0 10px 0; font-size:34px; font-weight:600; }104  .info-left p{ margin:0; font-size:30px; color:var(--muted); }105  .info-right{ font-size:32px; font-weight:600; }106 107  /* Map */108  .map .img{109    width:100%; height:460px;110    background:var(--img-bg);111    border:1px solid var(--img-border);112    display:flex; align-items:center; justify-content:center;113    color:#555; font-size:34px;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div>10:14</div>123    <div class="status-icons">124      <span>🔔</span>125      <span>🔒</span>126      <span style="font-weight:700;">N</span>127      <span class="status-dot"></span>128      <span>📶</span>129      <span>🔋</span>130    </div>131  </div>132 133  <!-- Hero banner -->134  <div class="hero">135    <div class="img">[IMG: Bus at station at dusk]</div>136    <div class="back-btn">137      <svg width="48" height="48" viewBox="0 0 48 48">138        <path d="M30 10 L16 24 L30 38" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>139      </svg>140    </div>141  </div>142 143  <!-- Agency header -->144  <div class="agency">145    <svg class="go-logo" viewBox="0 0 80 40">146      <circle cx="20" cy="20" r="16" fill="var(--green)"></circle>147      <circle cx="44" cy="20" r="16" fill="var(--green)"></circle>148      <rect x="62" y="10" width="16" height="20" rx="4" fill="var(--green)"></rect>149    </svg>150    <h1>GO Transit</h1>151  </div>152 153  <!-- Route card -->154  <div class="route-card">155    <div>156      <div class="timeline"></div>157    </div>158    <div>159      <div class="route-title">Durham College Oshawa GO</div>160 161      <div class="detail-row">162        <svg class="bus-icon" viewBox="0 0 64 40">163          <rect x="6" y="8" width="44" height="20" rx="4" fill="#9E9E9E"></rect>164          <rect x="10" y="12" width="16" height="8" fill="#FFFFFF"></rect>165          <rect x="30" y="12" width="16" height="8" fill="#FFFFFF"></rect>166          <circle cx="18" cy="34" r="4" fill="#9E9E9E"></circle>167          <circle cx="42" cy="34" r="4" fill="#9E9E9E"></circle>168        </svg>169        <div class="duration">1 hr 7 min <span class="mid-dot">·</span> Bus</div>170        <div class="pill">88</div>171      </div>172 173      <div class="show-stops">Show Stops174        <svg width="26" height="26" viewBox="0 0 24 24">175          <path d="M6 9 L12 15 L18 9" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>176        </svg>177      </div>178 179      <div class="dest">Crawford Dr. @ Harper Rd. Park & Ride</div>180    </div>181  </div>182 183  <!-- Information -->184  <div class="section">185    <h2>Information</h2>186 187    <div class="info-row">188      <div class="info-left">189        <h3>Frequency</h3>190        <p>Every 2 hours</p>191      </div>192      <div class="info-right"></div>193    </div>194 195    <div class="info-row">196      <div class="info-left">197        <h3>Pricing</h3>198        <p>Expect to pay</p>199      </div>200      <div class="info-right">$8 - $12</div>201    </div>202  </div>203 204  <!-- Map -->205  <div class="section map">206    <h2>Map</h2>207    <div class="img">[IMG: Map showing bus route path]</div>208  </div>209 210</div>211</body>212</html>