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 - Mock</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  }12 13  /* Status bar */14  .status {15    position:absolute; left:0; top:0; width:100%; height:110px; 16    background:#ffffff; color:#121212; display:flex; align-items:center;17    padding:0 32px; box-sizing:border-box;18  }19  .status .time { font-size:40px; font-weight:600; }20  .status .icons { margin-left:auto; display:flex; gap:26px; align-items:center; }21  .dot { width:16px; height:16px; background:#444; border-radius:50%; opacity:.7; }22  .icon-signal, .icon-wifi, .icon-battery { width:42px; height:42px; }23  .icon-signal path, .icon-wifi path, .icon-battery rect, .icon-battery path { fill:#555; }24 25  /* App header */26  .appbar {27    position:absolute; left:0; top:110px; width:100%; height:120px; 28    display:flex; align-items:center; gap:18px; padding:0 32px; box-sizing:border-box;29    background:#ffffff; color:#1c1c1c;30    border-bottom:1px solid #e6e6e6;31  }32  .back-btn {33    width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center;34  }35  .title { font-size:48px; font-weight:600; }36 37  /* Content area */38  .content {39    position:absolute; left:0; top:230px; width:100%; bottom:0;40    background:#f4f6ea;41  }42 43  /* Tabs */44  .tabs {45    display:flex; padding:36px 40px 0; gap:44px; font-size:40px; box-sizing:border-box;46  }47  .tab { color:#243024; padding:18px 0; border-bottom:6px solid transparent; }48  .tab.active { color:#1f3326; font-weight:700; border-color:#6f7541; }49  .tab.alt { color:#1f3326; opacity:.85; }50 51  /* Card area imitation */52  .form-box {53    margin:24px 28px 0; background:#f4f6ea; border-radius:26px; padding:16px 0 0;54    border:1px solid rgba(0,0,0,0.05);55  }56 57  .field {58    margin:26px 28px;59  }60  .label {61    font-size:32px; color:#7b7e7a; margin:8px 8px 16px;62  }63  .input {64    background:#ffffff; border:1px solid #e3e3e3; border-radius:28px;65    height:120px; display:flex; align-items:center; padding:0 28px; font-size:40px; color:#1f1f1f;66    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);67  }68  .textarea {69    background:#ffffff; border:1px solid #e3e3e3; border-radius:28px;70    height:440px; padding:26px; font-size:40px; color:#1f1f1f;71  }72  .placeholder { color:#7a8a83; }73  .counter {74    text-align:right; font-size:30px; color:#8d8f8a; margin-top:10px; padding-right:12px;75  }76 77  /* Buttons */78  .actions {79    display:flex; gap:28px; padding:26px 28px 20px;80  }81  .btn {82    flex:1; height:120px; border-radius:22px; font-size:44px; font-weight:700;83    display:flex; align-items:center; justify-content:center; cursor:default;84  }85  .btn.outline {86    color:#6c6f3c; border:2px solid #6c6f3c; background:#f4f6ea;87  }88  .btn.filled {89    color:#ffffff; background:#7a7f43; border:2px solid #7a7f43;90  }91  .btn .icon-eye { width:54px; height:54px; margin-right:18px; }92 93  /* Keyboard mock */94  .keyboard {95    position:absolute; left:0; bottom:0; width:100%; height:880px; background:#1f2124;96    border-top-left-radius:22px; border-top-right-radius:22px; padding:26px 24px; box-sizing:border-box;97  }98  .kb-row { display:flex; gap:18px; margin-bottom:22px; }99  .key {100    flex:1; height:112px; background:#2a2d31; border-radius:20px; display:flex; align-items:center; justify-content:center;101    color:#e8e8e8; font-size:44px;102    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);103  }104  .key.small { flex:0 0 90px; }105  .key.wide { flex:1.6; }106  .space { flex:4; }107  .enter { flex:1.2; }108  .dotkey { flex:0 0 120px; }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status">116    <div class="time">1:13</div>117    <div class="icons">118      <div class="dot"></div>119      <div class="dot"></div>120      <div class="dot"></div>121      <svg class="icon-signal" viewBox="0 0 24 24">122        <path d="M2 20h2v-4H2v4zm5 0h2v-7H7v7zm5 0h2V9h-2v11zm5 0h2V4h-2v16z"/>123      </svg>124      <svg class="icon-wifi" viewBox="0 0 24 24">125        <path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20s.7-1.5 1.5-1.5zm6.3-6.2L12 18l-6.3-5.7c3.5-3 9.1-3 12.6 0zM12 6c4 0 7.7 1.4 10.6 3.8l-1.6 1.8C18.7 9.6 15.4 8.5 12 8.5S5.3 9.6 3 11.6L1.4 9.8C4.3 7.4 8 6 12 6z"/>126      </svg>127      <svg class="icon-battery" viewBox="0 0 28 24">128        <rect x="2" y="6" width="20" height="12" rx="2"></rect>129        <path d="M24 9h2v6h-2z"></path>130      </svg>131    </div>132  </div>133 134  <!-- App bar -->135  <div class="appbar">136    <div class="back-btn">137      <svg width="44" height="44" viewBox="0 0 24 24">138        <path fill="#222" d="M15.4 4.6 9 11l6.4 6.4-1.4 1.4L6.2 11l7.8-7.8 1.4 1.4z"/>139      </svg>140    </div>141    <div class="title">Free Message</div>142  </div>143 144  <!-- Content area -->145  <div class="content">146    <div class="tabs">147      <div class="tab active">Type Message</div>148      <div class="tab alt">Use Message Templates</div>149    </div>150 151    <div class="form-box">152 153      <div class="field">154        <div class="label">Dear</div>155        <div class="input">Husband</div>156      </div>157 158      <div class="field">159        <div class="label">Message</div>160        <div class="textarea">161          <span class="placeholder">Message</span>162        </div>163        <div class="counter">0 / 250</div>164      </div>165 166      <div class="field">167        <div class="label">From</div>168        <div class="input">From</div>169      </div>170 171    </div>172 173    <div class="actions">174      <div class="btn outline">175        <svg class="icon-eye" viewBox="0 0 24 24">176          <path fill="#6c6f3c" d="M12 5C7 5 2.7 8 1 12c1.7 4 6 7 11 7s9.3-3 11-7c-1.7-4-6-7-11-7zm0 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zm0-8a3 3 0 100 6 3 3 0 000-6z"/>177        </svg>178        Preview179      </div>180      <div class="btn filled">Continue</div>181    </div>182  </div>183 184  <!-- Keyboard mock -->185  <div class="keyboard">186    <div class="kb-row">187      <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>188      <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>189    </div>190    <div class="kb-row">191      <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>192      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>193    </div>194    <div class="kb-row">195      <div class="key small">⬆</div>196      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>197      <div class="key">b</div><div class="key">n</div><div class="key">m</div>198      <div class="key small">⌫</div>199    </div>200    <div class="kb-row">201      <div class="key small">?123</div>202      <div class="key small">,</div>203      <div class="key small">😊</div>204      <div class="key space"></div>205      <div class="key dotkey">.</div>206      <div class="key enter">↵</div>207    </div>208  </div>209 210</div>211</body>212</html>