GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Gmail Compose - Dark</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: #121212; color: #EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 96px;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 32px; box-sizing: border-box; font-size: 36px; color: #EDEDED;18  }19  .status-right { display: flex; align-items: center; gap: 24px; }20  .status-icons { display: flex; align-items: center; gap: 24px; margin-left: 20px; opacity: 0.9; }21  .status-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }22  .status-icon svg { width: 100%; height: 100%; fill: #EDEDED; }23 24  /* Header */25  .header {26    position: absolute; top: 96px; left: 0; width: 100%; height: 144px;27    display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;28    border-bottom: 1px solid #2A2A2A;29  }30  .header-left, .header-right { display: flex; align-items: center; }31  .header-left { gap: 24px; }32  .header-right { margin-left: auto; gap: 36px; }33  .header .title { font-size: 46px; font-weight: 500; color: #EDEDED; }34  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 30px; }35  .icon-btn svg { width: 48px; height: 48px; fill: #EDEDED; }36 37  /* Content */38  .content {39    position: absolute; top: 240px; left: 0; width: 100%; padding: 24px 32px 0 32px;40    box-sizing: border-box;41  }42  .row { display: flex; align-items: center; padding: 18px 0; font-size: 38px; }43  .label { color: #A0A0A0; margin-right: 20px; }44  .value { color: #EDEDED; }45  .to-row { border-bottom: 1px solid #2C2C2C; padding-bottom: 22px; }46  .to-row .expand { margin-left: auto; }47  .to-row svg { width: 40px; height: 40px; fill: #A0A0A0; }48  .subject-row { color: #A0A0A0; font-size: 40px; padding: 26px 0; border-bottom: 1px solid #2C2C2C; }49  .message-area {50    margin-top: 28px; min-height: 720px; padding-top: 12px; font-size: 40px; line-height: 1.4;51    color: #EDEDED;52  }53 54  /* Keyboard (mock) */55  .keyboard {56    position: absolute; bottom: 56px; left: 0; width: 100%; height: 900px;57    background: #1A1A1A; border-top: 1px solid #2A2A2A; box-sizing: border-box;58    padding: 24px 24px 16px 24px;59  }60  .kb-tools { display: flex; align-items: center; gap: 26px; padding-bottom: 16px; }61  .tool { width: 80px; height: 80px; background: #2A2A2A; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #D0D0D0; font-size: 30px; }62  .rows { display: grid; gap: 16px; margin-top: 8px; }63  .row-keys { display: flex; justify-content: center; gap: 16px; }64  .key {65    height: 120px; min-width: 82px; padding: 0 24px;66    background: #2A2A2A; border-radius: 28px; display: flex; align-items: center; justify-content: center;67    color: #EDEDED; font-size: 44px; box-shadow: inset 0 -2px 0 #242424;68  }69  .key.wide { min-width: 200px; }70  .key.extra-wide { min-width: 480px; }71  .key.icon svg { width: 48px; height: 48px; fill: #EDEDED; }72  .gesture-bar {73    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);74    width: 300px; height: 10px; background: #EDEDED; border-radius: 6px; opacity: 0.85;75  }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="status-left">11:14</div>84    <div class="status-icons">85      <div class="status-icon">86        <!-- simple play button to imply YouTube -->87        <svg viewBox="0 0 24 24"><path d="M10 7l7 5-7 5V7z"/></svg>88      </div>89      <div class="status-icon">90        <!-- envelope for Gmail -->91        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm9 5l9-5H3l9 5z"/></svg>92      </div>93      <div class="status-icon">94        <!-- cloud -->95        <svg viewBox="0 0 24 24"><path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9 2A3 3 0 0 0 6 15z"/></svg>96      </div>97    </div>98    <div class="status-right">99      <div class="status-icon">100        <!-- signal -->101        <svg viewBox="0 0 24 24"><path d="M3 20h2v-4H3v4zm4 0h2v-7H7v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>102      </div>103      <div class="status-icon">104        <!-- wifi -->105        <svg viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l-2 2 8 8 8-8-2-2-6 6-6-6zm-4-4l-2 2 12 12 12-12-2-2-10 10L2 8z" /></svg>106      </div>107      <div class="status-icon">108        <!-- battery -->109        <svg viewBox="0 0 24 24"><path d="M16 6h2v2h2v8h-2v2h-2V6zM2 8h12v8H2V8z"/></svg>110      </div>111    </div>112  </div>113 114  <!-- Header -->115  <div class="header">116    <div class="header-left">117      <div class="icon-btn">118        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>119      </div>120      <div class="title">Compose</div>121    </div>122    <div class="header-right">123      <div class="icon-btn">124        <!-- paperclip -->125        <svg viewBox="0 0 24 24"><path d="M17 7l-7 7a3 3 0 1 0 4 4l8-8-1.4-1.4-8 8a1 1 0 1 1-1.4-1.4l7-7-1.2-1.2z"/></svg>126      </div>127      <div class="icon-btn">128        <!-- send -->129        <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3l5 9-5 9z"/></svg>130      </div>131      <div class="icon-btn">132        <!-- more vertical -->133        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>134      </div>135    </div>136  </div>137 138  <!-- Content -->139  <div class="content">140    <div class="row">141      <div class="label">From</div>142      <div class="value">dbwscratch.test.id11@gmail.com</div>143    </div>144 145    <div class="row to-row">146      <div class="label">To</div>147      <div class="value" style="color:#5F5F5F;"> </div>148      <div class="expand">149        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>150      </div>151    </div>152 153    <div class="subject-row">Subject</div>154 155    <div class="message-area">156      https://www.kitchenstories.com/en/recipes/molten-chocolate-cake157    </div>158  </div>159 160  <!-- Keyboard Mock -->161  <div class="keyboard">162    <div class="kb-tools">163      <div class="tool">⌨️</div>164      <div class="tool">☺️</div>165      <div class="tool">GIF</div>166      <div class="tool">167        <svg viewBox="0 0 24 24"><path d="M12 2l9 9-9 9-9-9 9-9zm0 4l-5 5 5 5 5-5-5-5z"/></svg>168      </div>169      <div class="tool">G↔︎</div>170      <div class="tool">🎨</div>171      <div class="tool">172        <svg viewBox="0 0 24 24"><path d="M9 5v14l11-7z"/></svg>173      </div>174    </div>175 176    <div class="rows">177      <div class="row-keys">178        <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>179        <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>180      </div>181      <div class="row-keys">182        <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>183        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>184      </div>185      <div class="row-keys">186        <div class="key wide icon">187          <!-- shift -->188          <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/></svg>189        </div>190        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>191        <div class="key">b</div><div class="key">n</div><div class="key">m</div>192        <div class="key wide icon">193          <!-- backspace -->194          <svg viewBox="0 0 24 24"><path d="M22 6H9L2 12l7 6h13V6zm-6 3l-3 3 3 3 1.4-1.4L15.8 12l1.6-1.6L16 9z"/></svg>195        </div>196      </div>197      <div class="row-keys">198        <div class="key wide">?123</div>199        <div class="key wide">@</div>200        <div class="key wide">☺️</div>201        <div class="key extra-wide"></div>202        <div class="key wide">.</div>203        <div class="key wide icon">204          <!-- enter -->205          <svg viewBox="0 0 24 24"><path d="M19 7v6H7l5 5-1.4 1.4L3.2 12l7.4-7.4L12 6l-5 5h12V7h2z"/></svg>206        </div>207      </div>208    </div>209  </div>210 211  <!-- Gesture bar -->212  <div class="gesture-bar"></div>213 214</div>215</body>216</html>