GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Email Compose - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #11140D; color: #EDEFE9;13  }14  /* Common */15  .row { display: flex; align-items: center; }16  .label { color: #B7BCAF; font-size: 42px; width: 180px; }17  .text { color: #F3F5EE; font-size: 48px; }18  .subtext { color: #8E9585; font-size: 36px; }19  .divider { height: 2px; background: #2A2F23; margin: 0 0; }20  .content { padding: 0 56px; }21  /* Status bar */22  #status-bar { height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #D9DDCF; font-size: 40px; }23  #status-icons { display: flex; gap: 28px; align-items: center; }24  .icon-dot { width: 14px; height: 14px; border-radius: 50%; background: #D9DDCF; opacity: 0.8; }25  /* Toolbar */26  #toolbar { height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; color: #D9DDCF; }27  .tool-left, .tool-right { display: flex; align-items: center; gap: 48px; }28  .icon-btn { width: 64px; height: 64px; display: grid; place-items: center; }29  .icon svg { width: 56px; height: 56px; fill: none; stroke: #D9DDCF; stroke-width: 4; }30  .icon.fill svg { fill: #D9DDCF; stroke: none; }31  /* Fields */32  #fields { margin-top: 12px; }33  .field-row { padding: 28px 56px; display: flex; align-items: center; gap: 28px; }34  .caret { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; }35  /* "Typing" caret in To field */36  .typing-caret { width: 4px; height: 52px; background: #8FD36A; margin-left: 10px; border-radius: 2px; }37  /* Contact chip */38  .contact { padding: 32px 56px; display: flex; align-items: center; gap: 26px; }39  .avatar { width: 96px; height: 96px; border-radius: 50%; background: #FF7E33; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 56px; }40  .contact-info { display: flex; flex-direction: column; }41  /* Bottom gesture bar */42  #gesture { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 320px; height: 14px; border-radius: 10px; background: #EDEFE9; opacity: 0.9; }43</style>44</head>45<body>46<div id="render-target">47 48  <!-- Status bar -->49  <div id="status-bar">50    <div>2:18</div>51    <div id="status-icons">52      <div class="icon-dot"></div>53      <div class="icon-dot"></div>54      <div class="icon-dot"></div>55      <svg width="48" height="24" viewBox="0 0 24 24">56        <rect x="2" y="10" width="3" height="8" fill="#D9DDCF"></rect>57        <rect x="7" y="8" width="3" height="10" fill="#D9DDCF"></rect>58        <rect x="12" y="6" width="3" height="12" fill="#D9DDCF"></rect>59        <rect x="17" y="4" width="3" height="14" fill="#D9DDCF"></rect>60      </svg>61      <svg width="42" height="24" viewBox="0 0 24 24">62        <path d="M2 9c4-6 16-6 20 0" stroke="#D9DDCF" stroke-width="3" fill="none" stroke-linecap="round"/>63        <circle cx="12" cy="14" r="3" fill="#D9DDCF"></circle>64      </svg>65      <svg width="44" height="24" viewBox="0 0 24 24">66        <rect x="2" y="6" width="18" height="12" rx="3" ry="3" stroke="#D9DDCF" stroke-width="3" fill="none"/>67        <rect x="4" y="8" width="14" height="8" fill="#D9DDCF"></rect>68      </svg>69    </div>70  </div>71 72  <!-- Toolbar -->73  <div id="toolbar">74    <div class="tool-left">75      <div class="icon-btn icon">76        <svg viewBox="0 0 24 24">77          <path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/>78        </svg>79      </div>80    </div>81    <div class="tool-right">82      <div class="icon-btn icon">83        <!-- Attach/paperclip -->84        <svg viewBox="0 0 24 24">85          <path d="M7 13l7-7a4 4 0 1 1 6 6l-9 9a6 6 0 0 1-9-9l8-8" stroke-linecap="round" stroke-linejoin="round"/>86        </svg>87      </div>88      <div class="icon-btn icon fill">89        <!-- Send -->90        <svg viewBox="0 0 24 24">91          <path d="M2 12l20-9-7 19-3-7-10-3z"></path>92        </svg>93      </div>94      <div class="icon-btn icon fill">95        <!-- More (vertical) -->96        <svg viewBox="0 0 24 24">97          <circle cx="12" cy="5" r="2"></circle>98          <circle cx="12" cy="12" r="2"></circle>99          <circle cx="12" cy="19" r="2"></circle>100        </svg>101      </div>102    </div>103  </div>104 105  <div class="divider"></div>106 107  <!-- Fields -->108  <div id="fields">109 110    <div class="field-row">111      <div class="label">From</div>112      <div class="text">thomas.blanc1978@gmail.com</div>113      <div class="caret">114        <svg viewBox="0 0 24 24">115          <path d="M6 9l6 6 6-6" stroke="#D9DDCF" stroke-width="3" fill="none" stroke-linecap="round"/>116        </svg>117      </div>118    </div>119 120    <div class="divider"></div>121 122    <div class="field-row">123      <div class="label">To</div>124      <div class="text">rick.weinstein@dayrep.com</div>125      <div class="typing-caret"></div>126      <div class="caret">127        <svg viewBox="0 0 24 24">128          <path d="M6 9l6 6 6-6" stroke="#D9DDCF" stroke-width="3" fill="none" stroke-linecap="round"/>129        </svg>130      </div>131    </div>132 133    <div class="divider"></div>134 135    <!-- Contact suggestion -->136    <div class="contact">137      <div class="avatar">r</div>138      <div class="contact-info">139        <div class="text" style="line-height: 1.2;">rick.weinstein@dayrep.com</div>140        <div class="subtext">rick.weinstein@dayrep.com</div>141      </div>142    </div>143 144  </div>145 146  <!-- The rest of the screen is empty compose body area -->147 148  <!-- Gesture bar -->149  <div id="gesture"></div>150</div>151</body>152</html>