GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Free Message UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F4F6E9;14    color: #1b1b1b;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 34px;25    color: #5b5b5b;26  }27  .status-left { display: flex; align-items: center; gap: 18px; }28  .status-right { display: flex; align-items: center; gap: 22px; }29 30  /* Header */31  .header {32    height: 100px;33    display: flex;34    align-items: center;35    padding: 0 28px;36    gap: 18px;37  }38  .back-icon {39    width: 60px; height: 60px;40    display: flex; align-items: center; justify-content: center;41  }42  .title {43    font-size: 44px;44    font-weight: 700;45    color: #1b1b1b;46  }47 48  /* Tabs */49  .tabs {50    display: flex;51    gap: 60px;52    padding: 0 28px;53    border-bottom: 2px solid #dfe3d4;54    margin-bottom: 18px;55  }56  .tab {57    position: relative;58    padding: 26px 8px;59    font-size: 34px;60    color: #242a1a;61  }62  .tab.inactive { color: #2a2f19; opacity: 0.7; }63  .tab.active::after {64    content: "";65    position: absolute;66    left: 0; right: 0; bottom: 0;67    height: 6px;68    background: #6F7333;69    border-radius: 3px;70  }71 72  /* Card/Form */73  .card {74    margin: 22px 28px 0 28px;75    background: #ffffff;76    border: 1px solid #e8e8e8;77    border-radius: 28px;78    padding: 30px;79  }80 81  .field {82    border: 1px solid #e6e6e6;83    border-radius: 24px;84    padding: 26px 28px;85    margin-bottom: 28px;86    font-size: 34px;87    color: #7a7a7a;88    background: #fff;89  }90  .field.tall {91    height: 280px;92    display: flex;93    align-items: flex-start;94  }95  .count {96    text-align: right;97    font-size: 28px;98    color: #9e9e9e;99    margin-top: 8px;100    padding-right: 10px;101  }102 103  .checkbox-row {104    display: flex;105    align-items: center;106    gap: 22px;107    background: #F0F4DB;108    margin: 26px 28px 0 28px;109    padding: 28px;110    border-radius: 22px;111    border: 1px solid #e5e9ce;112    color: #2b3116;113    font-size: 34px;114  }115  .box {116    width: 44px; height: 44px;117    border: 3px solid #8A8D49;118    border-radius: 8px;119    background: #fff;120  }121 122  /* Bottom buttons */123  .bottom-actions {124    position: absolute;125    left: 0; right: 0;126    bottom: 110px;127    display: flex;128    justify-content: space-between;129    padding: 0 28px;130    gap: 30px;131  }132  .btn {133    flex: 1;134    height: 120px;135    border-radius: 26px;136    font-size: 40px;137    font-weight: 700;138    display: flex;139    align-items: center;140    justify-content: center;141  }142  .btn.outline {143    background: #ffffff;144    border: 3px solid #7A7F3B;145    color: #485018;146  }147  .btn.filled {148    background: #7A7F3B;149    border: 3px solid #6B6F34;150    color: #ffffff;151  }152  .btn .ico {153    margin-right: 18px;154    display: inline-flex;155    width: 44px; height: 44px; align-items: center; justify-content: center;156  }157 158  /* Bottom system bar */159  .system-bar {160    position: absolute;161    bottom: 0; left: 0; right: 0;162    height: 96px;163    background: #000;164  }165  .home-handle {166    position: absolute;167    bottom: 18px;168    left: 50%;169    transform: translateX(-50%);170    width: 260px;171    height: 8px;172    background: #d0d0d0;173    border-radius: 6px;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status bar mock -->181  <div class="status-bar">182    <div class="status-left">183      <div>3:00</div>184      <div>◑</div>185      <div>⚪</div>186    </div>187    <div class="status-right">188      <div>⌕</div>189      <div>⋮</div>190      <div>⌖</div>191    </div>192  </div>193 194  <!-- Header with back and title -->195  <div class="header">196    <div class="back-icon">197      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">198        <path d="M15.5 4.5L8 12l7.5 7.5" stroke="#2A2F19" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201    <div class="title">Free Message</div>202  </div>203 204  <!-- Tabs -->205  <div class="tabs">206    <div class="tab active">Type Message</div>207    <div class="tab inactive">Use Message Templates</div>208  </div>209 210  <!-- Card -->211  <div class="card">212    <div class="field">Dear</div>213    <div class="field tall">Message</div>214    <div class="count">0 / 250</div>215    <div class="field">From</div>216  </div>217 218  <!-- Checkbox note -->219  <div class="checkbox-row">220    <div class="box"></div>221    <div>Don’t show my name on the card</div>222  </div>223 224  <!-- Bottom actions -->225  <div class="bottom-actions">226    <div class="btn outline">227      <span class="ico">228        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">229          <circle cx="11" cy="11" r="6" stroke="#7A7F3B" stroke-width="2"/>230          <path d="M16.5 16.5L21 21" stroke="#7A7F3B" stroke-width="2" stroke-linecap="round"/>231        </svg>232      </span>233      Preview234    </div>235    <div class="btn filled">Continue</div>236  </div>237 238  <!-- System bar -->239  <div class="system-bar">240    <div class="home-handle"></div>241  </div>242</div>243</body>244</html>