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;9    position:relative; overflow:hidden;10    border-radius:28px;11    box-shadow: 0 20px 60px rgba(0,0,0,0.25);12  }13  /* Wallpaper placeholder */14  .wallpaper {15    position:absolute; left:0; top:0; width:100%; height:100%;16    background:#E0E0E0; border:1px solid #BDBDBD;17    display:flex; align-items:center; justify-content:center;18    color:#757575; font-size:28px; letter-spacing:0.5px;19  }20 21  /* Status bar */22  .status-bar {23    position:absolute; left:32px; right:32px; top:22px;24    height:60px; display:flex; align-items:center; justify-content:space-between;25    color:#ffffff;26    mix-blend-mode: normal;27  }28  .status-left { display:flex; align-items:center; gap:18px; font-size:34px; font-weight:600; }29  .status-icons { display:flex; align-items:center; gap:14px; }30  .icon-small { width:28px; height:28px; opacity:0.95; }31  .status-right { display:flex; align-items:center; gap:18px; }32  .wifi svg, .battery svg { width:36px; height:36px; }33  34  /* Date and weather */35  .date-wrap {36    position:absolute; left:60px; top:160px; color:#ffffff;37  }38  .date {39    font-size:58px; font-weight:600; letter-spacing:0.5px;40    margin-bottom:22px;41  }42  .weather {43    display:flex; align-items:center; gap:18px;44    font-size:40px; font-weight:500;45  }46  .weather svg { width:56px; height:56px; }47 48  /* App rows */49  .apps-row {50    position:absolute; left:0; width:100%;51    display:flex; justify-content:space-around; align-items:flex-start;52    padding:0 60px;53  }54  .row-top { top:1460px; }55  .row-bottom { top:1776px; }56  .app {57    width:200px; text-align:center; color:#ffffff;58  }59  .app .icon {60    width:170px; height:170px; border-radius:50%;61    background:rgba(255,255,255,0.08);62    backdrop-filter: blur(2px);63    display:flex; align-items:center; justify-content:center;64    margin:0 auto 20px auto;65  }66  .label { font-size:40px; font-weight:600; text-shadow: 0 2px 4px rgba(0,0,0,0.25); }67 68  /* Notification dot */69  .dot {70    position:absolute; right:24px; top:-6px; width:36px; height:36px;71    background:#9ad46c; border:4px solid #ffffff; border-radius:50%;72  }73 74  /* Search bar */75  .search-bar {76    position:absolute; left:60px; bottom:170px; width:960px; height:120px;77    background:#3b3431; border-radius:60px;78    display:flex; align-items:center; justify-content:flex-start;79    padding:0 28px; color:#ffffff;80  }81  .search-left { display:flex; align-items:center; gap:22px; }82  .search-text { font-size:38px; opacity:0.8; }83  .search-right { margin-left:auto; display:flex; align-items:center; gap:26px; padding-right:18px; }84  .search-icon { width:56px; height:56px; }85 86  /* Home indicator */87  .home-indicator {88    position:absolute; bottom:70px; left:50%; transform:translateX(-50%);89    width:260px; height:12px; background:#EFEFEF; border-radius:8px; opacity:0.9;90  }91 92  /* Helper colors for icons */93  .white { fill:#ffffff; }94  .red { fill:#ff3b30; }95  .green { fill:#34c759; }96  .blue { fill:#007aff; }97 98</style>99</head>100<body>101<div id="render-target">102  <!-- Wallpaper placeholder -->103  <div class="wallpaper">[IMG: Mountain Cloudy Wallpaper]</div>104 105  <!-- Status bar -->106  <div class="status-bar">107    <div class="status-left">108      <div>3:27</div>109      <div class="status-icons">110        <!-- simple placeholder dots/icons -->111        <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff"/></svg>112        <svg class="icon-small" viewBox="0 0 24 24"><path d="M5 12h14M12 5v14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg>113        <svg class="icon-small" viewBox="0 0 24 24"><path d="M12 3L2 21h20L12 3z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>114        <svg class="icon-small" viewBox="0 0 24 24"><text x="6" y="18" font-size="16" fill="#ffffff">M</text></svg>115        <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#ffffff"/></svg>116      </div>117    </div>118    <div class="status-right">119      <!-- WiFi -->120      <div class="wifi">121        <svg viewBox="0 0 24 24">122          <path d="M2 8c4-3 16-3 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>123          <path d="M5 12c3-2 11-2 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>124          <path d="M9 16c2-1 4-1 6 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>125          <circle cx="12" cy="19" r="2" fill="#ffffff"/>126        </svg>127      </div>128      <!-- Battery -->129      <div class="battery">130        <svg viewBox="0 0 28 24">131          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>132          <rect x="4" y="8" width="16" height="8" fill="#ffffff"/>133          <rect x="22" y="9" width="4" height="6" rx="1" fill="#ffffff"/>134        </svg>135      </div>136    </div>137  </div>138 139  <!-- Date and weather -->140  <div class="date-wrap">141    <div class="date">Tue, Nov 7</div>142    <div class="weather">143      <svg viewBox="0 0 64 64">144        <path d="M8 24c6 6 14 6 20 0s14-6 20 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>145        <path d="M8 34c6 6 14 6 20 0s14-6 20 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>146        <path d="M8 44c6 6 14 6 20 0s14-6 20 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>147      </svg>148      <div>29°C</div>149    </div>150  </div>151 152  <!-- Top apps row -->153  <div class="apps-row row-top">154    <!-- Play Store -->155    <div class="app">156      <div class="icon" style="background:#ffffff10; position:relative;">157        <svg viewBox="0 0 120 120" width="120" height="120">158          <defs>159            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">160              <stop offset="0" stop-color="#00c853"/>161              <stop offset="1" stop-color="#00b0ff"/>162            </linearGradient>163          </defs>164          <path d="M20 20L100 60L20 100Z" fill="url(#g1)"/>165          <path d="M20 20L60 60L20 100Z" fill="#ff5252" opacity="0.85"/>166          <path d="M60 60L100 60L20 100Z" fill="#ffab00" opacity="0.85"/>167        </svg>168      </div>169      <div class="label">Play Store</div>170    </div>171 172    <!-- Gmail -->173    <div class="app" style="position:relative;">174      <div class="icon" style="background:#ffffff10; position:relative;">175        <svg viewBox="0 0 120 120" width="120" height="120">176          <rect x="20" y="30" width="80" height="60" rx="10" fill="#ffffff"/>177          <path d="M20 30L60 60L100 30" stroke="#d32f2f" stroke-width="16" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178          <path d="M20 90V30L60 60L100 30V90" stroke="#d32f2f" stroke-width="10" fill="none"/>179        </svg>180        <span class="dot"></span>181      </div>182      <div class="label">Gmail</div>183    </div>184 185    <!-- Photos -->186    <div class="app">187      <div class="icon" style="background:#ffffff10;">188        <svg viewBox="0 0 120 120" width="120" height="120">189          <circle cx="60" cy="30" r="22" fill="#ff5252"/>190          <circle cx="60" cy="90" r="22" fill="#4caf50"/>191          <circle cx="30" cy="60" r="22" fill="#2196f3"/>192          <circle cx="90" cy="60" r="22" fill="#ffc107"/>193        </svg>194      </div>195      <div class="label">Photos</div>196    </div>197 198    <!-- YouTube -->199    <div class="app">200      <div class="icon" style="background:#ffffff10;">201        <svg viewBox="0 0 120 120" width="120" height="120">202          <rect x="20" y="40" width="80" height="40" rx="12" fill="#ff3d00"/>203          <polygon points="52,50 52,90 88,70" fill="#ffffff"/>204        </svg>205      </div>206      <div class="label">YouTube</div>207    </div>208  </div>209 210  <!-- Bottom apps row -->211  <div class="apps-row row-bottom">212    <!-- Phone -->213    <div class="app">214      <div class="icon">215        <svg viewBox="0 0 120 120" width="120" height="120">216          <path d="M40 30c10 5 20 15 25 25s-5 15-10 20-10 10-15 8-20-12-26-26 6-22 26-27z" fill="#1E88E5"/>217        </svg>218      </div>219      <div class="label">Phone</div>220    </div>221 222    <!-- Messages -->223    <div class="app">224      <div class="icon">225        <svg viewBox="0 0 120 120" width="120" height="120">226          <rect x="20" y="25" width="80" height="60" rx="16" fill="#3f51b5"/>227          <polygon points="40,85 50,75 60,85" fill="#3f51b5"/>228          <rect x="32" y="40" width="56" height="6" rx="3" fill="#ffffff" opacity="0.9"/>229          <rect x="32" y="54" width="44" height="6" rx="3" fill="#ffffff" opacity="0.9"/>230        </svg>231      </div>232      <div class="label">Messages</div>233    </div>234 235    <!-- Chrome -->236    <div class="app">237      <div class="icon">238        <svg viewBox="0 0 120 120" width="120" height="120">239          <circle cx="60" cy="60" r="50" fill="#f4f4f4"/>240          <path d="M60 10A50 50 0 0 1 110 60H70L60 40Z" fill="#f44336"/>241          <path d="M110 60A50 50 0 0 1 60 110L40 70H70Z" fill="#ffc107"/>242          <path d="M60 110A50 50 0 0 1 10 60L50 50L40 70Z" fill="#4caf50"/>243          <circle cx="60" cy="60" r="22" fill="#2196f3"/>244        </svg>245      </div>246      <div class="label">Chrome</div>247    </div>248 249    <!-- Camera -->250    <div class="app">251      <div class="icon">252        <svg viewBox="0 0 120 120" width="120" height="120">253          <rect x="20" y="35" width="80" height="50" rx="12" fill="#424242"/>254          <circle cx="60" cy="60" r="18" fill="#2196f3"/>255          <rect x="30" y="30" width="24" height="12" rx="4" fill="#757575"/>256        </svg>257      </div>258      <div class="label">Camera</div>259    </div>260  </div>261 262  <!-- Google search bar -->263  <div class="search-bar">264    <div class="search-left">265      <!-- G logo -->266      <svg class="search-icon" viewBox="0 0 64 64">267        <circle cx="32" cy="32" r="30" fill="#ffffff" opacity="0.15"/>268        <path d="M32 16c8 0 14 6 14 14 0 1 0 2-.2 3H32v-8h14" stroke="#ffffff" stroke-width="4" fill="none"/>269        <text x="22" y="43" font-size="28" font-weight="700" fill="#ffffff">G</text>270      </svg>271      <div class="search-text">Search</div>272    </div>273    <div class="search-right">274      <!-- Voice mic -->275      <svg class="search-icon" viewBox="0 0 64 64">276        <rect x="26" y="16" width="12" height="22" rx="6" fill="#ffffff"/>277        <path d="M20 34c0 8 8 12 12 12s12-4 12-12" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>278        <path d="M32 46v6" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>279      </svg>280      <!-- Google Lens-like camera icon -->281      <svg class="search-icon" viewBox="0 0 64 64">282        <rect x="12" y="18" width="40" height="28" rx="8" fill="#ffffff"/>283        <circle cx="32" cy="32" r="10" fill="#3b3431"/>284      </svg>285    </div>286  </div>287 288  <!-- Home indicator -->289  <div class="home-indicator"></div>290</div>291</body>292</html>