GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Free Message UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#f4f6ea;10  }11  /* Status bar */12  .status-bar{13    height:100px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;14    color:#333; font-weight:600; font-size:36px; background:#ffffff;15  }16  .status-icons{ display:flex; align-items:center; gap:26px; color:#555;}17  /* simple icons */18  .icon{ width:40px; height:40px; }19  /* Header */20  .header{21    height:110px; display:flex; align-items:center; gap:24px; padding:0 24px; background:#ffffff; border-bottom:1px solid #e9e9e9;22  }23  .header .title{ font-size:46px; color:#1b1b1b; font-weight:600; }24  .back-btn{25    width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:10px;26    color:#333;27  }28  /* Tabs */29  .tabs{30    display:flex; gap:60px; padding:26px 32px 0; background:#f4f6ea;31    border-bottom:1px solid #e2e6cf;32  }33  .tab{34    font-size:40px; color:#2a2a2a; padding:16px 8px 24px; position:relative;35  }36  .tab.active{ font-weight:700;}37  .tab.active:after{38    content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:#7f7f3d; border-radius:6px;39  }40 41  /* Panel */42  .panel{43    margin:28px 28px 0; background:#ffffff; border-radius:28px; border:1px solid #e9ebdd;44    padding:28px; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;45  }46  .field{47    margin:18px 10px; 48  }49  .input, .textarea{50    width:100%; border:1px solid #e3e5d3; background:#ffffff; border-radius:26px; 51    padding:30px; font-size:38px; color:#222; outline:none;52  }53  .textarea{54    height:420px; border-radius:26px; resize:none;55  }56  .char-count{57    text-align:right; color:#9aa07a; font-size:34px; padding:10px 18px 0 0;58  }59  /* Checkbox row */60  .checkbox-row{61    margin:26px 28px 0; background:#eef1db; border-radius:22px; border:1px solid #e1e6c4;62    padding:28px; display:flex; align-items:center; gap:26px; color:#2b2b2b; font-size:38px;63  }64  .cb{65    width:54px; height:54px; border:2px solid #7f7f3d; border-radius:10px; position:relative; background:#fff;66  }67  /* Buttons */68  .bottom-actions{69    position:absolute; left:0; right:0; bottom:120px; display:flex; gap:40px; padding:0 28px;70  }71  .btn{72    flex:1; height:140px; border-radius:28px; font-size:46px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:22px;73  }74  .btn-outline{75    background:#ffffff; color:#6d6f37; border:2px solid #a4a875;76  }77  .btn-primary{78    background:#7f7f3d; color:#ffffff; border:2px solid #7f7f3d;79  }80  .eye{81    width:56px; height:56px;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status bar -->89  <div class="status-bar">90    <div>1:11</div>91    <div class="status-icons">92      <!-- simple placeholders for system icons -->93      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#555" stroke-width="2" fill="none"/></svg>94      <svg class="icon" viewBox="0 0 24 24"><path d="M7 17h10M9 7h6M8 12h8" stroke="#555" stroke-width="2" fill="none"/></svg>95      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 18 0" stroke="#555" stroke-width="2" fill="none"/></svg>96    </div>97  </div>98 99  <!-- Header -->100  <div class="header">101    <div class="back-btn">102      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>103    </div>104    <div class="title">Free Message</div>105  </div>106 107  <!-- Tabs -->108  <div class="tabs">109    <div class="tab active">Type Message</div>110    <div class="tab">Use Message Templates</div>111  </div>112 113  <!-- Panel with fields -->114  <div class="panel">115    <div class="field">116      <input class="input" placeholder="Dear">117    </div>118    <div class="field">119      <textarea class="textarea" placeholder="Message"></textarea>120      <div class="char-count">0 / 250</div>121    </div>122    <div class="field">123      <input class="input" placeholder="From">124    </div>125  </div>126 127  <!-- Checkbox -->128  <div class="checkbox-row">129    <div class="cb"></div>130    <div>Don’t show my name on the card</div>131  </div>132 133  <!-- Bottom actions -->134  <div class="bottom-actions">135    <div class="btn btn-outline">136      <svg class="eye" viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" fill="none" stroke="#7f7f3d" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="none" stroke="#7f7f3d" stroke-width="2"/></svg>137      <span>Preview</span>138    </div>139    <div class="btn btn-primary">Continue</div>140  </div>141 142</div>143</body>144</html>