GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    border-radius: 30px;13    box-shadow: 0 20px 60px rgba(0,0,0,0.25);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;24  }25 26  /* Status bar */27  .status-bar {28    position: absolute;29    top: 24px; left: 24px; right: 24px;30    height: 60px; display: flex; align-items: center; justify-content: space-between;31    color: #ffffff;32  }33  .sb-left { display: flex; align-items: center; gap: 18px; font-weight: 600; }34  .sb-left .time { font-size: 40px; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }35  .sb-icons { display: flex; align-items: center; gap: 16px; }36  .sb-icons svg { width: 36px; height: 36px; opacity: 0.95; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }37 38  /* Date + Weather */39  .date-block {40    position: absolute;41    left: 64px; top: 220px; color: #ffffff;42    text-shadow: 0 3px 8px rgba(0,0,0,0.45);43  }44  .date-text { font-size: 64px; font-weight: 500; margin-bottom: 22px; }45  .weather { display: flex; align-items: center; gap: 16px; font-size: 36px; opacity: 0.95; }46 47  /* App grid */48  .app-grid {49    position: absolute;50    left: 0; width: 100%;51    top: 1520px;52    display: flex; justify-content: space-around; padding: 0 40px;53  }54  .app-item { width: 200px; text-align: center; color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.45); }55  .icon-circle {56    width: 170px; height: 170px; margin: 0 auto 24px auto;57    border-radius: 50%;58    background: #ffffff;59    display: flex; align-items: center; justify-content: center;60    box-shadow: 0 8px 20px rgba(0,0,0,0.35);61  }62  .app-item .label { font-size: 40px; }63  .icon-circle svg { width: 110px; height: 110px; }64 65  /* Dock icons */66  .dock {67    position: absolute;68    left: 0; width: 100%; top: 1880px;69    display: flex; justify-content: space-evenly; padding: 0 60px;70  }71  .dock .icon-circle { width: 150px; height: 150px; margin-bottom: 0; }72 73  /* Search pill */74  .search-bar {75    position: absolute; left: 60px; right: 60px; top: 2060px;76    height: 130px; background: #2D2D2D; border-radius: 70px;77    display: flex; align-items: center; justify-content: space-between;78    padding: 0 40px;79    box-shadow: 0 16px 28px rgba(0,0,0,0.45);80  }81  .search-left { display: flex; align-items: center; gap: 22px; color: #fff; }82  .search-left .g-logo {83    width: 80px; height: 80px; border-radius: 50%;84    background: #1F1F1F; display: flex; align-items: center; justify-content: center;85  }86  .search-actions { display: flex; align-items: center; gap: 30px; }87  .search-actions .action {88    width: 70px; height: 70px; border-radius: 50%; background: #3A3A3A;89    display: flex; align-items: center; justify-content: center;90  }91  .search-actions svg { width: 38px; height: 38px; fill: #ffffff; }92 93  /* Gesture bar */94  .gesture-bar {95    position: absolute; left: 50%; transform: translateX(-50%);96    bottom: 28px; width: 320px; height: 12px; border-radius: 10px;97    background: rgba(255,255,255,0.7);98  }99</style>100</head>101<body>102<div id="render-target">103 104  <div class="wallpaper">[IMG: Beach Aerial Wallpaper with Two Kayaks]</div>105 106  <!-- Status Bar -->107  <div class="status-bar">108    <div class="sb-left">109      <div class="time">12:41</div>110      <!-- Calendar icon -->111      <div class="sb-icons">112        <svg viewBox="0 0 24 24">113          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#ffffff"/>114          <rect x="3" y="9" width="18" height="2" fill="#B0BEC5"/>115          <rect x="7" y="3" width="2" height="4" fill="#B0BEC5"/>116          <rect x="15" y="3" width="2" height="4" fill="#B0BEC5"/>117        </svg>118        <!-- Small cloud icon -->119        <svg viewBox="0 0 24 24">120          <path d="M6 15a4 4 0 0 1 0-8c1.4 0 2.6.7 3.3 1.8A5 5 0 0 1 14 8a5 5 0 0 1 0 10H7.5C6.7 18 6 16.7 6 15z" fill="#ffffff"/>121        </svg>122      </div>123    </div>124    <div class="sb-icons">125      <!-- WiFi -->126      <svg viewBox="0 0 24 24">127        <path d="M2 8c5.5-4.6 14.5-4.6 20 0" stroke="#ffffff" stroke-width="2" fill="none"/>128        <path d="M5 12c3.8-3.1 10.2-3.1 14 0" stroke="#ffffff" stroke-width="2" fill="none"/>129        <path d="M9 16c2.1-1.8 5.9-1.8 8 0" stroke="#ffffff" stroke-width="2" fill="none"/>130        <circle cx="12" cy="19" r="2" fill="#ffffff"/>131      </svg>132      <!-- Battery -->133      <svg viewBox="0 0 26 24">134        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"/>135        <rect x="20" y="9" width="3" height="6" fill="#ffffff"/>136        <rect x="4" y="8" width="12" height="8" fill="#4CAF50"/>137      </svg>138    </div>139  </div>140 141  <!-- Date and Weather -->142  <div class="date-block">143    <div class="date-text">Mon, Jun 19</div>144    <div class="weather">145      <svg viewBox="0 0 24 24" width="42" height="42">146        <path d="M6 15a4 4 0 0 1 0-8c1.4 0 2.6.7 3.3 1.8A5 5 0 0 1 14 8a5 5 0 0 1 0 10H8.5C7 18 6 16.7 6 15z" fill="#ffffff"/>147      </svg>148      <span>29°C</span>149    </div>150  </div>151 152  <!-- Main app shortcuts -->153  <div class="app-grid">154    <!-- Play Store -->155    <div class="app-item">156      <div class="icon-circle">157        <svg viewBox="0 0 64 64">158          <polygon points="10,16 38,32 10,48" fill="#00BCD4"/>159          <polygon points="38,32 50,24 50,40" fill="#FFC107"/>160          <polygon points="10,16 30,14 50,24 38,32" fill="#8BC34A"/>161          <polygon points="10,48 30,50 50,40 38,32" fill="#F44336"/>162        </svg>163      </div>164      <div class="label">Play Store</div>165    </div>166    <!-- Gmail -->167    <div class="app-item">168      <div class="icon-circle">169        <svg viewBox="0 0 64 64">170          <rect x="10" y="18" width="44" height="28" rx="4" fill="#FFFFFF" stroke="#B0BEC5" stroke-width="2"/>171          <path d="M10 18 L32 34 L54 18" stroke="#F44336" stroke-width="6" fill="none"/>172          <path d="M10 18 L10 46" stroke="#4CAF50" stroke-width="6"/>173          <path d="M54 18 L54 46" stroke="#2196F3" stroke-width="6"/>174        </svg>175      </div>176      <div class="label">Gmail</div>177    </div>178    <!-- Photos -->179    <div class="app-item">180      <div class="icon-circle">181        <svg viewBox="0 0 64 64">182          <circle cx="32" cy="22" r="10" fill="#F44336"/>183          <circle cx="22" cy="32" r="10" fill="#FFC107"/>184          <circle cx="42" cy="32" r="10" fill="#4CAF50"/>185          <circle cx="32" cy="42" r="10" fill="#2196F3"/>186        </svg>187      </div>188      <div class="label">Photos</div>189    </div>190    <!-- YouTube -->191    <div class="app-item">192      <div class="icon-circle">193        <svg viewBox="0 0 64 64">194          <rect x="10" y="18" width="44" height="28" rx="8" fill="#FF3D00"/>195          <polygon points="30,24 30,40 44,32" fill="#FFFFFF"/>196        </svg>197      </div>198      <div class="label">YouTube</div>199    </div>200  </div>201 202  <!-- Dock icons -->203  <div class="dock">204    <!-- Phone -->205    <div class="icon-circle">206      <svg viewBox="0 0 64 64">207        <path d="M20 18c4 0 8 4 8 8l-3 4c5 7 10 11 17 14l4-3c4 0 8 4 8 8-1 3-5 5-8 5C28 62 10 44 10 30c0-3 2-7 5-8z" fill="#3F51B5"/>208      </svg>209    </div>210    <!-- Messages -->211    <div class="icon-circle">212      <svg viewBox="0 0 64 64">213        <rect x="12" y="14" width="40" height="30" rx="8" fill="#3D5AFE"/>214        <rect x="18" y="24" width="28" height="8" rx="4" fill="#BBDEFB"/>215        <polygon points="24,44 12,54 12,42" fill="#3D5AFE"/>216      </svg>217    </div>218    <!-- Chrome -->219    <div class="icon-circle">220      <svg viewBox="0 0 64 64">221        <circle cx="32" cy="32" r="28" fill="#4CAF50"/>222        <path d="M32 4 A28 28 0 0 1 60 32H32Z" fill="#F44336"/>223        <path d="M32 32H4 A28 28 0 0 1 32 4Z" fill="#FFC107"/>224        <circle cx="32" cy="32" r="12" fill="#2196F3"/>225      </svg>226    </div>227    <!-- Camera -->228    <div class="icon-circle">229      <svg viewBox="0 0 64 64">230        <rect x="10" y="20" width="44" height="28" rx="6" fill="#424242"/>231        <circle cx="32" cy="34" r="10" fill="#90CAF9"/>232        <rect x="18" y="16" width="12" height="8" rx="2" fill="#616161"/>233      </svg>234    </div>235  </div>236 237  <!-- Search bar -->238  <div class="search-bar">239    <div class="search-left">240      <div class="g-logo">241        <svg viewBox="0 0 24 24">242          <path d="M12 4a8 8 0 1 0 0 16c2 0 3.6-.7 4.8-1.8l-2.5-2c-.7.5-1.5.8-2.3.8a5 5 0 1 1 4.7-6.6H12v3h7.6A8 8 0 0 0 12 4z" fill="#ffffff"/>243        </svg>244      </div>245      <div style="color:#9E9E9E; font-size:36px;">Search</div>246    </div>247    <div class="search-actions">248      <div class="action">249        <!-- Mic -->250        <svg viewBox="0 0 24 24">251          <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#ffffff"/>252          <path d="M5 11a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5z" fill="#ffffff"/>253          <rect x="11" y="18" width="2" height="4" fill="#ffffff"/>254        </svg>255      </div>256      <div class="action">257        <!-- Camera -->258        <svg viewBox="0 0 24 24">259          <rect x="3" y="6" width="18" height="12" rx="3" fill="#ffffff"/>260          <circle cx="12" cy="12" r="4" fill="#2D2D2D"/>261          <rect x="7" y="3" width="6" height="4" rx="1" fill="#ffffff"/>262        </svg>263      </div>264    </div>265  </div>266 267  <!-- Gesture bar -->268  <div class="gesture-bar"></div>269</div>270</body>271</html>