GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Forward Compose - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #ffffff;12 }13 /* Status bar */14 .status-bar {15 height: 88px;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 32px; color: #E0E0E0; font-size: 32px; letter-spacing: 0.5px;18 }19 .status-icons { display: flex; align-items: center; gap: 24px; }20 .icon { width: 38px; height: 38px; fill: #E0E0E0; }21 /* App bar */22 .app-bar {23 height: 120px; border-bottom: 1px solid #2A2A2A;24 display: flex; align-items: center; gap: 22px; padding: 0 24px;25 }26 .app-title { font-size: 52px; font-weight: 600; }27 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }28 .action { width: 44px; height: 44px; fill: #9E9E9E; }29 /* Content */30 .content { padding: 26px 32px; }31 .row { display: flex; align-items: center; gap: 16px; margin: 18px 0; }32 .label { color: #9AA0A6; font-size: 34px; min-width: 44px; }33 .from-text { color: #CFCFCF; font-size: 34px; }34 .to-chip {35 display: inline-flex; align-items: center; gap: 18px;36 background: #1F1F1F; border: 1px solid #2F2F2F; border-radius: 54px;37 padding: 12px 24px;38 }39 .avatar {40 width: 56px; height: 56px; border-radius: 50%;41 background: #2A2A2A; border: 1px solid #3A3A3A;42 }43 .email { font-size: 34px; color: #EDEDED; }44 .subject { font-size: 44px; margin-top: 22px; }45 .compose-placeholder { color: #A0A0A0; font-size: 38px; margin-top: 36px; }46 .more-ellipsis { color: #A0A0A0; font-size: 42px; margin-top: 18px; }47 /* Keyboard */48 .keyboard {49 position: absolute; left: 0; bottom: 0;50 width: 100%; height: 975px; background: #1A1A1A;51 border-top: 1px solid #2A2A2A;52 }53 .kb-toolbar {54 height: 120px; display: flex; align-items: center; gap: 40px;55 padding: 0 40px; color: #CFCFCF; border-bottom: 1px solid #2A2A2A;56 }57 .kb-row { display: flex; justify-content: space-between; padding: 16px 24px; }58 .key {59 background: #2C2C2C; color: #E0E0E0;60 width: 88px; height: 112px; border-radius: 18px;61 display: flex; align-items: center; justify-content: center;62 font-size: 42px;63 }64 .key-wide { width: 600px; }65 .key-medium { width: 120px; }66 .space-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }67 .circle-btn {68 width: 128px; height: 128px; border-radius: 50%;69 background: #4A90E2; display: flex; align-items: center; justify-content: center;70 }71 .send-icon { width: 54px; height: 54px; fill: #ffffff; }72 .bottom-gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; width: 460px; height: 8px; background: #CFCFCF; border-radius: 8px; opacity: 0.35; }73 /* Small helper icons */74 .dot-vertical { display: inline-flex; flex-direction: column; gap: 6px; }75 .dot-vertical span { width: 8px; height: 8px; background: #9E9E9E; border-radius: 50%; display: inline-block; }76</style>77</head>78<body>79<div id="render-target">80 81 <!-- Status bar -->82 <div class="status-bar">83 <div>2:44</div>84 <div class="status-icons">85 <!-- simple wifi -->86 <svg class="icon" viewBox="0 0 24 24"><path d="M12 18l2 2-2 2-2-2 2-2zm-7-7c4-4 14-4 18 0l-2 2c-3-3-11-3-14 0L5 11zm3 3c2.7-2.7 7.3-2.7 10 0l-2 2c-1.8-1.8-4.2-1.8-6 0l-2-2z" /></svg>87 <!-- network/cell -->88 <svg class="icon" viewBox="0 0 24 24"><path d="M3 17h2v4H3v-4zm4-6h2v10H7V11zm4-4h2v14h-2V7zm4-4h2v18h-2V3z"/></svg>89 <!-- battery -->90 <svg class="icon" viewBox="0 0 24 24"><path d="M20 8h2v8h-2V8zM3 7h16v10H3V7zm2 2v6h12V9H5z"/></svg>91 </div>92 </div>93 94 <!-- App bar -->95 <div class="app-bar">96 <!-- Back arrow -->97 <svg class="action" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6v12z"/></svg>98 <div class="app-title">Forward</div>99 <!-- dropdown chevron beside title -->100 <svg class="action" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>101 102 <div class="app-actions">103 <!-- attach -->104 <svg class="action" viewBox="0 0 24 24"><path d="M7 12v5a5 5 0 1 0 10 0V7a3 3 0 0 0-6 0v7a1 1 0 0 0 2 0V7h2v7a3 3 0 1 1-6 0v-5h-2z"/></svg>105 <!-- send -->106 <svg class="action" viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>107 <!-- kebab menu -->108 <div class="dot-vertical"><span></span><span></span><span></span></div>109 </div>110 </div>111 112 <!-- Content area -->113 <div class="content">114 <div class="row">115 <div class="from-text">From dbwscratch.test.id8@gmail.com</div>116 </div>117 118 <div class="row">119 <div class="label">To</div>120 <div class="to-chip">121 <div class="avatar"></div>122 <div class="email">dbwscratch.test.id10@gmail.com</div>123 </div>124 <svg class="action" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>125 </div>126 127 <div class="subject">Fwd: OFFICIAL WEEKEND PARTY</div>128 <div class="compose-placeholder">Compose email</div>129 <div class="more-ellipsis">...</div>130 </div>131 132 <!-- Keyboard mock -->133 <div class="keyboard">134 <div class="kb-toolbar">135 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">◻</div>136 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">☺</div>137 <div style="color:#9E9E9E;font-size:36px;">GIF</div>138 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">⚙</div>139 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">↔</div>140 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">🎨</div>141 <div style="width:56px;height:56px;background:#2C2C2C;border-radius:12px;display:flex;align-items:center;justify-content:center;">🎤</div>142 </div>143 144 <!-- Row 1 -->145 <div class="kb-row">146 <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>147 <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>148 </div>149 <!-- Row 2 -->150 <div class="kb-row">151 <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>152 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>153 </div>154 <!-- Row 3 -->155 <div class="kb-row">156 <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>157 <div class="key">n</div><div class="key">m</div>158 <div class="key key-medium">⌫</div>159 </div>160 <!-- Row 4 -->161 <div class="space-row">162 <div class="key key-medium">?123</div>163 <div class="key key-medium">@</div>164 <div class="key key-medium">☺</div>165 <div class="key key-wide"></div>166 <div class="key key-medium">.</div>167 <div class="circle-btn">168 <svg class="send-icon" viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>169 </div>170 </div>171 172 <div class="bottom-gesture"></div>173 </div>174 175</div>176</body>177</html>