GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Reply UI - 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: #EAEAEA;11 }12 13 /* Status bar */14 .statusbar { position: absolute; top: 0; left: 0; width: 100%; height: 110px; padding: 0 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; color: #E0E0E0; }15 .status-left { font-size: 40px; letter-spacing: 0.5px; }16 .status-center { display: flex; gap: 28px; align-items: center; }17 .status-dot, .status-square { background: #9E9E9E; }18 .status-square { width: 32px; height: 32px; border-radius: 6px; opacity: 0.6; }19 .status-dot { width: 14px; height: 14px; border-radius: 50%; opacity: 0.7; }20 .status-right { display: flex; align-items: center; gap: 22px; }21 .status-icon { width: 40px; height: 40px; background: #9E9E9E; border-radius: 6px; opacity: 0.7; }22 23 /* Header bar beneath status */24 .header { position: absolute; top: 110px; left: 0; width: 100%; height: 140px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; box-sizing: border-box; border-bottom: 1px solid #2A2A2A; }25 .header-left { display: flex; align-items: center; gap: 26px; }26 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }27 .icon svg { width: 48px; height: 48px; }28 .header-from { font-size: 36px; color: #CFCFCF; }29 .header-right { display: flex; align-items: center; gap: 22px; }30 .icon-send svg path { fill: #C7A5FF; } /* lavender accent */31 .icon-paperclip svg path, .icon-more svg path { stroke: #CFCFCF; }32 .icon-paperclip svg, .icon-more svg { width: 44px; height: 44px; }33 34 /* Recipient row */35 .meta-row { position: absolute; top: 250px; left: 0; width: 100%; padding: 0 28px; height: 120px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; color: #BDBDBD; }36 .reply-icon svg { width: 42px; height: 42px; stroke: #CFCFCF; }37 .pill { display: flex; align-items: center; gap: 18px; padding: 12px 20px 12px 14px; border: 1px solid #3A3A3A; border-radius: 28px; }38 .avatar { width: 54px; height: 54px; border-radius: 50%; background: #73C067; display: flex; align-items: center; justify-content: center; color: #102010; font-weight: bold; font-size: 32px; }39 .pill-text { font-size: 34px; color: #E0E0E0; }40 .dropdown svg { width: 28px; height: 28px; }41 42 /* Subject */43 .subject { position: absolute; top: 370px; left: 0; width: 100%; padding: 20px 36px; box-sizing: border-box; border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; font-size: 42px; color: #DADADA; }44 .label { font-size: 32px; color: #9E9E9E; margin-bottom: 8px; }45 46 /* Body */47 .body-area { position: absolute; top: 490px; left: 0; right: 0; bottom: 980px; padding: 28px 36px; box-sizing: border-box; }48 .body-text { font-size: 48px; line-height: 1.4; color: #EAEAEA; }49 .ellipsis { margin-top: 26px; color: #8C8C8C; font-size: 60px; letter-spacing: 8px; }50 51 /* Keyboard */52 .keyboard { position: absolute; bottom: 120px; left: 0; width: 100%; background: #1A1A1A; border-top: 1px solid #2A2A2A; }53 .suggestions { height: 90px; display: flex; align-items: center; gap: 20px; padding: 0 36px; box-sizing: border-box; color: #E0E0E0; font-size: 36px; }54 .suggestion { padding: 8px 16px; border-radius: 16px; background: #2A2A2A; }55 .divider { width: 2px; height: 40px; background: #3A3A3A; }56 57 .key-row { display: flex; justify-content: space-between; padding: 0 36px; box-sizing: border-box; gap: 14px; }58 .key { width: 88px; height: 120px; border-radius: 16px; background: #2A2A2A; color: #EAEAEA; display: flex; align-items: center; justify-content: center; font-size: 42px; margin: 12px 0; }59 .key-wide { width: 180px; }60 .space { flex: 1; height: 120px; border-radius: 16px; background: #2A2A2A; color: #CFCFCF; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 12px 0; }61 .accent { background: #E3D4FF; color: #3A2E5A; } /* lavender accent for special keys */62 .key-icon { width: 46px; height: 46px; opacity: 0.9; }63 .bottom-safe { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 220px; height: 10px; border-radius: 6px; background: #EAEAEA; opacity: 0.9; }64 65 /* Typography tweaks */66 .muted { color: #AFAFAF; }67</style>68</head>69<body>70<div id="render-target">71 72 <!-- Status bar -->73 <div class="statusbar">74 <div class="status-left">11:37</div>75 <div class="status-center">76 <div class="status-square"></div>77 <div class="status-square"></div>78 <div class="status-dot"></div>79 </div>80 <div class="status-right">81 <div class="status-icon"></div>82 <div class="status-icon"></div>83 </div>84 </div>85 86 <!-- Header -->87 <div class="header">88 <div class="header-left">89 <div class="icon-btn icon">90 <svg viewBox="0 0 24 24">91 <path d="M15 6 L9 12 L15 18" fill="none" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>92 </svg>93 </div>94 <div class="header-from">From <span class="muted">farida.wadi01@gmail.com</span></div>95 </div>96 <div class="header-right">97 <div class="icon icon-paperclip">98 <svg viewBox="0 0 24 24">99 <path d="M7 12 L15 4 C17 2 20 2 22 4 C24 6 24 9 22 11 L12 21 C9 24 5 24 3 21 C1 19 1 15 3 13 L12 4" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>100 </svg>101 </div>102 <div class="icon icon-send">103 <svg viewBox="0 0 24 24">104 <path d="M3 12 L21 5 L16 20 L12 14 L3 12 Z"></path>105 </svg>106 </div>107 <div class="icon icon-more">108 <svg viewBox="0 0 24 24">109 <circle cx="12" cy="5" r="2" fill="#CFCFCF"></circle>110 <circle cx="12" cy="12" r="2" fill="#CFCFCF"></circle>111 <circle cx="12" cy="19" r="2" fill="#CFCFCF"></circle>112 </svg>113 </div>114 </div>115 </div>116 117 <!-- Recipient row -->118 <div class="meta-row">119 <div class="reply-icon icon">120 <svg viewBox="0 0 24 24">121 <path d="M10 8 L6 12 L10 16" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>122 <path d="M6 12 H13 C18 12 20 15 20 18" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>123 </svg>124 </div>125 <div class="pill">126 <div class="avatar">d</div>127 <div class="pill-text">Cerebra Research</div>128 <div class="dropdown">129 <svg viewBox="0 0 24 24">130 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>131 </svg>132 </div>133 </div>134 </div>135 136 <!-- Subject -->137 <div class="subject">138 <div class="label">Re:</div>139 Hi140 </div>141 142 <!-- Body -->143 <div class="body-area">144 <div class="body-text">Acknowledged</div>145 <div class="ellipsis">...</div>146 </div>147 148 <!-- Keyboard -->149 <div class="keyboard">150 <div class="suggestions">151 <div class="suggestion">Acknowledged</div>152 <div class="divider"></div>153 <div class="suggestion">Acknowledges</div>154 </div>155 156 <!-- Row 1 -->157 <div class="key-row">158 <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>159 <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>160 </div>161 <!-- Row 2 -->162 <div class="key-row">163 <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>164 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>165 <div class="key">166 <svg class="key-icon" viewBox="0 0 24 24">167 <path d="M4 12 H20" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"></path>168 </svg>169 </div>170 </div>171 <!-- Row 3 -->172 <div class="key-row">173 <div class="key-wide accent">?123</div>174 <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>175 <div class="key">176 <svg class="key-icon" viewBox="0 0 24 24">177 <path d="M19 7 L5 21" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"></path>178 <path d="M6 7 H19 V20" fill="none" stroke="#EAEAEA" stroke-width="2"></path>179 </svg>180 </div>181 </div>182 <!-- Row 4 -->183 <div class="key-row">184 <div class="key-wide">185 <svg class="key-icon" viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="10" fill="#EAEAEA"></circle>187 <circle cx="12" cy="12" r="6" fill="#2A2A2A"></circle>188 </svg>189 </div>190 <div class="key">,</div>191 <div class="space">space</div>192 <div class="key">.</div>193 <div class="key-wide accent">194 <svg class="key-icon" viewBox="0 0 24 24">195 <path d="M6 4 L20 12 L6 20 Z" fill="#3A2E5A"></path>196 </svg>197 </div>198 </div>199 </div>200 201 <!-- Bottom gesture bar -->202 <div class="bottom-safe"></div>203</div>204</body>205</html>