GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(#909090, #8c8c8c);13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 26px;20    left: 32px;21    width: 1016px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 36px;26    letter-spacing: 0.5px;27  }28  .sb-left {29    display: flex;30    align-items: center;31    gap: 24px;32  }33  .sb-icons { display: flex; align-items: center; gap: 22px; }34  .mini-icon {35    width: 34px; height: 34px;36    display: inline-flex; align-items: center; justify-content: center;37    color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px;38    font-size: 20px; line-height: 1;39  }40  .sb-right { display: flex; align-items: center; gap: 26px; }41 42  /* Date and weather */43  .date-widget {44    position: absolute;45    top: 150px;46    left: 72px;47  }48  .date-widget h1 {49    margin: 0 0 30px 0;50    font-size: 64px;51    font-weight: 600;52  }53  .weather {54    display: flex; align-items: center; gap: 20px;55    font-size: 36px;56    color: #eaeaea;57  }58 59  /* App dock */60  .app-dock {61    position: absolute;62    left: 90px;63    top: 1720px;64    width: 900px;65    display: flex;66    justify-content: space-between;67    align-items: center;68  }69  .app-icon {70    width: 180px; height: 180px; border-radius: 90px;71    background: #ffffff;72    box-shadow: 0 6px 16px rgba(0,0,0,0.25);73    display: flex; align-items: center; justify-content: center;74  }75  .app-icon svg { width: 120px; height: 120px; }76 77  /* Search bar */78  .search-bar {79    position: absolute;80    left: 66px;81    top: 2050px;82    width: 948px;83    height: 150px;84    background: #2f2f31;85    border-radius: 90px;86    box-shadow: 0 10px 22px rgba(0,0,0,0.35) inset;87    display: flex; align-items: center; justify-content: space-between;88    padding: 0 34px;89  }90  .search-left,91  .search-right { display: flex; align-items: center; gap: 28px; }92  .g-badge {93    width: 80px; height: 80px; border-radius: 40px; background: #1f1f20;94    display: inline-flex; align-items: center; justify-content: center;95  }96  .search-button {97    width: 80px; height: 80px; border-radius: 40px; background: #1f1f20;98    display: inline-flex; align-items: center; justify-content: center;99  }100 101  /* Home gesture bar */102  .home-indicator {103    position: absolute;104    left: 380px;105    top: 2318px;106    width: 320px;107    height: 12px;108    border-radius: 8px;109    background: #6e6e6e;110    opacity: 0.9;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="sb-left">120      <div class="time">7:02</div>121      <div class="sb-icons">122        <div class="mini-icon">M</div>123        <div class="mini-icon">G</div>124        <div class="mini-icon">▶</div>125      </div>126    </div>127    <div class="sb-right">128      <!-- Wi‑Fi icon -->129      <svg width="40" height="40" viewBox="0 0 40 40">130        <g fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.95">131          <path d="M6 16c6-6 22-6 28 0"/>132          <path d="M10 22c4-4 16-4 20 0"/>133          <path d="M15 28c3-3 8-3 11 0"/>134          <circle cx="20.5" cy="32" r="2.8" fill="#fff"/>135        </g>136      </svg>137      <!-- Battery icon -->138      <svg width="40" height="40" viewBox="0 0 40 40">139        <rect x="7" y="10" width="24" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"/>140        <rect x="10" y="13" width="18" height="10" rx="2" ry="2" fill="#fff"/>141        <rect x="31" y="15" width="4" height="6" rx="1" fill="#fff"/>142      </svg>143    </div>144  </div>145 146  <!-- Date and Weather -->147  <div class="date-widget">148    <h1>Fri, Sep 22</h1>149    <div class="weather">150      <svg width="70" height="32" viewBox="0 0 70 32">151        <g fill="none" stroke="#eaeaea" stroke-width="3" opacity="0.85">152          <path d="M4 8c6 5 12 5 18 0s12-5 18 0 12 5 18 0"/>153          <path d="M4 16c6 5 12 5 18 0s12-5 18 0 12 5 18 0"/>154          <path d="M4 24c6 5 12 5 18 0s12-5 18 0 12 5 18 0"/>155        </g>156      </svg>157      <span>32°C</span>158    </div>159  </div>160 161  <!-- App Dock -->162  <div class="app-dock">163    <!-- Phone -->164    <div class="app-icon">165      <svg viewBox="0 0 120 120">166        <defs>167          <linearGradient id="pBlue" x1="0" y1="0" x2="1" y2="1">168            <stop offset="0" stop-color="#4f79ff"/>169            <stop offset="1" stop-color="#2f55d6"/>170          </linearGradient>171        </defs>172        <path d="M32 26c20 16 39 35 62 66-6 5-12 9-18 8-14-18-28-32-46-46-2-6 0-18 2-28z" fill="url(#pBlue)" opacity="0.95"/>173        <path d="M30 24c-2 8-3 16 0 22 18 14 32 28 46 46 8 1 15-4 20-9-26-38-47-56-66-59z" fill="#3b73f1" opacity="0.75"/>174      </svg>175    </div>176 177    <!-- Messages -->178    <div class="app-icon">179      <svg viewBox="0 0 120 120">180        <rect x="20" y="24" width="80" height="58" rx="16" fill="#3778ff"/>181        <path d="M40 84l18-12h22c10 0 20-8 20-18" fill="#3778ff"/>182        <rect x="30" y="40" width="60" height="12" rx="6" fill="#a8c4ff" opacity="0.8"/>183      </svg>184    </div>185 186    <!-- Chrome -->187    <div class="app-icon">188      <svg viewBox="0 0 120 120">189        <circle cx="60" cy="60" r="52" fill="#ffffff"/>190        <path d="M60 8 A52 52 0 0 1 112 60 L78 60 Z" fill="#ea4335"/>191        <path d="M112 60 A52 52 0 0 1 60 112 L60 78 Z" fill="#fbbc05"/>192        <path d="M60 112 A52 52 0 0 1 8 60 L42 60 Z" fill="#34a853"/>193        <circle cx="60" cy="60" r="28" fill="#4285f4" stroke="#fff" stroke-width="6"/>194      </svg>195    </div>196 197    <!-- Camera -->198    <div class="app-icon">199      <svg viewBox="0 0 120 120">200        <rect x="22" y="40" width="76" height="48" rx="10" fill="#333c45"/>201        <rect x="34" y="30" width="24" height="14" rx="6" fill="#333c45"/>202        <circle cx="60" cy="64" r="18" fill="#5d88ff"/>203        <circle cx="60" cy="64" r="9" fill="#2f54ff"/>204      </svg>205    </div>206  </div>207 208  <!-- Google Search Bar -->209  <div class="search-bar">210    <div class="search-left">211      <div class="g-badge">212        <!-- Google "G" icon -->213        <svg width="60" height="60" viewBox="0 0 60 60">214          <circle cx="30" cy="30" r="28" fill="none"/>215          <path d="M30 12c8 0 14 4 17 11h-17v8h24c1-2 1-5 1-7 0-15-12-26-25-26-14 0-26 12-26 26s12 26 26 26c7 0 12-2 17-7l-7-6c-3 3-6 4-10 4-10 0-18-8-18-17s8-16 18-16z"216                fill="#4285f4"/>217          <path d="M30 12c8 0 14 4 17 11h-9c-3-4-6-6-8-6-10 0-18 8-18 17 0 4 2 8 5 11l-6 4C5 44 3 39 3 34 3 19 15 12 30 12z" fill="#34a853" opacity="0.9"/>218          <path d="M12 45l6-4c3 3 8 5 12 5 5 0 10-2 13-6l7 6c-6 6-13 9-21 9-8 0-15-3-17-10z" fill="#fbbc05" opacity="0.95"/>219          <path d="M47 23c1 2 2 5 2 8h-24v-8z" fill="#ea4335"/>220        </svg>221      </div>222    </div>223    <div class="search-right">224      <!-- Mic -->225      <div class="search-button">226        <svg width="42" height="42" viewBox="0 0 42 42">227          <g fill="none" stroke-width="3" stroke="#4caf50">228            <rect x="13" y="8" width="16" height="18" rx="8" fill="#4285f4" stroke="none"/>229            <path d="M10 20c0 8 6 12 11 12s11-4 11-12" stroke="#fff"/>230            <path d="M21 32v6" stroke="#fff"/>231          </g>232        </svg>233      </div>234      <!-- Lens / Camera -->235      <div class="search-button">236        <svg width="42" height="42" viewBox="0 0 42 42">237          <rect x="6" y="7" width="30" height="28" rx="8" fill="#ffffff" opacity="0.15"/>238          <rect x="7" y="8" width="28" height="26" rx="8" fill="#ff5252" opacity="0.4"/>239          <circle cx="21" cy="21" r="8" fill="#4285f4"/>240          <rect x="10" y="12" width="6" height="6" rx="2" fill="#34a853"/>241          <rect x="26" y="12" width="6" height="6" rx="2" fill="#fbbc05"/>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- Home Indicator -->248  <div class="home-indicator"></div>249 250</div>251</body>252</html>