GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Generated UI</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; background: #ffffff;10  }11 12  /* Status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 140px;15    background: #BDBDBD; color: #fff; display: flex; align-items: center; justify-content: space-between;16    padding: 0 40px; box-sizing: border-box; font-weight: 600; letter-spacing: 0.5px;17  }18  .status-bar .time { font-size: 44px; }19  .status-icons { display: flex; align-items: center; gap: 28px; }20  .status-icons svg { width: 50px; height: 50px; }21 22  /* Content area */23  .content {24    position: absolute; left: 0; right: 0; top: 140px; bottom: 0;25    padding: 36px 40px 280px 40px; box-sizing: border-box; overflow: hidden;26    background: #ffffff;27  }28 29  /* Skeleton blocks */30  .skeleton {31    background: linear-gradient(120deg, #EFEFEF 15%, #E5E5E5 50%, #EFEFEF 85%);32    border: 1px solid #E0E0E0;33  }34  .bar.large { width: 1000px; height: 80px; border-radius: 14px; }35  .bar.small { width: 420px; height: 58px; border-radius: 12px; margin-top: 26px; }36 37  .card-row { display: flex; gap: 40px; margin-top: 34px; }38  .card-row .card { width: 306px; height: 420px; border-radius: 28px; }39  .card-row .card .img-label,40  .banner.big .img-label,41  .large-card .img-label { 42    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;43    color: #9E9E9E; font-size: 28px;44  }45 46  .banner.big { width: 1000px; height: 540px; border-radius: 28px; margin-top: 36px; }47 48  .grid-row { display: flex; gap: 40px; margin-top: 36px; }49  .large-card { width: 480px; height: 620px; border-radius: 26px; }50 51  /* Bottom toast */52  .blue-toast {53    position: absolute; left: 40px; bottom: 240px; width: 1000px; height: 96px;54    background: #3B74D8; border-radius: 28px; color: #fff;55    display: flex; align-items: center; justify-content: center;56    font-size: 36px; font-weight: 600; letter-spacing: 0.3px;57    box-shadow: 0 6px 16px rgba(0,0,0,0.1);58  }59  .blue-toast .bold { font-weight: 800; }60 61  /* Bottom navigation */62  .nav {63    position: absolute; left: 0; bottom: 0; width: 100%; height: 220px;64    background: #ffffff; border-top: 1px solid #EAEAEA;65  }66  .nav .indicator {67    position: absolute; left: 40px; top: -16px; width: 240px; height: 12px;68    background: #1F6B4B; border-radius: 8px;69  }70  .items {71    height: 100%; display: flex; justify-content: space-around; align-items: flex-end; padding-bottom: 32px;72  }73  .item { text-align: center; color: #1F6B4B; }74  .item svg { width: 66px; height: 66px; }75  .label { font-size: 36px; margin-top: 10px; }76  .item.active .label { font-weight: 700; }77 78  /* Home indicator (gesture bar) */79  .home-indicator {80    position: absolute; bottom: 12px; left: 425px; width: 230px; height: 14px;81    background: #000000; opacity: 0.85; border-radius: 10px;82  }83</style>84</head>85<body>86<div id="render-target">87  <div class="status-bar">88    <div class="time">11:45</div>89    <div class="status-icons">90      <!-- Wi-Fi icon -->91      <svg viewBox="0 0 24 24" fill="none">92        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>93        <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>94        <path d="M8.5 14.5c2.5-2 6.5-2 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>95        <circle cx="12" cy="18" r="1.6" fill="#fff"/>96      </svg>97      <!-- Battery icon -->98      <svg viewBox="0 0 28 24" fill="none">99        <rect x="1" y="5" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"/>100        <rect x="23.5" y="9" width="4" height="6" rx="1" fill="#fff"/>101        <path d="M11 8l-3 5h3l-1.5 5 5.5-7h-3l2-3z" fill="#fff"/>102      </svg>103    </div>104  </div>105 106  <div class="content">107    <div class="skeleton bar large"></div>108    <div class="skeleton bar small"></div>109 110    <div class="card-row">111      <div class="skeleton card"><div class="img-label">[IMG: Product Card]</div></div>112      <div class="skeleton card"><div class="img-label">[IMG: Product Card]</div></div>113      <div class="skeleton card"><div class="img-label">[IMG: Product Card]</div></div>114    </div>115 116    <div class="skeleton bar small" style="margin-top: 42px;"></div>117 118    <div class="skeleton banner big"><div class="img-label">[IMG: Wide Promotion Banner]</div></div>119 120    <div class="skeleton bar small" style="margin-top: 42px;"></div>121 122    <div class="grid-row">123      <div class="skeleton large-card"><div class="img-label">[IMG: Large Card]</div></div>124      <div class="skeleton large-card"><div class="img-label">[IMG: Large Card]</div></div>125    </div>126 127    <div class="skeleton bar small" style="margin-top: 42px;"></div>128  </div>129 130  <div class="blue-toast">YAY! You get <span class="bold">FREE Delivery</span></div>131 132  <div class="nav">133    <div class="indicator"></div>134    <div class="items">135      <div class="item active">136        <!-- Storefront icon -->137        <svg viewBox="0 0 24 24" fill="none">138          <path d="M3 9h18l-1.5-4.5H4.5L3 9z" stroke="#1F6B4B" stroke-width="2" stroke-linejoin="round"/>139          <rect x="4" y="9" width="16" height="10" rx="2" stroke="#1F6B4B" stroke-width="2"/>140          <path d="M8 13h4" stroke="#1F6B4B" stroke-width="2" stroke-linecap="round"/>141        </svg>142        <div class="label">Just</div>143      </div>144      <div class="item">145        <!-- Grid icon -->146        <svg viewBox="0 0 24 24" fill="none">147          <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="#1F6B4B" stroke-width="2"/>148          <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="#1F6B4B" stroke-width="2"/>149          <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="#1F6B4B" stroke-width="2"/>150          <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="#1F6B4B" stroke-width="2"/>151        </svg>152        <div class="label">Explore</div>153      </div>154      <div class="item">155        <!-- Receipt icon -->156        <svg viewBox="0 0 24 24" fill="none">157          <path d="M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2V3z" stroke="#1F6B4B" stroke-width="2" stroke-linejoin="round"/>158          <path d="M8 8h8M8 12h8M8 16h6" stroke="#1F6B4B" stroke-width="2" stroke-linecap="round"/>159        </svg>160        <div class="label">Orders</div>161      </div>162    </div>163  </div>164 165  <div class="home-indicator"></div>166</div>167</body>168</html>