GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: radial-gradient(1200px 900px at 250px 220px, #b9d8ff 0%, #7fa9da 30%, #0e1420 70%, #0a0f19 100%);10  }11  /* soft abstract blobs */12  #render-target::before {13    content: "";14    position: absolute; left: -120px; top: -220px;15    width: 900px; height: 900px; border-radius: 60%;16    background: radial-gradient(closest-side, rgba(200,230,255,0.85), rgba(40,70,140,0.55), rgba(9,12,18,0) 70%);17    filter: blur(2px); opacity: 0.95;18  }19  #render-target::after {20    content: "";21    position: absolute; right: -200px; top: -40px;22    width: 600px; height: 500px; border-radius: 40%;23    background: radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(25,35,50,0.6), rgba(10,15,22,0) 75%);24    filter: blur(1px); opacity: 0.7;25  }26 27  /* Status bar */28  .status-bar {29    position: absolute; top: 0; left: 0; right: 0; height: 110px;30    display: flex; align-items: center; justify-content: space-between;31    color: #ffffff; padding: 0 36px; font-size: 42px; letter-spacing: 0.3px;32    text-shadow: 0 1px 2px rgba(0,0,0,0.35);33  }34  .status-left { display: flex; align-items: center; gap: 22px; }35  .status-right { display: flex; align-items: center; gap: 28px; }36  .mini-badge {37    font-size: 36px; color: #ffffff; opacity: 0.85;38    border: 2px solid rgba(255,255,255,0.7);39    border-radius: 8px; padding: 2px 10px;40  }41  .status-icon { width: 42px; height: 42px; }42 43  /* Single app on top-left */44  .single-app {45    position: absolute; left: 60px; top: 230px; width: 220px; text-align: center;46    color: #ffffff; font-size: 42px;47  }48  .single-app .icon-circle {49    width: 170px; height: 170px; border-radius: 50%;50    background: #fff; border: 8px solid #ffffff;51    display: flex; align-items: center; justify-content: center;52    box-shadow: 0 12px 26px rgba(0,0,0,0.55); margin: 0 auto 24px;53  }54  .img-placeholder {55    width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center; color: #757575;57    font-size: 28px; text-align: center; padding: 6px;58    border-radius: 10px;59  }60 61  /* App grid rows */62  .row {63    position: absolute; left: 40px; width: 1000px;64    display: flex; justify-content: space-between; align-items: flex-start;65  }66  .row.row1 { top: 1650px; }67  .row.row2 { top: 1860px; }68  .app-item { width: 200px; text-align: center; color: #ffffff; }69  .icon-circle {70    width: 170px; height: 170px; border-radius: 50%;71    background: #ffffff; border: 10px solid #ffffff;72    display: flex; align-items: center; justify-content: center;73    box-shadow: 0 12px 26px rgba(0,0,0,0.55); margin: 0 auto 24px;74  }75  .label { font-size: 44px; opacity: 0.95; }76  .notif-dot {77    position: absolute; width: 36px; height: 36px; border-radius: 50%;78    background: #e6b8d8; border: 6px solid #ffffff; right: 14px; top: 6px;79    box-shadow: 0 3px 6px rgba(0,0,0,0.4);80  }81 82  /* Search bar */83  .search-bar {84    position: absolute; left: 80px; top: 2090px; width: 920px; height: 120px;85    background: #2d2f35; border-radius: 60px; display: flex; align-items: center;86    padding: 0 40px; box-shadow: 0 12px 30px rgba(0,0,0,0.6);87  }88  .search-left { display: flex; align-items: center; gap: 18px; }89  .search-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }90  .pill-icon {91    width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,0.08);92    display: flex; align-items: center; justify-content: center;93    border: 2px solid rgba(255,255,255,0.12);94  }95 96  /* Bottom gesture bar */97  .gesture {98    position: absolute; left: 460px; bottom: 38px; width: 160px; height: 14px;99    background: #cfd3d7; border-radius: 10px; opacity: 0.8;100  }101 102  /* Simple SVGs inside icons */103  .svg { width: 118px; height: 118px; }104  .svg.small { width: 44px; height: 44px; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div class="status-left">113      <div>9:25</div>114      <div class="mini-badge">M</div>115    </div>116    <div class="status-right">117      <!-- Wi-Fi -->118      <svg class="status-icon" viewBox="0 0 24 24">119        <path fill="#ffffff" d="M12 20c.9 0 1.5-.6 1.5-1.5S12.9 17 12 17s-1.5.6-1.5 1.5S11.1 20 12 20zm6.5-6.5c-3.6-3.6-9.4-3.6-13 0l1.7 1.7c2.9-2.9 6.7-2.9 9.6 0l1.7-1.7zm3.5-3.7c-5.6-5.6-14.7-5.6-20.3 0l1.7 1.7c4.7-4.7 12.3-4.7 17 0l1.6-1.7z"/>120      </svg>121      <!-- Battery -->122      <svg class="status-icon" viewBox="0 0 24 24">123        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"/>124        <rect x="20.5" y="10" width="2" height="4" fill="#ffffff"/>125      </svg>126    </div>127  </div>128 129  <!-- Single app top-left -->130  <div class="single-app">131    <div class="icon-circle">132      <div class="img-placeholder">[IMG: Workout Man]</div>133    </div>134    <div class="label" style="width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Home Work...</div>135  </div>136 137  <!-- Row 1 -->138  <div class="row row1">139    <!-- Play Store -->140    <div class="app-item">141      <div class="icon-circle" style="position: relative;">142        <svg class="svg" viewBox="0 0 64 64">143          <defs>144            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">145              <stop offset="0" stop-color="#00d2ff"/><stop offset="1" stop-color="#00a8f3"/>146            </linearGradient>147          </defs>148          <polygon points="10,12 46,32 10,52" fill="url(#g1)"/>149          <polygon points="10,12 22,22 10,26" fill="#00c853"/>150          <polygon points="10,52 22,42 10,38" fill="#ffeb3b"/>151          <polygon points="22,22 46,32 22,42" fill="#ff5252"/>152        </svg>153      </div>154      <div class="label">Play Store</div>155    </div>156 157    <!-- Photos -->158    <div class="app-item">159      <div class="icon-circle">160        <svg class="svg" viewBox="0 0 64 64">161          <circle cx="24" cy="24" r="14" fill="#f44336"/>162          <circle cx="40" cy="24" r="14" fill="#2196f3"/>163          <circle cx="24" cy="40" r="14" fill="#ffeb3b"/>164          <circle cx="40" cy="40" r="14" fill="#4caf50"/>165        </svg>166      </div>167      <div class="label">Photos</div>168    </div>169 170    <!-- Gmail -->171    <div class="app-item" style="position: relative;">172      <div class="icon-circle" style="position: relative;">173        <svg class="svg" viewBox="0 0 64 64">174          <rect x="10" y="18" width="44" height="28" rx="6" fill="#ffffff" stroke="#e0e0e0" stroke-width="3"/>175          <path d="M12 20 L32 34 L52 20" fill="none" stroke="#ea4335" stroke-width="6" stroke-linejoin="round"/>176          <path d="M12 48 V22 L32 36 L52 22 V48" fill="none" stroke="#34a853" stroke-width="6" stroke-linejoin="round"/>177          <path d="M12 22 L32 36 L52 22" fill="none" stroke="#fbbc05" stroke-width="6"/>178          <path d="M12 48 L12 22" stroke="#4285f4" stroke-width="6"/>179          <path d="M52 48 L52 22" stroke="#ea4335" stroke-width="6"/>180        </svg>181        <div class="notif-dot"></div>182      </div>183      <div class="label">Gmail</div>184    </div>185 186    <!-- YouTube -->187    <div class="app-item">188      <div class="icon-circle">189        <svg class="svg" viewBox="0 0 64 64">190          <rect x="10" y="18" width="44" height="28" rx="8" fill="#ff0000"/>191          <polygon points="27,24 27,40 42,32" fill="#ffffff"/>192        </svg>193      </div>194      <div class="label">YouTube</div>195    </div>196  </div>197 198  <!-- Row 2 (Dock) -->199  <div class="row row2">200    <!-- Phone -->201    <div class="app-item">202      <div class="icon-circle">203        <svg class="svg" viewBox="0 0 64 64">204          <path d="M20 16c-2 2-4 5-2 10 2 5 7 11 12 14 5 3 9 4 12 2 2-2 3-4 2-5l-8-6c-1-1-3 0-4 1l-3 3c-2-1-5-4-6-6l3-3c1-1 2-3 1-4l-6-8c-1-1-3 0-5 2z"205                fill="#4285f4"/>206        </svg>207      </div>208    </div>209 210    <!-- Messages -->211    <div class="app-item">212      <div class="icon-circle">213        <svg class="svg" viewBox="0 0 64 64">214          <rect x="12" y="12" width="40" height="30" rx="10" fill="#3c78ff"/>215          <rect x="18" y="20" width="28" height="6" rx="3" fill="#ffffff" opacity="0.9"/>216          <path d="M22 44 L26 38 H40" stroke="#3c78ff" stroke-width="6" fill="none"/>217        </svg>218      </div>219    </div>220 221    <!-- Chrome -->222    <div class="app-item">223      <div class="icon-circle">224        <svg class="svg" viewBox="0 0 64 64">225          <circle cx="32" cy="32" r="26" fill="#4caf50"/>226          <path d="M32 6 A26 26 0 0 1 58 32 H32 Z" fill="#f44336"/>227          <path d="M6 32 A26 26 0 0 1 32 6 L44 28 Z" fill="#ffeb3b"/>228          <circle cx="32" cy="32" r="12" fill="#1e88e5" stroke="#ffffff" stroke-width="4"/>229        </svg>230      </div>231    </div>232 233    <!-- Camera -->234    <div class="app-item">235      <div class="icon-circle">236        <svg class="svg" viewBox="0 0 64 64">237          <rect x="10" y="20" width="44" height="26" rx="8" fill="#9ea7b3"/>238          <rect x="22" y="10" width="20" height="10" rx="4" fill="#737b88"/>239          <circle cx="32" cy="33" r="10" fill="#374151"/>240          <circle cx="32" cy="33" r="6" fill="#8ab4f8"/>241        </svg>242      </div>243    </div>244  </div>245 246  <!-- Search bar -->247  <div class="search-bar">248    <div class="pill-icon">249      <!-- Google G -->250      <svg class="svg small" viewBox="0 0 24 24">251        <path fill="#4285F4" d="M12 12h10c0 5.5-4.5 10-10 10-5.5 0-10-4.5-10-10s4.5-10 10-10c2.4 0 4.6.8 6.3 2.2l-2.6 3.1C14.7 6.4 13.4 6 12 6 8.7 6 6 8.7 6 12s2.7 6 6 6c3 0 5.5-2.2 5.9-5h-5.9z"/>252        <path fill="#34A853" d="M3.5 8.5L7 11c.8-2.5 3.1-4 5.5-4V6c-3.3 0-6.2 2.1-7.5 5z"/>253        <path fill="#FBBC05" d="M6 12c0 .7.1 1.4.3 2L3.5 15.6C2.7 14.1 2.4 13.1 2.4 12s.3-2.1 1.1-3.6L6.3 10c-.2.6-.3 1.3-.3 2z"/>254        <path fill="#EA4335" d="M12 6v4h5.9c-.4-2.2-1.9-3.9-3.7-4.9L12 6z"/>255      </svg>256    </div>257    <div class="search-left" style="color:#bfc6ce; font-size:44px; margin-left: 8px;">258      <span>Search</span>259    </div>260    <div class="search-right">261      <div class="pill-icon">262        <!-- Mic -->263        <svg class="svg small" viewBox="0 0 24 24">264          <rect x="9" y="4" width="6" height="10" rx="3" fill="#34A853"/>265          <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.8"/>266          <rect x="11" y="18" width="2" height="3" fill="#ffffff"/>267          <rect x="8" y="21" width="8" height="1.8" rx="1" fill="#ffffff"/>268        </svg>269      </div>270      <div class="pill-icon">271        <!-- Camera/Lens -->272        <svg class="svg small" viewBox="0 0 24 24">273          <rect x="5" y="7" width="14" height="10" rx="3" fill="#fbbc05"/>274          <circle cx="12" cy="12" r="4" fill="#4285f4"/>275          <rect x="9" y="4" width="6" height="3" rx="1.5" fill="#ea4335"/>276        </svg>277      </div>278    </div>279  </div>280 281  <!-- Bottom gesture indicator -->282  <div class="gesture"></div>283 284</div>285</body>286</html>