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>Android Home Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #8F8F8F;20  }21 22  /* Top status bar */23  .statusbar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 140px;29    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.0));30    color: #fff;31  }32  .status-left {33    position: absolute;34    left: 48px;35    top: 40px;36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .status-left .time {41    font-size: 40px;42    font-weight: 500;43    letter-spacing: 0.5px;44  }45  .status-right {46    position: absolute;47    right: 32px;48    top: 44px;49    display: flex;50    align-items: center;51    gap: 32px;52  }53  .status-icon svg {54    width: 48px;55    height: 48px;56  }57 58  /* App icon circles and labels */59  .app {60    position: absolute;61    width: 170px;62    text-align: center;63    color: #EDEDED;64    text-shadow: 0 1px 0 rgba(0,0,0,0.45);65  }66  .icon-circle {67    width: 170px;68    height: 170px;69    border-radius: 50%;70    background: #FFFFFF;71    box-shadow: 0 6px 14px rgba(0,0,0,0.35);72    display: flex;73    align-items: center;74    justify-content: center;75    margin: 0 auto 16px auto;76  }77  .icon-circle svg {78    width: 110px;79    height: 110px;80    display: block;81  }82  .label {83    font-size: 34px;84    font-weight: 500;85  }86 87  /* Dock search pill */88  .search-dock {89    position: absolute;90    left: 90px;91    bottom: 190px;92    width: 900px;93    height: 120px;94    background: #2F2F33;95    border-radius: 60px;96    box-shadow: 0 10px 20px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);97    display: flex;98    align-items: center;99    padding: 0 34px;100    gap: 26px;101  }102  .search-dock .pill-sep {103    flex: 1;104  }105  .search-dock .dock-icon svg {106    width: 64px;107    height: 64px;108  }109 110  /* Gesture bar */111  .gesture {112    position: absolute;113    left: 450px; /* centered: (1080-180)/2 */114    bottom: 90px;115    width: 180px;116    height: 12px;117    background: #5C5C5C;118    border-radius: 8px;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar -->126  <div class="statusbar">127    <div class="status-left">128      <div class="time">8:07</div>129      <div class="status-icon">130        <!-- Cloud icon -->131        <svg viewBox="0 0 24 24">132          <path d="M6 15c-2.2 0-4-1.7-4-3.8S3.8 7.4 6 7.4c.6-2.2 2.7-3.7 4.9-3.2 1.7.4 2.9 1.7 3.3 3.4 2.1-.2 3.9 1.3 4.2 3.3.4 2.6-1.6 4.7-4.1 4.7H6z" fill="#FFFFFF" opacity="0.9"/>133        </svg>134      </div>135    </div>136    <div class="status-right">137      <div class="status-icon">138        <!-- Wi-Fi icon -->139        <svg viewBox="0 0 24 24">140          <path d="M3 9c4.9-4.3 13.1-4.3 18 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>141          <path d="M6 12c3.4-3 8.6-3 12 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>142          <path d="M9 15c2-1.8 4.9-1.8 6 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>143          <circle cx="12" cy="18" r="1.8" fill="#FFFFFF"/>144        </svg>145      </div>146      <div class="status-icon">147        <!-- Battery icon -->148        <svg viewBox="0 0 28 24">149          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>150          <rect x="23" y="9" width="3" height="6" rx="1" fill="#FFFFFF"/>151          <rect x="4" y="8" width="16" height="8" rx="1.5" fill="#FFFFFF"/>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Vimeo (large) -->158  <div class="app" style="left: 110px; top: 1540px;">159    <div class="icon-circle">160      <svg viewBox="0 0 100 100">161        <path d="M22 40c6-7 14-12 22-12 7 0 12 6 11 13-1 7-8 19-15 27-6 8-11 9-15 3-3-5-6-17-7-31 0-1 1-2 4-0z" fill="#16B6D4"/>162      </svg>163    </div>164    <div class="label">Vimeo</div>165  </div>166 167  <!-- Row 1 of apps -->168  <div class="app" style="left: 100px; top: 1755px;">169    <div class="icon-circle">170      <!-- Play Store -->171      <svg viewBox="0 0 100 100">172        <defs>173          <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">174            <stop offset="0" stop-color="#00C853"/>175            <stop offset="1" stop-color="#0091EA"/>176          </linearGradient>177        </defs>178        <polygon points="22,20 78,50 22,80" fill="url(#g1)"/>179        <polygon points="26,26 50,40 26,54" fill="#FFAB00" opacity="0.9"/>180        <polygon points="26,54 50,68 26,82" fill="#FF3D00" opacity="0.9"/>181      </svg>182    </div>183    <div class="label">Play Store</div>184  </div>185 186  <div class="app" style="left: 310px; top: 1755px;">187    <div class="icon-circle">188      <!-- Photos -->189      <svg viewBox="0 0 100 100">190        <circle cx="50" cy="30" r="18" fill="#F44336"/>191        <circle cx="70" cy="50" r="18" fill="#FFC107"/>192        <circle cx="50" cy="70" r="18" fill="#4CAF50"/>193        <circle cx="30" cy="50" r="18" fill="#2196F3"/>194        <circle cx="50" cy="50" r="8" fill="#FFFFFF"/>195      </svg>196    </div>197    <div class="label">Photos</div>198  </div>199 200  <div class="app" style="left: 520px; top: 1755px;">201    <div class="icon-circle">202      <!-- Gmail -->203      <svg viewBox="0 0 100 100">204        <rect x="18" y="28" width="64" height="44" rx="8" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="2"/>205        <path d="M20 32 L50 52 L80 32" stroke="#D32F2F" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206        <path d="M20 32 L20 68 M80 32 L80 68" stroke="#388E3C" stroke-width="8"/>207        <path d="M20 32 L50 52 L80 32" stroke="#FBC02D" stroke-width="6"/>208        <path d="M20 32 L50 52 L80 32" stroke="#1976D2" stroke-width="3"/>209      </svg>210    </div>211    <div class="label">Gmail</div>212  </div>213 214  <div class="app" style="left: 730px; top: 1755px;">215    <div class="icon-circle">216      <!-- YouTube -->217      <svg viewBox="0 0 100 100">218        <rect x="18" y="30" width="64" height="40" rx="12" fill="#FF0000"/>219        <polygon points="44,50 44,40 60,50 44,60" fill="#FFFFFF"/>220      </svg>221    </div>222    <div class="label">YouTube</div>223  </div>224 225  <!-- Row 2 of apps (dock icons above search) -->226  <div class="app" style="left: 100px; top: 1945px;">227    <div class="icon-circle">228      <!-- Phone -->229      <svg viewBox="0 0 100 100">230        <circle cx="50" cy="50" r="46" fill="#E8F0FE"/>231        <path d="M36 32c4-4 10-4 14 0l4 4c2 2 2 5 0 7l-4 4c3 6 8 10 14 13l4-4c2-2 5-2 7 0l4 4c4 4 4 10 0 14-3 3-7 4-11 3-22-5-40-23-45-45-1-4 0-8 3-11z" fill="#1A73E8"/>232      </svg>233    </div>234    <div class="label">Phone</div>235  </div>236 237  <div class="app" style="left: 310px; top: 1945px;">238    <div class="icon-circle">239      <!-- Messages -->240      <svg viewBox="0 0 100 100">241        <rect x="20" y="26" width="60" height="40" rx="12" fill="#2F7EF3"/>242        <rect x="28" y="34" width="36" height="10" rx="5" fill="#FFFFFF" opacity="0.95"/>243        <path d="M40 74l-8-8h28c8 0 12-6 12-14" fill="#2F7EF3"/>244      </svg>245    </div>246    <div class="label">Messages</div>247  </div>248 249  <div class="app" style="left: 520px; top: 1945px;">250    <div class="icon-circle">251      <!-- Chrome -->252      <svg viewBox="0 0 100 100">253        <circle cx="50" cy="50" r="38" fill="#F44336"/>254        <path d="M50 12a38 38 0 0 1 33 19H50z" fill="#FFEB3B"/>255        <path d="M17 49a38 38 0 0 1 18-33l15 26z" fill="#4CAF50"/>256        <circle cx="50" cy="50" r="18" fill="#1E88E5"/>257        <circle cx="50" cy="50" r="8" fill="#B3E5FC"/>258      </svg>259    </div>260    <div class="label">Chrome</div>261  </div>262 263  <div class="app" style="left: 730px; top: 1945px;">264    <div class="icon-circle">265      <!-- Camera -->266      <svg viewBox="0 0 100 100">267        <rect x="20" y="30" width="60" height="40" rx="10" fill="#EEEEEE" stroke="#BDBDBD" stroke-width="2"/>268        <circle cx="50" cy="50" r="14" fill="#1976D2"/>269        <circle cx="50" cy="50" r="6" fill="#BBDEFB"/>270        <rect x="30" y="24" width="18" height="10" rx="4" fill="#9E9E9E"/>271      </svg>272    </div>273    <div class="label">Camera</div>274  </div>275 276  <!-- Search dock -->277  <div class="search-dock">278    <div class="dock-icon">279      <!-- Simple colorful G -->280      <svg viewBox="0 0 64 64">281        <path d="M32 10c10 0 18 8 18 18 0 1 0 2 0 3H32v-8h18c-2-8-9-13-18-13-10 0-18 8-18 18s8 18 18 18c6 0 10-2 14-6l6 6c-6 6-13 9-20 9-16 0-28-12-28-27S16 10 32 10z" fill="#4285F4"/>282        <path d="M32 10c-7 0-13 3-17 9l7 6c2-4 6-7 10-7z" fill="#EA4335"/>283        <path d="M15 19c-2 4-3 9-1 14l9-3c-1-3 0-6 2-9z" fill="#FBBC05"/>284        <path d="M14 33c3 8 11 13 18 13 5 0 9-2 12-5l-7-6c-2 1-3 2-5 2-4 0-8-3-10-7z" fill="#34A853"/>285      </svg>286    </div>287    <div class="pill-sep"></div>288    <div class="dock-icon">289      <!-- Microphone -->290      <svg viewBox="0 0 64 64">291        <rect x="24" y="14" width="16" height="26" rx="8" fill="#1A73E8"/>292        <path d="M18 32c0 8 6 14 14 14s14-6 14-14" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>293        <path d="M32 46v8" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>294        <path d="M24 56h16" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>295      </svg>296    </div>297    <div class="dock-icon" style="margin-left:auto;">298      <!-- Google Lens camera icon -->299      <svg viewBox="0 0 64 64">300        <rect x="12" y="18" width="40" height="28" rx="10" fill="#202124"/>301        <circle cx="32" cy="32" r="10" fill="#1A73E8"/>302        <circle cx="32" cy="32" r="4" fill="#8AB4F8"/>303        <rect x="22" y="12" width="14" height="8" rx="4" fill="#5F6368"/>304        <circle cx="16" cy="32" r="6" fill="#34A853"/>305        <circle cx="48" cy="32" r="6" fill="#FBBC05"/>306        <circle cx="32" cy="20" r="6" fill="#EA4335"/>307        <circle cx="32" cy="44" r="6" fill="#4285F4"/>308      </svg>309    </div>310  </div>311 312  <!-- Gesture bar -->313  <div class="gesture"></div>314 315</div>316</body>317</html>