GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Inbox Detail UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14  }15 16  /* Generic text styles */17  .text-white { color: #ffffff; }18  .text-grey { color: #9e9e9e; }19  .text-blue { color: #4c7dff; }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    height: 120px;27    width: 100%;28    padding: 0 40px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    box-sizing: border-box;33  }34  .status-left {35    font-size: 44px;36    font-weight: 600;37    color: #ffffff;38    letter-spacing: 0.5px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .icon {46    display: inline-block;47  }48  .icon svg { display: block; }49 50  /* Header */51  .header {52    position: absolute;53    top: 120px;54    left: 0;55    width: 100%;56    height: 120px;57    padding: 0 40px;58    display: flex;59    align-items: center;60    justify-content: space-between;61    box-sizing: border-box;62  }63  .header-left {64    display: flex;65    align-items: center;66    gap: 28px;67  }68  .header-title {69    font-size: 56px;70    font-weight: 700;71    color: #ffffff;72  }73  .header-right {74    display: flex;75    align-items: center;76    gap: 36px;77  }78 79  /* Reminder row */80  .reminder-row {81    position: absolute;82    top: 240px;83    left: 0;84    width: 100%;85    padding: 0 40px;86    box-sizing: border-box;87    height: 100px;88    display: flex;89    align-items: center;90    justify-content: space-between;91  }92  .reminder-left {93    display: flex;94    align-items: center;95    gap: 24px;96  }97  .reminder-text {98    font-size: 40px;99    font-weight: 600;100    color: #4c7dff;101  }102 103  /* Content */104  .content {105    position: absolute;106    top: 360px;107    left: 0;108    width: 100%;109    padding: 0 40px;110    box-sizing: border-box;111  }112  .title {113    font-size: 88px;114    font-weight: 800;115    color: #ffffff;116    margin-bottom: 36px;117    letter-spacing: 0.2px;118  }119  .subtitle {120    font-size: 44px;121    color: #d6d6d6;122  }123 124  /* Bottom actions */125  .bottom-bar {126    position: absolute;127    bottom: 120px;128    left: 0;129    width: 100%;130    padding: 0 40px;131    height: 120px;132    display: flex;133    align-items: center;134    gap: 60px;135    box-sizing: border-box;136  }137  .bottom-icon svg { opacity: 0.7; }138 139  /* Gesture pill */140  .gesture {141    position: absolute;142    bottom: 44px;143    left: 50%;144    transform: translateX(-50%);145    width: 340px;146    height: 16px;147    background: #e6e6e6;148    border-radius: 12px;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Status Bar -->156  <div class="status-bar">157    <div class="status-left">1:58</div>158    <div class="status-right">159      <!-- Wi-Fi icon -->160      <div class="icon">161        <svg width="54" height="54" viewBox="0 0 24 24">162          <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>163          <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>164          <path d="M8 16c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>165          <circle cx="12" cy="19" r="1.8" fill="#ffffff"/>166        </svg>167      </div>168      <!-- Battery icon -->169      <div class="icon">170        <svg width="54" height="54" viewBox="0 0 24 24">171          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>172          <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>173          <rect x="21" y="9" width="2" height="6" fill="#ffffff"/>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Header -->180  <div class="header">181    <div class="header-left">182      <!-- Back arrow -->183      <div class="icon">184        <svg width="60" height="60" viewBox="0 0 24 24">185          <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186        </svg>187      </div>188      <div class="header-title">Inbox</div>189      <!-- Down chevron -->190      <div class="icon">191        <svg width="40" height="40" viewBox="0 0 24 24">192          <path d="M6 9l6 6 6-6" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193        </svg>194      </div>195    </div>196    <div class="header-right">197      <!-- Kebab menu -->198      <div class="icon">199        <svg width="44" height="44" viewBox="0 0 24 24">200          <circle cx="12" cy="5" r="2" fill="#ffffff"/>201          <circle cx="12" cy="12" r="2" fill="#ffffff"/>202          <circle cx="12" cy="19" r="2" fill="#ffffff"/>203        </svg>204      </div>205    </div>206  </div>207 208  <!-- Reminder row -->209  <div class="reminder-row">210    <div class="reminder-left">211      <!-- Checkbox -->212      <div class="icon">213        <svg width="54" height="54" viewBox="0 0 24 24">214          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="#9e9e9e" stroke-width="3" fill="none"/>215        </svg>216      </div>217      <!-- Clock icon -->218      <div class="icon">219        <svg width="48" height="48" viewBox="0 0 24 24">220          <circle cx="12" cy="12" r="9" stroke="#4c7dff" stroke-width="2.5" fill="none"/>221          <path d="M12 7v6l4 2" stroke="#4c7dff" stroke-width="2.5" fill="none" stroke-linecap="round"/>222        </svg>223      </div>224      <div class="reminder-text">2 days later, Aug 12, 08:30PM</div>225    </div>226    <!-- Flag icon -->227    <div class="icon">228      <svg width="54" height="54" viewBox="0 0 24 24">229        <path d="M5 21V5h9l-1.5 3L17 11H5" fill="#ffffff"/>230      </svg>231    </div>232  </div>233 234  <!-- Content -->235  <div class="content">236    <div class="title">Sanju´s engagement</div>237    <div class="subtitle">musical theme</div>238  </div>239 240  <!-- Bottom actions -->241  <div class="bottom-bar">242    <!-- Tag icon -->243    <div class="bottom-icon icon">244      <svg width="68" height="68" viewBox="0 0 24 24">245        <path d="M3 7v10l8 4 10-10-8-4H3z" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linejoin="round"/>246        <circle cx="7" cy="11" r="2" fill="#d0d0d0"/>247      </svg>248    </div>249    <!-- List icon -->250    <div class="bottom-icon icon">251      <svg width="68" height="68" viewBox="0 0 24 24">252        <circle cx="5" cy="6" r="2" fill="#d0d0d0"/>253        <circle cx="5" cy="12" r="2" fill="#d0d0d0"/>254        <circle cx="5" cy="18" r="2" fill="#d0d0d0"/>255        <rect x="9" y="5" width="10" height="2" fill="#d0d0d0"/>256        <rect x="9" y="11" width="10" height="2" fill="#d0d0d0"/>257        <rect x="9" y="17" width="10" height="2" fill="#d0d0d0"/>258      </svg>259    </div>260    <!-- Image icon -->261    <div class="bottom-icon icon">262      <svg width="68" height="68" viewBox="0 0 24 24">263        <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#d0d0d0" stroke-width="2" fill="none"/>264        <circle cx="8" cy="10" r="2" fill="#d0d0d0"/>265        <path d="M6 17l4-4 3 3 4-5 4 6H6z" fill="#d0d0d0"/>266      </svg>267    </div>268  </div>269 270  <!-- Gesture pill -->271  <div class="gesture"></div>272 273</div>274</body>275</html>