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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    border-radius: 0;15    /* Dark textured-ish wallpaper approximation */16    background:17      radial-gradient(1200px 1000px at 20% 15%, rgba(70,70,80,0.35), transparent 60%),18      radial-gradient(1400px 1200px at 80% 30%, rgba(40,40,48,0.4), transparent 60%),19      radial-gradient(800px 900px at 50% 80%, rgba(55,55,60,0.35), transparent 60%),20      linear-gradient(180deg, #1b1e22 0%, #0f1114 100%);21    color: #fff;22  }23 24  /* Status bar */25  .status-left {26    position: absolute; top: 32px; left: 36px;27    display: flex; align-items: center; gap: 24px;28    color: #fff; opacity: 0.95;29  }30  .time { font-weight: 600; font-size: 44px; letter-spacing: 0.5px; }31 32  .status-right {33    position: absolute; top: 32px; right: 36px;34    display: flex; align-items: center; gap: 28px;35    color: #fff; opacity: 0.95;36  }37  .status-icon svg, .status-left svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; }38 39  /* Date and weather widget */40  .date {41    position: absolute; left: 72px; top: 440px;42    font-size: 88px; font-weight: 600;43    text-shadow: 0 2px 4px rgba(0,0,0,0.3);44  }45  .weather {46    position: absolute; left: 78px; top: 620px;47    display: flex; align-items: center; gap: 22px;48    font-size: 40px; color: #e9eef7;49  }50  .weather .dot { width: 28px; height: 28px; border-radius: 50%; background: #ffd100; box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset; }51 52  /* App grid */53  .row {54    position: absolute; left: 56px; right: 56px;55    display: flex; justify-content: space-between; align-items: flex-start;56  }57  .row.row-1 { top: 1480px; }58  .row.row-2 { top: 1755px; }59 60  .app {61    width: 200px; text-align: center; color: #f5f5f5;62  }63  .icon-wrap {64    width: 170px; height: 170px; margin: 0 auto 20px;65    background: #ffffff; border-radius: 50%;66    display: flex; align-items: center; justify-content: center;67    box-shadow: 0 10px 24px rgba(0,0,0,0.35);68  }69  .label {70    font-size: 36px; font-weight: 500; letter-spacing: 0.2px;71    text-shadow: 0 2px 4px rgba(0,0,0,0.35);72  }73 74  /* Search pill */75  .search-pill {76    position: absolute; left: 64px; right: 64px; bottom: 170px;77    height: 118px; border-radius: 60px;78    background: rgba(60, 63, 67, 0.95);79    display: flex; align-items: center; padding: 0 36px;80    box-shadow: 0 14px 34px rgba(0,0,0,0.45) inset, 0 6px 22px rgba(0,0,0,0.4);81  }82  .pill-left {83    display: flex; align-items: center; gap: 24px; color: #e6e6e6; opacity: 0.95;84    font-size: 40px;85  }86  .pill-right {87    margin-left: auto; display: flex; align-items: center; gap: 28px;88  }89  .pill-icon { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }90 91  /* Gesture handle */92  .handle {93    position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%);94    width: 320px; height: 10px; border-radius: 8px;95    background: rgba(255,255,255,0.9);96  }97 98  /* Utility SVG sizes */99  .icon-wrap svg { width: 90px; height: 90px; }100 101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar left -->107  <div class="status-left">108    <div class="time">5:28</div>109    <!-- Search icon -->110    <svg viewBox="0 0 24 24" aria-label="search">111      <circle cx="11" cy="11" r="6"></circle>112      <line x1="16" y1="16" x2="21" y2="21"></line>113    </svg>114    <!-- Assistant/Maps placeholder icon -->115    <svg viewBox="0 0 24 24" aria-label="shortcut">116      <path d="M4 12a8 8 0 1 1 16 0v6a2 2 0 0 1-2 2h-4l-3 2v-2H8a2 2 0 0 1-2-2v-6z" fill="none"></path>117    </svg>118  </div>119 120  <!-- Status bar right -->121  <div class="status-right">122    <!-- Do not disturb -->123    <div class="status-icon">124      <svg viewBox="0 0 24 24" aria-label="dnd">125        <circle cx="12" cy="12" r="9"></circle>126        <line x1="7" y1="12" x2="17" y2="12"></line>127      </svg>128    </div>129    <!-- Wi‑Fi -->130    <div class="status-icon">131      <svg viewBox="0 0 24 24" aria-label="wifi">132        <path d="M2 9c5.5-5 14.5-5 20 0"></path>133        <path d="M5 12c4-3.5 10-3.5 14 0"></path>134        <path d="M8 15c2.5-2 5.5-2 8 0"></path>135        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"></circle>136      </svg>137    </div>138    <!-- Battery -->139    <div class="status-icon">140      <svg viewBox="0 0 26 24" aria-label="battery">141        <rect x="2" y="6" width="18" height="12" rx="2"></rect>142        <rect x="20" y="9" width="3" height="6" rx="1" fill="none"></rect>143      </svg>144    </div>145  </div>146 147  <!-- Date and Weather -->148  <div class="date">Mon, Dec 11</div>149  <div class="weather">150    <div class="dot"></div>151    <div>19°C</div>152  </div>153 154  <!-- App grid row 1 -->155  <div class="row row-1">156    <!-- Play Store -->157    <div class="app">158      <div class="icon-wrap">159        <svg viewBox="0 0 100 100" aria-label="Play Store">160          <defs>161            <clipPath id="roundClip">162              <circle cx="50" cy="50" r="45"></circle>163            </clipPath>164          </defs>165          <g clip-path="url(#roundClip)">166            <polygon points="22,20 72,50 22,80" fill="#34a853"></polygon>167            <polygon points="22,20 50,36 34,52" fill="#00a1f1"></polygon>168            <polygon points="22,80 50,64 34,48" fill="#fbbc05"></polygon>169            <polygon points="50,36 72,50 50,64" fill="#ea4335"></polygon>170          </g>171        </svg>172      </div>173      <div class="label">Play Store</div>174    </div>175 176    <!-- Gmail -->177    <div class="app">178      <div class="icon-wrap">179        <svg viewBox="0 0 100 100" aria-label="Gmail">180          <rect x="18" y="28" width="64" height="44" rx="8" fill="#fff" stroke="#e0e0e0" stroke-width="3"></rect>181          <path d="M18 34 L50 56 L82 34" fill="none" stroke="#ea4335" stroke-width="10" stroke-linecap="round"></path>182          <path d="M18 34 L50 56 L82 34" fill="none" stroke="#34a853" stroke-width="6" stroke-linecap="round" opacity="0.9"></path>183          <path d="M18 34 L18 72" stroke="#4285f4" stroke-width="10" stroke-linecap="round"></path>184          <path d="M82 34 L82 72" stroke="#fbbc05" stroke-width="10" stroke-linecap="round"></path>185        </svg>186      </div>187      <div class="label">Gmail</div>188    </div>189 190    <!-- Photos -->191    <div class="app">192      <div class="icon-wrap">193        <svg viewBox="0 0 100 100" aria-label="Photos">194          <path d="M50 12 a18 18 0 0 1 0 36 h-18 a18 18 0 1 0 18-36z" fill="#fbbc05"></path>195          <path d="M88 50 a18 18 0 0 1-36 0 v-18 a18 18 0 1 0 36 18z" fill="#4285f4"></path>196          <path d="M50 88 a18 18 0 0 1 0-36 h18 a18 18 0 1 0-18 36z" fill="#34a853"></path>197          <path d="M12 50 a18 18 0 0 1 36 0 v18 a18 18 0 1 0-36-18z" fill="#ea4335"></path>198          <circle cx="50" cy="50" r="8" fill="#ffffff"></circle>199        </svg>200      </div>201      <div class="label">Photos</div>202    </div>203 204    <!-- YouTube -->205    <div class="app">206      <div class="icon-wrap">207        <svg viewBox="0 0 100 100" aria-label="YouTube">208          <rect x="18" y="28" width="64" height="44" rx="12" fill="#ff0000"></rect>209          <polygon points="46,36 68,50 46,64" fill="#ffffff"></polygon>210        </svg>211      </div>212      <div class="label">YouTube</div>213    </div>214  </div>215 216  <!-- App grid row 2 -->217  <div class="row row-2">218    <!-- Phone -->219    <div class