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>Compose - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 88px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    color: #EDEDED;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .icon {39    width: 44px;40    height: 44px;41    fill: none;42    stroke: #EDEDED;43    stroke-width: 2.5;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 88px;50    left: 0;51    width: 1080px;52    height: 160px;53    display: flex;54    align-items: center;55    padding: 0 24px;56    border-bottom: 1px solid #2A2A2A;57  }58  .app-left {59    display: flex;60    align-items: center;61    gap: 24px;62  }63  .app-title {64    font-size: 64px;65    font-weight: 500;66  }67  .app-actions {68    margin-left: auto;69    display: flex;70    align-items: center;71    gap: 40px;72  }73  .action-icon {74    width: 54px;75    height: 54px;76    stroke: #EDEDED;77    fill: none;78    stroke-width: 3;79  }80 81  /* Fields */82  .content {83    position: absolute;84    top: 248px;85    left: 0;86    width: 100%;87  }88  .field {89    padding: 26px 36px 24px 36px;90    border-bottom: 1px solid #2A2A2A;91  }92  .field-row {93    display: flex;94    align-items: center;95    gap: 28px;96  }97  .label {98    color: #9E9E9E;99    font-size: 36px;100    min-width: 100px;101  }102  .value {103    color: #FFFFFF;104    font-size: 40px;105    white-space: nowrap;106    overflow: hidden;107    text-overflow: ellipsis;108  }109  .caret {110    width: 3px;111    height: 48px;112    background: #FFB74D;113    display: inline-block;114    margin-left: 6px;115    border-radius: 2px;116  }117  .dropdown {118    margin-left: auto;119    width: 44px;120    height: 44px;121  }122 123  /* Suggestion list */124  .suggestions {125    padding: 18px 36px;126  }127  .suggestion-item {128    display: flex;129    align-items: center;130    gap: 28px;131    padding: 22px 0;132  }133  .avatar {134    width: 96px;135    height: 96px;136    border-radius: 48px;137    background: #7C4DFF;138    display: flex;139    align-items: center;140    justify-content: center;141    font-size: 56px;142    font-weight: 500;143    color: #FFFFFF;144  }145  .suggestion-text .title {146    font-size: 42px;147    color: #FFFFFF;148  }149  .suggestion-text .sub {150    font-size: 34px;151    color: #BDBDBD;152    margin-top: 6px;153  }154 155  /* Bottom gesture pill */156  .gesture-pill {157    position: absolute;158    bottom: 24px;159    left: 50%;160    transform: translateX(-50%);161    width: 360px;162    height: 12px;163    background: #EAEAEA;164    border-radius: 8px;165    opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="status-left">11:00</div>175    <div class="status-right">176      <!-- Wi-Fi -->177      <svg class="icon" viewBox="0 0 48 48">178        <path d="M6 18c10-8 26-8 36 0" />179        <path d="M12 24c7-5 17-5 24 0" />180        <path d="M18 30c4-3 8-3 12 0" />181        <circle cx="24" cy="36" r="2.8" fill="#EDEDED"/>182      </svg>183      <!-- Battery -->184      <svg class="icon" viewBox="0 0 48 48">185        <rect x="6" y="12" width="32" height="24" rx="3" />186        <rect x="10" y="16" width="24" height="16" rx="2" fill="#EDEDED" stroke="none"/>187        <rect x="40" y="18" width="4" height="12" rx="1.5" />188      </svg>189    </div>190  </div>191 192  <!-- App Bar -->193  <div class="app-bar">194    <div class="app-left">195      <!-- Back Arrow -->196      <svg class="action-icon" viewBox="0 0 48 48">197        <path d="M28 10 L14 24 L28 38" />198      </svg>199      <div class="app-title">Compose</div>200    </div>201    <div class="app-actions">202      <!-- Attach (paperclip) -->203      <svg class="action-icon" viewBox="0 0 48 48">204        <path d="M18 16 l12 12 c4 4 0 10-5 10s-9-6-5-10l12-12c3-3 8-3 11 0" />205      </svg>206      <!-- Send -->207      <svg class="action-icon" viewBox="0 0 48 48">208        <path d="M6 24 L42 8 L32 24 L42 40 Z" />209      </svg>210      <!-- More (vertical dots) -->211      <svg class="action-icon" viewBox="0 0 48 48">212        <circle cx="24" cy="10" r="3.5" fill="#EDEDED" stroke="none"/>213        <circle cx="24" cy="24" r="3.5" fill="#EDEDED" stroke="none"/>214        <circle cx="24" cy="38" r="3.5" fill="#EDEDED" stroke="none"/>215      </svg>216    </div>217  </div>218 219  <!-- Content -->220  <div class="content">221    <!-- From -->222    <div class="field">223      <div class="field-row">224        <div class="label">From</div>225        <div class="value">dbwscratch.test.id5@gmail.com</div>226      </div>227    </div>228 229    <!-- To -->230    <div class="field">231      <div class="field-row">232        <div class="label">To</div>233        <div class="value">dbwscratch.test.id10@gmail.com<span class="caret"></span></div>234        <!-- dropdown arrow -->235        <svg class="dropdown" viewBox="0 0 48 48">236          <path d="M12 18 L24 30 L36 18" stroke="#BDBDBD" stroke-width="3" fill="none" />237        </svg>238      </div>239    </div>240 241    <!-- Suggestion item -->242    <div class="suggestions">243      <div class="suggestion-item">244        <div class="avatar">d</div>245        <div class="suggestion-text">246          <div class="title">dbwscratch.test.id10@gmail.com</div>247          <div class="sub">dbwscratch.test.id10@gmail.com</div>248        </div>249      </div>250    </div>251  </div>252 253  <!-- Bottom gesture bar -->254  <div class="gesture-pill"></div>255</div>256</body>257</html>