GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home UI 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:10      radial-gradient(1200px 900px at 20% 15%, #f2f2f2 0%, #dadada 55%, #c9c9c9 100%),11      radial-gradient(900px 700px at 85% 65%, #e6e6e6 0%, #cfcfcf 60%, #bfbfbf 100%);12    color:#ffffff;13  }14  .text-shadow { text-shadow: 0 2px 3px rgba(0,0,0,0.35); }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; width:100%; height:96px;19    padding:24px 32px; display:flex; align-items:center; justify-content:space-between;20    color:#fff; font-weight:500;21  }22  .status-left { font-size:36px; letter-spacing:0.5px; }23  .status-center { display:flex; gap:18px; align-items:center; opacity:0.85; }24  .tiny { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.75); }25  .status-right { display:flex; align-items:center; gap:22px; }26  .sb-icon { display:flex; align-items:center; }27 28  /* Date + weather */29  .header {30    position:absolute; left:60px; top:150px; right:60px; color:#fff;31  }32  .date { font-size:64px; font-weight:700; margin-bottom:26px; }33  .weather-line { display:flex; align-items:center; gap:18px; font-size:34px; opacity:0.95; }34  .cloud {35    width:48px; height:48px; position:relative;36  }37  .cloud svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }38 39  /* App grid */40  .row { position:absolute; left:60px; right:60px; display:flex; justify-content:space-around; }41  .row.r1 { top:980px; }42  .row.r2 { top:1280px; }43  .row.r3 { top:1570px; }44 45  .app { width:210px; text-align:center; color:#fff; }46  .icon {47    width:170px; height:170px; border-radius:50%;48    display:flex; align-items:center; justify-content:center;49    box-shadow:0 8px 22px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.25);50    margin:0 auto;51  }52  .label { margin-top:22px; font-size:34px; line-height:1.2; }53  .badge {54    position:absolute; width:30px; height:30px; border-radius:50%; background:#5cd66e;55    border:3px solid #ffffff; right:14px; top:10px;56  }57 58  /* Search bar widget */59  .search-bar {60    position:absolute; left:60px; bottom:160px; width:960px; height:120px;61    background:#2c2c2c; border-radius:60px; display:flex; align-items:center; justify-content:space-between;62    padding:0 36px; box-shadow:0 10px 24px rgba(0,0,0,0.35);63  }64  .g-logo {65    width:72px; height:72px; border-radius:36px; background:#1f1f1f; display:flex; align-items:center; justify-content:center;66    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.12);67    color:#fff; font-weight:700; font-size:34px;68  }69  .sb-btn { width:72px; height:72px; border-radius:36px; background:#1f1f1f; display:flex; align-items:center; justify-content:center; }70 71  /* Gesture bar */72  .gesture {73    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);74    width:320px; height:12px; border-radius:8px; background:#2f2f2f; opacity:0.75;75  }76 77  .img-placeholder {78    width:100%; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;79    display:flex; align-items:center; justify-content:center; color:#757575;80  }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Status Bar -->87  <div class="status-bar text-shadow">88    <div class="status-left">10:13</div>89    <div class="status-center">90      <div class="tiny"></div>91      <div class="tiny"></div>92      <div class="tiny"></div>93    </div>94    <div class="status-right">95      <div class="sb-icon">96        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">97          <path d="M2 9c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7"/>98          <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>99          <path d="M8 15c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>100          <circle cx="12" cy="18" r="1.8" fill="#ffffff"/>101        </svg>102      </div>103      <div class="sb-icon">104        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">105          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2"/>106          <rect x="5" y="8" width="12" height="8" rx="1.5" fill="#ffffff"/>107          <rect x="20" y="9" width="2" height="6" rx="1" fill="#ffffff"/>108        </svg>109      </div>110    </div>111  </div>112 113  <!-- Date and Weather -->114  <div class="header text-shadow">115    <div class="date">Thu, Dec 21</div>116    <div class="weather-line">117      <div class="cloud">118        <svg width="48" height="48" viewBox="0 0 24 24">119          <path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7 1.4A4 4 0 0 0 6 15z" fill="#ffffff" opacity="0.9"/>120        </svg>121      </div>122      <div>27°C · Today 32° / 23° · Mostly cloudy</div>123    </div>124  </div>125 126  <!-- First row: 2 apps -->127  <div class="row r1">128    <div class="app">129      <div class="icon" style="background:#2e79ff;">130        <!-- Skyscanner (simple sunrise) -->131        <svg width="110" height="110" viewBox="0 0 24 24">132          <path d="M12 6a6 6 0 0 0-6 6h12a6 6 0 0 0-6-6z" fill="#ffffff"/>133          <rect x="4" y="12" width="16" height="2.5" rx="1.2" fill="#ffffff" opacity="0.9"/>134          <circle cx="12" cy="6" r="2" fill="#ffffff"/>135        </svg>136      </div>137      <div class="label">Skyscanner</div>138    </div>139 140    <div class="app">141      <div class="icon" style="background:#ffffff;">142        <!-- JAL (simple red crest with text) -->143        <svg width="110" height="110" viewBox="0 0 24 24">144          <circle cx="12" cy="12" r="8.5" fill="#d62c1a" opacity="0.95"/>145          <text x="12" y="14" font-size="9" font-weight="700" text-anchor="middle" fill="#ffffff">JAL</text>146        </svg>147      </div>148      <div class="label">Japan Airlin...</div>149    </div>150  </div>151 152  <!-- Second row: 4 apps -->153  <div class="row r2">154    <div class="app" style="position:relative;">155      <div class="icon" style="background:#ffffff; position:relative;">156        <!-- Play Store -->157        <svg width="120" height="120" viewBox="0 0 24 24">158          <polygon points="5,5 19,12 5,19" fill="#3ddc84"/>159          <polygon points="8,6.5 9.2,7.2 5.8,12 4.5,11.2" fill="#4285f4"/>160          <polygon points="4.5,12.8 5.8,12 9.2,16.8 8,17.5" fill="#fbbc05"/>161          <polygon points="9.2,7.2 19,12 9.2,16.8 12.5,12" fill="#ea4335"/>162        </svg>163        <div class="badge"></div>164      </div>165      <div class="label">Play Store</div>166    </div>167 168    <div class="app">169      <div class="icon" style="background:#ffffff;">170        <!-- Gmail -->171        <svg width="120" height="120" viewBox="0 0 24 24">172          <rect x="4" y="6" width="16" height="12" rx="2" fill="#ffffff"/>173          <path d="M4 7.5l8 6 8-6v8.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.5z" fill="#ea4335"/>174          <path d="M4 7.5l8 6 8-6" stroke="#fbbc05" stroke-width="2" opacity="0.8"/>175          <path d="M6 6h12" stroke="#34a853" stroke-width="2" opacity="0.8"/>176        </svg>177      </div>178      <div class="label">Gmail</div>179    </div>180 181    <div class="app">182      <div class="icon" style="background:#ffffff;">183        <!-- Photos -->184        <svg width="120" height="120" viewBox="0 0 24 24">185          <circle cx="12" cy="12" r="2" fill="#4a4a4a"/>186          <path d="M12 4v6H6a6 6 0 0 1 6-6z" fill="#ea4335"/>187          <path d="M20 12h-6V6a6 6 0 0 1 6 6z" fill="#fbbc05"/>188          <path d="M12 20v-6h6a6 6 0 0 1-6 6z" fill="#34a853"/>189          <path d="M4 12h6v6a6 6 0 0 1-6-6z" fill="#4285f4"/>190        </svg>191      </div>192      <div class="label">Photos</div>193    </div>194 195    <div class="app">196      <div class="icon" style="background:#ffffff;">197        <!-- YouTube -->198        <svg width="120" height="120" viewBox="0 0 24 24">199          <rect x="5" y="7" width="14" height="10" rx="3" fill="#ff3b30"/>200          <polygon points="11,9 16,12 11,15" fill="#ffffff"/>201        </svg>202      </div>203      <div class="label">YouTube</div>204    </div>205  </div>206 207  <!-- Dock row -->208  <div class="row r3">209    <div class="app">210      <div class="icon" style="background:#ffffff;">211        <!-- Phone -->212        <svg width="115" height="115" viewBox="0 0 24 24">213          <path d="M6 5l3-1 2 4-2 1a10 10 0 0 0 6 6l1-2 4 2-1 3c-6 2-13-5-13-13z" fill="#2a7aff"/>214        </svg>215      </div>216    </div>217    <div class="app">218      <div class="icon" style="background:#2e79ff;">219        <!-- Messages -->220        <svg width="115" height="115" viewBox="0 0 24 24">221          <rect x="4" y="5" width="16" height="12" rx="3" fill="#ffffff"/>222          <rect x="9" y="17" width="6" height="3" rx="1.5" fill="#ffffff"/>223        </svg>224      </div>225    </div>226    <div class="app">227      <div class="icon" style="background:#ffffff;">228        <!-- Chrome (simple tri segments) -->229        <svg width="115" height="115" viewBox="0 0 24 24">230          <circle cx="12" cy="12" r="5.5" fill="#4a8ef7"/>231          <path d="M12 3a9 9 0 0 1 7.7 4.5H12z" fill="#ea4335"/>232          <path d="M3.5 8A9 9 0 0 1 12 3v6z" fill="#fbbc05"/>233          <path d="M20.5 8A9 9 0 0 1 12 21l0-6z" fill="#34a853"/>234          <circle cx="12" cy="12" r="3" fill="#ffffff"/>235        </svg>236      </div>237    </div>238    <div class="app">239      <div class="icon" style="background:#ffffff;">240        <!-- Camera -->241        <svg width="115" height="115" viewBox="0 0 24 24">242          <rect x="4" y="7" width="16" height="12" rx="3" fill="#808080"/>243          <rect x="8" y="5" width="4" height="2" rx="1" fill="#808080"/>244          <circle cx="12" cy="13" r="4" fill="#3b83f7"/>245          <circle cx="12" cy="13" r="2" fill="#99c2ff"/>246        </svg>247      </div>248    </div>249  </div>250 251  <!-- Google search widget -->252  <div class="search-bar">253    <div class="g-logo">G</div>254    <div style="flex:1;"></div>255    <div class="sb-btn">256      <!-- Microphone -->257      <svg width="34" height="34" viewBox="0 0 24 24">258        <rect x="9" y="5" width="6" height="9" rx="3" fill="#34a853"/>259        <path d="M5 12a7 7 0 0 0 14 0" stroke="#ffffff" stroke-width="2" opacity="0.85"/>260        <rect x="11" y="17" width="2" height="3" fill="#ffffff"/>261      </svg>262    </div>263    <div class="sb-btn">264      <!-- Camera/Lens -->265      <svg width="34" height="34" viewBox="0 0 24 24">266        <rect x="4" y="6" width="16" height="12" rx="3" fill="#4285f4"/>267        <circle cx="12" cy="12" r="4" fill="#ffffff"/>268        <circle cx="12" cy="12" r="2.2" fill="#34a853"/>269      </svg>270    </div>271  </div>272 273  <!-- Bottom gesture bar -->274  <div class="gesture"></div>275 276</div>277</body>278</html>