GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Gmail Compose</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:#0F0F10; color:#EDEDED;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:110px;15 background:#0F0F10; color:#CFCFCF; font-size:42px; display:flex; align-items:center;16 padding:0 36px; box-sizing:border-box;17 }18 .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }19 .icon { width:42px; height:42px; opacity:0.85; }20 /* Top app bar */21 .app-bar {22 position:absolute; top:110px; left:0; width:100%; height:150px;23 background:#141416; display:flex; align-items:center; padding:0 26px; box-sizing:border-box;24 border-bottom:1px solid #1F1F22;25 }26 .bar-left { display:flex; align-items:center; gap:26px; }27 .bar-right { margin-left:auto; display:flex; align-items:center; gap:46px; }28 .bar-icon { width:60px; height:60px; }29 /* Content area */30 .content {31 position:absolute; top:260px; left:0; width:100%; height:1140px; box-sizing:border-box;32 padding:0 36px; color:#F2F2F2; font-size:42px;33 }34 .field {35 padding:26px 0; border-bottom:1px solid #232428; display:flex; align-items:center;36 }37 .label { color:#B0B0B5; width:140px; }38 .value { flex:1; }39 .value .small { font-size:36px; color:#A8ABB0; }40 .dropdown { width:40px; height:40px; margin-left:12px; }41 .subject { padding:34px 0; font-size:50px; }42 .body { padding-top:26px; line-height:1.55; color:#E8E8EA; }43 .link { color:#8AB4F8; }44 /* Attachment chip */45 .attachment {46 margin-top:40px; width:1000px; height:120px; background:#2F3946;47 border-radius:18px; display:flex; align-items:center; padding:0 26px; box-sizing:border-box;48 }49 .file-thumb {50 width:64px; height:64px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:10px;51 display:flex; align-items:center; justify-content:center; color:#5A5A5A; font-size:26px; margin-right:26px;52 }53 .file-meta { flex:1; display:flex; flex-direction:column; }54 .file-name { font-size:44px; color:#FFFFFF; }55 .file-size { font-size:32px; color:#C9D1E1; margin-top:4px; }56 .close-x { width:52px; height:52px; margin-left:18px; }57 /* Keyboard (simplified) */58 .keyboard {59 position:absolute; bottom:0; left:0; width:100%; height:1000px; background:#121215;60 border-top:1px solid #1F1F22; box-sizing:border-box; padding:30px 26px;61 }62 .kb-row { display:flex; gap:22px; margin-bottom:28px; }63 .key {64 flex:1; height:120px; background:#25262A; border-radius:22px; color:#EDEDED;65 display:flex; align-items:center; justify-content:center; font-size:48px;66 }67 .key.small { flex:0 0 90px; }68 .kb-top { display:flex; align-items:center; gap:30px; color:#C9C9CC; margin-bottom:22px; }69 .chip { height:90px; padding:0 28px; border-radius:28px; background:#1E2024; display:flex; align-items:center; }70</style>71</head>72<body>73<div id="render-target">74 75 <!-- Status bar -->76 <div class="status-bar">77 <div>7:43</div>78 <div class="status-right">79 <!-- simple placeholders for status icons -->80 <svg class="icon" viewBox="0 0 24 24">81 <path fill="#CFCFCF" d="M4 10h16v4H4z"></path>82 </svg>83 <svg class="icon" viewBox="0 0 24 24">84 <path fill="#CFCFCF" d="M3 7h18v10H3z"></path>85 </svg>86 </div>87 </div>88 89 <!-- App bar -->90 <div class="app-bar">91 <div class="bar-left">92 <!-- Back arrow -->93 <svg class="bar-icon" viewBox="0 0 24 24">94 <path fill="#EDEDED" d="M15.5 5l-8 7 8 7V5z"></path>95 </svg>96 </div>97 <div class="bar-right">98 <!-- Paperclip -->99 <svg class="bar-icon" viewBox="0 0 24 24">100 <path fill="#EDEDED" d="M7 13.5l6.5-6.5a3 3 0 114.2 4.2L9 20a5 5 0 11-7.1-7.1l9-9"></path>101 </svg>102 <!-- Send triangle -->103 <svg class="bar-icon" viewBox="0 0 24 24">104 <path fill="#EDEDED" d="M2 21l21-9-21-9 6 9-6 9z"></path>105 </svg>106 <!-- More vertical -->107 <svg class="bar-icon" viewBox="0 0 24 24">108 <circle cx="12" cy="5" r="2.2" fill="#EDEDED"></circle>109 <circle cx="12" cy="12" r="2.2" fill="#EDEDED"></circle>110 <circle cx="12" cy="19" r="2.2" fill="#EDEDED"></circle>111 </svg>112 </div>113 </div>114 115 <!-- Content -->116 <div class="content">117 <div class="field">118 <div class="label">From</div>119 <div class="value">dbwscratch.test.id11@gmail.com</div>120 </div>121 <div class="field">122 <div class="label">To</div>123 <div class="value"><span class="small"></span></div>124 <svg class="dropdown" viewBox="0 0 24 24">125 <path fill="#A0A3AA" d="M7 9l5 6 5-6H7z"></path>126 </svg>127 </div>128 <div class="subject">Alice_en.epub</div>129 130 <div class="body">131 --<br><br>132 Reading books with <span style="color:#FFFFFF;">ReadEra</span><br>133 <span class="link">https://play.google.com/store/apps/details?id=org.readera&hl=en</span>134 </div>135 136 <div class="attachment">137 <div class="file-thumb">DOC</div>138 <div class="file-meta">139 <div class="file-name">Alice_en.epub</div>140 <div class="file-size">26 KB</div>141 </div>142 <svg class="close-x" viewBox="0 0 24 24">143 <path fill="#FFFFFF" d="M5 5l14 14M19 5L5 19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>144 </svg>145 </div>146 </div>147 148 <!-- Keyboard -->149 <div class="keyboard">150 <div class="kb-top">151 <div class="chip">GIF</div>152 <div class="chip">Settings</div>153 <div class="chip">Translate</div>154 <div class="chip">Palette</div>155 <div class="chip">Mic</div>156 </div>157 <div class="kb-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><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>159 </div>160 <div class="kb-row">161 <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>162 </div>163 <div class="kb-row">164 <div class="key small">↶</div>165 <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>166 <div class="key">⌫</div>167 </div>168 <div class="kb-row">169 <div class="key small">?123</div>170 <div class="key small">@</div>171 <div class="key small">☺</div>172 <div class="key" style="flex:3">space</div>173 <div class="key small">.</div>174 <div class="key small">↗</div>175 </div>176 </div>177 178</div>179</body>180</html>