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>Compose Email - Dark UI</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: #121212; color: #ECEFF1;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0;18    width: 100%; height: 96px;19    padding: 0 32px;20    display: flex; align-items: center; justify-content: space-between;21    color: #E0E0E0; font-size: 40px; letter-spacing: 1px;22  }23  .status-left { display: flex; align-items: center; gap: 24px; }24  .status-icons { display: flex; align-items: center; gap: 18px; }25  .status-right { display: flex; align-items: center; gap: 28px; }26  .s-icon { width: 44px; height: 44px; opacity: 0.9; }27 28  /* Top actions bar */29  .top-actions {30    position: absolute; top: 96px; left: 0; right: 0;31    height: 132px; display: flex; align-items: center; justify-content: space-between;32    padding: 0 28px;33  }34  .left-actions { display: flex; align-items: center; gap: 24px; }35  .right-actions { display: flex; align-items: center; gap: 36px; }36  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }37  .icon-btn svg { width: 72px; height: 72px; }38 39  /* Rows */40  .content {41    position: absolute; top: 228px; left: 0; width: 100%;42    padding: 0 36px;43  }44  .row {45    padding: 28px 0;46    border-bottom: 1px solid #1E1E1E;47    display: flex; align-items: center;48  }49  .label {50    width: 140px; color: #B0BEC5; font-size: 36px;51  }52  .value {53    flex: 1; font-size: 40px; color: #ECEFF1;54  }55  .caret {56    width: 48px; height: 48px; margin-left: 12px;57  }58 59  /* Contact suggestion */60  .suggestions { padding-top: 24px; }61  .contact-item {62    display: flex; align-items: center; gap: 28px;63    padding: 18px 0;64  }65  .avatar {66    width: 96px; height: 96px; border-radius: 50%;67    background: #2E7D32;68    display: flex; align-items: center; justify-content: center;69    color: #fff; font-weight: bold; font-size: 44px;70  }71  .contact-text { display: flex; flex-direction: column; }72  .contact-name { font-size: 38px; color: #E0E0E0; }73  .contact-email { font-size: 32px; color: #9E9E9E; }74 75  /* Bottom home indicator */76  .home-indicator {77    position: absolute; bottom: 62px; left: 50%;78    transform: translateX(-50%);79    width: 286px; height: 12px; border-radius: 6px;80    background: #E0E0E0; opacity: 0.7;81  }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status Bar -->88  <div class="status-bar">89    <div class="status-left">90      <div>11:07</div>91      <div class="status-icons">92        <!-- simple circle check -->93        <svg class="s-icon" viewBox="0 0 48 48">94          <circle cx="24" cy="24" r="22" fill="none" stroke="#E0E0E0" stroke-width="4"></circle>95          <path d="M14 24 L22 32 L34 18" fill="none" stroke="#E0E0E0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>96        </svg>97        <!-- brightness (sun) -->98        <svg class="s-icon" viewBox="0 0 48 48">99          <circle cx="24" cy="24" r="10" fill="none" stroke="#E0E0E0" stroke-width="4"></circle>100          <path d="M24 6 V12 M24 36 V42 M6 24 H12 M36 24 H42 M11 11 L15 15 M33 33 L37 37 M33 11 L37 15 M11 33 L15 37"101                stroke="#E0E0E0" stroke-width="4" stroke-linecap="round"></path>102        </svg>103      </div>104    </div>105    <div class="status-right">106      <!-- Wi-Fi -->107      <svg class="s-icon" viewBox="0 0 48 48">108        <path d="M8 20 C16 14, 32 14, 40 20" fill="none" stroke="#E0E0E0" stroke-width="4"></path>109        <path d="M12 26 C18 22, 30 22, 36 26" fill="none" stroke="#E0E0E0" stroke-width="4"></path>110        <circle cx="24" cy="32" r="3" fill="#E0E0E0"></circle>111      </svg>112      <!-- Battery -->113      <svg class="s-icon" viewBox="0 0 48 48">114        <rect x="6" y="12" width="32" height="24" rx="4" ry="4" fill="none" stroke="#E0E0E0" stroke-width="4"></rect>115        <rect x="40" y="18" width="4" height="12" fill="#E0E0E0"></rect>116        <rect x="10" y="16" width="24" height="16" fill="#E0E0E0"></rect>117      </svg>118    </div>119  </div>120 121  <!-- Top Actions -->122  <div class="top-actions">123    <div class="left-actions">124      <!-- Back Arrow -->125      <div class="icon-btn">126        <svg viewBox="0 0 48 48">127          <path d="M28 10 L12 24 L28 38" stroke="#E0E0E0" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>128          <path d="M12 24 H40" stroke="#E0E0E0" stroke-width="4" fill="none" stroke-linecap="round"></path>129        </svg>130      </div>131    </div>132    <div class="right-actions">133      <!-- Attachment (paperclip) -->134      <div class="icon-btn">135        <svg viewBox="0 0 48 48">136          <path d="M18 28 L34 12 A8 8 0 1 1 46 24 L24 46 A12 12 0 0 1 7 29 L26 10"137                stroke="#E0E0E0" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>138        </svg>139      </div>140      <!-- Send -->141      <div class="icon-btn">142        <svg viewBox="0 0 48 48">143          <polygon points="6,24 42,12 30,24 42,36" fill="#E0E0E0"></polygon>144        </svg>145      </div>146      <!-- More (vertical dots) -->147      <div class="icon-btn">148        <svg viewBox="0 0 48 48">149          <circle cx="24" cy="10" r="4" fill="#E0E0E0"></circle>150          <circle cx="24" cy="24" r="4" fill="#E0E0E0"></circle>151          <circle cx="24" cy="38" r="4" fill="#E0E0E0"></circle>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Content -->158  <div class="content">159    <!-- From row -->160    <div class="row">161      <div class="label">From</div>162      <div class="value">dbwscratch.test.id16@gmail.com</div>163    </div>164 165    <!-- To row -->166    <div class="row">167      <div class="label">To</div>168      <div class="value">karin.iversen@example.com</div>169      <div class="caret">170        <svg viewBox="0 0 24 24">171          <polygon points="4,8 12,16 20,8" fill="#E0E0E0"></polygon>172        </svg>173      </div>174    </div>175 176    <!-- Contact suggestion -->177    <div class="suggestions">178      <div class="contact-item">179        <div class="avatar">k</div>180        <div class="contact-text">181          <div class="contact-name">karin.iversen@example.com</div>182          <div class="contact-email">karin.iversen@example.com</div>183        </div>184      </div>185    </div>186  </div>187 188  <!-- Bottom home indicator -->189  <div class="home-indicator"></div>190</div>191</body>192</html>