GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe App UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Top red area (status + search) */14 .app-top {15 position: absolute; left: 0; top: 0; width: 1080px; height: 420px;16 background: #C54545; /* deep red */17 }18 .status-bar {19 height: 120px; color: #fff; font-size: 36px; line-height: 120px;20 padding: 0 36px; display: flex; justify-content: space-between; align-items: center;21 }22 .status-right { display: flex; gap: 22px; align-items: center; }23 .search-wrap {24 position: absolute; left: 24px; right: 24px; top: 150px; height: 120px;25 background: #ffffff; border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,0.1);26 display: flex; align-items: center; padding: 0 26px; gap: 22px;27 }28 .search-text {29 color: #9E9E9E; font-size: 40px; letter-spacing: 0.2px;30 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;31 }32 .caret {33 width: 2px; height: 60px; background: #D23F3F; margin-right: 14px;34 }35 .tabs {36 position: absolute; left: 0; top: 300px; width: 1080px; height: 120px;37 display: flex; align-items: center; justify-content: space-around; color: #fff;38 font-size: 34px; text-transform: uppercase;39 }40 .tab-item { opacity: 0.95; }41 .active-underline {42 position: absolute; left: 40px; bottom: 0; width: 180px; height: 8px;43 background: #ffffff; border-radius: 4px;44 }45 46 /* Content area */47 .content {48 position: absolute; left: 0; top: 420px; width: 1080px; bottom: 930px; /* leaves room for keyboard */49 background: #fff; overflow: hidden;50 padding: 24px 24px 0 24px;51 }52 .section-title {53 color: #D55C5C; font-size: 34px; font-weight: bold; text-transform: uppercase;54 margin: 18px 10px;55 }56 .list {57 margin-top: 10px;58 }59 .list-item {60 display: flex; align-items: center; gap: 28px;61 padding: 26px 10px; border-radius: 6px;62 }63 .list-item .label { font-size: 44px; color: #333; }64 .divider {65 width: 100%; height: 2px; background: #E6E6E6; margin: 24px 0;66 }67 68 /* Floating Action Button */69 .fab {70 position: absolute; right: 60px; bottom: 1060px;71 width: 140px; height: 140px; background: #D24848; border-radius: 50%;72 box-shadow: 0 10px 18px rgba(0,0,0,0.25);73 display: flex; justify-content: center; align-items: center;74 }75 76 /* Keyboard approximation */77 .keyboard {78 position: absolute; left: 0; bottom: 0; width: 1080px; height: 900px;79 background: #EEF0E8; border-top: 2px solid #E0E0E0;80 box-shadow: inset 0 2px 0 rgba(0,0,0,0.05);81 padding: 26px 20px;82 }83 .kb-top-row {84 display: flex; gap: 34px; align-items: center; margin-bottom: 26px;85 }86 .kb-pill {87 width: 92px; height: 92px; border-radius: 20px; background: #DFE8D4;88 }89 .kb-pill.dark { background: #B9D5A8; }90 .kb-top-icon {91 width: 92px; height: 92px; border-radius: 20px; background: #ffffff; border: 2px solid #D7D7D7;92 display: flex; justify-content: center; align-items: center; color: #555; font-size: 30px;93 }94 95 .kb-row {96 display: flex; gap: 12px; margin-bottom: 16px;97 }98 .key {99 flex: 1; height: 120px; background: #ffffff; border: 2px solid #E1E1E1; border-radius: 16px;100 display: flex; justify-content: center; align-items: center; font-size: 48px; color: #333;101 }102 .key.small { flex: 0 0 140px; }103 .key.space { flex: 1; height: 120px; }104 .key.green { background: #CBE5BD; }105 .gesture-bar {106 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);107 width: 360px; height: 10px; background: #9E9E9E; border-radius: 8px; opacity: 0.8;108 }109 110 /* Simple icon colors */111 .icon-grey { fill: #8C8C8C; }112 .icon-white { fill: #ffffff; }113 .icon-black { fill: #2B2B2B; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Top red area -->120 <div class="app-top">121 <div class="status-bar">122 <div>8:26</div>123 <div class="status-right">124 <!-- simple status icons -->125 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" class="icon-white"/></svg>126 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" class="icon-white"/></svg>127 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 6h8v2H8zm-2 5h12v2H6zm4 5h8v2H10z" class="icon-white"/></svg>128 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" class="icon-white"/><circle cx="4" cy="12" r="2" class="icon-white"/><circle cx="20" cy="12" r="2" class="icon-white"/></svg>129 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 8h12v8H6z" class="icon-white"/><path d="M18 8l2 2v4l-2 2z" class="icon-white" opacity="0.7"/></svg>130 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 20h12V4h-1v15H7V4H6z" class="icon-white"/></svg>131 </div>132 </div>133 134 <div class="search-wrap">135 <!-- back arrow -->136 <svg width="48" height="48" viewBox="0 0 24 24">137 <path d="M15.5 6l-6 6 6 6" class="icon-black" stroke="#2B2B2B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 <div class="caret"></div>140 <div class="search-text">Search 1,000,000+ Recipes</div>141 </div>142 143 <div class="tabs">144 <div class="tab-item">ALL</div>145 <div class="tab-item">MY RECIPES</div>146 <div class="tab-item">COOKS</div>147 <div class="active-underline"></div>148 </div>149 </div>150 151 <!-- Content list -->152 <div class="content">153 <div class="section-title">Get Inspired</div>154 <div class="list">155 <div class="list-item">156 <!-- collections icon (stacked) -->157 <svg width="70" height="70" viewBox="0 0 24 24" class="icon-grey">158 <path d="M4 5h14v3H4zM4 10h14v3H4zM4 15h14v3H4z"/>159 </svg>160 <div class="label">Collections</div>161 </div>162 <div class="list-item">163 <!-- eye icon -->164 <svg width="70" height="70" viewBox="0 0 24 24" class="icon-grey">165 <path d="M12 5C7 5 3.2 8 2 12c1.2 4 5 7 10 7s8.8-3 10-7c-1.2-4-5-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>166 </svg>167 <div class="label">Recently Viewed</div>168 </div>169 <div class="list-item">170 <!-- recycle icon -->171 <svg width="70" height="70" viewBox="0 0 24 24" class="icon-grey">172 <path d="M7 7l3-3 3 3-2 1 2 3H8L6 8l1-1zM17 17l-3 3-3-3 2-1-2-3h5l2 2-1 1z"/>173 </svg>174 <div class="label">Use Up Leftovers</div>175 </div>176 <div class="list-item">177 <!-- flame icon -->178 <svg width="70" height="70" viewBox="0 0 24 24" class="icon-grey">179 <path d="M12 3c2 3-1 4 2 7 3 3 4 5 1 8-2 2-6 2-8 0-3-3-2-6 1-9 2-2 2-3 4-6z"/>180 </svg>181 <div class="label">Recent Raves</div>182 </div>183 </div>184 185 <div class="divider"></div>186 187 <div class="section-title">By Course</div>188 <div class="list">189 <div class="list-item"><div style="width:70px"></div><div class="label">Appetizers</div></div>190 <div class="list-item"><div style="width:70px"></div><div class="label">Bread</div></div>191 </div>192 </div>193 194 <!-- Floating action button -->195 <div class="fab">196 <svg width="70" height="70" viewBox="0 0 24 24">197 <circle cx="10" cy="10" r="6" fill="#fff"/>198 <path d="M21 21l-6-6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>199 <path d="M10 7v6M7 10h6" stroke="#D24848" stroke-width="2" stroke-linecap="round"/>200 </svg>201 </div>202 203 <!-- Keyboard -->204 <div class="keyboard">205 <div class="kb-top-row">206 <div class="kb-pill dark"></div>207 <div class="kb-top-icon">☺</div>208 <div class="kb-top-icon">GIF</div>209 <div class="kb-top-icon">⚙</div>210 <div class="kb-top-icon">Gᵀ</div>211 <div class="kb-top-icon">🎨</div>212 <div class="kb-top-icon">🎤</div>213 </div>214 215 <!-- qwerty row -->216 <div class="kb-row">217 <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>218 <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>219 </div>220 <!-- asdf row -->221 <div class="kb-row" style="padding: 0 30px;">222 <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>223 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>224 </div>225 <!-- zxc row -->226 <div class="kb-row" style="padding: 0 84px;">227 <div class="key green">⇧</div>228 <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>229 <div class="key green">⌫</div>230 </div>231 <!-- bottom row -->232 <div class="kb-row" style="padding: 0 20px;">233 <div class="key green small">?123</div>234 <div class="key small">,</div>235 <div class="key small">☺</div>236 <div class="key space"></div>237 <div class="key small">.</div>238 <div class="key green small">🔎</div>239 </div>240 241 <div class="gesture-bar"></div>242 </div>243 244</div>245</body>246</html>