GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Home Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    /* Abstract painted wallpaper approximation */11    background:12      radial-gradient(1200px 1200px at 80% 70%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 35%, rgba(0,0,0,0.08) 100%),13      repeating-linear-gradient(130deg, #89b27c 0 22px, #7aa771 22px 44px, #b8cf8f 44px 66px, #6da46e 66px 88px, #e3d685 88px 110px, #7db282 110px 132px),14      linear-gradient(180deg, #6ea575, #5f9b6c);15  }16  .status-bar {17    position: absolute; top: 24px; left: 0; right: 0; height: 84px; color: #fff;18    display: flex; align-items: center; padding: 0 28px; font-weight: 600;19  }20  .sb-time { font-size: 34px; letter-spacing: 0.5px; }21  .sb-middle { margin-left: 28px; display: flex; align-items: center; gap: 26px; opacity: 0.95; }22  .sb-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }23  .sb-icon { width: 28px; height: 28px; display: inline-block; }24  .date-widget {25    position: absolute; top: 300px; left: 64px; color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.35);26  }27  .date-widget .day { font-size: 64px; font-weight: 300; }28  .weather { margin-top: 20px; display: flex; align-items: center; gap: 18px; font-size: 34px; opacity: 0.95; }29  /* App grid */30  .app-row {31    position: absolute; top: 1450px; left: 60px; right: 60px;32    display: flex; justify-content: space-between; align-items: flex-start;33  }34  .app { width: 200px; text-align: center; color: #ffffff; }35  .app .disc {36    width: 160px; height: 160px; margin: 0 auto 22px; border-radius: 50%;37    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.35);38    display: flex; align-items: center; justify-content: center;39  }40  .app label { font-size: 32px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }41  /* Dock */42  .dock {43    position: absolute; top: 1760px; left: 120px; right: 120px;44    display: flex; justify-content: space-between; align-items: center;45  }46  .dock .disc { width: 150px; height: 150px; border-radius: 50%; background: #fff;47    box-shadow: 0 8px 24px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }48  /* Search bar */49  .search-bar {50    position: absolute; bottom: 170px; left: 60px; right: 60px; height: 120px;51    background: #ffffff; border-radius: 60px; box-shadow: 0 12px 30px rgba(0,0,0,0.35);52    display: flex; align-items: center; padding: 0 30px; gap: 22px;53  }54  .search-g {55    width: 68px; height: 68px; border-radius: 34px; display: flex; align-items: center; justify-content: center;56    font-weight: 800; font-size: 40px; color: #4285F4; border: 2px solid #e6e6e6; background: #fff;57  }58  .search-text { flex: 1; color: #888; font-size: 32px; }59  .search-actions { display: flex; align-items: center; gap: 26px; }60  .gesture {61    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);62    width: 320px; height: 12px; background: rgba(255,255,255,0.85); border-radius: 8px;63    box-shadow: 0 2px 10px rgba(0,0,0,0.25);64  }65  /* Simple helper */66  svg { display: block; }67</style>68</head>69<body>70<div id="render-target">71 72  <!-- Status bar -->73  <div class="status-bar">74    <div class="sb-time">10:51</div>75 76    <div class="sb-middle">77      <!-- tiny glyphs approximating middle indicators -->78      <svg class="sb-icon" viewBox="0 0 24 24">79        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>80        <circle cx="12" cy="12" r="3" fill="#fff"/>81      </svg>82      <svg class="sb-icon" viewBox="0 0 24 24">83        <rect x="4" y="6" width="16" height="12" fill="#fff"/>84      </svg>85      <div style="font-size:28px;">80°</div>86      <svg class="sb-icon" viewBox="0 0 24 24">87        <circle cx="12" cy="12" r="7" fill="#fff"/>88      </svg>89    </div>90 91    <div class="sb-right">92      <!-- Wi-Fi -->93      <svg class="sb-icon" viewBox="0 0 24 24">94        <path d="M2 9c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>95        <path d="M6 13c3-3 9-3 12 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>96        <path d="M10 17c1-1 3-1 4 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>97        <circle cx="12" cy="20" r="1.5" fill="#fff"/>98      </svg>99      <!-- Battery -->100      <svg class="sb-icon" viewBox="0 0 24 24">101        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>102        <rect x="21" y="9" width="2" height="6" fill="#fff"/>103        <rect x="4" y="8" width="12" height="8" fill="#fff"/>104      </svg>105    </div>106  </div>107 108  <!-- Date & weather -->109  <div class="date-widget">110    <div class="day">Wed, Nov 1</div>111    <div class="weather">112      <svg width="50" height="34" viewBox="0 0 50 34">113        <path d="M4 10c8 6 16 6 24 0M8 20c8 6 16 6 24 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>114      </svg>115      <div>28°C</div>116    </div>117  </div>118 119  <!-- App row -->120  <div class="app-row">121    <!-- Play Store -->122    <div class="app">123      <div class="disc">124        <svg width="120" height="120" viewBox="0 0 120 120">125          <!-- Play Store triangle pieces -->126          <polygon points="30,20 80,60 30,100" fill="#34A853"/>127          <polygon points="42,32 80,60 42,88" fill="#4285F4"/>128          <polygon points="30,20 60,42 42,32" fill="#FBBC04"/>129          <polygon points="42,88 60,78 30,100" fill="#EA4335"/>130        </svg>131      </div>132      <label>Play Store</label>133    </div>134 135    <!-- Gmail -->136    <div class="app">137      <div class="disc">138        <svg width="120" height="120" viewBox="0 0 120 120">139          <rect x="22" y="36" width="76" height="50" rx="8" fill="#fff" stroke="#DADCE0" stroke-width="4"/>140          <path d="M24 40 L60 68 L96 40" fill="none" stroke="#EA4335" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>141          <path d="M24 88 V44 L60 68 L96 44 V88" fill="none" stroke="#34A853" stroke-width="8" opacity="0.7"/>142          <!-- Bold red M -->143          <path d="M30 84 V44 L60 66 L90 44 V84" fill="none" stroke="#EA4335" stroke-width="12" stroke-linejoin="round"/>144        </svg>145      </div>146      <label>Gmail</label>147    </div>148 149    <!-- Photos -->150    <div class="app">151      <div class="disc">152        <svg width="120" height="120" viewBox="0 0 120 120">153          <g transform="translate(60,60)">154            <path d="M0 -38 A38 38 0 0 1 38 0 L0 0 Z" fill="#FBBC04"/>155            <path d="M38 0 A38 38 0 0 1 0 38 L0 0 Z" fill="#34A853"/>156            <path d="M0 38 A38 38 0 0 1 -38 0 L0 0 Z" fill="#4285F4"/>157            <path d="M-38 0 A38 38 0 0 1 0 -38 L0 0 Z" fill="#EA4335"/>158            <circle cx="0" cy="0" r="10" fill="#fff"/>159          </g>160        </svg>161      </div>162      <label>Photos</label>163    </div>164 165    <!-- YouTube -->166    <div class="app">167      <div class="disc">168        <svg width="120" height="120" viewBox="0 0 120 120">169          <rect x="24" y="38" width="72" height="44" rx="14" fill="#FF0000"/>170          <polygon points="52,50 52,70 74,60" fill="#fff"/>171        </svg>172      </div>173      <label>YouTube</label>174    </div>175  </div>176 177  <!-- Dock icons -->178  <div class="dock">179    <!-- Phone -->180    <div class="disc">181      <svg width="110" height="110" viewBox="0 0 24 24">182        <path d="M6 2c1 0 3 2 3 3s-1 2-1 3c1 2 3 4 5 5 1-1 2-1 3-1s3 2 3 3-2 3-3 3c-5 0-12-7-12-12 0-1 2-3 2-4z" fill="#2B6BF0"/>183      </svg>184    </div>185    <!-- Messages -->186    <div class="disc">187      <svg width="110" height="110" viewBox="0 0 24 24">188        <path d="M3 5h18v11H8l-5 4V5z" fill="#4C8BF5"/>189        <circle cx="9" cy="11" r="1.6" fill="#fff"/>190        <circle cx="13" cy="11" r="1.6" fill="#fff"/>191        <circle cx="17" cy="11" r="1.6" fill="#fff"/>192      </svg>193    </div>194    <!-- Chrome -->195    <div class="disc">196      <svg width="110" height="110" viewBox="0 0 120 120">197        <circle cx="60" cy="60" r="46" fill="#DB4437"/>198        <path d="M60 60 L22 60 A46 46 0 0 1 60 14" fill="#0F9D58"/>199        <path d="M60 60 L84 101 A46 46 0 0 1 22 60" fill="#F4B400"/>200        <circle cx="60" cy="60" r="22" fill="#4285F4"/>201        <circle cx="60" cy="60" r="30" fill="none" stroke="#fff" stroke-width="4" opacity="0.7"/>202      </svg>203    </div>204    <!-- Camera -->205    <div class="disc">206      <svg width="110" height="110" viewBox="0 0 24 24">207        <rect x="3" y="7" width="18" height="12" rx="3" fill="#444"/>208        <rect x="7" y="4" width="6" height="3" rx="1" fill="#666"/>209        <circle cx="12" cy="13" r="4" fill="#9CC2FF"/>210        <circle cx="12" cy="13" r="2" fill="#5B8BF7"/>211      </svg>212    </div>213  </div>214 215  <!-- Search bar -->216  <div class="search-bar">217    <div class="search-g">G</div>218    <div class="search-text">Search</div>219    <div class="search-actions">220      <!-- Mic icon -->221      <svg width="48" height="48" viewBox="0 0 24 24">222        <rect x="9" y="4" width="6" height="10" rx="3" fill="#4285F4"/>223        <path d="M5 11c0 4 3 6 7 6s7-2 7-6" fill="none" stroke="#666" stroke-width="2"/>224        <rect x="11" y="17" width="2" height="4" fill="#666"/>225        <rect x="8" y="21" width="8" height="2" fill="#666"/>226      </svg>227      <!-- Google Lens-like corners -->228      <svg width="48" height="48" viewBox="0 0 24 24">229        <path d="M5 5h5" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/>230        <path d="M14 5h5" stroke="#EA4335" stroke-width="2" stroke-linecap="round"/>231        <path d="M5 19h5" stroke="#34A853" stroke-width="2" stroke-linecap="round"/>232        <path d="M14 19h5" stroke="#FBBC04" stroke-width="2" stroke-linecap="round"/>233        <rect x="8" y="8" width="8" height="8" rx="2" fill="none" stroke="#777" stroke-width="2"/>234      </svg>235    </div>236  </div>237 238  <!-- Gesture bar -->239  <div class="gesture"></div>240 241</div>242</body>243</html>