GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Save to list UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #202124;16 }17 18 /* Status bar */19 .status-bar {20 height: 100px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 34px;26 color: #3c4043;27 }28 .status-left { display: flex; align-items: center; gap: 20px; }29 .status-right { display: flex; align-items: center; gap: 24px; }30 .status-icon { width: 36px; height: 36px; }31 32 /* Header */33 .header {34 height: 140px;35 display: flex;36 align-items: center;37 justify-content: center;38 position: relative;39 border-bottom: 1px solid #E0E0E0;40 }41 .header h1 {42 margin: 0;43 font-size: 48px;44 font-weight: 500;45 letter-spacing: 0.2px;46 }47 .header .done {48 position: absolute;49 right: 36px;50 top: 50%;51 transform: translateY(-50%);52 color: #1a73e8;53 font-size: 40px;54 font-weight: 500;55 }56 57 /* New list pill */58 .new-list {59 margin: 34px 36px;60 height: 120px;61 border: 1px solid #E0E0E0;62 border-radius: 60px;63 display: flex;64 align-items: center;65 justify-content: center;66 gap: 20px;67 color: #1a73e8;68 font-size: 40px;69 box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;70 }71 .new-list svg { width: 44px; height: 44px; }72 73 /* List */74 .list {75 margin-top: 6px;76 }77 .row {78 display: flex;79 align-items: center;80 padding: 32px 36px;81 border-top: 1px solid #E0E0E0;82 }83 .row:last-child { border-bottom: 1px solid #E0E0E0; }84 .icon-wrap {85 width: 72px;86 height: 72px;87 display: flex;88 align-items: center;89 justify-content: center;90 margin-right: 32px;91 }92 .text-wrap {93 flex: 1;94 }95 .title {96 font-size: 44px;97 margin: 0 0 6px 0;98 font-weight: 500;99 }100 .subtitle {101 font-size: 30px;102 color: #5f6368;103 }104 .checkbox {105 width: 64px;106 height: 64px;107 border: 3px solid #9aa0a6;108 border-radius: 10px;109 }110 111 /* Bottom gesture bar */112 .gesture {113 position: absolute;114 bottom: 32px;115 left: 50%;116 transform: translateX(-50%);117 width: 320px;118 height: 12px;119 background: #6e6e6e;120 border-radius: 8px;121 opacity: 0.8;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div class="status-left">131 <div>11:26</div>132 <!-- Simple timer icon -->133 <svg class="status-icon" viewBox="0 0 24 24">134 <circle cx="12" cy="12" r="10" fill="none" stroke="#5f6368" stroke-width="2"></circle>135 <path d="M12 6v6l4 2" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>136 </svg>137 </div>138 <div class="status-right">139 <!-- WiFi icon -->140 <svg class="status-icon" viewBox="0 0 24 24">141 <path d="M2 9c5-5 15-5 20 0" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>142 <path d="M6 13c3-3 9-3 12 0" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>143 <circle cx="12" cy="17" r="2" fill="#5f6368"></circle>144 </svg>145 <!-- Battery icon -->146 <svg class="status-icon" viewBox="0 0 24 24">147 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#5f6368" stroke-width="2"></rect>148 <rect x="19" y="10" width="2" height="4" fill="#5f6368"></rect>149 <rect x="5" y="8" width="12" height="8" fill="#5f6368"></rect>150 </svg>151 </div>152 </div>153 154 <!-- Header -->155 <div class="header">156 <h1>Save to list</h1>157 <div class="done">Done</div>158 </div>159 160 <!-- New list pill -->161 <div class="new-list">162 <svg viewBox="0 0 24 24">163 <path d="M12 5v14M5 12h14" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"></path>164 </svg>165 <div>New list</div>166 </div>167 168 <!-- List items -->169 <div class="list">170 <!-- Travel plans -->171 <div class="row">172 <div class="icon-wrap">173 <svg width="72" height="72" viewBox="0 0 24 24">174 <rect x="5" y="8" width="14" height="11" rx="2" ry="2" fill="none" stroke="#1a73e8" stroke-width="2"></rect>175 <rect x="9" y="5" width="6" height="3" rx="1" ry="1" fill="none" stroke="#1a73e8" stroke-width="2"></rect>176 </svg>177 </div>178 <div class="text-wrap">179 <p class="title">Travel plans</p>180 <div class="subtitle">Shared · 1 place</div>181 </div>182 <div class="checkbox"></div>183 </div>184 185 <!-- Want to go -->186 <div class="row">187 <div class="icon-wrap">188 <svg width="72" height="72" viewBox="0 0 24 24">189 <path d="M6 4v16" stroke="#1a8e3f" stroke-width="2" stroke-linecap="round"></path>190 <path d="M6 5h10l-4 4 4 4H6" fill="#1a8e3f"></path>191 </svg>192 </div>193 <div class="text-wrap">194 <p class="title">Want to go</p>195 <div class="subtitle">Private · 2 places</div>196 </div>197 <div class="checkbox"></div>198 </div>199 200 <!-- Favourites -->201 <div class="row">202 <div class="icon-wrap">203 <svg width="72" height="72" viewBox="0 0 24 24">204 <path d="M12 21s-7-4.5-7-10a4 4 0 017-2 4 4 0 017 2c0 5.5-7 10-7 10z" fill="none" stroke="#d81b60" stroke-width="2"></path>205 </svg>206 </div>207 <div class="text-wrap">208 <p class="title">Favourites</p>209 <div class="subtitle">Private · 0 places</div>210 </div>211 <div class="checkbox"></div>212 </div>213 214 <!-- Starred places -->215 <div class="row">216 <div class="icon-wrap">217 <svg width="72" height="72" viewBox="0 0 24 24">218 <path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="none" stroke="#ef6c00" stroke-width="2" stroke-linejoin="round"></path>219 </svg>220 </div>221 <div class="text-wrap">222 <p class="title">Starred places</p>223 <div class="subtitle">Private · 0 places</div>224 </div>225 <div class="checkbox"></div>226 </div>227 </div>228 229 <div class="gesture"></div>230</div>231</body>232</html>