GD-ML/AndroidCode

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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1F1F1F; color: #E6E6E6;13    font-family: Roboto, Arial, Helvetica, sans-serif;14  }15  .status-bar {16    height: 100px; padding: 0 28px;17    display: flex; align-items: center; justify-content: space-between;18    color: #EAEAEA; font-size: 34px;19  }20  .status-right { display: flex; align-items: center; gap: 22px; }21  .top-appbar {22    height: 160px; border-bottom: 1px solid #2A2A2A;23    display: flex; align-items: center; justify-content: space-between;24    padding: 0 28px;25  }26  .title { font-size: 48px; font-weight: 500; letter-spacing: 0.2px; }27  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px; }28  .icon-btn svg { width: 48px; height: 48px; fill: #D8D8D8; }29  .appbar-left { display: flex; align-items: center; gap: 28px; }30  .appbar-right { display: flex; align-items: center; gap: 18px; }31  .form {32    padding: 0; margin: 0;33  }34  .row {35    padding: 28px 36px;36    border-bottom: 1px solid #2A2A2A;37  }38  .row-label {39    color: #BDBDBD; font-size: 30px; margin-bottom: 8px;40  }41  .row.flex { display: flex; align-items: center; justify-content: space-between; }42  .field-text { font-size: 36px; color: #E6E6E6; }43  .subject { font-size: 42px; line-height: 1.35; color: #EAEAEA; padding: 36px 36px; border-bottom: 1px solid #2A2A2A; }44  .body-area {45    padding: 36px; font-size: 38px; color: #DCDCDC; line-height: 1.5;46    min-height: 720px;47  }48  /* Keyboard */49  .keyboard {50    position: absolute; left: 0; right: 0; bottom: 88px;51    height: 930px; background: #121212; border-top: 1px solid #2A2A2A;52  }53  .kb-toolbar {54    height: 120px; padding: 0 24px; display: flex; align-items: center; gap: 26px;55    color: #CFCFCF; border-bottom: 1px solid #262626;56  }57  .kb-toolbar .tool { display: flex; align-items: center; justify-content: center; width: 86px; height: 64px; border-radius: 16px; background: #1C1C1C; }58  .kb-rows { padding: 18px 22px; }59  .kb-row { display: flex; justify-content: center; margin-bottom: 18px; }60  .key {61    background: #2A2A2A; color: #EAEAEA;62    height: 120px; min-width: 84px; margin: 10px; border-radius: 28px;63    display: flex; align-items: center; justify-content: center;64    font-size: 42px; box-shadow: inset 0 0 0 1px #3A3A3A;65  }66  .key.wide { min-width: 140px; }67  .space { flex: 1; min-width: 480px; }68  .enter { background: #2D2D2D; }69  .gesture-handle {70    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);71    width: 480px; height: 16px; background: #EAEAEA; border-radius: 8px; opacity: 0.85;72  }73  .chevron svg { width: 36px; height: 36px; fill: #BDBDBD; }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status bar -->80  <div class="status-bar">81    <div>11:13</div>82    <div class="status-right">83      <!-- Cloud icon (simple) -->84      <svg viewBox="0 0 24 24" width="40" height="40" fill="#D8D8D8">85        <path d="M6 16h10a4 4 0 0 0 0-8c-.5-2.3-2.4-4-4.8-4C8.8 4 7 5.9 6.6 8.2A4.5 4.5 0 0 0 2 12.5 3.5 3.5 0 0 0 5.5 16H6z"/>86      </svg>87      <!-- WiFi -->88      <svg viewBox="0 0 24 24" width="40" height="40" fill="#D8D8D8">89        <path d="M12 20l-2-2 2-2 2 2-2 2zm8-8a12 12 0 0 0-16 0l2 2a9 9 0 0 1 12 0l2-2zm-4 4a8 8 0 0 0-8 0l2 2a5 5 0 0 1 4 0l2-2z"/>90      </svg>91      <!-- Battery -->92      <svg viewBox="0 0 24 24" width="44" height="44" fill="#D8D8D8">93        <path d="M2 8a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8zm18-2h2v12h-2V6z"/>94      </svg>95    </div>96  </div>97 98  <!-- App bar -->99  <div class="top-appbar">100    <div class="appbar-left">101      <!-- Back arrow -->102      <div class="icon-btn">103        <svg viewBox="0 0 24 24"><path d="M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20v-2z"/></svg>104      </div>105      <div class="title">Compose</div>106    </div>107    <div class="appbar-right">108      <!-- Attach -->109      <div class="icon-btn">110        <svg viewBox="0 0 24 24"><path d="M7 12v5a5 5 0 0 0 10 0V7a3 3 0 0 0-6 0v8a1 1 0 0 0 2 0V7h2v8a3 3 0 0 1-6 0v-5H7z"/></svg>111      </div>112      <!-- Send -->113      <div class="icon-btn">114        <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>115      </div>116      <!-- Menu -->117      <div class="icon-btn">118        <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>119      </div>120    </div>121  </div>122 123  <!-- Form fields -->124  <div class="form">125    <div class="row">126      <div class="row-label">From</div>127      <div class="field-text">dbwscratch.test.id8@gmail.com</div>128    </div>129 130    <div class="row flex">131      <div>132        <div class="row-label">To</div>133      </div>134      <div class="chevron">135        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>136      </div>137    </div>138 139    <div class="subject">Watch "This American Life: The Call" on YouTube</div>140 141    <div class="body-area">142      https://www.youtube.com/live/iqVVu5lPRXk?si=N-x0rXkosGBmO9RQ143    </div>144  </div>145 146  <!-- Keyboard -->147  <div class="keyboard">148    <div class="kb-toolbar">149      <div class="tool">🗂️</div>150      <div class="tool">🙂</div>151      <div class="tool">GIF</div>152      <div class="tool">153        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF"><path d="M12 4a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 4zm1 13h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>154      </div>155      <div class="tool">156        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF"><path d="M12 2l4 4H8l4-4zM4 8h16v12H4V8zm3 3v6h10v-6H7z"/></svg>157      </div>158      <div class="tool">159        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF"><path d="M12 3a6 6 0 0 0-6 6v5a4 4 0 0 0 8 0V9a6 6 0 0 0-2-6zm3 11a3 3 0 0 1-6 0V9a3 3 0 0 1 6 0v5z"/></svg>160      </div>161    </div>162 163    <div class="kb-rows">164      <div class="kb-row">165        <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>166        <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>167      </div>168      <div class="kb-row">169        <div class="key wide">⇧</div>170        <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>171        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>172        <div class="key wide">173          <svg viewBox="0 0 24 24" width="42" height="42" fill="#EAEAEA"><path d="M3 6h13l-4 4h8v8H3V6z"/></svg>174        </div>175      </div>176      <div class="kb-row">177        <div class="key wide">?123</div>178        <div class="key">@</div>179        <div class="key">🙂</div>180        <div class="key space">space</div>181        <div class="key">.</div>182        <div class="key enter">183          <svg viewBox="0 0 24 24" width="42" height="42" fill="#EAEAEA"><path d="M19 12H6.8l5.6-5.6L11 5 4 12l7 7 1.4-1.4-5.6-5.6H19v-2z"/></svg>184        </div>185      </div>186    </div>187  </div>188 189  <!-- Gesture navigation handle -->190  <div class="gesture-handle"></div>191</div>192</body>193</html>