GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Dark App UI</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    background: #0f0f0f;14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 26px 32px;25    display: flex;26    align-items: center;27    box-sizing: border-box;28    color: #f5f5f5;29    font-weight: 600;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 20px;35  }36  .time {37    font-size: 42px;38    letter-spacing: 0.5px;39  }40  .mini-icons {41    display: flex;42    gap: 18px;43    margin-left: 10px;44  }45  .mini-dot {46    width: 22px;47    height: 22px;48    border-radius: 50%;49    background: #dcdcdc;50    opacity: 0.95;51  }52  .status-right {53    margin-left: auto;54    display: flex;55    align-items: center;56    gap: 22px;57  }58  .icon {59    width: 40px;60    height: 40px;61  }62 63  /* Hero illustration area */64  .hero {65    position: absolute;66    top: 120px;67    left: 0;68    width: 100%;69    height: 720px;70    display: flex;71    align-items: center;72    justify-content: center;73  }74  .hero svg { display: block; }75  .hero .shape { fill: #d9dde1; }76 77  /* Content list skeleton area */78  .content {79    position: absolute;80    top: 840px;81    left: 0;82    width: 100%;83    height: 1560px;84    background: #121212;85    padding: 32px;86    box-sizing: border-box;87  }88  .skeleton-group {89    margin-bottom: 56px;90  }91  .bar {92    background: #1a1a1a;93    height: 34px;94    border-radius: 10px;95    margin: 16px 0;96  }97  .bar.small { width: 300px; }98  .bar.medium { width: 680px; }99  .bar.large { width: 880px; }100  .bar.tiny { width: 480px; }101  .divider-space {102    height: 10px;103  }104  /* Bottom gesture bar */105  .gesture-bar {106    position: absolute;107    bottom: 36px;108    left: 50%;109    transform: translateX(-50%);110    width: 540px;111    height: 14px;112    border-radius: 7px;113    background: #d9d9d9;114    opacity: 0.9;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">124      <div class="time">7:03</div>125      <div class="mini-icons">126        <div class="mini-dot"></div>127        <div class="mini-dot"></div>128        <div class="mini-dot"></div>129        <div class="mini-dot"></div>130        <div class="mini-dot"></div>131      </div>132    </div>133    <div class="status-right">134      <!-- Simple Wi-Fi icon -->135      <svg class="icon" viewBox="0 0 24 24">136        <path fill="#eaeaea" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2c-2-2-4-2-6 0z"/>137      </svg>138      <!-- Battery icon -->139      <svg class="icon" viewBox="0 0 32 24">140        <rect x="2" y="6" width="24" height="12" rx="2" fill="#eaeaea"></rect>141        <rect x="26" y="9" width="4" height="6" rx="1" fill="#eaeaea"></rect>142        <rect x="5" y="8" width="17" height="8" fill="#0f0f0f"></rect>143      </svg>144    </div>145  </div>146 147  <!-- Hero Illustration -->148  <div class="hero">149    <svg width="760" height="380" viewBox="0 0 760 380">150      <!-- Trees -->151      <ellipse class="shape" cx="90" cy="160" rx="60" ry="85"></ellipse>152      <rect class="shape" x="78" y="230" width="24" height="90"></rect>153 154      <ellipse class="shape" cx="200" cy="150" rx="70" ry="95"></ellipse>155      <rect class="shape" x="188" y="235" width="24" height="95"></rect>156 157      <!-- House body -->158      <polygon class="shape" points="300,100 440,220 440,320 300,320 300,180" ></polygon>159      <rect class="shape" x="300" y="180" width="140" height="140"></rect>160 161      <!-- Small window -->162      <rect fill="#0f0f0f" x="332" y="220" width="36" height="52"></rect>163 164      <!-- Arched sheds -->165      <!-- First arch -->166      <polygon class="shape" points="460,200 500,160 540,200 540,320 500,320 500,200"></polygon>167      <!-- Second arch -->168      <polygon class="shape" points="540,200 580,160 620,200 620,320 580,320 580,200"></polygon>169      <!-- Third arch -->170      <polygon class="shape" points="620,200 660,160 700,200 700,320 660,320 660,200"></polygon>171    </svg>172  </div>173 174  <!-- Content area with skeleton items -->175  <div class="content">176    <div class="skeleton-group">177      <div class="bar small"></div>178      <div class="bar medium"></div>179      <div class="bar large"></div>180      <div class="bar tiny"></div>181    </div>182 183    <div class="skeleton-group">184      <div class="bar small"></div>185      <div class="bar medium"></div>186      <div class="bar large"></div>187      <div class="bar tiny"></div>188    </div>189 190    <div class="skeleton-group">191      <div class="bar small"></div>192      <div class="bar medium"></div>193      <div class="bar large"></div>194      <div class="bar tiny"></div>195    </div>196 197    <div class="skeleton-group">198      <div class="bar small"></div>199      <div class="bar medium"></div>200      <div class="bar large"></div>201      <div class="bar tiny"></div>202    </div>203 204    <div class="skeleton-group">205      <div class="bar small"></div>206      <div class="bar medium"></div>207      <div class="bar large"></div>208      <div class="bar tiny"></div>209    </div>210 211    <div class="skeleton-group">212      <div class="bar small"></div>213      <div class="bar medium"></div>214      <div class="bar large"></div>215      <div class="bar tiny"></div>216    </div>217 218    <div class="skeleton-group">219      <div class="bar small"></div>220      <div class="bar medium"></div>221      <div class="bar large"></div>222      <div class="bar tiny"></div>223    </div>224  </div>225 226  <!-- Bottom gesture bar -->227  <div class="gesture-bar"></div>228</div>229</body>230</html>