GD-ML/AndroidCode

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 - Forward Email</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: #FFFFFF; border-radius: 28px;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 110px;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 34px; color: #EDEDED; font-size: 44px; letter-spacing: 0.5px;18  }19  .status-icons { display: flex; align-items: center; gap: 28px; }20  .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }21  .icon svg { width: 44px; height: 44px; fill: #EDEDED; }22 23  /* Top app bar */24  .app-bar {25    position: absolute; top: 110px; left: 0; width: 100%; height: 180px;26    display: flex; align-items: center; padding: 0 32px; gap: 22px; color: #FFF;27  }28  .back-btn { width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; }29  .title { font-size: 66px; font-weight: 600; }30  .title-caret { margin-left: 10px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }31  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }32  .app-actions .icon { width: 74px; height: 74px; }33 34  /* Fields */35  .content {36    position: absolute; top: 290px; left: 0; width: 100%;37    padding: 10px 38px 0 38px;38  }39  .field {40    padding: 28px 0; border-bottom: 1px solid #2A2A2A; color: #CFCFCF;41    font-size: 42px; display: flex; align-items: center;42  }43  .field-label { width: 120px; color: #9E9E9E; }44  .field-value { flex: 1; color: #FFFFFF; }45  .dropdown { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; margin-left: 12px; }46  .contact-card {47    margin-top: 24px; display: flex; align-items: center; gap: 28px;48    padding: 26px 0; border-bottom: 1px solid #2A2A2A;49  }50  .avatar {51    width: 120px; height: 120px; border-radius: 60px; background: #2E7D32;52    display: flex; align-items: center; justify-content: center; color: #D7FFD7; font-size: 36px;53  }54  .contact-info .primary { font-size: 44px; font-weight: 600; color: #FFF; }55  .contact-info .secondary { font-size: 38px; color: #BDBDBD; margin-top: 6px; }56 57  /* Compose area placeholder */58  .compose-area {59    margin-top: 26px; height: 980px; border: 1px dashed #383838; border-radius: 12px;60    display: flex; align-items: center; justify-content: center; color: #8B8B8B; font-size: 40px; background: #171717;61  }62 63  /* Keyboard */64  .keyboard {65    position: absolute; bottom: 0; left: 0; width: 100%; height: 980px;66    background: #1E1E1E; border-top: 1px solid #2C2C2C; padding-top: 26px;67  }68  .kb-toolbar {69    display: flex; align-items: center; gap: 46px; padding: 0 34px 22px 34px;70  }71  .kb-tool {72    width: 88px; height: 88px; border-radius: 20px; background: #2A2A2A;73    display: flex; align-items: center; justify-content: center;74  }75  .kb-tool svg { width: 50px; height: 50px; fill: #DADADA; }76 77  .kb-rows { padding: 12px 26px 20px 26px; }78  .kb-row { display: flex; justify-content: space-between; margin-bottom: 18px; }79  .key {80    height: 128px; width: 90px; border-radius: 26px; background: #2B2B2B; color: #EDEDED;81    display: flex; align-items: center; justify-content: center; font-size: 48px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);82  }83  .key.wide { width: 180px; }84  .key.space { flex: 1; margin: 0 22px; width: auto; }85  .kb-bottom { display: flex; align-items: center; padding: 0 26px; gap: 18px; }86  .enter { width: 170px; height: 128px; border-radius: 26px; background: #8EB3D9; color: #0A0A0A; display: flex; align-items: center; justify-content: center; }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- STATUS BAR -->93  <div class="status-bar">94    <div>2:44</div>95    <div class="status-icons">96      <!-- small icons -->97      <div class="icon">98        <svg viewBox="0 0 24 24"><path d="M12 3l4.5 6h-9L12 3zm0 18l-4.5-6h9L12 21z"/></svg>99      </div>100      <div class="icon">101        <svg viewBox="0 0 24 24"><path d="M4 8h16v8H4z"/></svg>102      </div>103      <div class="icon">104        <svg viewBox="0 0 24 24"><path d="M18 3v18H6V3h12zm-2 2H8v14h8V5z"/></svg>105      </div>106    </div>107  </div>108 109  <!-- APP BAR -->110  <div class="app-bar">111    <div class="back-btn">112      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>113    </div>114    <div class="title">Forward</div>115    <div class="title-caret">116      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#FFF"/></svg>117    </div>118    <div class="app-actions">119      <div class="icon">120        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h12v2H3zm0 5h8v2H3z"/></svg>121      </div>122      <div class="icon">123        <svg viewBox="0 0 24 24"><path d="M4 12l14-8v16z"/></svg>124      </div>125      <div class="icon">126        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>127      </div>128    </div>129  </div>130 131  <!-- CONTENT -->132  <div class="content">133    <div class="field">134      <div class="field-label">From</div>135      <div class="field-value">dbwscratch.test.id8@gmail.com</div>136    </div>137    <div class="field">138      <div class="field-label">To</div>139      <div class="field-value">dbwscratch.test.id10@gmail.com</div>140      <div class="dropdown">141        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#BDBDBD"/></svg>142      </div>143    </div>144 145    <div class="contact-card">146      <div class="avatar">A</div>147      <div class="contact-info">148        <div class="primary">dbwscratch.test.id10@gmail.com</div>149        <div class="secondary">dbwscratch.test.id10@gmail.com</div>150      </div>151    </div>152 153    <div class="compose-area">Compose body area</div>154  </div>155 156  <!-- KEYBOARD -->157  <div class="keyboard">158    <div class="kb-toolbar">159      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></div>160      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 12c-3.9 0-7 3.1-7 7h14c0-3.9-3.1-7-7-7zm0-2a4 4 0 100-8 4 4 0 000 8z"/></svg></div>161      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M4 4h16v12H4z"/><path d="M7 18h10v2H7z"/></svg></div>162      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2l2 4 4 .5-3 3 .8 4.5-3.8-2-3.8 2 .8-4.5-3-3 4-.5 2-4z"/></svg></div>163      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M3 4h12v4H3zm0 6h18v4H3zm0 6h12v4H3z"/></svg></div>164      <div class="kb-tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg></div>165      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 5c3 0 5 2 5 5v3l2 2v1H5v-1l2-2v-3c0-3 2-5 5-5z"/></svg></div>166    </div>167 168    <div class="kb-rows">169      <div class="kb-row">170        <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>171        <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>172      </div>173      <div class="kb-row">174        <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>175        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>176      </div>177      <div class="kb-row">178        <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>179        <div class="key">n</div><div class="key">m</div>180        <div class="key wide">⌫</div>181      </div>182    </div>183 184    <div class="kb-bottom">185      <div class="key wide">?123</div>186      <div class="key wide">@</div>187      <div class="key wide">☺</div>188      <div class="key space"></div>189      <div class="key wide">.</div>190      <div class="enter">191        <svg viewBox="0 0 24 24"><path d="M5 12h9V9l5 3-5 3v-3H5z"/></svg>192      </div>193    </div>194  </div>195 196</div>197</body>198</html>