GD-ML/AndroidCode
13.4k
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 - Dark</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}9 #render-target{10 position:relative; overflow:hidden;11 width:1080px; height:2400px;12 background:#1f1918; color:#f5eeeb;13 }14 15 /* Status bar */16 .statusbar{17 height:92px; padding:0 28px;18 display:flex; align-items:center; justify-content:space-between;19 font-size:36px; color:#ffffff;20 }21 .status-right{display:flex; align-items:center; gap:18px; opacity:.9;}22 .icon{display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;}23 .icon svg{width:42px; height:42px; fill:#e9d8d4; stroke:#e9d8d4; stroke-width:2}24 25 /* App bar */26 .appbar{27 height:150px; border-bottom:1px solid #3a2f2f;28 display:flex; align-items:center; padding:0 24px; gap:10px;29 }30 .appbar-title{font-size:54px; font-weight:600; margin-left:12px;}31 .app-actions{margin-left:auto; display:flex; gap:16px;}32 33 /* Content area */34 .fields{padding:22px 28px 0 28px;}35 .row{padding:20px 0; border-bottom:1px solid #332a29;}36 .from{color:#c9bebc; font-size:36px;}37 .to-line{display:flex; align-items:center; gap:16px; padding:24px 0;}38 .to-label{color:#c9bebc; font-size:38px;}39 .chip{40 background:#2a2322; color:#f2e7e5; border:1px solid #3a2f2f;41 padding:16px 22px; border-radius:22px; font-size:38px;42 }43 .caret{margin-left:auto;}44 .caret svg{width:38px; height:38px; fill:#cdbfbd;}45 .suggest{46 display:flex; align-items:center; gap:24px; padding:28px 0;47 }48 .avatar{49 width:88px; height:88px; border-radius:50%; background:#e04a3a;50 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold;51 }52 .sugg-text .title{font-size:42px; margin-bottom:6px;}53 .sugg-text .sub{font-size:34px; color:#c8bab8;}54 .spacer{height:0; flex:1;}55 .content-wrap{display:flex; flex-direction:column; height:calc(2400px - 0px);}56 57 /* Keyboard mock */58 .keyboard{59 height:860px; background:#171312; border-top:1px solid #2c2423;60 padding:16px 18px 24px 18px; display:flex; flex-direction:column; gap:18px;61 }62 .kb-toolbar{display:flex; align-items:center; gap:26px; padding:8px 6px;}63 .kb-toolbar .tool{width:84px; height:84px; border-radius:18px; background:#2a2423; display:flex; align-items:center; justify-content:center;}64 .tool svg{width:44px; height:44px; fill:#d8c9c6;}65 .kb-row{display:flex; gap:14px;}66 .key{67 flex:1; height:108px; border-radius:20px; background:#2a2423; color:#efe2df;68 display:flex; align-items:center; justify-content:center; font-size:42px; box-shadow:inset 0 0 0 1px #3a2f2f;69 }70 .key.wide{flex:2;}71 .key.space{flex:5; color:#bfb3b1;}72 .enter{73 width:132px; height:132px; border-radius:50%; background:#e7b9b6; color:#2a2322;74 display:flex; align-items:center; justify-content:center; margin-left:auto;75 }76 .enter svg{width:54px; height:54px; fill:#2a2322;}77 .bottom-bar{78 position:absolute; left:0; right:0; bottom:20px; height:14px;79 display:flex; align-items:center; justify-content:center;80 }81 .gesture{82 width:240px; height:10px; background:#d8d1cf; border-radius:6px; opacity:.9;83 }84</style>85</head>86<body>87<div id="render-target">88 <!-- Status bar -->89 <div class="statusbar">90 <div class="time">8:08</div>91 <div class="status-right">92 <div class="icon">93 <svg viewBox="0 0 24 24"><path d="M2 12c4-4 8-6 10-6s6 2 10 6l-2 2c-3-3-6-4-8-4s-5 1-8 4L2 12z"></path></svg>94 </div>95 <div class="icon">96 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect><rect x="19" y="9" width="2" height="6"></rect></svg>97 </div>98 <div class="icon">99 <svg viewBox="0 0 24 24"><path d="M6 20h12a2 2 0 0 0 2-2V6"></path><rect x="4" y="4" width="16" height="16" rx="3" ry="3"></rect></svg>100 </div>101 </div>102 </div>103 104 <!-- App bar -->105 <div class="appbar">106 <div class="icon">107 <svg viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#e9d8d4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>108 </div>109 <div class="appbar-title">Compose</div>110 <div class="app-actions">111 <div class="icon">112 <svg viewBox="0 0 24 24"><path d="M7 2v13a5 5 0 1 0 10 0V2" fill="none" stroke="#e9d8d4" stroke-width="2" stroke-linecap="round"></path></svg>113 </div>114 <div class="icon">115 <svg viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v6l12 2L3 14z"></path></svg>116 </div>117 <div class="icon">118 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>119 </div>120 </div>121 </div>122 123 <div class="content-wrap">124 <div class="fields">125 <div class="row from">From dbwscratch.test.id6@gmail.com</div>126 127 <div class="row">128 <div class="to-line">129 <div class="to-label">To</div>130 <div class="chip">Dwbscratchid3@google.com</div>131 <div class="caret">132 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>133 </div>134 </div>135 136 <div class="suggest">137 <div class="avatar">•</div>138 <div class="sugg-text">139 <div class="title">Add recipient</div>140 <div class="sub">Dwbscratchid3@google.com</div>141 </div>142 </div>143 </div>144 </div>145 146 <div class="spacer"></div>147 148 <!-- Keyboard mock -->149 <div class="keyboard">150 <div class="kb-toolbar">151 <div class="tool"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect><rect x="7" y="9" width="10" height="2"></rect></svg></div>152 <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 4v16M4 12h16" stroke="#d8c9c6" stroke-width="2" fill="none"></path></svg></div>153 <div class="tool"><svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z"></path><text x="7" y="15" font-size="8" fill="#171312">GIF</text></svg></div>154 <div class="tool"><svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#d8c9c6" stroke-width="2" fill="none"></path></svg></div>155 <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v8M8 12h8" stroke="#171312" stroke-width="2"></path></svg></div>156 <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M8 16l8-8" stroke="#171312" stroke-width="2"></path></svg></div>157 <div class="tool" style="margin-left:auto;"><svg viewBox="0 0 24 24"><path d="M12 4a4 4 0 0 0 0 8v8" stroke="#d8c9c6" stroke-width="2" fill="none" stroke-linecap="round"></path></svg></div>158 </div>159 160 <div class="kb-row">161 <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>162 </div>163 <div class="kb-row">164 <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>165 </div>166 <div class="kb-row">167 <div class="key wide">⇧</div>168 <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>169 <div class="key wide">⌫</div>170 </div>171 <div class="kb-row" style="align-items:center;">172 <div class="key wide">?123</div>173 <div class="key">@</div>174 <div class="key">☺</div>175 <div class="key space">space</div>176 <div class="key">.</div>177 <div class="enter">178 <svg viewBox="0 0 24 24"><path d="M4 12h11v-4l5 5-5 5v-4H4z"></path></svg>179 </div>180 </div>181 </div>182 </div>183 184 <div class="bottom-bar"><div class="gesture"></div></div>185</div>186</body>187</html>