GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Reply - Dark UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#111214; color:#EDEDED;10  }11  /* Status bar */12  .status-bar {13    height:96px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;14    color:#EDEDED; font-size:36px;15  }16  .status-icons { display:flex; align-items:center; gap:24px; }17  .icon {18    width:36px; height:36px; display:inline-block;19  }20  /* Top app bar */21  .app-bar {22    height:140px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #24262A;23  }24  .app-title { font-size:56px; font-weight:500; margin-left:18px; display:flex; align-items:center; gap:8px; }25  .spacer { flex:1; }26  .bar-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-left:16px; color:#C7CAD0; }27  /* Fields */28  .field { padding:26px 28px; display:flex; align-items:center; gap:24px; border-bottom:1px solid #1F2124; }29  .field .label { width:120px; color:#9CA3AF; font-size:36px; }30  .field .value { font-size:36px; color:#D9DEE4; }31  .chip {32    display:inline-flex; align-items:center; gap:18px; background:#202327; padding:10px 18px 10px 10px; border-radius:44px; border:1px solid #2A2E33;33  }34  .avatar {35    width:56px; height:56px; border-radius:50%; background:#8BC34A; color:#0A0A0A; display:flex; align-items:center; justify-content:center; font-weight:700; }36  .dropdown { margin-left:8px; opacity:0.8; }37  .subject { padding:30px 28px 18px 28px; font-size:50px; border-bottom:1px solid #1F2124; color:#EDEFF3; }38  .editor { padding:28px; font-size:46px; line-height:1.5; color:#EDEDED; }39  .muted { color:#6B7280; letter-spacing:6px; margin-top:22px; font-size:42px; }40  /* Keyboard mock */41  #keyboard {42    position:absolute; left:0; right:0; bottom:0; height:920px; background:#1B1E22; border-top:1px solid #262A2F;43    box-shadow:0 -2px 8px rgba(0,0,0,0.4);44  }45  .kb-tools { height:120px; display:flex; align-items:center; gap:34px; padding:0 24px; color:#D1D5DB; border-bottom:1px solid #23272B; }46  .tool {47    min-width:90px; height:76px; background:#23272B; border-radius:16px; border:1px solid #2D3237; display:flex; align-items:center; justify-content:center; font-size:34px;48  }49  .keyboard-row { padding:18px 20px; display:flex; justify-content:center; gap:14px; }50  .key { width:88px; height:120px; background:#2A2F35; border-radius:18px; border:1px solid #394049; display:flex; align-items:center; justify-content:center; color:#F2F4F7; font-size:44px; }51  .key-wide { width:120px; }52  .space { width:480px; }53  .enter-circle { width:120px; height:120px; border-radius:60px; background:#2A2F35; border:1px solid #394049; display:flex; align-items:center; justify-content:center; }54  .gesture { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:360px; height:8px; background:#D8D9DD; opacity:0.3; border-radius:8px; }55  /* Small utility SVG styling */56  svg { fill:currentColor; }57</style>58</head>59<body>60<div id="render-target">61  <!-- Status bar -->62  <div class="status-bar">63    <div class="time">10:17</div>64    <div class="status-icons">65      <!-- simple lock icon -->66      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H5v12h14V10h-2V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z"/></svg>67      <!-- wifi -->68      <svg class="icon" viewBox="0 0 24 24"><path d="M12 20.5l2.5-2.5h-5L12 20.5zM2 8l2 2c4.9-4.9 12.9-4.9 17.8 0l2-2C16.6 1.9 7.4 1.9 2 8zm5 5 2 2c2.8-2.8 7.2-2.8 10 0l2-2c-4-4-10-4-14 0z"/></svg>69      <!-- battery -->70      <svg class="icon" viewBox="0 0 24 24"><path d="M17 6h2v12h-2v2H3V4h14v2z"/></svg>71    </div>72  </div>73 74  <!-- App bar -->75  <div class="app-bar">76    <!-- back arrow -->77    <div class="bar-icon">78      <svg viewBox="0 0 24 24" width="44" height="44"><path d="M15.5 4 7 12l8.5 8 1.5-1.5L10 12l7-6.5z"/></svg>79    </div>80    <div class="app-title">81      <span>Reply all</span>82      <svg class="dropdown" width="34" height="34" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>83    </div>84    <div class="spacer"></div>85    <!-- attach -->86    <div class="bar-icon">87      <svg viewBox="0 0 24 24" width="48" height="48"><path d="M7 7v8a5 5 0 1 0 10 0V6a3 3 0 1 0-6 0v9a1 1 0 1 0 2 0V7h2v8a3 3 0 1 1-6 0V6a5 5 0 1 1 10 0v9a7 7 0 1 1-14 0V7h2z"/></svg>88    </div>89    <!-- send -->90    <div class="bar-icon" style="color:#8FB5FF;">91      <svg viewBox="0 0 24 24" width="54" height="54"><path d="M2 21 23 12 2 3v7l15 2-15 2v7z"/></svg>92    </div>93    <!-- more -->94    <div class="bar-icon">95      <svg viewBox="0 0 24 24" width="44" height="44"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>96    </div>97  </div>98 99  <!-- From -->100  <div class="field">101    <div class="label">From</div>102    <div class="value">dbwscratch.test.id6@gmail.com</div>103  </div>104 105  <!-- To -->106  <div class="field">107    <div class="label">To</div>108    <div class="value">109      <span class="chip">110        <span class="avatar">d</span>111        <span style="font-size:36px;">Cerebra Research</span>112      </span>113      <svg class="dropdown" width="34" height="34" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>114    </div>115  </div>116 117  <!-- Subject -->118  <div class="subject">Re: OFFICIAL WEEKEND PARTY</div>119 120  <!-- Body -->121  <div class="editor">122    <div>Thanks a lot.</div>123    <div class="muted">...</div>124  </div>125 126  <!-- Keyboard mock -->127  <div id="keyboard">128    <div class="kb-tools">129      <div class="tool">•••</div>130      <div class="tool">😊</div>131      <div class="tool">GIF</div>132      <div class="tool">⚙</div>133      <div class="tool">G⇄</div>134      <div class="tool">🎨</div>135      <div class="tool">🎤</div>136    </div>137    <div class="keyboard-row">138      <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>139      <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>140    </div>141    <div class="keyboard-row">142      <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>143      <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>144    </div>145    <div class="keyboard-row">146      <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div>147      <div class="key">N</div><div class="key">M</div>148    </div>149    <div class="keyboard-row" style="gap:18px;">150      <div class="key key-wide">?123</div>151      <div class="key">,</div>152      <div class="key">☺</div>153      <div class="key space"></div>154      <div class="key">.</div>155      <div class="enter-circle">156        <svg viewBox="0 0 24 24" width="54" height="54"><path NB></svg>157      </div>158    </div>159    <div class="gesture"></div>160  </div>161</div>162</body>163</html>