GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0F0F0F;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #FFFFFF;23    box-sizing: border-box;24  }25  .status-left { display: flex; align-items: center; gap: 20px; }26  .time { font-size: 34px; font-weight: 500; }27 28  .status-right { display: flex; align-items: center; gap: 26px; }29  .icon { width: 44px; height: 44px; }30 31  /* Search header */32  .search-row {33    padding: 8px 36px 24px 36px;34    display: flex; align-items: center; gap: 24px;35    box-sizing: border-box;36  }37  .back-btn {38    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;39  }40  .search-bar {41    flex: 1;42    height: 96px;43    background: #2C2C2C;44    border-radius: 18px;45    display: flex;46    align-items: center;47    padding: 0 24px;48    box-sizing: border-box;49    color: #EDEDED;50    font-size: 34px;51  }52  .search-input-text { flex: 1; color: #EDEDED; }53  .search-close { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }54 55  /* Content header (grid icon) */56  .content-top {57    padding: 12px 36px 0 36px;58    display: flex; justify-content: flex-end;59    box-sizing: border-box;60  }61 62  /* List item */63  .list {64    padding: 24px 36px;65    box-sizing: border-box;66  }67  .item {68    display: flex; align-items: center;69    padding: 24px 0;70    border-radius: 12px;71  }72  .doc-icon-wrap { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-right: 26px; }73  .item-content { flex: 1; }74  .item-title {75    font-size: 40px; color: #FFFFFF; line-height: 1.3; margin-bottom: 10px;76  }77  .item-meta {78    display: flex; align-items: center; gap: 12px;79    color: #BDBDBD; font-size: 30px;80  }81  .more-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }82 83  /* Bottom gesture pill */84  .gesture-pill {85    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);86    width: 240px; height: 10px; background: #EDEDED; border-radius: 10px;87    opacity: 0.9;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div class="status-left">97      <div class="time">7:38</div>98      <!-- small stub icons to emulate status -->99      <svg class="icon" viewBox="0 0 48 48">100        <circle cx="24" cy="24" r="18" fill="#FFFFFF" opacity="0.14"></circle>101        <rect x="14" y="20" width="20" height="8" rx="2" fill="#FFFFFF" opacity="0.25"></rect>102      </svg>103    </div>104    <div class="status-right">105      <!-- Signal/WiFi -->106      <svg class="icon" viewBox="0 0 48 48">107        <path d="M4 18c10-10 30-10 40 0" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.7"/>108        <path d="M10 24c7-7 21-7 28 0" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.7"/>109        <path d="M18 30c4-4 12-4 16 0" stroke="#FFFFFF" stroke-width="4" fill="none"/>110        <circle cx="26" cy="36" r="4" fill="#FFFFFF"/>111      </svg>112      <!-- Battery -->113      <svg class="icon" viewBox="0 0 60 48">114        <rect x="6" y="10" width="40" height="24" rx="4" stroke="#FFFFFF" stroke-width="4" fill="none"/>115        <rect x="10" y="14" width="32" height="16" rx="2" fill="#FFFFFF"/>116        <rect x="48" y="16" width="6" height="12" rx="2" fill="#FFFFFF"/>117      </svg>118    </div>119  </div>120 121  <!-- Search header -->122  <div class="search-row">123    <div class="back-btn">124      <svg width="56" height="56" viewBox="0 0 64 64">125        <path d="M36 16 L20 32 L36 48" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126      </svg>127    </div>128    <div class="search-bar">129      <div class="search-input-text">tomorrowland</div>130      <div class="search-close">131        <svg width="44" height="44" viewBox="0 0 48 48">132          <path d="M14 14 L34 34 M34 14 L14 34" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- Content header (grid icon on the right) -->139  <div class="content-top">140    <svg width="64" height="64" viewBox="0 0 48 48">141      <rect x="6" y="6" width="14" height="14" rx="2" fill="#FFFFFF" opacity="0.8"/>142      <rect x="28" y="6" width="14" height="14" rx="2" fill="#FFFFFF" opacity="0.8"/>143      <rect x="6" y="28" width="14" height="14" rx="2" fill="#FFFFFF" opacity="0.8"/>144      <rect x="28" y="28" width="14" height="14" rx="2" fill="#FFFFFF" opacity="0.8"/>145    </svg>146  </div>147 148  <!-- List -->149  <div class="list">150    <div class="item">151      <div class="doc-icon-wrap">152        <!-- Document icon with red band -->153        <svg width="96" height="96" viewBox="0 0 96 96">154          <rect x="18" y="14" width="52" height="68" rx="6" fill="#FFFFFF"/>155          <polygon points="70,14 70,34 52,14" fill="#E6E6E6"/>156          <rect x="24" y="58" width="40" height="10" rx="2" fill="#D6403B"/>157        </svg>158      </div>159      <div class="item-content">160        <div class="item-title">Tomorrowland</div>161        <div class="item-meta">162          <!-- People icon -->163          <svg width="40" height="40" viewBox="0 0 48 48">164            <circle cx="16" cy="18" r="6" fill="#BDBDBD"/>165            <circle cx="30" cy="20" r="5" fill="#BDBDBD" opacity="0.9"/>166            <path d="M6 36c0-7 20-7 20 0" fill="none" stroke="#BDBDBD" stroke-width="4" stroke-linecap="round"/>167            <path d="M26 36c0-5 14-5 14 0" fill="none" stroke="#BDBDBD" stroke-width="4" stroke-linecap="round" opacity="0.9"/>168          </svg>169          <span>2.3 MB</span>170          <span>•</span>171          <span>Yesterday at 2:05 PM</span>172        </div>173      </div>174      <div class="more-btn">175        <svg width="48" height="48" viewBox="0 0 48 48">176          <circle cx="24" cy="12" r="4" fill="#BDBDBD"/>177          <circle cx="24" cy="24" r="4" fill="#BDBDBD"/>178          <circle cx="24" cy="36" r="4" fill="#BDBDBD"/>179        </svg>180      </div>181    </div>182  </div>183 184  <!-- Bottom gesture pill -->185  <div class="gesture-pill"></div>186 187</div>188</body>189</html>