GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Departure Input Screen</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width:1080px; height:2400px;11 overflow:hidden;12 background:#FFFFFF;13 }14 /* Status bar */15 .status-bar {16 position:absolute; left:0; top:0; width:100%; height:90px;17 padding:0 36px;18 display:flex; align-items:center; justify-content:space-between;19 color:#1a1a1a; font-weight:600; font-size:36px;20 }21 .status-icons { display:flex; gap:26px; align-items:center; }22 .icon { width:34px; height:34px; }23 /* Header */24 .header {25 position:absolute; top:90px; left:0; width:100%;26 padding:32px 40px 10px 40px;27 }28 .header-row {29 display:flex; align-items:center; gap:24px;30 }31 .btn-close {32 width:64px; height:64px; border-radius:50%;33 display:flex; align-items:center; justify-content:center; cursor:default;34 }35 .title {36 font-size:72px; font-weight:800; color:#15265E; letter-spacing:0.5px;37 }38 /* Search field */39 .search-area {40 margin-top:34px;41 }42 .search-input {43 height:130px; border:2px solid #c9ced9; border-radius:28px;44 display:flex; align-items:center;45 padding:0 28px;46 color:#8b92a2;47 font-size:40px;48 background:#F3F4F7;49 }50 .search-icon {51 width:56px; height:56px; border:3px solid #b7bdd0; border-radius:50%;52 margin-right:24px; position:relative;53 }54 .search-icon::after {55 content:''; position:absolute; right:-10px; bottom:-8px;56 width:18px; height:18px; border-right:3px solid #b7bdd0; border-bottom:3px solid #b7bdd0;57 transform:rotate(45deg);58 }59 /* Use location */60 .use-location {61 display:flex; align-items:center; gap:22px;62 margin-top:44px; margin-left:10px;63 color:#E05656; font-weight:700; font-size:44px;64 }65 .pin {66 width:42px; height:42px;67 }68 .divider {69 width:100%; height:2px; background:#E6E6E6; margin-top:34px;70 }71 /* Keyboard mock */72 .keyboard {73 position:absolute; left:0; bottom:0; width:100%; height:880px;74 background:#231F1D;75 box-shadow:0 -4px 12px rgba(0,0,0,0.25) inset;76 padding:28px 22px 26px;77 color:#EFE6DE;78 }79 .kb-tools {80 display:flex; align-items:center; justify-content:space-between;81 padding:0 20px; margin-bottom:16px;82 }83 .tool {84 width:68px; height:68px; border-radius:16px;85 background:#2D2724; display:flex; align-items:center; justify-content:center;86 color:#CFC6BF; font-size:28px;87 }88 .keys { margin-top:14px; }89 .row {90 display:flex; gap:16px; justify-content:center; margin:14px 0;91 }92 .key {93 background:#2B2522; color:#F7EFE8; min-width:88px; height:120px;94 border-radius:22px; display:flex; align-items:center; justify-content:center;95 font-size:48px; box-shadow:inset 0 -2px 0 rgba(0,0,0,0.25);96 }97 .key.small { min-width:84px; }98 .key.wide { min-width:140px; }99 .key.space { flex:1; min-width:420px; }100 .bottom-row { padding:0 10px; }101 .enter { background:#F7D8BF; color:#2B2522; }102 .kb-bar {103 position:absolute; left:40px; right:40px; bottom:14px; height:12px;104 border-radius:8px; background:#D9D9D9;105 opacity:.8;106 }107 /* Placeholder subtle rounded corners like OS */108 .suggestion-bar {109 display:none;110 }111</style>112</head>113<body>114<div id="render-target">115 <!-- Status bar -->116 <div class="status-bar">117 <div>11:58</div>118 <div class="status-icons">119 <!-- minimal wifi and battery -->120 <svg class="icon" viewBox="0 0 24 24">121 <path fill="#333" d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>122 </svg>123 <svg class="icon" viewBox="0 0 24 24">124 <rect x="2" y="7" width="16" height="10" rx="2" ry="2" fill="#333"></rect>125 <rect x="19" y="10" width="3" height="4" rx="1" fill="#333"></rect>126 </svg>127 </div>128 </div>129 130 <!-- Header with close and title -->131 <div class="header">132 <div class="header-row">133 <div class="btn-close">134 <svg width="48" height="48" viewBox="0 0 24 24">135 <path d="M18 6L6 18M6 6l12 12" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"/>136 </svg>137 </div>138 <div class="title">Departure</div>139 </div>140 141 <div class="search-area">142 <div class="search-input">143 <div class="search-icon"></div>144 <div>City, station, airport or port</div>145 </div>146 </div>147 148 <div class="use-location">149 <svg class="pin" viewBox="0 0 24 24">150 <path fill="#E05656" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/>151 </svg>152 <div>Use location</div>153 </div>154 155 <div class="divider"></div>156 </div>157 158 <!-- Keyboard mock -->159 <div class="keyboard">160 <div class="kb-tools">161 <div class="tool">⌨</div>162 <div class="tool">😊</div>163 <div class="tool">GIF</div>164 <div class="tool">⚙</div>165 <div class="tool">翻</div>166 <div class="tool">🎨</div>167 <div class="tool">🎤</div>168 </div>169 170 <div class="keys">171 <div class="row">172 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>173 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>174 </div>175 <div class="row">176 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>177 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>178 </div>179 <div class="row">180 <div class="key wide">⇧</div>181 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>182 <div class="key wide">⌫</div>183 </div>184 <div class="row bottom-row">185 <div class="key wide">?123</div>186 <div class="key">,</div>187 <div class="key">🙂</div>188 <div class="key space"></div>189 <div class="key">.</div>190 <div class="key wide enter">✓</div>191 </div>192 </div>193 194 <div class="kb-bar"></div>195 </div>196</div>197</body>198</html>