GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Compose - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#121212;color:#EDEDED;border-radius:0;11  }12 13  /* Status bar */14  .status-bar{15    height:100px; padding:0 36px; box-sizing:border-box;16    display:flex; align-items:center; justify-content:space-between; color:#ffffffcc;17    font-size:38px; letter-spacing:1px;18  }19  .status-right{display:flex; align-items:center; gap:22px;}20  .dot{width:14px;height:14px;background:#ffffffcc;border-radius:50%;}21  .battery{22    width:54px;height:26px;border:3px solid #fff;border-radius:6px; position:relative;23  }24  .battery::after{25    content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#fff; border-radius:2px;26  }27  .battery .level{28    position:absolute; left:4px; top:4px; bottom:4px; width:32px; background:#fff; border-radius:2px;29  }30 31  /* App bar */32  .app-bar{33    height:150px; border-bottom:1px solid #252525;34    display:flex; align-items:center; padding:0 24px; box-sizing:border-box; gap:18px;35    background:#1b1b1b;36  }37  .title{font-size:52px; font-weight:600; flex:1; color:#fff;}38  .icon-btn{width:80px;height:80px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:.9;}39  .icon-btn svg{width:48px;height:48px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}40 41  /* Compose area */42  .compose{position:absolute; left:0; right:0; top:250px; bottom:920px; overflow:hidden;}43  .field{display:flex; align-items:center; padding:0 30px; height:120px; box-sizing:border-box; border-bottom:1px solid #222}44  .label{width:160px; color:#9BA0A6; font-size:36px;}45  .value{flex:1; color:#fff; font-size:40px;}46  .chev{width:44px;height:44px; margin-left:12px; opacity:.9;}47  .chev svg{width:100%;height:100%; stroke:#9BA0A6; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}48  .subject{height:130px;}49  .subject .value{font-size:44px; color:#EDEDED;}50  .body{51    padding:28px 30px; box-sizing:border-box; color:#D6D6D6; font-size:42px; line-height:60px;52  }53  .link{color:#7fb2ff;}54 55  /* Keyboard mock */56  .keyboard{57    position:absolute; left:0; right:0; bottom:0; height:920px; background:#1e1f22;58    border-top:1px solid #2a2a2a;59  }60  .kb-top{61    height:120px; display:flex; align-items:center; gap:42px; padding:0 26px; box-sizing:border-box; color:#c9c9c9;62    border-bottom:1px solid #2a2a2a; font-size:36px;63  }64  .kb-row{display:flex; gap:16px; padding:18px 18px;}65  .key{66    flex:1; height:120px; background:#2a2b2f; border-radius:22px; display:flex; align-items:center; justify-content:center;67    color:#e6e6e6; font-size:44px; box-shadow: inset 0 0 0 1px #3a3b3f;68  }69  .key.small{flex:.8}70  .key.wide{flex:1.2}71  .space-row{display:flex; gap:16px; padding:18px 18px;}72  .space{flex:4; height:120px; background:#2a2b2f; border-radius:22px; box-shadow: inset 0 0 0 1px #3a3b3f;}73  .enter{74    width:150px; height:150px; background:#3d7dff; border-radius:40px; display:flex; align-items:center; justify-content:center; margin-right:18px;75    position:absolute; right:18px; bottom:26px;76  }77  .enter svg{width:70px;height:70px; fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round}78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Status bar -->84  <div class="status-bar">85    <div class="">8:41</div>86    <div class="status-right">87      <div class="dot"></div>88      <div class="dot"></div>89      <div class="dot"></div>90      <div class="battery"><div class="level"></div></div>91    </div>92  </div>93 94  <!-- App bar -->95  <div class="app-bar">96    <div class="icon-btn" aria-label="Back">97      <svg viewBox="0 0 24 24"><path d="M15 18L9 12l6-6"/></svg>98    </div>99    <div class="title">Compose</div>100    <div class="icon-btn" aria-label="Attach">101      <svg viewBox="0 0 24 24"><path d="M21 7v7a6 6 0 0 1-12 0V6a4 4 0 0 1 8 0v8a2 2 0 0 1-4 0V7"/></svg>102    </div>103    <div class="icon-btn" aria-label="Send">104      <svg viewBox="0 0 24 24"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>105    </div>106    <div class="icon-btn" aria-label="More">107      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="12" cy="19" r="2" fill="#fff"/></svg>108    </div>109  </div>110 111  <!-- Compose area -->112  <div class="compose">113    <div class="field">114      <div class="label">From</div>115      <div class="value">amelia.miller2709@gmail.com</div>116      <div class="chev">117        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>118      </div>119    </div>120    <div class="field">121      <div class="label">To</div>122      <div class="value" style="color:#7e7e7e"> </div>123      <div class="chev">124        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>125      </div>126    </div>127    <div class="field subject">128      <div class="label"></div>129      <div class="value">Funes</div>130    </div>131 132    <div class="body">133      <span class="link">https://maps.app.goo.gl/JggPFVAzkVPxcawk7</span>134    </div>135  </div>136 137  <!-- Keyboard mock -->138  <div class="keyboard">139    <div class="kb-top">140      • GIF  •  Settings  •  Translate  •  Theme  •  Mic141    </div>142    <div class="kb-row">143      <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>144      <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>145    </div>146    <div class="kb-row">147      <div class="key small">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>148      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key small">l</div>149    </div>150    <div class="kb-row">151      <div class="key wide">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>152      <div class="key">b</div><div class="key">n</div><div class="key">m</div>153      <div class="key wide">⌫</div>154    </div>155    <div class="space-row">156      <div class="key small">?123</div>157      <div class="key small">@</div>158      <div class="space"></div>159      <div class="key small">.</div>160    </div>161    <div class="enter" title="Enter/Send">162      <svg viewBox="0 0 24 24"><path d="M5 12h11"/><path d="M12 5l7 7-7 7"/></svg>163    </div>164  </div>165 166</div>167</body>168</html>