GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose - Dark</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Roboto,Arial,Helvetica,sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#121212;color:#eaeaea;10  }11  /* Status bar */12  .status-bar{13    position:absolute;top:0;left:0;width:100%;height:96px;14    padding:0 36px;display:flex;align-items:center;justify-content:space-between;15    color:#cfcfcf;font-size:34px;letter-spacing:0.5px;16  }17  .status-right{display:flex;align-items:center;gap:24px;}18  .icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:#cfcfcf;}19  .header{20    position:absolute;top:96px;left:0;width:100%;height:140px;21    display:flex;align-items:center;gap:24px;padding:0 24px 0 24px;border-bottom:1px solid #2a2a2a;22  }23  .back{width:72px;height:72px;display:flex;align-items:center;justify-content:center;}24  .title{font-size:52px;font-weight:500;color:#eaeaea;flex:1;}25  .header .actions{display:flex;align-items:center;gap:32px;}26  .row{27    width:100%;padding:24px 36px;display:flex;align-items:center;gap:24px;28    border-bottom:1px solid #2a2a2a;color:#cfcfcf;font-size:36px;29  }30  .row .label{width:120px;color:#9e9e9e;}31  .row .content{flex:1;color:#dcdcdc;}32  .row .dropdown{width:48px;height:48px;display:flex;align-items:center;justify-content:center;}33  .note-label{padding:30px 36px;color:#cfcfcf;font-size:40px;border-bottom:1px solid #2a2a2a;}34  .editor{35    padding:36px;color:#eaeaea;font-size:60px;min-height:900px;line-height:1.4;36  }37  /* Keyboard */38  .keyboard{39    position:absolute;left:0;bottom:120px;width:100%;height:780px;background:#1a1a1a;40    border-top:1px solid #2a2a2a;41  }42  .kb-toolbar{height:120px;display:flex;align-items:center;gap:40px;padding:0 32px;color:#bfbfbf;}43  .kb-toolbar .tool{width:72px;height:72px;border-radius:18px;background:#222;display:flex;align-items:center;justify-content:center;border:1px solid #2b2b2b;}44  .keys{padding:10px 20px 20px 20px}45  .row-kb{display:grid;gap:14px;margin:14px 0;}46  .row-kb.row1{grid-template-columns:repeat(10,1fr);}47  .row-kb.row2{grid-template-columns:repeat(10,1fr);}48  .row-kb.row3{grid-template-columns:repeat(9,1fr);}49  .row-kb.row4{grid-template-columns:72px repeat(7,1fr) 72px;}50  .key{51    height:116px;background:#2a2a2a;border-radius:22px;border:1px solid #3a3a3a;52    display:flex;align-items:center;justify-content:center;color:#f0f0f0;font-size:44px;53  }54  .space-row{display:grid;grid-template-columns:120px 1fr 120px 120px;gap:18px;margin-top:10px;}55  .space{height:120px;background:#2a2a2a;border-radius:30px;border:1px solid #3a3a3a;}56  .gesture{57    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);58    width:520px;height:12px;background:#e0e0e0;border-radius:8px;opacity:.7;59  }60  /* Tiny helper rectangles for status wifi/battery */61  .status-rect{width:48px;height:30px;border:2px solid #cfcfcf;border-radius:6px;}62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Status Bar -->68  <div class="status-bar">69    <div class="time">3:23</div>70    <div class="status-right">71      <svg class="icon" viewBox="0 0 24 24">72        <path fill="#cfcfcf" d="M12 18l8-8c-3.7-3.7-9.3-3.7-13 0l5 5z"/>73      </svg>74      <div class="status-rect" title="Battery"></div>75    </div>76  </div>77 78  <!-- Header -->79  <div class="header">80    <div class="back">81      <svg width="44" height="44" viewBox="0 0 24 24">82        <path fill="#eaeaea" d="M15 19l-7-7 7-7v14z"/>83      </svg>84    </div>85    <div class="title">Compose</div>86    <div class="actions">87      <svg class="icon" viewBox="0 0 24 24">88        <path fill="#cfcfcf" d="M7 6h10v2H7zm0 5h10v2H7zm0 5h10v2H7z"/>89        <path fill="#cfcfcf" d="M4 5l8 6-8 6V5z"/>90      </svg>91      <svg class="icon" viewBox="0 0 24 24">92        <path fill="#cfcfcf" d="M4 20l16-8-16-8v6l10 2-10 2v6z"/>93      </svg>94      <svg class="icon" viewBox="0 0 24 24">95        <circle cx="5" cy="12" r="2" fill="#cfcfcf"></circle>96        <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>97        <circle cx="19" cy="12" r="2" fill="#cfcfcf"></circle>98      </svg>99    </div>100  </div>101 102  <!-- From row -->103  <div class="row" style="position:absolute;top:236px;">104    <div class="label">From</div>105    <div class="content">dbwscratch.test.id8@gmail.com</div>106  </div>107 108  <!-- To row -->109  <div class="row" style="position:absolute;top:316px;">110    <div class="label">To</div>111    <div class="content" style="color:#777;"> </div>112    <div class="dropdown">113      <svg width="36" height="36" viewBox="0 0 24 24">114        <path fill="#cfcfcf" d="M7 10l5 5 5-5H7z"/>115      </svg>116    </div>117  </div>118 119  <!-- Note label -->120  <div class="note-label" style="position:absolute;top:416px;">Text Note:</div>121 122  <!-- Editor / typed content -->123  <div class="editor" style="position:absolute;top:496px;left:0;width:100%;">Modeling</div>124 125  <!-- Keyboard -->126  <div class="keyboard">127    <div class="kb-toolbar">128      <div class="tool">⋯</div>129      <div class="tool">☺</div>130      <div class="tool">GIF</div>131      <div class="tool">132        <svg width="32" height="32" viewBox="0 0 24 24">133          <path fill="#bfbfbf" d="M12 4l8 8-8 8-8-8 8-8z"/>134        </svg>135      </div>136      <div class="tool">GⓇ</div>137      <div class="tool">138        <svg width="28" height="28" viewBox="0 0 24 24">139          <circle cx="12" cy="12" r="9" fill="#bfbfbf"/>140        </svg>141      </div>142      <div class="tool">143        <svg width="32" height="32" viewBox="0 0 24 24">144          <path fill="#bfbfbf" d="M19 13h-2v6h2v-6zM7 13h2v6H7v-6zM11 5h2v14h-2V5z"/>145        </svg>146      </div>147    </div>148 149    <div class="keys">150      <div class="row-kb row1">151        <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><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>152      </div>153      <div class="row-kb row2">154        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>155      </div>156      <div class="row-kb row3">157        <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><div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div>158      </div>159      <div class="row-kb row4">160        <div class="key">?123</div>161        <div class="key">@</div>162        <div class="key">☺</div>163        <div class="key" style="grid-column:span 3">space</div>164        <div class="key">.</div>165        <div class="key">166          <svg width="40" height="40" viewBox="0 0 24 24">167            <path fill="#f0f0f0" d="M4 20l16-8-16-8v6l10 2-10 2v6z"/>168          </svg>169        </div>170      </div>171      <div class="space-row">172        <div class="space"></div>173        <div class="space"></div>174        <div class="space"></div>175        <div class="space"></div>176      </div>177    </div>178  </div>179 180  <div class="gesture"></div>181</div>182</body>183</html>