GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:10      radial-gradient(1200px 1400px at 30% 10%, rgba(40,40,40,0.7), rgba(8,8,8,0.9)),11      repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0.03) 2px 6px),12      #0e0e0f;13    color:#fff; font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; top:0; left:0; right:0; height:100px;19    padding:22px 28px; font-size:34px; display:flex; align-items:center; justify-content:space-between;20    color:#fff;21  }22  .right-icons{ display:flex; align-items:center; gap:26px; }23  .icon-sq svg{ width:44px; height:44px; opacity:0.9; }24 25  /* Date & weather */26  .date-block{27    position:absolute; left:72px; top:190px; color:#ffffff;28  }29  .date-block .big{ font-size:72px; font-weight:600; letter-spacing:0.5px; }30  .weather{ margin-top:26px; display:flex; align-items:center; gap:16px; color:#d6e6ff; font-size:40px; }31 32  /* App grid */33  .grid{ position:absolute; left:0; width:100%; top:1500px; display:flex; justify-content:space-around; }34  .app{ width:200px; text-align:center; color:#fff; }35  .circle{36    width:168px; height:168px; border-radius:50%; background:#fff;37    margin:0 auto; box-shadow: 0 8px 20px rgba(0,0,0,0.45); position:relative; display:flex; align-items:center; justify-content:center;38  }39  .label{ margin-top:22px; font-size:38px; letter-spacing:0.2px; }40 41  /* Dock icons */42  .dock{ position:absolute; left:0; right:0; top:1820px; display:flex; justify-content:space-evenly; padding:0 60px; }43  .dock .circle{ width:160px; height:160px; }44 45  /* Search pill */46  .search{47    position:absolute; left:50%; transform:translateX(-50%);48    bottom:140px; width:930px; height:116px; border-radius:58px;49    background:#323436; display:flex; align-items:center; justify-content:space-between;50    padding:0 34px; color:#cfd3d7;51    box-shadow: 0 8px 24px rgba(0,0,0,0.4) inset, 0 2px 10px rgba(0,0,0,0.4);52  }53  .search .left{ display:flex; align-items:center; gap:20px; }54  .g-dot{55    width:64px; height:64px; border-radius:50%; background:#fff; position:relative;56    display:flex; align-items:center; justify-content:center; overflow:hidden;57  }58  .g-dot::before{59    content:"G"; font-weight:700; font-size:40px;60    background: linear-gradient(90deg,#4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);61    -webkit-background-clip:text; background-clip:text; color:transparent;62  }63  .search .right{ display:flex; align-items:center; gap:26px; }64  .pill-icon{65    width:64px; height:64px; border-radius:34px; background:#3e4043; display:flex; align-items:center; justify-content:center;66  }67  /* Gesture bar */68  .gesture{69    position:absolute; left:50%; transform:translateX(-50%);70    bottom:36px; width:340px; height:12px; border-radius:8px; background:#cfd0d2; opacity:0.7;71  }72 73  /* Helper colors for icon glyphs */74  .clr-red{ fill:#EA4335; } .clr-yellow{ fill:#FBBC05; }75  .clr-green{ fill:#34A853; } .clr-blue{ fill:#4285F4; }76 77  /* Tiny notification dot */78  .notif-dot{79    position:absolute; right:16px; top:12px; width:30px; height:30px; border-radius:50%;80    background:#c39ef3; border:4px solid #fff;81  }82 83  .label-small{ font-size:34px; color:#eaeaea; margin-top:18px; }84 85</style>86</head>87<body>88<div id="render-target">89 90  <!-- STATUS BAR -->91  <div class="status-bar">92    <div class="left-time">10:40</div>93    <div class="right-icons">94      <!-- Wi-Fi -->95      <div class="icon-sq">96        <svg viewBox="0 0 24 24">97          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>98          <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>99          <path d="M9 16c1.5-1.5 4.5-1.5 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>100          <circle cx="12" cy="19" r="1.8" fill="#fff"/>101        </svg>102      </div>103      <!-- Ring/Bell -->104      <div class="icon-sq">105        <svg viewBox="0 0 24 24">106          <path d="M12 3c-2.8 0-5 2.2-5 5v3c0 .8-.3 1.5-.8 2L5 15h14l-1.2-2c-.5-.5-.8-1.2-.8-2V8c0-2.8-2.2-5-5-5z" fill="#fff"/>107          <circle cx="12" cy="20" r="2" fill="#fff"/>108        </svg>109      </div>110      <!-- Battery -->111      <div class="icon-sq">112        <svg viewBox="0 0 32 24">113          <rect x="2" y="4" width="24" height="16" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>114          <rect x="4" y="6" width="18" height="12" fill="#fff"/>115          <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>116        </svg>117      </div>118    </div>119  </div>120 121  <!-- DATE AND WEATHER -->122  <div class="date-block">123    <div class="big">Wed, Sep 27</div>124    <div class="weather">125      <svg width="44" height="44" viewBox="0 0 24 24">126        <path d="M15 3a7 7 0 1 0 6 11.5A8 8 0 1 1 15 3z" fill="#bcd8ff"/>127      </svg>128      <div>29°C</div>129    </div>130  </div>131 132  <!-- GRID OF APPS -->133  <div class="grid">134    <!-- Play Store -->135    <div class="app">136      <div class="circle">137        <svg viewBox="0 0 100 100" width="120" height="120">138          <polygon points="18,20 78,50 18,80" fill="#34A853"/>139          <polygon points="30,30 58,50 30,70" fill="#4285F4" opacity="0.9"/>140          <polygon points="58,50 72,42 72,58" fill="#FBBC05"/>141          <polygon points="18,20 30,30 30,70 18,80" fill="#EA4335"/>142        </svg>143        <div class="notif-dot"></div>144      </div>145      <div class="label">Play Store</div>146    </div>147 148    <!-- Gmail -->149    <div class="app">150      <div class="circle">151        <svg viewBox="0 0 100 100" width="120" height="120">152          <rect x="16" y="30" width="68" height="40" rx="8" fill="#fff" stroke="#d7d7d7"/>153          <path d="M16 35 L50 58 L84 35" fill="none" stroke="#EA4335" stroke-width="10" stroke-linecap="round" />154          <path d="M20 30 L50 50 L80 30" fill="none" stroke="#34A853" stroke-width="10" stroke-linecap="round"/>155          <path d="M20 70 L50 50 L80 70" fill="none" stroke="#4285F4" stroke-width="10" stroke-linecap="round"/>156        </svg>157      </div>158      <div class="label">Gmail</div>159    </div>160 161    <!-- Photos -->162    <div class="app">163      <div class="circle">164        <svg viewBox="0 0 100 100" width="120" height="120">165          <path d="M50 15a20 20 0 0 1 0 40V15z" fill="#EA4335"/>166          <path d="M85 50a20 20 0 0 1-40 0h40z" fill="#FBBC05"/>167          <path d="M50 85a20 20 0 0 1 0-40v40z" fill="#34A853"/>168          <path d="M15 50a20 20 0 0 1 40 0H15z" fill="#4285F4"/>169          <circle cx="50" cy="50" r="10" fill="#fff"/>170        </svg>171      </div>172      <div class="label">Photos</div>173    </div>174 175    <!-- YouTube -->176    <div class="app">177      <div class="circle">178        <svg viewBox="0 0 100 100" width="120" height="120">179          <rect x="18" y="32" width="64" height="36" rx="10" fill="#FF0000"/>180          <polygon points="46,38 68,50 46,62" fill="#fff"/>181        </svg>182      </div>183      <div class="label">YouTube</div>184    </div>185  </div>186 187  <!-- DOCK -->188  <div class="dock">189    <!-- Phone -->190    <div class="app" style="width:180px;">191      <div class="circle">192        <svg viewBox="0 0 100 100" width="110" height="110">193          <path d="M30 25c6 12 15 22 27 27l10-10c2-2 5-1 7 1l8 8c2 2 2 6-1 7-7 3-15 4-20 2C45 56 34 45 30 39c-2-5-1-13 2-20 1-3 5-3 7-1l8 8c2 2 3 5 1 7l-10 10z" fill="#34A853"/>194        </svg>195      </div>196    </div>197 198    <!-- Messages -->199    <div class="app" style="width:180px;">200      <div class="circle">201        <svg viewBox="0 0 100 100" width="110" height="110">202          <rect x="18" y="22" width="64" height="44" rx="12" fill="#1a73e8"/>203          <path d="M36 66l10-10h36v6a10 10 0 0 1-10 10H36z" fill="#1a73e8"/>204          <rect x="26" y="32" width="48" height="8" rx="4" fill="#fff" opacity="0.9"/>205        </svg>206      </div>207    </div>208 209    <!-- Chrome -->210    <div class="app" style="width:180px;">211      <div class="circle">212        <svg viewBox="0 0 100 100" width="110" height="110">213          <circle cx="50" cy="50" r="30" fill="#1a73e8"/>214          <circle cx="50" cy="50" r="15" fill="#6ec1ff"/>215          <path d="M50 16a34 34 0 0 1 29 17H50z" fill="#EA4335"/>216          <path d="M79 33a34 34 0 0 1-12 46L50 50z" fill="#FBBC05"/>217          <path d="M67 79a34 34 0 0 1-50-29h33z" fill="#34A853"/>218        </svg>219      </div>220    </div>221 222    <!-- Camera -->223    <div class="app" style="width:180px;">224      <div class="circle">225        <svg viewBox="0 0 100 100" width="110" height="110">226          <rect x="20" y="34" width="60" height="40" rx="8" fill="#757575"/>227          <rect x="32" y="24" width="20" height="12" rx="4" fill="#9e9e9e"/>228          <circle cx="50" cy="54" r="14" fill="#cfd8dc"/>229          <circle cx="50" cy="54" r="9" fill="#607d8b"/>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- SEARCH PILL -->236  <div class="search">237    <div class="left">238      <div class="g-dot"></div>239    </div>240    <div class="right">241      <div class="pill-icon">242        <!-- Microphone -->243        <svg width="30" height="30" viewBox="0 0 24 24">244          <rect x="9" y="4" width="6" height="10" rx="3" fill="#4CAF50"/>245          <path d="M6 12a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2" fill="none"/>246          <rect x="11" y="18" width="2" height="3" fill="#fff"/>247          <rect x="8" y="21" width="8" height="1.5" fill="#fff"/>248        </svg>249      </div>250      <div class="pill-icon">251        <!-- Camera -->252        <svg width="30" height="30" viewBox="0 0 24 24">253          <rect x="3" y="7" width="18" height="12" rx="3" fill="#FFC107"/>254          <rect x="8" y="5" width="6" height="3" rx="1" fill="#FFD54F"/>255          <circle cx="12" cy="13" r="4" fill="#1565C0"/>256        </svg>257      </div>258    </div>259  </div>260 261  <!-- GESTURE BAR -->262  <div class="gesture"></div>263 264</div>265</body>266</html>