GD-ML/AndroidCode
13.4k
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>No Trains Found</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F6F7FB;12 }13 14 /* Top App Bar */15 .appbar {16 position: absolute; top: 0; left: 0; width: 100%; background: #172A66; color: #fff;17 box-sizing: border-box;18 }19 .status {20 height: 90px; display: flex; align-items: center; justify-content: space-between;21 padding: 0 36px; font-weight: 600; letter-spacing: 0.5px;22 }23 .status .icons { display: flex; gap: 22px; align-items: center; }24 .title-area {25 padding: 8px 36px 30px 36px;26 display: grid; grid-template-columns: 60px 1fr 60px; align-items: center;27 column-gap: 20px;28 }29 .title-text h1 {30 margin: 0; font-size: 48px; line-height: 1.2; font-weight: 800;31 }32 .title-text p {33 margin: 10px 0 0 0; font-size: 30px; color: #c7d0ea;34 }35 .header-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }36 .header-icon svg { width: 44px; height: 44px; fill: none; stroke: #c7d0ea; stroke-width: 3; }37 38 /* Transport tabs on light background */39 .tabs-wrap {40 position: absolute; top: 270px; left: 0; width: 100%; background: #ffffff;41 border-top-left-radius: 22px; border-top-right-radius: 22px;42 box-shadow: 0 6px 18px rgba(0,0,0,0.08);43 }44 .tabs {45 display: flex; justify-content: space-around; align-items: center; padding: 38px 0 30px;46 }47 .tab { display: flex; flex-direction: column; align-items: center; color: #B9C0CF; font-size: 26px; }48 .tab svg { width: 64px; height: 64px; stroke: #B9C0CF; fill: none; stroke-width: 3; }49 .tab .underline { margin-top: 12px; width: 60px; height: 6px; border-radius: 3px; background: #E2E6EE; }50 .active .underline { background: #F46363; }51 52 .divider-red {53 width: 300px; height: 8px; background: #F46363; border-radius: 4px;54 margin: 0 0 0 36px;55 }56 57 /* Filter chips */58 .filters {59 padding: 40px 36px; display: flex; gap: 24px; flex-wrap: nowrap;60 }61 .chip {62 flex: 0 0 auto; padding: 26px 34px; border: 2px solid #D6DAE5; border-radius: 46px;63 color: #7B879E; font-size: 32px; display: flex; align-items: center; gap: 18px; background: #fff;64 }65 .chip svg { width: 34px; height: 34px; stroke: #9AA6BF; fill: none; stroke-width: 3; }66 67 /* Empty state */68 .empty {69 text-align: center; padding-top: 120px;70 }71 .img-placeholder {72 width: 520px; height: 360px; margin: 0 auto 40px;73 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;74 display: flex; align-items: center; justify-content: center; border-radius: 22px;75 font-size: 28px;76 }77 .empty h2 {78 margin: 0; font-size: 56px; color: #172A66; font-weight: 800;79 }80 .empty p {81 margin: 24px auto 0; width: 800px; font-size: 32px; color: #5A6786; line-height: 1.5;82 }83 84 /* Footer links */85 .footer {86 position: absolute; bottom: 120px; left: 0; width: 100%; text-align: center;87 color: #172A66; font-size: 34px;88 }89 .footer a { color: #172A66; font-weight: 800; text-decoration: none; }90 .footer span { color: #5A6786; font-weight: 500; }91 92 /* Bottom safe area bar */93 .bottom-bar {94 position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: #0E183F;95 }96 .home-indicator {97 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);98 width: 240px; height: 12px; background: #D6DAE5; border-radius: 8px; opacity: 0.8;99 }100</style>101</head>102<body>103<div id="render-target">104 <div class="appbar">105 <div class="status">106 <div>9:04</div>107 <div class="icons">108 <span>⬤</span>109 <span>◌</span>110 <span>✈</span>111 <span>•</span>112 <span>◎</span>113 <span>🔋 100%</span>114 </div>115 </div>116 <div class="title-area">117 <div class="header-icon">118 <!-- Back arrow -->119 <svg viewBox="0 0 24 24"><path d="M14 5l-7 7 7 7"/><path d="M21 12H7"/></svg>120 </div>121 <div class="title-text">122 <h1>New York, NY › New Hyde Park, NY</h1>123 <p>Wed, Nov 22, 1 passenger</p>124 </div>125 <div class="header-icon" style="justify-self:end;">126 <!-- Share icon -->127 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 12l8-6M8 12l8 6"/></svg>128 </div>129 </div>130 </div>131 132 <div class="tabs-wrap">133 <div class="tabs">134 <div class="tab active">135 <!-- Train icon -->136 <svg viewBox="0 0 24 24">137 <rect x="6" y="5" width="12" height="10" rx="3"></rect>138 <path d="M7 15l-2 3M17 15l2 3M8 9h8M9 12h2M13 12h2"></path>139 </svg>140 <div class="underline"></div>141 </div>142 <div class="tab">143 <!-- Bus icon -->144 <svg viewBox="0 0 24 24">145 <rect x="5" y="5" width="14" height="10" rx="2"></rect>146 <path d="M6 15l-2 3M18 15l2 3M7 9h10M8 12h2M14 12h2"></path>147 </svg>148 <div class="underline"></div>149 </div>150 <div class="tab">151 <!-- Plane icon -->152 <svg viewBox="0 0 24 24">153 <path d="M3 10l8 2 8-2-8-2-3-4M11 12l-3 8"></path>154 </svg>155 <div class="underline"></div>156 </div>157 </div>158 <div class="divider-red"></div>159 160 <div class="filters">161 <div class="chip">162 <!-- Sort/arrow icon -->163 <svg viewBox="0 0 24 24"><path d="M7 4v12M7 16l-3-4M7 16l3-4M14 8h6M14 12h6"/></svg>164 <span>Departure time</span>165 </div>166 <div class="chip">Stops</div>167 <div class="chip">Departure</div>168 <div class="chip">Arrival</div>169 </div>170 </div>171 172 <div class="empty">173 <div class="img-placeholder">[IMG: Scenic railway illustration]</div>174 <h2>No trains found</h2>175 <p>We are not able to find a train between these two places.</p>176 </div>177 178 <div class="footer">179 <a href="#">Our small print</a>, <a href="#">Terms of use</a> <span>and</span> <a href="#">Privacy Policy</a>180 </div>181 182 <div class="bottom-bar">183 <div class="home-indicator"></div>184 </div>185</div>186</body>187</html>