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: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    border-radius: 28px;13  }14  /* Wallpaper placeholder */15  .wallpaper {16    position: absolute; inset: 0;17    background: #E0E0E0;18    border: 1px solid #BDBDBD;19    display: flex; align-items: center; justify-content: center;20    color: #757575; font-size: 24px; letter-spacing: 0.2px;21  }22  .dim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }23 24  /* Status bar */25  .status {26    position: absolute; top: 20px; left: 28px; right: 28px;27    height: 60px; display: flex; justify-content: space-between; align-items: center;28    color: #fff; font-weight: 600; font-size: 28px;29  }30  .status .icons { display: flex; gap: 22px; align-items: center; }31  .status svg { width: 40px; height: 40px; }32 33  /* Date + weather widget */34  .date {35    position: absolute; top: 140px; left: 60px; color: #fff;36  }37  .date .big { font-size: 60px; font-weight: 700; margin-bottom: 12px; }38  .date .weather { display: flex; align-items: center; gap: 16px; font-size: 30px; opacity: 0.95; }39 40  /* App grid row */41  .app-row {42    position: absolute; top: 1520px; left: 0; right: 0;43    display: flex; justify-content: space-around; align-items: flex-start;44    padding: 0 40px;45  }46  .app { width: 180px; text-align: center; color: #fff; }47  .app .circle {48    width: 170px; height: 170px; border-radius: 50%;49    background: rgba(255,255,255,0.10);50    backdrop-filter: blur(2px);51    display: flex; align-items: center; justify-content: center;52    box-shadow: 0 6px 18px rgba(0,0,0,0.35);53  }54  .app label { display: block; margin-top: 18px; font-size: 36px; font-weight: 600; }55 56  /* Bottom dock icons */57  .dock {58    position: absolute; bottom: 300px; left: 0; right: 0;59    display: flex; justify-content: space-evenly; align-items: center;60    padding: 0 60px;61  }62  .dock .app { width: 160px; }63  .dock .circle { width: 150px; height: 150px; }64 65  /* Search bar */66  .search {67    position: absolute; bottom: 160px; left: 70px; width: 940px; height: 120px;68    background: rgba(255,255,255,0.95); border-radius: 60px;69    display: flex; align-items: center; justify-content: space-between;70    padding: 0 34px; color: #333;71    box-shadow: 0 6px 18px rgba(0,0,0,0.35);72  }73  .search .gmark {74    display: flex; align-items: center; gap: 18px; font-size: 40px; font-weight: 700;75  }76  .search .right-icons { display: flex; align-items: center; gap: 24px; }77  .search svg { width: 50px; height: 50px; }78 79  /* Gesture bar */80  .gesture {81    position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);82    width: 380px; height: 12px; background: rgba(255,255,255,0.70); border-radius: 8px;83  }84</style>85</head>86<body>87<div id="render-target">88  <div class="wallpaper">[IMG: Rocky Canyon Wallpaper]</div>89  <div class="dim"></div>90 91  <!-- Status bar -->92  <div class="status">93    <div class="time">10:29</div>94    <div class="icons">95      <!-- Wi-Fi -->96      <svg viewBox="0 0 24 24" fill="none">97        <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>98        <path d="M6 13c3-2 9-2 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>99        <circle cx="12" cy="17" r="2" fill="#fff"/>100      </svg>101      <!-- Battery -->102      <svg viewBox="0 0 28 24" fill="none">103        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"/>104        <rect x="4" y="8" width="14" height="8" rx="1" fill="#fff"/>105        <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>106      </svg>107    </div>108  </div>109 110  <!-- Date and weather -->111  <div class="date">112    <div class="big">Thu, Jul 20</div>113    <div class="weather">114      <svg viewBox="0 0 64 40">115        <circle cx="22" cy="22" r="12" fill="#fff"/>116        <circle cx="34" cy="18" r="10" fill="#fff"/>117        <rect x="10" y="24" width="40" height="10" rx="5" fill="#fff"/>118      </svg>119      <div>32°C · Today 35° / 29° · Mostly cloudy</div>120    </div>121  </div>122 123  <!-- App icons row -->124  <div class="app-row">125    <!-- Play Store -->126    <div class="app">127      <div class="circle">128        <svg viewBox="0 0 100 100">129          <defs>130            <clipPath id="r">131              <circle cx="50" cy="50" r="46"></circle>132            </clipPath>133          </defs>134          <g clip-path="url(#r)">135            <polygon points="20,50 70,20 70,80" fill="#34A853"/>136            <polygon points="20,50 70,20 85,30 35,60" fill="#4285F4"/>137            <polygon points="20,50 70,80 85,70 35,40" fill="#FBBC05"/>138            <polygon points="20,50 35,40 35,60" fill="#EA4335"/>139          </g>140        </svg>141      </div>142      <label>Play Store</label>143    </div>144 145    <!-- Gmail -->146    <div class="app">147      <div class="circle">148        <svg viewBox="0 0 100 100">149          <rect x="18" y="28" width="64" height="44" rx="8" fill="#fff"/>150          <path d="M18 28 L50 48 L82 28" stroke="#EA4335" stroke-width="10" fill="none" stroke-linecap="round"/>151          <path d="M18 72 L18 38 M82 72 L82 38" stroke="#EA4335" stroke-width="10" stroke-linecap="round"/>152        </svg>153      </div>154      <label>Gmail</label>155    </div>156 157    <!-- Photos -->158    <div class="app">159      <div class="circle">160        <svg viewBox="0 0 100 100">161          <path d="M50 18 a16 16 0 0 1 0 32 h-16 a16 16 0 0 0 16 -16z" fill="#FBBC05"/>162          <path d="M82 50 a16 16 0 0 1 -32 0 v-16 a16 16 0 0 0 16 16z" fill="#34A853"/>163          <path d="M50 82 a16 16 0 0 1 0 -32 h16 a16 16 0 0 0 -16 16z" fill="#4285F4"/>164          <path d="M18 50 a16 16 0 0 1 32 0 v16 a16 16 0 0 0 -16 -16z" fill="#EA4335"/>165        </svg>166      </div>167      <label>Photos</label>168    </div>169 170    <!-- YouTube -->171    <div class="app">172      <div class="circle">173        <svg viewBox="0 0 100 100">174          <rect x="18" y="30" width="64" height="40" rx="12" fill="#FF0000"/>175          <polygon points="44,50 44,38 60,50 44,62" fill="#fff"/>176        </svg>177      </div>178      <label>YouTube</label>179    </div>180  </div>181 182  <!-- Bottom dock -->183  <div class="dock">184    <!-- Phone -->185    <div class="app">186      <div class="circle">187        <svg viewBox="0 0 100 100">188          <path d="M30 30 c10 20 20 30 40 40 l-10 10 c-16 -6 -28 -18 -34 -34 z" fill="#34A853"/>189          <rect x="58" y="68" width="12" height="12" rx="6" fill="#34A853"/>190        </svg>191      </div>192    </div>193    <!-- Messages -->194    <div class="app">195      <div class="circle">196        <svg viewBox="0 0 100 100">197          <rect x="20" y="26" width="60" height="40" rx="8" fill="#4285F4"/>198          <path d="M40 66 L38 84 L56 70" fill="#4285F4"/>199          <circle cx="36" cy="46" r="5" fill="#fff"/>200          <circle cx="50" cy="46" r="5" fill="#fff"/>201          <circle cx="64" cy="46" r="5" fill="#fff"/>202        </svg>203      </div>204    </div>205    <!-- Chrome -->206    <div class="app">207      <div class="circle">208        <svg viewBox="0 0 100 100">209          <circle cx="50" cy="50" r="44" fill="#fff"/>210          <path d="M50 50 L92 50 A42 42 0 0 0 34 20z" fill="#EA4335"/>211          <path d="M50 50 L34 20 A42 42 0 0 0 16 62z" fill="#FBBC05"/>212          <path d="M50 50 L16 62 A42 42 0 0 0 92 50z" fill="#34A853"/>213          <circle cx="50" cy="50" r="18" fill="#4285F4"/>214        </svg>215      </div>216    </div>217    <!-- Camera -->218    <div class="app">219      <div class="circle">220        <svg viewBox="0 0 100 100">221          <rect x="20" y="34" width="60" height="40" rx="8" fill="#d9d9d9"/>222          <rect x="34" y="24" width="32" height="10" rx="4" fill="#bfbfbf"/>223          <circle cx="50" cy="54" r="14" fill="#8aa0b4"/>224          <circle cx="50" cy="54" r="8" fill="#4a6b89"/>225        </svg>226      </div>227    </div>228  </div>229 230  <!-- Google search bar -->231  <div class="search">232    <div class="gmark">233      <svg viewBox="0 0 64 64">234        <circle cx="32" cy="32" r="28" fill="#fff"/>235        <path d="M32 14 a18 18 0 1 0 0 36 a18 18 0 0 0 0 -36" stroke="#4285F4" stroke-width="6" fill="none"/>236        <path d="M32 14 a18 18 0 0 1 16 10" stroke="#EA4335" stroke-width="6" fill="none"/>237        <path d="M18 44 a18 18 0 0 0 14 6" stroke="#34A853" stroke-width="6" fill="none"/>238        <path d="M34 32 h16" stroke="#FBBC05" stroke-width="6"/>239      </svg>240      <span style="font-weight:600; color:#555;">Search</span>241    </div>242    <div class="right-icons">243      <!-- Mic -->244      <svg viewBox="0 0 24 24" fill="none">245        <rect x="8" y="4" width="8" height="10" rx="4" stroke="#5f6368" stroke-width="2"/>246        <path d="M12 16 v4" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>247        <path d="M6 12 a6 6 0 0 0 12 0" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>248      </svg>249      <!-- Lens/Camera -->250      <svg viewBox="0 0 24 24" fill="none">251        <rect x="4" y="7" width="16" height="12" rx="3" stroke="#5f6368" stroke-width="2"/>252        <circle cx="12" cy="13" r="4" stroke="#5f6368" stroke-width="2"/>253        <rect x="9" y="4" width="6" height="3" rx="1.5" fill="#5f6368"/>254      </svg>255    </div>256  </div>257 258  <!-- Gesture bar -->259  <div class="gesture"></div>260</div>261</body>262</html>