GD-ML/AndroidCode

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>Search Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f1f1f; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12  .status-bar {13    position: absolute; top: 0; left: 0; right: 0;14    height: 120px; display: flex; align-items: center; justify-content: space-between;15    padding: 0 48px; font-size: 36px; color: #3b3b3b;16  }17  .title-bar {18    position: relative;19    margin-top: 120px; padding: 40px 48px 16px 48px;20    display: flex; align-items: center; justify-content: space-between;21  }22  .title-text { font-size: 80px; font-weight: 800; letter-spacing: 0.2px; }23  .cart-icon svg { width: 64px; height: 64px; stroke: #1f1f1f; stroke-width: 4; fill: none; }24  .search-input {25    margin: 0 48px 20px 48px; height: 120px; border-radius: 32px;26    background: #f3f3f4; display: flex; align-items: center; padding: 0 36px; color: #767676;27  }28  .search-input svg { width: 48px; height: 48px; stroke: #767676; stroke-width: 4; fill: none; margin-right: 24px; }29  .search-input span { font-size: 42px; }30  .content { padding: 16px 0 320px 0; }31  .section-title {32    font-size: 52px; font-weight: 800; margin: 32px 48px 8px 48px;33  }34  .list { margin-top: 8px; }35  .row {36    height: 120px; display: flex; align-items: center; padding: 0 48px;37    border-top: 1px solid #e6e6e6;38  }39  .row:last-child { border-bottom: 1px solid #e6e6e6; }40  .row svg { width: 52px; height: 52px; stroke: #1f1f1f; stroke-width: 4; fill: none; margin-right: 28px; }41  .row .text { font-size: 44px; font-weight: 500; color: #222; }42  .divider { height: 1px; background: #e6e6e6; margin: 8px 0; }43  /* Bottom navigation */44  .home-indicator {45    position: absolute; bottom: 280px; left: 50%; transform: translateX(-50%);46    width: 420px; height: 18px; background: #9e9e9e; border-radius: 9px;47  }48  .tabbar {49    position: absolute; bottom: 0; left: 0; right: 0;50    height: 280px; background: #ffffff; border-top: 1px solid #e6e6e6;51    display: flex; align-items: center; justify-content: space-around; padding: 24px 0 28px;52  }53  .tab-item { width: 20%; text-align: center; }54  .tab-item svg { width: 72px; height: 72px; stroke-width: 4; fill: none; }55  .tab-label { margin-top: 16px; font-size: 36px; color: #3b3b3b; }56  .tab-active svg { stroke: #e53935; }57  .tab-active .tab-label { color: #e53935; font-weight: 700; }58</style>59</head>60<body>61<div id="render-target">62  <!-- Status Bar -->63  <div class="status-bar">64    <div>3:50</div>65    <div style="display:flex; align-items:center; gap:24px;">66      <!-- WiFi -->67      <svg viewBox="0 0 24 24">68        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0"/>69        <circle cx="12" cy="19" r="1.5" fill="#3b3b3b" stroke="none"/>70      </svg>71      <!-- Battery -->72      <svg viewBox="0 0 28 16">73        <rect x="1" y="2" width="22" height="12" rx="2" stroke="#3b3b3b"/>74        <rect x="3" y="4" width="14" height="8" fill="#3b3b3b" stroke="none"/>75        <rect x="24" y="5" width="3" height="6" rx="1" stroke="#3b3b3b"/>76      </svg>77    </div>78  </div>79 80  <!-- Title and Cart -->81  <div class="title-bar">82    <div class="title-text">Search</div>83    <div class="cart-icon">84      <svg viewBox="0 0 24 24">85        <path d="M3 5h3l2 10h10l2-8H7"/>86        <circle cx="10" cy="19" r="1.5"/>87        <circle cx="17" cy="19" r="1.5"/>88      </svg>89    </div>90  </div>91 92  <!-- Search Input -->93  <div class="search-input">94    <svg viewBox="0 0 24 24">95      <circle cx="10" cy="10" r="7"/>96      <path d="M15 15l6 6"/>97    </svg>98    <span>Search DoorDash</span>99  </div>100 101  <div class="content">102    <!-- Recently Viewed -->103    <div class="section-title">Recently Viewed</div>104    <div class="list">105      <div class="row">106        <svg viewBox="0 0 24 24">107          <circle cx="12" cy="12" r="9"/>108          <path d="M12 7v5l4 2"/>109        </svg>110        <div class="text">7-eleven</div>111      </div>112      <div class="row">113        <svg viewBox="0 0 24 24">114          <circle cx="12" cy="12" r="9"/>115          <path d="M12 7v5l4 2"/>116        </svg>117        <div class="text">gluten free restaurants</div>118      </div>119    </div>120 121    <!-- Top Searches -->122    <div class="section-title">Top Searches</div>123    <div class="list">124      <div class="row">125        <svg viewBox="0 0 24 24">126          <circle cx="10" cy="10" r="7"/>127          <path d="M15 15l6 6"/>128        </svg>129        <div class="text">Coffee</div>130      </div>131      <div class="row">132        <svg viewBox="0 0 24 24">133          <circle cx="10" cy="10" r="7"/>134          <path d="M15 15l6 6"/>135        </svg>136        <div class="text">Wings</div>137      </div>138      <div class="row">139        <svg viewBox="0 0 24 24">140          <circle cx="10" cy="10" r="7"/>141          <path d="M15 15l6 6"/>142        </svg>143        <div class="text">Tacos</div>144      </div>145      <div class="row">146        <svg viewBox="0 0 24 24">147          <circle cx="10" cy="10" r="7"/>148          <path d="M15 15l6 6"/>149        </svg>150        <div class="text">Milk</div>151      </div>152      <div class="row">153        <svg viewBox="0 0 24 24">154          <circle cx="10" cy="10" r="7"/>155          <path d="M15 15l6 6"/>156        </svg>157        <div class="text">Chips</div>158      </div>159    </div>160 161    <!-- Cuisines -->162    <div class="section-title">Cuisines</div>163    <div class="list">164      <div class="row">165        <!-- Utensils icon -->166        <svg viewBox="0 0 24 24">167          <path d="M6 3v8M4 3v8M8 3v8M6 11v10"/>168          <path d="M16 3c2 0 3 2 3 4s-1 4-3 4v10"/>169        </svg>170        <div class="text">Fast Food</div>171      </div>172      <div class="row">173        <svg viewBox="0 0 24 24">174          <path d="M6 3v8M4 3v8M8 3v8M6 11v10"/>175          <path d="M16 3c2 0 3 2 3 4s-1 4-3 4v10"/>176        </svg>177        <div class="text">Burgers</div>178      </div>179      <div class="row">180        <svg viewBox="0 0 24 24">181          <path d="M6 3v8M4 3v8M8 3v8M6 11v10"/>182          <path d="M16 3c2 0 3 2 3 4s-1 4-3 4v10"/>183        </svg>184        <div class="text">Breakfast</div>185      </div>186    </div>187  </div>188 189  <!-- Home Indicator -->190  <div class="home-indicator"></div>191 192  <!-- Bottom Tab Bar -->193  <div class="tabbar">194    <div class="tab-item">195      <!-- Home icon -->196      <svg viewBox="0 0 24 24" stroke="#3b3b3b">197        <path d="M3 10l9-7 9 7v10H3V10z"/>198        <path d="M9 21v-6h6v6"/>199      </svg>200      <div class="tab-label">Home</div>201    </div>202    <div class="tab-item">203      <!-- Pickup / walking icon -->204      <svg viewBox="0 0 24 24" stroke="#3b3b3b">205        <circle cx="12" cy="4" r="2"/>206        <path d="M12 6l-3 5-3 2"/>207        <path d="M12 6l3 5 3 2"/>208        <path d="M9 16l3-2 3 2v4"/>209      </svg>210      <div class="tab-label">Pickup</div>211    </div>212    <div class="tab-item tab-active">213      <!-- Search icon (active) -->214      <svg viewBox="0 0 24 24">215        <circle cx="10" cy="10" r="7"/>216        <path d="M15 15l6 6"/>217      </svg>218      <div class="tab-label">Search</div>219    </div>220    <div class="tab-item">221      <!-- Orders / bookmark -->222      <svg viewBox="0 0 24 24" stroke="#3b3b3b">223        <path d="M6 3h12v18l-6-4-6 4V3z"/>224      </svg>225      <div class="tab-label">Orders</div>226    </div>227    <div class="tab-item">228      <!-- Account / user -->229      <svg viewBox="0 0 24 24" stroke="#3b3b3b">230        <circle cx="12" cy="8" r="4"/>231        <path d="M4 21c0-4 4-7 8-7s8 3 8 7"/>232      </svg>233      <div class="tab-label">Account</div>234    </div>235  </div>236</div>237</body>238</html>