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: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11    color:#1e1e1e;12  }13 14  /* Status bar */15  .status-bar {16    height:80px; background:#ffffff; border-bottom:1px solid #e7e7e7;17    display:flex; align-items:center; padding:0 28px; font-size:32px; color:#333;18  }19  .status-right { margin-left:auto; display:flex; gap:22px; align-items:center; }20  .dot { width:12px; height:12px; background:#6b6b6b; border-radius:50%; }21  .signal { width:26px; height:26px; border:2px solid #6b6b6b; border-top:none; border-left:none; transform:rotate(45deg); }22  .wifi { width:28px; height:18px; border:2px solid #6b6b6b; border-top-left-radius:18px; border-top-right-radius:18px; border-bottom:none; }23  .battery { width:44px; height:22px; border:2px solid #6b6b6b; position:relative; border-radius:4px; }24  .battery::after{content:""; position:absolute; right:-6px; top:6px; width:4px; height:10px; background:#6b6b6b; border-radius:1px;}25 26  /* App header */27  .app-bar {28    height:120px; display:flex; align-items:center; gap:16px;29    padding:0 28px; font-size:44px; font-weight:600; color:#303030; background:#ffffff;30  }31  .back-btn {32    width:64px; height:64px; display:flex; align-items:center; justify-content:center; cursor:default;33  }34  .back-btn svg { width:40px; height:40px; fill:#2f2f2f; }35 36  /* Main content area */37  .screen {38    position:absolute; left:0; right:0; top:200px; bottom:0;39    background:#f2f3e8;40  }41 42  /* Tabs */43  .tabs {44    display:flex; gap:60px; padding:28px 36px 0 36px; background:#f2f3e8;45    border-bottom:1px solid #e1e3cf; height:104px;46  }47  .tab {48    font-size:40px; color:#2f2f2f; padding-bottom:20px; position:relative;49  }50  .tab.active { font-weight:700; }51  .tab.active::after{52    content:""; position:absolute; left:0; right:0; bottom:0; height:8px; border-radius:4px;53    background:#7a7f3b;54  }55 56  /* Form */57  .form {58    padding:36px;59  }60  .field {61    position:relative; margin:42px 0;62  }63  .floating-label {64    position:absolute; top:-18px; left:30px; padding:0 12px;65    background:#f2f3e8; color:#777; font-size:30px;66  }67  .input, .textarea {68    width:100%; border:2px solid #cfd2bd; background:#ffffff; border-radius:28px;69    font-size:42px; color:#1e1e1e; padding:30px 34px; box-sizing:border-box;70  }71  .textarea { height:520px; resize:none; line-height:1.4; }72  .counter {73    text-align:right; color:#8a8a8a; font-size:32px; margin-top:8px; padding-right:6px;74  }75 76  /* Buttons */77  .btn-row { display:flex; gap:36px; padding:16px 0; }78  .btn {79    flex:1; height:120px; border-radius:24px; font-size:44px; font-weight:700; letter-spacing:0.2px;80    display:flex; align-items:center; justify-content:center; cursor:default;81  }82  .btn.outline {83    color:#606636; border:3px solid #7a7f3b; background:#f2f3e8;84  }85  .btn.filled {86    background:#7a7f3b; color:#ffffff; border:3px solid #7a7f3b;87  }88  .btn .icon { margin-right:18px; display:flex; align-items:center; }89  .btn .icon svg { width:44px; height:44px; fill:#606636; }90  .btn.filled .icon svg { fill:#ffffff; }91 92  /* Keyboard (approximation) */93  .keyboard {94    position:absolute; left:0; right:0; bottom:0; height:820px;95    background:#191a1d; border-top:1px solid #2a2b2f; color:#dcdcdc;96  }97  .kb-suggest {98    display:flex; gap:26px; padding:16px 20px; border-bottom:1px solid #2b2c30;99  }100  .chip {101    background:#2e3035; color:#e7e7e7; padding:16px 28px; border-radius:28px; font-size:36px;102    border:1px solid #3b3d42;103  }104  .kb-rows { padding:28px; display:grid; grid-template-rows: repeat(4, 1fr); gap:22px; height:calc(100% - 96px); box-sizing:border-box; }105  .kb-row { display:grid; grid-template-columns: repeat(10, 1fr); gap:16px; }106  .key {107    background:#2b2d31; border:1px solid #3b3d42; border-radius:18px; display:flex; align-items:center; justify-content:center;108    font-size:38px; color:#f1f1f1;109  }110  .key.dark { background:#24262a; }111  .key.wide { grid-column: span 2; }112  .key.space { grid-column: span 5; }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status bar -->119  <div class="status-bar">120    <div>1:13</div>121    <div class="status-right">122      <div class="dot"></div>123      <div class="dot"></div>124      <div class="wifi"></div>125      <div class="signal"></div>126      <div class="battery"></div>127    </div>128  </div>129 130  <!-- App header -->131  <div class="app-bar">132    <div class="back-btn">133      <svg viewBox="0 0 24 24"><path d="M15.5 4L7 12l8.5 8 1.5-1.6L10.6 12l6.4-6.4z"/></svg>134    </div>135    <div>Free Message</div>136  </div>137 138  <!-- Main screen -->139  <div class="screen">140    <div class="tabs">141      <div class="tab active">Type Message</div>142      <div class="tab">Use Message Templates</div>143    </div>144 145    <div class="form">146      <!-- Dear -->147      <div class="field">148        <div class="floating-label">Dear</div>149        <div class="input">Husband</div>150      </div>151 152      <!-- Message -->153      <div class="field">154        <div class="floating-label">Message</div>155        <div class="textarea"></div>156        <div class="counter">0 / 250</div>157      </div>158 159      <!-- From -->160      <div class="field">161        <div class="floating-label">From</div>162        <div class="input"></div>163      </div>164 165      <!-- Buttons -->166      <div class="btn-row">167        <div class="btn outline">168          <span class="icon">169            <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 105.6 11.2l3.4 3.4 1.4-1.4-3.4-3.4A7 7 0 0012 5zm0 2a5 5 0 110 10 5 5 0 010-10z"/></svg>170          </span>171          Preview172        </div>173        <div class="btn filled">Continue</div>174      </div>175    </div>176 177    <!-- Keyboard approximation -->178    <div class="keyboard">179      <div class="kb-suggest">180        <div class="chip">Husband</div>181        <div class="chip">Husband's</div>182        <div class="chip">Husbands</div>183      </div>184      <div class="kb-rows">185        <div class="kb-row">186          <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>187          <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>188        </div>189        <div class="kb-row">190          <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>191          <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key dark">⌫</div>192        </div>193        <div class="kb-row">194          <div class="key dark">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>195          <div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key dark">↵</div>196        </div>197        <div class="kb-row">198          <div class="key wide dark">?123</div>199          <div class="key">😊</div>200          <div class="key space"> </div>201          <div class="key dark">•</div>202          <div class="key wide dark">✔</div>203        </div>204      </div>205    </div>206 207  </div>208</div>209</body>210</html>