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;font-family:Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:10      radial-gradient(1200px 1400px at 40% 45%, rgba(30,30,30,0.85), #0f1012 65%),11      repeating-linear-gradient(120deg, rgba(255,255,255,0.04) 0 6px, rgba(0,0,0,0.06) 6px 12px);12    color:#fff;13  }14  /* status bar */15  .status-left{position:absolute;top:24px;left:40px;font-size:42px;letter-spacing:1px;}16  .status-right{position:absolute;top:28px;right:34px;display:flex;gap:24px;align-items:center;}17  .status-right svg{fill:#fff;opacity:0.9}18  /* date + weather */19  .date-title{position:absolute;left:64px;top:200px;font-size:64px;font-weight:600;}20  .weather-row{position:absolute;left:64px;top:300px;display:flex;align-items:center;gap:18px;color:#d9d9d9;font-size:38px;}21  /* generic app grid */22  .app-row{position:absolute;left:60px;right:60px;display:flex;justify-content:space-between;}23  .apps-1{top:1460px;}24  .apps-2{top:1790px;}25  .app{26    width:240px;text-align:center;color:#f2f2f2;font-size:38px;27  }28  .icon-circle{29    width:170px;height:170px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;30    box-shadow:0 10px 20px rgba(0,0,0,0.25);31  }32  .label{margin-top:4px;opacity:0.95}33  /* search pill */34  .search{35    position:absolute;left:60px;right:60px;bottom:270px;height:118px;border-radius:60px;background:rgba(40,40,40,0.85);36    display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 30px;border:1px solid rgba(255,255,255,0.08);37    color:#eaeaea;font-size:40px;38  }39  .search .left{display:flex;align-items:center;gap:24px}40  .pill-icon{width:78px;height:78px;border-radius:50%;background:#1a73e8;display:flex;align-items:center;justify-content:center;}41  .pill-actions{display:flex;gap:22px}42  .pill-actions .btn{width:92px;height:92px;border-radius:20px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center}43  /* bottom overlay (debugging prompt) */44  .overlay{45    position:absolute;left:60px;right:60px;bottom:70px;height:150px;border-radius:36px;background:rgba(12,12,12,0.9);46    color:#eaeaea;display:flex;flex-direction:column;justify-content:center;padding:0 30px;border:1px solid rgba(255,255,255,0.08);47  }48  .overlay .title{font-size:48px;margin-bottom:6px;}49  .overlay .sub{font-size:32px;color:#bdbdbd}50  /* helper small text shadow for readability */51  .soft{ text-shadow:0 1px 2px rgba(0,0,0,0.6); }52</style>53</head>54<body>55<div id="render-target">56 57  <!-- Status bar -->58  <div class="status-left soft">8:59</div>59  <div class="status-right">60    <!-- Wi-Fi -->61    <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.1-6.1a9 9 0 0 0-12.2 0l1.4 1.4a7 7 0 0 1 9.4 0l1.4-1.4zm3.5-3.5a14 14 0 0 0-19.2 0l1.4 1.4a12 12 0 0 1 16.4 0l1.4-1.4z"/></svg>62    <!-- Battery -->63    <svg width="50" height="50" viewBox="0 0 24 24"><path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10zM6 9v6h10V9H6z"/></svg>64  </div>65 66  <!-- Date & Weather -->67  <div class="date-title soft">Tue, Jul 18</div>68  <div class="weather-row soft">69    <svg width="54" height="54" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M6 15a4 4 0 0 1 .8-7.9 5 5 0 0 1 9.7 1.3 3.5 3.5 0 0 1 .5 7H6z"/></svg>70    <div>29°C · Today 31° / 26° · Cloudy</div>71  </div>72 73  <!-- Row of main apps -->74  <div class="app-row apps-1">75    <!-- Play Store -->76    <div class="app">77      <div class="icon-circle">78        <svg width="120" height="120" viewBox="0 0 64 64">79          <defs>80            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">81              <stop offset="0" stop-color="#3ddc84"/><stop offset="1" stop-color="#34a853"/>82            </linearGradient>83          </defs>84          <polygon points="10,6 54,32 10,58" fill="url(#g1)"/>85          <polygon points="26,18 36,24 26,30" fill="#fbbc05"/>86          <polygon points="26,34 36,40 26,46" fill="#ea4335"/>87          <polygon points="10,6 26,18 26,46 10,58" fill="#4285f4"/>88        </svg>89      </div>90      <div class="label">Play Store</div>91    </div>92    <!-- Gmail -->93    <div class="app">94      <div class="icon-circle">95        <svg width="130" height="130" viewBox="0 0 64 64">96          <rect x="9" y="16" width="46" height="32" rx="4" fill="#fff"/>97          <path d="M9 20l23 16L55 20v-7H9z" fill="#ea4335"/>98          <path d="M9 20v28h10V27L9 20z" fill="#34a853"/>99          <path d="M55 20v28H45V27l10-7z" fill="#4285f4"/>100          <path d="M19 27l13 9 13-9v-9H19z" fill="#fbbc05" opacity="0.9"/>101        </svg>102      </div>103      <div class="label">Gmail</div>104    </div>105    <!-- Photos -->106    <div class="app">107      <div class="icon-circle">108        <svg width="120" height="120" viewBox="0 0 64 64">109          <circle cx="24" cy="24" r="12" fill="#fbbc05"/>110          <circle cx="40" cy="24" r="12" fill="#ea4335"/>111          <circle cx="24" cy="40" r="12" fill="#34a853"/>112          <circle cx="40" cy="40" r="12" fill="#4285f4"/>113        </svg>114      </div>115      <div class="label">Photos</div>116    </div>117    <!-- YouTube -->118    <div class="app">119      <div class="icon-circle">120        <svg width="130" height="130" viewBox="0 0 64 64">121          <rect x="10" y="18" width="44" height="28" rx="8" fill="#ff0000"/>122          <polygon points="28,23 28,41 44,32" fill="#fff"/>123        </svg>124      </div>125      <div class="label">YouTube</div>126    </div>127  </div>128 129  <!-- Dock -->130  <div class="app-row apps-2">131    <!-- Phone -->132    <div class="app">133      <div class="icon-circle" style="background:#ffffff;">134        <svg width="120" height="120" viewBox="0 0 64 64">135          <path fill="#1a73e8" d="M42 46c-8 0-18-10-18-18 0-2 1-3 3-4l3-2-6-9-4 2c-3 2-5 6-5 10 0 14 14 28 28 28 4 0 8-2 10-5l2-4-9-6-2 3c-1 2-2 3-4 3z"/>136        </svg>137      </div>138    </div>139    <!-- Messages -->140    <div class="app">141      <div class="icon-circle" style="background:#ffffff;">142        <svg width="120" height="120" viewBox="0 0 64 64">143          <rect x="10" y="12" width="44" height="32" rx="10" fill="#1a73e8"/>144          <rect x="16" y="20" width="32" height="8" rx="4" fill="#fff" opacity="0.9"/>145          <rect x="16" y="32" width="24" height="6" rx="3" fill="#eaf2ff"/>146        </svg>147      </div>148    </div>149    <!-- Chrome -->150    <div class="app">151      <div class="icon-circle" style="background:#ffffff;">152        <svg width="120" height="120" viewBox="0 0 64 64">153          <circle cx="32" cy="32" r="28" fill="#ea4335"/>154          <path d="M32 4a28 28 0 0 1 24 14H32L22 12A28 28 0 0 1 32 4z" fill="#fbbc05"/>155          <path d="M10 48a28 28 0 0 0 44 0L42 28H22L10 48z" fill="#34a853"/>156          <circle cx="32" cy="32" r="12" fill="#4285f4" stroke="#fff" stroke-width="3"/>157        </svg>158      </div>159    </div>160    <!-- Camera -->161    <div class="app">162      <div class="icon-circle" style="background:#ffffff;">163        <svg width="120" height="120" viewBox="0 0 64 64">164          <rect x="10" y="18" width="44" height="28" rx="6" fill="#9aa0a6"/>165          <rect x="24" y="10" width="16" height="8" rx="3" fill="#b0b6bb"/>166          <circle cx="32" cy="32" r="10" fill="#2f3437"/>167          <circle cx="32" cy="32" r="5" fill="#6ea8ff"/>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- Google search pill -->174  <div class="search soft">175    <div class="left">176      <div class="pill-icon" style="background:#1a73e8">177        <!-- Google G simplified -->178        <svg width="54" height="54" viewBox="0 0 24 24">179          <path fill="#fff" d="M12 5a7 7 0 1 0 0 14c3.42 0 6.29-2.52 6.79-5.83H12v-2.7h10A10 10 0 0 1 12 22 10 10 0 1 1 12 2c2.5 0 4.79.95 6.5 2.5L16.7 6.3A7 7 0 0 0 12 5z"/>180        </svg>181      </div>182      <div>Search</div>183    </div>184    <div class="pill-actions">185      <div class="btn">186        <!-- Mic -->187        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>188      </div>189      <div class="btn">190        <!-- Camera -->191        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M9.5 5l1.5-2h6l1.5 2H22v14H2V5h7.5zM12 18a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>192      </div>193    </div>194  </div>195 196  <!-- Bottom overlay prompt -->197  <div class="overlay soft">198    <div class="title">Allow USB debugging?</div>199    <div class="sub">The computer's RSA key fingerprint is: •••</div>200  </div>201 202</div>203</body>204</html>