GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13  }14 15  /* Wallpaper placeholder */16  .wallpaper {17    position: absolute;18    left: 0; top: 0; width: 100%; height: 100%;19    background: #E0E0E0;20    border: 1px solid #BDBDBD;21    color: #757575;22    display: flex; align-items: center; justify-content: center;23    font-size: 28px; letter-spacing: 0.5px;24  }25 26  /* Overlay content */27  .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #FFFFFF; }28 29  /* Status bar */30  .status-bar {31    position: absolute; top: 22px; left: 24px; right: 24px; height: 60px;32    display: flex; align-items: center; justify-content: space-between;33    color: #fff;34  }35  .status-left { font-size: 28px; font-weight: 600; letter-spacing: 0.5px; }36  .status-right { display: flex; gap: 18px; align-items: center; }37  .icon { width: 30px; height: 30px; }38 39  /* Date & weather */40  .date-block { position: absolute; left: 52px; top: 300px; }41  .date-title { font-size: 64px; font-weight: 600; margin-bottom: 18px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }42  .weather-line { display: flex; align-items: center; gap: 16px; font-size: 28px; opacity: 0.95; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }43 44  /* App grid */45  .app-grid {46    position: absolute; left: 0; right: 0;47    top: 1500px;48    display: flex; justify-content: space-around; align-items: flex-start;49    padding: 0 40px;50  }51  .app { width: 180px; text-align: center; color: #fff; }52  .app .circle {53    width: 160px; height: 160px; background: #fff; border-radius: 50%;54    margin: 0 auto 22px auto; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.35);55  }56  .app-label { font-size: 30px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }57 58  /* Dock */59  .dock {60    position: absolute; left: 0; right: 0; top: 1820px;61    display: flex; justify-content: space-around; padding: 0 90px;62  }63  .dock .circle {64    width: 140px; height: 140px; background: #fff; border-radius: 50%;65    box-shadow: 0 8px 20px rgba(0,0,0,0.35);66    display: flex; align-items: center; justify-content: center;67  }68 69  /* Search bar */70  .search-bar {71    position: absolute; left: 60px; right: 60px; top: 2020px; height: 120px;72    background: #fff; border-radius: 60px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);73    display: flex; align-items: center; justify-content: space-between;74    padding: 0 36px;75  }76  .search-left { display: flex; align-items: center; gap: 22px; }77  .search-right { display: flex; align-items: center; gap: 36px; }78  .search-placeholder {79    color: #777; font-size: 32px;80  }81 82  /* Home gesture pill */83  .home-pill {84    position: absolute; bottom: 36px; left: 50%;85    transform: translateX(-50%);86    width: 360px; height: 14px; background: rgba(255,255,255,0.85);87    border-radius: 10px;88  }89 90  /* Utility: small notification dot */91  .notify-dot {92    position: absolute; right: 14px; top: 14px;93    width: 34px; height: 34px; background: #F6A8C8; border-radius: 50%;94    box-shadow: 0 2px 6px rgba(0,0,0,0.25);95  }96</style>97</head>98<body>99<div id="render-target">100  <div class="wallpaper">[IMG: Rocky cliff wallpaper]</div>101 102  <div class="overlay">103    <!-- Status Bar -->104    <div class="status-bar">105      <div class="status-left">8:20</div>106      <div class="status-right">107        <!-- Notification dot icon representation -->108        <svg class="icon" viewBox="0 0 24 24">109          <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.9"></circle>110        </svg>111        <!-- Cast/record icon (simple) -->112        <svg class="icon" viewBox="0 0 24 24">113          <rect x="4" y="6" width="16" height="12" rx="2" fill="#ffffff" opacity="0.9"></rect>114          <circle cx="18" cy="12" r="3" fill="#ffffff"></circle>115        </svg>116        <!-- Wi-Fi icon -->117        <svg class="icon" viewBox="0 0 24 24">118          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>119          <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>120          <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>121          <circle cx="12" cy="18" r="2" fill="#fff"/>122        </svg>123        <!-- Battery icon -->124        <svg class="icon" viewBox="0 0 26 24">125          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>126          <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>127          <rect x="20" y="9" width="3" height="6" rx="1" fill="#fff"></rect>128        </svg>129      </div>130    </div>131 132    <!-- Date & Weather -->133    <div class="date-block">134      <div class="date-title">Thu, Jul 27</div>135      <div class="weather-line">136        <!-- Fog icon: wavy lines -->137        <svg width="46" height="30" viewBox="0 0 46 30">138          <path d="M2 8c4 3 10 3 14 0s10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.95"/>139          <path d="M2 18c4 3 10 3 14 0s10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.95"/>140          <path d="M2 26c4 3 10 3 14 0s10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.95"/>141        </svg>142        <div>28°C · Today 31° / 26° · Fog</div>143      </div>144    </div>145 146    <!-- App Grid Row -->147    <div class="app-grid">148      <!-- Play Store -->149      <div class="app">150        <div class="circle">151          <svg viewBox="0 0 160 160" width="160" height="160">152            <defs>153              <clipPath id="clipCircle"><circle cx="80" cy="80" r="78"/></clipPath>154            </defs>155            <g clip-path="url(#clipCircle)">156              <polygon points="40,45 110,80 40,115" fill="#34A853"/>157              <polygon points="60,40 110,80 60,80" fill="#4285F4"/>158              <polygon points="60,80 110,80 70,120" fill="#FBBC04"/>159              <polygon points="40,45 60,40 60,120 40,115" fill="#EA4335"/>160            </g>161          </svg>162        </div>163        <div class="app-label">Play Store</div>164      </div>165 166      <!-- Gmail -->167      <div class="app">168        <div class="circle">169          <svg viewBox="0 0 160 160" width="160" height="160">170            <rect x="34" y="50" width="92" height="60" rx="10" fill="#ffffff"/>171            <path d="M34 60 L80 95 L126 60" stroke="#ccc" stroke-width="6" fill="none"/>172            <path d="M40 55 L80 85 L120 55" stroke="#EA4335" stroke-width="16" fill="none"/>173            <path d="M40 55 L40 110" stroke="#34A853" stroke-width="16"/>174            <path d="M120 55 L120 110" stroke="#4285F4" stroke-width="16"/>175            <path d="M40 110 L120 110" stroke="#FBBC04" stroke-width="16"/>176          </svg>177        </div>178        <div class="app-label">Gmail</div>179      </div>180 181      <!-- Photos -->182      <div class="app">183        <div class="circle">184          <svg viewBox="0 0 160 160" width="160" height="160">185            <circle cx="80" cy="80" r="20" fill="#fff"/>186            <path d="M80 40 a40 40 0 0 1 40 40 h-40 z" fill="#4285F4"/>187            <path d="M120 80 a40 40 0 0 1 -40 40 v-40 z" fill="#34A853"/>188            <path d="M80 120 a40 40 0 0 1 -40 -40 h40z" fill="#FBBC04"/>189            <path d="M40 80 a40 40 0 0 1 40 -40 v40z" fill="#EA4335"/>190          </svg>191        </div>192        <div class="app-label">Photos</div>193      </div>194 195      <!-- YouTube -->196      <div class="app">197        <div class="circle">198          <svg viewBox="0 0 160 160" width="160" height="160">199            <rect x="38" y="55" width="84" height="50" rx="12" fill="#FF0000"/>200            <polygon points="70,65 70,95 100,80" fill="#fff"/>201          </svg>202          <div class="notify-dot"></div>203        </div>204        <div class="app-label">YouTube</div>205      </div>206    </div>207 208    <!-- Dock Icons -->209    <div class="dock">210      <!-- Phone -->211      <div class="circle">212        <svg viewBox="0 0 120 120" width="90" height="90">213          <path d="M40 25c-6 6-6 16 0 22l10 10c8-3 16-9 22-16l-10-10c-6-6-16-6-22 0z" fill="#3B82F6" opacity="0.9"/>214          <path d="M55 78c14-5 26-16 32-30l12 12c-10 18-26 30-44 36l-16-18z" fill="#1D4ED8"/>215        </svg>216      </div>217      <!-- Messages -->218      <div class="circle">219        <svg viewBox="0 0 120 120" width="90" height="90">220          <rect x="24" y="28" width="72" height="48" rx="18" fill="#4F9EF9"/>221          <rect x="36" y="42" width="48" height="26" rx="12" fill="#1A73E8"/>222          <path d="M60 76 L44 92 L64 86" fill="#4F9EF9"/>223        </svg>224      </div>225      <!-- Chrome -->226      <div class="circle">227        <svg viewBox="0 0 120 120" width="90" height="90">228          <circle cx="60" cy="60" r="45" fill="#fff"/>229          <path d="M60 60 L100 60 A40 40 0 0 0 32 30z" fill="#EA4335"/>230          <path d="M60 60 L32 30 A40 40 0 0 0 34 98z" fill="#FBBC04"/>231          <path d="M60 60 L34 98 A40 40 0 0 0 100 60z" fill="#34A853"/>232          <circle cx="60" cy="60" r="22" fill="#4285F4"/>233          <circle cx="60" cy="60" r="12" fill="#73B0FF"/>234        </svg>235      </div>236      <!-- Camera -->237      <div class="circle">238        <svg viewBox="0 0 120 120" width="90" height="90">239          <rect x="24" y="36" width="72" height="44" rx="10" fill="#8A98A6"/>240          <rect x="40" y="30" width="20" height="12" rx="4" fill="#6E7A88"/>241          <circle cx="60" cy="58" r="16" fill="#3B4D66"/>242          <circle cx="60" cy="58" r="10" fill="#5E7FB1"/>243        </svg>244      </div>245    </div>246 247    <!-- Search bar -->248    <div class="search-bar">249      <div class="search-left">250        <!-- Google G -->251        <svg width="56" height="56" viewBox="0 0 56 56">252          <circle cx="28" cy="28" r="26" fill="#fff"/>253          <path d="M28 14a14 14 0 1 0 0 28c6 0 10-3 12-6l-6-4c-2 3-4 4-6 4a8 8 0 1 1 0-16c3 0 6 1 8 3l6-4c-3-4-8-5-14-5z" fill="#4285F4"/>254          <path d="M20 34l-4 4a14 14 0 0 0 12 4v-6c-3 0-6-1-8-2z" fill="#34A853"/>255          <path d="M36 22l6-4a14 14 0 0 0-14-4v6c3 0 6 1 8 2z" fill="#FBBC04"/>256          <path d="M40 28h-12v6h12a14 14 0 0 0 0-6z" fill="#EA4335"/>257        </svg>258        <div class="search-placeholder">Search…</div>259      </div>260      <div class="search-right">261        <!-- Microphone -->262        <svg width="40" height="40" viewBox="0 0 24 24">263          <rect x="8" y="4" width="8" height="10" rx="4" fill="#4285F4"/>264          <rect x="10" y="6" width="4" height="6" rx="2" fill="#fff"/>265          <path d="M6 11c0 4 3 7 6 7s6-3 6-7" stroke="#EA4335" stroke-width="2" fill="none"/>266          <rect x="11" y="18" width="2" height="3" fill="#34A853"/>267          <rect x="9" y="21" width="6" height="1.5" fill="#FBBC04"/>268        </svg>269        <!-- Lens/Camera -->270        <svg width="44" height="44" viewBox="0 0 24 24">271          <rect x="4" y="6" width="16" height="12" rx="4" fill="#fff" stroke="#ccc"/>272          <circle cx="12" cy="12" r="4" fill="#4285F4"/>273          <rect x="7" y="4" width="4" height="3" rx="1" fill="#EA4335"/>274          <rect x="15" y="4" width="4" height="3" rx="1" fill="#FBBC04"/>275          <rect x="19" y="9" width="2" height="6" rx="1" fill="#34A853"/>276        </svg>277      </div>278    </div>279 280    <!-- Home gesture pill -->281    <div class="home-pill"></div>282  </div>283</div>284</body>285</html>