GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 120px;24    width: 100%;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30    color: #FFFFFF;31    font-weight: 600;32  }33  .status-time { font-size: 48px; letter-spacing: 0.5px; }34  .status-icons { display: flex; align-items: center; gap: 24px; }35 36  /* App bar */37  .app-bar {38    position: absolute;39    top: 120px;40    left: 0;41    height: 140px;42    width: 100%;43    padding: 0 36px;44    box-sizing: border-box;45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .app-left {50    display: flex; align-items: center; gap: 26px;51  }52  .app-title {53    display: flex; align-items: center; gap: 12px;54    font-size: 64px; font-weight: 700;55  }56  .overflow-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }57 58  /* Reminder row */59  .reminder-row {60    position: absolute;61    top: 300px;62    left: 36px;63    right: 36px;64    display: flex;65    align-items: center;66    justify-content: space-between;67  }68  .reminder-left { display: flex; align-items: center; gap: 28px; }69  .checkbox {70    width: 54px; height: 54px; border: 3px solid #8D8D8D; border-radius: 8px;71  }72  .reminder-text {73    color: #3D6CE6;74    font-size: 44px;75    font-weight: 700;76  }77 78  /* Title and description */79  .title {80    position: absolute;81    top: 410px;82    left: 36px;83    right: 36px;84    font-size: 84px;85    font-weight: 800;86    color: #FFFFFF;87  }88  .description {89    position: absolute;90    top: 540px;91    left: 36px;92    right: 36px;93    font-size: 54px;94    color: #8D8D8D;95    font-weight: 500;96  }97 98  /* Bottom tools */99  .bottom-tools {100    position: absolute;101    bottom: 160px;102    left: 0;103    width: 100%;104    padding: 0 60px;105    box-sizing: border-box;106    display: flex;107    align-items: center;108    gap: 120px;109  }110  .tool {111    width: 96px; height: 96px;112    display: flex; align-items: center; justify-content: center;113    opacity: 0.7;114  }115  .tool svg { width: 88px; height: 88px; }116 117  /* Home indicator */118  .home-indicator {119    position: absolute;120    bottom: 40px;121    left: 50%;122    transform: translateX(-50%);123    width: 420px; height: 16px; background: #FFFFFF; border-radius: 10px; opacity: 0.9;124  }125 126  /* Icon colors */127  .icon-white path, .icon-white circle, .icon-white rect, .icon-white polygon, .icon-white line { stroke: #FFFFFF; fill: none; }128  .icon-grey path, .icon-grey circle, .icon-grey rect, .icon-grey polygon, .icon-grey line { stroke: #9E9E9E; fill: none; }129  .icon-blue path, .icon-blue circle, .icon-blue rect, .icon-blue polygon, .icon-blue line { stroke: #3D6CE6; fill: none; }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div class="status-time">2:01</div>138    <div class="status-icons">139      <!-- Wi-Fi -->140      <svg width="60" height="60" viewBox="0 0 48 48" class="icon-white">141        <path d="M6 18 Q24 6 42 18" stroke-width="4" />142        <path d="M12 26 Q24 16 36 26" stroke-width="4" />143        <path d="M18 34 Q24 28 30 34" stroke-width="4" />144        <circle cx="24" cy="38" r="3" fill="#FFFFFF" stroke="none"/>145      </svg>146      <!-- Battery -->147      <svg width="60" height="60" viewBox="0 0 48 48" class="icon-white">148        <rect x="6" y="14" width="32" height="20" rx="4" stroke-width="4"/>149        <rect x="38" y="18" width="4" height="12" rx="2" stroke-width="4" />150      </svg>151    </div>152  </div>153 154  <!-- App Bar -->155  <div class="app-bar">156    <div class="app-left">157      <!-- Back Arrow -->158      <svg width="72" height="72" viewBox="0 0 48 48">159        <path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160      </svg>161      <div class="app-title">162        <span>Inbox</span>163        <!-- Dropdown caret -->164        <svg width="36" height="36" viewBox="0 0 24 24">165          <path d="M6 9 L12 15 L18 9" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166        </svg>167      </div>168    </div>169    <div class="overflow-btn">170      <!-- Vertical dots -->171      <svg width="48" height="48" viewBox="0 0 24 24">172        <circle cx="12" cy="5" r="2.2" fill="#FFFFFF"/>173        <circle cx="12" cy="12" r="2.2" fill="#FFFFFF"/>174        <circle cx="12" cy="19" r="2.2" fill="#FFFFFF"/>175      </svg>176    </div>177  </div>178 179  <!-- Reminder Row -->180  <div class="reminder-row">181    <div class="reminder-left">182      <div class="checkbox"></div>183      <!-- Alarm icon + text -->184      <div style="display:flex; align-items:center; gap:12px;">185        <svg width="54" height="54" viewBox="0 0 48 48" class="icon-blue">186          <circle cx="24" cy="24" r="14" stroke-width="4" />187          <path d="M24 24 L24 16" stroke-width="4" stroke-linecap="round"/>188          <path d="M24 24 L32 24" stroke-width="4" stroke-linecap="round"/>189          <path d="M9 10 L15 6" stroke-width="4" />190          <path d="M39 10 L33 6" stroke-width="4" />191        </svg>192        <div class="reminder-text">Aug 20, 09:00AM, 10d left</div>193      </div>194    </div>195    <!-- Flag icon -->196    <svg width="72" height="72" viewBox="0 0 48 48" class="icon-white">197      <path d="M10 40 L10 8" stroke-width="4" />198      <path d="M10 10 L32 10 L26 16 L32 22 L14 22" stroke-width="4" fill="none" stroke-linejoin="round"/>199    </svg>200  </div>201 202  <!-- Title and description -->203  <div class="title">Shimla tour</div>204  <div class="description">Description</div>205 206  <!-- Bottom tools -->207  <div class="bottom-tools">208    <!-- Tag icon -->209    <div class="tool">210      <svg viewBox="0 0 48 48" class="icon-grey">211        <path d="M10 10 H28 L40 22 L24 38 L10 24 Z" stroke-width="4" stroke-linejoin="round"/>212        <circle cx="16" cy="16" r="3" fill="#9E9E9E" stroke="none"/>213      </svg>214    </div>215    <!-- List icon -->216    <div class="tool">217      <svg viewBox="0 0 48 48" class="icon-grey">218        <circle cx="10" cy="12" r="3" fill="#9E9E9E" stroke="none"/>219        <path d="M18 12 H40" stroke-width="4" />220        <circle cx="10" cy="24" r="3" fill="#9E9E9E" stroke="none"/>221        <path d="M18 24 H40" stroke-width="4" />222        <circle cx="10" cy="36" r="3" fill="#9E9E9E" stroke="none"/>223        <path d="M18 36 H40" stroke-width="4" />224      </svg>225    </div>226    <!-- Image icon -->227    <div class="tool">228      <svg viewBox="0 0 48 48" class="icon-grey">229        <rect x="6" y="8" width="36" height="32" rx="4" stroke-width="4"/>230        <circle cx="16" cy="18" r="4" fill="#9E9E9E" stroke="none"/>231        <path d="M10 34 L22 24 L28 30 L36 22 L42 34" stroke-width="4" />232      </svg>233    </div>234  </div>235 236  <!-- Home indicator -->237  <div class="home-indicator"></div>238 239</div>240</body>241</html>