GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px; padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #FFFFFF;20    font-size: 42px; font-weight: 500;21  }22  .status-right { display: flex; align-items: center; gap: 26px; }23  .icon { width: 48px; height: 48px; }24 25  /* App bar */26  .app-bar {27    height: 160px; padding: 0 30px;28    display: flex; align-items: center; gap: 24px;29    border-bottom: 1px solid #262626;30  }31  .app-title { font-size: 54px; font-weight: 500; flex: 1; color: #EDEDED; }32  .app-actions { display: flex; align-items: center; gap: 30px; }33 34  /* Content */35  .content {36    padding: 30px 40px 0 40px;37  }38  .row { padding: 22px 0; color: #CFCFCF; font-size: 36px; }39  .divider { height: 1px; background: #262626; margin: 10px 0 16px 0; }40 41  /* To pill */42  .to-row { display: flex; align-items: center; gap: 18px; }43  .label { color: #B5B5B5; font-size: 34px; width: 70px; }44  .pill {45    display: flex; align-items: center; gap: 18px;46    background: #1E1E1E; border: 1px solid #2D2D2D;47    color: #FFFFFF; border-radius: 40px; padding: 16px 22px;48    max-width: 880px;49  }50  .avatar {51    width: 56px; height: 56px; border-radius: 50%;52    background: #FF4D83; display: flex; align-items: center; justify-content: center;53    font-weight: 700; font-size: 34px;54  }55  .email { font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }56  .pill-right { margin-left: auto; display: flex; align-items: center; color: #9E9E9E; }57 58  /* Body text */59  .body-area { margin-top: 28px; }60  .subject {61    font-size: 40px; color: #DADADA;62    padding: 26px 0;63    border-bottom: 1px solid #262626;64  }65  .message {66    font-size: 36px; line-height: 1.45; color: #EAEAEA;67    padding-top: 26px;68  }69 70  /* Keyboard */71  .keyboard {72    position: absolute; left: 0; bottom: 0;73    width: 100%; height: 900px; background: #1A1A1A; border-top: 1px solid #2A2A2A;74    padding: 24px 26px 40px 26px;75    box-sizing: border-box;76  }77  .kb-top { display: flex; align-items: center; gap: 40px; padding-bottom: 14px; }78  .kb-btn {79    width: 88px; height: 88px; border-radius: 20px; background: #222;80    border: 1px solid #2E2E2E; color: #BDBDBD;81    display: flex; align-items: center; justify-content: center; font-size: 32px;82  }83  .kb-rows { margin-top: 10px; display: grid; row-gap: 16px; }84  .kb-row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 12px; }85  .key {86    height: 120px; border-radius: 24px; background: #2A2A2A; border: 1px solid #3A3A3A;87    color: #E6E6E6; display: flex; align-items: center; justify-content: center;88    font-size: 42px; font-weight: 500;89  }90  .key.small { font-size: 34px; }91  .key.wide { grid-column: span 2; }92  .kb-bottom {93    margin-top: 20px; display: grid; grid-template-columns: 1.4fr 5fr 1.4fr; gap: 12px;94  }95  .home-indicator {96    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);97    width: 420px; height: 12px; background: #E0E0E0; opacity: 0.6; border-radius: 12px;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div class="status-left">12:27</div>107    <div class="status-right">108      <!-- Mobile signal -->109      <svg class="icon" viewBox="0 0 48 48">110        <rect x="4" y="26" width="6" height="18" fill="#FFFFFF" opacity="0.9"></rect>111        <rect x="16" y="20" width="6" height="24" fill="#FFFFFF" opacity="0.9"></rect>112        <rect x="28" y="14" width="6" height="30" fill="#FFFFFF" opacity="0.9"></rect>113        <rect x="40" y="8" width="6" height="36" fill="#FFFFFF" opacity="0.9"></rect>114      </svg>115      <!-- Wi-Fi -->116      <svg class="icon" viewBox="0 0 48 48">117        <path d="M4 18 Q24 2 44 18" stroke="#FFFFFF" stroke-width="4" fill="none" />118        <path d="M10 26 Q24 14 38 26" stroke="#FFFFFF" stroke-width="4" fill="none" />119        <path d="M16 34 Q24 26 32 34" stroke="#FFFFFF" stroke-width="4" fill="none" />120        <circle cx="24" cy="40" r="4" fill="#FFFFFF"/>121      </svg>122      <!-- Battery -->123      <svg class="icon" viewBox="0 0 48 48">124        <rect x="2" y="10" width="40" height="28" rx="4" ry="4" fill="none" stroke="#FFFFFF" stroke-width="4"></rect>125        <rect x="6" y="14" width="28" height="20" fill="#FFFFFF"></rect>126        <rect x="42" y="18" width="4" height="12" fill="#FFFFFF"></rect>127      </svg>128    </div>129  </div>130 131  <!-- App bar -->132  <div class="app-bar">133    <!-- Back -->134    <svg class="icon" viewBox="0 0 48 48">135      <path d="M30 8 L12 24 L30 40" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>136    </svg>137    <div class="app-title">Compose</div>138    <div class="app-actions">139      <!-- Attach -->140      <svg class="icon" viewBox="0 0 48 48">141        <path d="M14 26 V16 Q14 10 20 10 Q26 10 26 16 V32 Q26 38 20 38 Q14 38 14 32 V26" stroke="#B7C0FF" stroke-width="4" fill="none" stroke-linecap="round"></path>142      </svg>143      <!-- Send -->144      <svg class="icon" viewBox="0 0 48 48">145        <path d="M4 24 L44 8 L32 40 L26 28 L4 24 Z" fill="#8FA2FF"></path>146      </svg>147      <!-- More -->148      <svg class="icon" viewBox="0 0 48 48">149        <circle cx="24" cy="12" r="4" fill="#D0D0D0"></circle>150        <circle cx="24" cy="24" r="4" fill="#D0D0D0"></circle>151        <circle cx="24" cy="36" r="4" fill="#D0D0D0"></circle>152      </svg>153    </div>154  </div>155 156  <!-- Content area -->157  <div class="content">158    <div class="row">From <span style="color:#E0E0E0;">dbwscratch.test.id8@gmail.com</span></div>159    <div class="divider"></div>160 161    <div class="to-row">162      <div class="label">To</div>163      <div class="pill" style="flex:1;">164        <div class="avatar">a</div>165        <div class="email">akashgahlot@google.com</div>166      </div>167      <div class="pill-right">168        <svg class="icon" viewBox="0 0 48 48">169          <path d="M10 16 L24 32 L38 16" stroke="#9E9E9E" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170        </svg>171      </div>172    </div>173 174    <div class="divider"></div>175 176    <div class="body-area">177      <div class="subject">Check out 'Chill List' on JioSaavn!</div>178      <div class="message">179        Listen to 'Chill List' on JioSaavn at180        https://www.saavn.com/s/playlist/afd8554d0e2a42a63cf0e911da93fb28/chill_list/0A1Bzp2RN99zUTe4uMO3Gg__?referrer=svn_source=share&svn_medium=system&utm_source=share&utm_medium=system181      </div>182    </div>183  </div>184 185  <!-- Keyboard -->186  <div class="keyboard">187    <div class="kb-top">188      <div class="kb-btn">⋯</div>189      <div class="kb-btn">🙂</div>190      <div class="kb-btn">GIF</div>191      <div class="kb-btn">⚙</div>192      <div class="kb-btn">G↔︎</div>193      <div class="kb-btn">🎨</div>194      <div class="kb-btn">👁︎</div>195    </div>196 197    <div class="kb-rows">198      <div class="kb-row">199        <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>200      </div>201      <div class="kb-row">202        <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>203      </div>204      <div class="kb-row">205        <div class="key small">⇧</div>206        <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>207        <div class="key small">⌫</div>208      </div>209      <div class="kb-bottom">210        <div class="key small">?123</div>211        <div class="key wide">space</div>212        <div class="key small">↵</div>213      </div>214    </div>215    <div class="home-indicator"></div>216  </div>217 218</div>219</body>220</html>