GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Search UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0; box-shadow:none;11 }12 /* Top status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:96px;15 background:#c63a3a; color:#fff; display:flex; align-items:center; justify-content:space-between;16 padding:0 28px; box-sizing:border-box; font-size:34px;17 }18 .status-icons { display:flex; gap:24px; align-items:center; }19 .top-appbar {20 position:absolute; top:96px; left:0; width:100%; height:320px; background:#c63a3a;21 }22 .search-row {23 position:absolute; top:28px; left:28px; right:28px; height:132px; display:flex; align-items:center; gap:22px;24 background:#ffffff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.18); padding:0 24px; box-sizing:border-box;25 }26 .search-input {27 flex:1; color:#9e9e9e; font-size:44px; letter-spacing:0.2px;28 display:flex; align-items:center;29 }30 .caret {31 width:2px; height:56px; background:#e57373; margin-right:16px;32 }33 .tabs {34 position:absolute; bottom:0; left:0; right:0; height:120px; display:flex; align-items:flex-end;35 padding:0 28px 0 28px; box-sizing:border-box; gap:40px; color:#fff;36 }37 .tab {38 font-size:36px; letter-spacing:1px; padding-bottom:26px; opacity:0.85;39 }40 .tab.active {41 opacity:1; border-bottom:6px solid #ffffff; padding-bottom:20px;42 }43 /* Content */44 .content {45 position:absolute; top:416px; left:0; right:0; bottom:900px; overflow:hidden; padding:0 32px; box-sizing:border-box;46 background:#fff;47 }48 .section-title {49 color:#d45151; font-size:40px; font-weight:500; margin:36px 0 16px 0;50 }51 .list {52 display:flex; flex-direction:column; gap:32px; margin-bottom:28px;53 }54 .list-item {55 display:flex; align-items:center; gap:28px; padding:8px 6px;56 }57 .item-text { font-size:44px; color:#222; }58 .divider { height:1px; background:#e0e0e0; margin:28px 0; }59 /* Floating action button */60 .fab {61 position:absolute; right:56px; top:1200px; width:132px; height:132px; border-radius:50%;62 background:#d24b4b; display:flex; justify-content:center; align-items:center;63 box-shadow:0 8px 16px rgba(0,0,0,0.25);64 }65 /* Keyboard mock */66 .keyboard {67 position:absolute; left:0; right:0; bottom:0; height:900px; background:#f2f3ea; border-top:1px solid #ddd;68 padding:22px 24px; box-sizing:border-box;69 }70 .kb-top {71 display:flex; gap:40px; align-items:center; padding:6px 0 20px 0; color:#555;72 font-size:38px;73 }74 .key-row { display:flex; gap:20px; margin:18px 0; }75 .key {76 width:84px; height:100px; background:#fff; border:1px solid #e0e0e0; border-radius:16px;77 display:flex; align-items:center; justify-content:center; font-size:40px; color:#222;78 }79 .key.wide { width:176px; }80 .key.space { flex:1; }81 .key.accent { background:#dceed7; }82 .home-indicator {83 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);84 width:240px; height:10px; background:#9e9e9e; border-radius:6px; opacity:0.5;85 }86 /* Simple icon styles */87 svg { display:block; }88 .icon-24 { width:48px; height:48px; }89 .icon-36 { width:72px; height:72px; }90 .icon-grey path, .icon-grey circle, .icon-grey rect { fill:#9e9e9e; stroke:#9e9e9e; }91 .icon-white path, .icon-white circle { fill:#fff; stroke:#fff; }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status bar -->98 <div class="status-bar">99 <div>1:10</div>100 <div class="status-icons">101 <!-- small status icons -->102 <svg class="icon-white" width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l1.5 3h3L14 7l1.2 3L12 8l-3.2 2L10 7 7.5 5h3z"/></svg>103 <svg class="icon-white" width="40" height="40" viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>104 <svg class="icon-white" width="40" height="40" viewBox="0 0 24 24"><path d="M3 7h18v10H3z"/></svg>105 <svg class="icon-white" width="40" height="40" viewBox="0 0 24 24"><path d="M17 7h2v10h-2zM5 7h10v10H5z"/></svg>106 </div>107 </div>108 109 <!-- App bar with search -->110 <div class="top-appbar">111 <div class="search-row">112 <!-- back arrow -->113 <svg class="icon-36" viewBox="0 0 24 24">114 <path fill="#c63a3a" d="M15.5 19l-7-7 7-7v14z"/>115 </svg>116 <div class="search-input">117 <div class="caret"></div>118 <span>Search 1,000,000+ Recipes</span>119 </div>120 </div>121 <div class="tabs">122 <div class="tab active">ALL</div>123 <div class="tab">MY RECIPES</div>124 <div class="tab">COOKS</div>125 </div>126 </div>127 128 <!-- Content list -->129 <div class="content">130 <div class="section-title">GET INSPIRED</div>131 <div class="list">132 <div class="list-item">133 <svg class="icon-36 icon-grey" viewBox="0 0 24 24">134 <path d="M5 3h14v14H5z"/><path d="M7 6h10v2H7zM7 9h6v2H7z" fill="#bdbdbd"/>135 </svg>136 <div class="item-text">Collections</div>137 </div>138 <div class="list-item">139 <svg class="icon-36 icon-grey" viewBox="0 0 24 24">140 <circle cx="12" cy="12" r="6"/><path d="M4 4l6 6" stroke="#9e9e9e" stroke-width="2" fill="none"/>141 </svg>142 <div class="item-text">Recently Viewed</div>143 </div>144 <div class="list-item">145 <svg class="icon-36 icon-grey" viewBox="0 0 24 24">146 <path d="M7 4l-3 4 3 4M17 4l3 4-3 4" stroke="#9e9e9e" stroke-width="2" fill="none"/>147 <circle cx="12" cy="12" r="3"/>148 </svg>149 <div class="item-text">Use Up Leftovers</div>150 </div>151 <div class="list-item">152 <svg class="icon-36 icon-grey" viewBox="0 0 24 24">153 <path d="M12 3c-2 3-2 5 0 7s2 4 0 7c4-3 6-7 4-11-1-2-3-3-4-3z"/>154 </svg>155 <div class="item-text">Recent Raves</div>156 </div>157 </div>158 159 <div class="divider"></div>160 161 <div class="section-title">BY COURSE</div>162 <div class="list">163 <div class="list-item" style="padding-left:92px;">164 <div class="item-text">Appetizers</div>165 </div>166 <div class="list-item" style="padding-left:92px;">167 <div class="item-text">Bread</div>168 </div>169 </div>170 </div>171 172 <!-- Floating action button -->173 <div class="fab">174 <svg class="icon-white" width="72" height="72" viewBox="0 0 24 24">175 <circle cx="11" cy="11" r="6"/>176 <path d="M16 16l5 5" stroke="#fff" stroke-width="2" fill="none"/>177 <path d="M11 8v6M8 11h6" stroke="#fff" stroke-width="2" fill="none"/>178 </svg>179 </div>180 181 <!-- Keyboard mock -->182 <div class="keyboard">183 <div class="kb-top">184 <div>[• •]</div>185 <div>☺</div>186 <div>GIF</div>187 <div>⚙</div>188 <div>G↔︎</div>189 <div>🎨</div>190 <div>🎙</div>191 </div>192 <div class="key-row">193 <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><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>194 </div>195 <div class="key-row">196 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>197 </div>198 <div class="key-row">199 <div class="key accent">⇧</div>200 <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>201 <div class="key wide">⌫</div>202 </div>203 <div class="key-row">204 <div class="key accent">?123</div>205 <div class="key accent">,</div>206 <div class="key">☺</div>207 <div class="key space"></div>208 <div class="key">.</div>209 <div class="key accent">210 <svg width="40" height="40" viewBox="0 0 24 24">211 <circle cx="11" cy="11" r="7" fill="#6bbf6a"/>212 <path d="M11 8v6M8 11h6" stroke="#2e7d32" stroke-width="2" fill="none"/>213 </svg>214 </div>215 </div>216 <div class="home-indicator"></div>217 </div>218 219</div>220</body>221</html>