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>Mobile Home Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1200px 1200px at 80% 20%, #627a69 0%, #546e60 35%, #4f6a5d 60%, #4a6659 100%);15  }16  /* Soft abstract curves to mimic wallpaper */17  #render-target:before, #render-target:after{18    content:"";19    position:absolute;20    border-radius: 50%;21    filter: blur(2px);22    opacity: .35;23    pointer-events: none;24  }25  #render-target:before{26    width: 1400px; height: 1900px;27    left: -200px; top: 200px;28    background: radial-gradient(closest-side, rgba(0,0,0,.25), rgba(0,0,0,0) 70%);29    transform: rotate(8deg);30  }31  #render-target:after{32    width: 1200px; height: 1600px;33    right: -250px; bottom: -200px;34    background: radial-gradient(closest-side, rgba(0,0,0,.25), rgba(0,0,0,0) 70%);35    transform: rotate(-18deg);36  }37 38  /* Status bar */39  .status-bar{40    position: absolute;41    top: 16px; left: 28px; right: 28px;42    height: 44px; color: #f3f6f4;43    display: flex; align-items: center; justify-content: space-between;44    font-size: 30px; letter-spacing: .5px;45    text-shadow: 0 1px 2px rgba(0,0,0,.35);46  }47  .status-left{ display:flex; align-items:center; gap:18px;}48  .status-icons{ display:flex; align-items:center; gap:14px; opacity:.9; }49  .tiny-dot{50    width: 16px; height: 16px; border-radius: 50%;51    background:#e9efe9; opacity:.85;52  }53  .status-right{ display:flex; align-items:center; gap:18px; }54  .status-svg{ width:34px; height:34px; fill:#eef2ee; }55 56  /* Date & weather widget */57  .widget{58    position: absolute;59    top: 290px; left: 72px;60    color: #ffffff;61    text-shadow: 0 2px 4px rgba(0,0,0,.5);62  }63  .widget .date{64    font-size: 64px; font-weight: 600; margin-bottom: 18px;65  }66  .widget .weather{67    display: flex; align-items: center; gap: 14px;68    font-size: 36px; font-weight: 500; opacity: .95;69  }70  .cloud-ico{ width: 48px; height: 48px; }71 72  /* App grid general */73  .apps-row{74    position: absolute;75    left: 0; right: 0;76    display: flex; justify-content: space-around; align-items: flex-start;77  }78  .apps-row.top{ top: 1480px; }79  .apps-row.dock{ top: 1780px; width: 100%; }80  .app{81    width: 190px; text-align: center; color: #e9f0eb;82    text-shadow: 0 1px 2px rgba(0,0,0,.45);83  }84  .icon{85    width: 148px; height: 148px; border-radius: 50%;86    background: #ffffff; display: grid; place-items: center;87    margin: 0 auto 18px auto; box-shadow: 0 8px 14px rgba(0,0,0,.25);88  }89  .label{ font-size: 32px; font-weight: 500; }90 91  /* Search bar */92  .search-bar{93    position: absolute; left: 72px; right: 72px; top: 1990px;94    height: 104px; background: #ffffff; border-radius: 52px;95    display: flex; align-items: center; padding: 0 28px;96    box-shadow: 0 10px 22px rgba(0,0,0,.28);97  }98  .search-input{99    flex: 1; color: #5a5a5a; font-size: 34px;100    padding-left: 16px;101  }102  .search-ico{ width: 64px; height: 64px; margin: 0 12px; }103 104  /* Gesture bar */105  .gesture{106    position: absolute; bottom: 24px; left: 50%;107    width: 240px; height: 10px; margin-left: -120px;108    border-radius: 8px; background: rgba(0,0,0,.45);109  }110 111  /* SVG helper sizes for inside app icons */112  .svg-90{ width: 96px; height: 96px; }113  .svg-110{ width: 110px; height: 110px; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div class="status-left">122      <div style="min-width:92px;">7:58</div>123      <div class="status-icons">124        <div class="tiny-dot"></div>125        <div class="tiny-dot"></div>126        <div class="tiny-dot"></div>127        <div class="tiny-dot"></div>128        <div class="tiny-dot" style="width:8px;height:8px;opacity:.7;"></div>129      </div>130    </div>131    <div class="status-right">132      <!-- WiFi -->133      <svg class="status-svg" viewBox="0 0 24 24">134        <path d="M12 20.5c.9 0 1.6-.7 1.6-1.6S12.9 17.3 12 17.3s-1.6.7-1.6 1.6.7 1.6 1.6 1.6zM3 9.5a13 13 0 0 1 18 0l-1.5 1.5a10.9 10.9 0 0 0-15 0L3 9.5zm4 4a7.7 7.7 0 0 1 10 0l-1.5 1.5a5.6 5.6 0 0 0-7 0L7 13.5z"/>135      </svg>136      <!-- Battery -->137      <svg class="status-svg" viewBox="0 0 24 24">138        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#eef2ee"></rect>139        <rect x="4" y="9" width="12" height="6" fill="#8ae48a"></rect>140        <rect x="20" y="10" width="2" height="4" rx="1" fill="#eef2ee"></rect>141      </svg>142    </div>143  </div>144 145  <!-- Date and Weather -->146  <div class="widget">147    <div class="date">Wed, Jul 19</div>148    <div class="weather">149      <svg class="cloud-ico" viewBox="0 0 48 48">150        <circle cx="20" cy="22" r="10" fill="#ffffff" opacity="0.95"></circle>151        <circle cx="30" cy="20" r="8" fill="#ffffff" opacity="0.95"></circle>152        <rect x="10" y="24" width="28" height="10" rx="5" fill="#ffffff" opacity="0.95"></rect>153      </svg>154      <span>29°C · Today 33° / 28° · Cloudy</span>155    </div>156  </div>157 158  <!-- Top Apps Row -->159  <div class="apps-row top">160    <!-- Play Store -->161    <div class="app">162      <div class="icon">163        <svg class="svg-110" viewBox="0 0 100 100">164          <polygon points="18,50 48,20 60,32 34,58" fill="#3ddc84"></polygon>165          <polygon points="60,32 82,44 66,50 48,68 34,58" fill="#34a853"></polygon>166          <polygon points="18,50 48,80 60,68 34,58" fill="#4285f4"></polygon>167          <polygon points="60,32 66,50 60,68 74,58 82,44" fill="#fbbc05"></polygon>168        </svg>169      </div>170      <div class="label">Play Store</div>171    </div>172 173    <!-- Gmail -->174    <div class="app">175      <div class="icon">176        <svg class="svg-110" viewBox="0 0 100 100">177          <rect x="16" y="28" width="68" height="44" rx="8" fill="#fff"></rect>178          <path d="M16 36 L50 58 L84 36" stroke="#ea4335" stroke-width="10" fill="none" stroke-linejoin="round"></path>179          <path d="M16 36 L16 72" stroke="#34a853" stroke-width="10"></path>180          <path d="M84 36 L84 72" stroke="#4285f4" stroke-width="10"></path>181          <path d="M50 58 L84 36" stroke="#fbbc05" stroke-width="10"></path>182        </svg>183      </div>184      <div class="label">Gmail</div>185    </div>186 187    <!-- Photos -->188    <div class="app">189      <div class="icon">190        <svg class="svg-110" viewBox="0 0 100 100">191          <circle cx="36" cy="36" r="20" fill="#fbbc05"></circle>192          <circle cx="64" cy="36" r="20" fill="#4285f4"></circle>193          <circle cx="36" cy="64" r="20" fill="#34a853"></circle>194          <circle cx="64" cy="64" r="20" fill="#ea4335"></circle>195          <circle cx="50" cy="50" r="12" fill="#ffffff"></circle>196        </svg>197      </div>198      <div class="label">Photos</div>199    </div>200 201    <!-- YouTube -->202    <div class="app">203      <div class="icon">204        <svg class="svg-110" viewBox="0 0 100 100">205          <rect x="18" y="28" width="64" height="44" rx="14" fill="#ff0000"></rect>206          <polygon points="44,36 44,64 66,50" fill="#ffffff"></polygon>207        </svg>208      </div>209      <div class="label">YouTube</div>210    </div>211  </div>212 213  <!-- Dock Row -->214  <div class="apps-row dock">215    <!-- Phone -->216    <div class="app">217      <div class="icon">218        <svg class="svg-90" viewBox="0 0 100 100">219          <path d="M28 32c8 18 22 32 40 40l8-8c3-3 8 0 10 3l6 10c2 4-1 8-5 9-10 3-24 0-40-14S16 44 13 34c-1-4 2-7 6-8l10-4c4-1 7 3 6 6l-7 9z" fill="#4285f4"></path>220        </svg>221      </div>222    </div>223 224    <!-- Messages -->225    <div class="app">226      <div class="icon">227        <svg class="svg-90" viewBox="0 0 100 100">228          <rect x="16" y="20" width="68" height="50" rx="12" fill="#1a73e8"></rect>229          <rect x="30" y="38" width="40" height="10" rx="5" fill="#ffffff"></rect>230          <path d="M40 70 L30 84 L30 66" fill="#1a73e8"></path>231        </svg>232      </div>233    </div>234 235    <!-- Chrome -->236    <div class="app">237      <div class="icon">238        <svg class="svg-90" viewBox="0 0 100 100">239          <circle cx="50" cy="50" r="28" fill="#ffffff"></circle>240          <circle cx="50" cy="50" r="18" fill="#4285f4"></circle>241          <path d="M50 18 A32 32 0 0 1 80 40 H52" fill="#ea4335"></path>242          <path d="M22 44 A32 32 0 0 1 48 18 L60 40" fill="#fbbc05"></path>243          <path d="M34 86 A32 32 0 0 1 20 46 H48" fill="#34a853"></path>244        </svg>245      </div>246    </div>247 248    <!-- Camera -->249    <div class="app">250      <div class="icon">251        <svg class="svg-90" viewBox="0 0 100 100">252          <rect x="18" y="32" width="64" height="40" rx="10" fill="#3c4043"></rect>253          <rect x="32" y="20" width="20" height="12" rx="4" fill="#5f6368"></rect>254          <circle cx="50" cy="52" r="14" fill="#90caf9"></circle>255          <circle cx="50" cy="52" r="8" fill="#1a73e8"></circle>256        </svg>257      </div>258    </div>259  </div>260 261  <!-- Search Bar -->262  <div class="search-bar">263    <!-- Google "G" simplified -->264    <svg class="search-ico" viewBox="0 0 64 64">265      <circle cx="32" cy="32" r="30" fill="#fff"></circle>266      <path d="M52 33a20 20 0 1 1-6-14" stroke="#4285f4" stroke-width="8" fill="none"></path>267      <path d="M52 33h-14" stroke="#34a853" stroke-width="8"></path>268      <path d="M32 14a19 19 0 0 1 12 4" stroke="#fbbc05" stroke-width="8" fill="none"></path>269      <path d="M22 46a18 18 0 0 0 10 4" stroke="#ea4335" stroke-width="8" fill="none"></path>270    </svg>271    <div class="search-input">Search</div>272    <!-- Mic -->273    <svg class="search-ico" viewBox="0 0 64 64">274      <rect x="26" y="14" width="12" height="26" rx="6" fill="#1a73e8"></rect>275      <path d="M18 32a14 14 0 0 0 28 0" stroke="#1a73e8" stroke-width="6" fill="none"></path>276      <rect x="30" y="44" width="4" height="10" fill="#1a73e8"></rect>277      <rect x="24" y="52" width="16" height="6" rx="3" fill="#1a73e8"></rect>278    </svg>279    <!-- Lens/Camera -->280    <svg class="search-ico" viewBox="0 0 64 64">281      <rect x="10" y="18" width="44" height="28" rx="8" fill="#34a853"></rect>282      <circle cx="32" cy="32" r="10" fill="#fff"></circle>283      <circle cx="32" cy="32" r="6" fill="#1a73e8"></circle>284      <rect x="18" y="10" width="10" height="8" rx="3" fill="#fbbc05"></rect>285      <rect x="40" y="10" width="10" height="8" rx="3" fill="#ea4335"></rect>286    </svg>287  </div>288 289  <!-- Gesture bar -->290  <div class="gesture"></div>291 292</div>293</body>294</html>