GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Share UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width:1440px; height:3120px;9    position:relative; overflow:hidden;10    background:#111315; color:#EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:120px; padding:0 48px;17    display:flex; align-items:center; justify-content:space-between;18    color:#DADADA; font-size:48px; letter-spacing:1px;19  }20  .status-right { display:flex; align-items:center; gap:36px; }21  .status-icon { width:54px; height:54px; opacity:0.85; }22 23  /* App Bar */24  .app-bar {25    position:absolute; top:120px; left:0; right:0;26    height:180px; display:flex; align-items:center;27    padding:0 48px; gap:36px; border-bottom:1px solid #1d2126;28  }29  .title { font-size:96px; font-weight:600; color:#EDEDED; letter-spacing:0.5px; }30  .app-actions { margin-left:auto; display:flex; align-items:center; gap:54px; }31  .icon-btn { width:82px; height:82px; display:flex; align-items:center; justify-content:center; border-radius:18px; }32  .icon-btn svg { width:72px; height:72px; fill:#DADADA; }33 34  /* Input row */35  .input-row {36    position:absolute; top:318px; left:0; right:0;37    padding:0 48px 36px 48px; border-bottom:1px solid #20252A;38    display:flex; align-items:center; gap:36px;39  }40  .person-icon { width:78px; height:78px; }41  .email-field {42    flex:1; font-size:66px; color:#EDEDED;43    padding:12px 0;44  }45 46  /* Suggestion item */47  .suggestion {48    position:absolute; top:516px; left:0; right:0;49    padding:36px 48px; display:flex; align-items:center; justify-content:space-between;50    border-bottom:1px solid #1f2429; color:#CFCFCF; font-size:60px;51  }52  .avatar {53    width:120px; height:120px; border-radius:60px; background:#D55A1E;54    display:flex; align-items:center; justify-content:center; font-size:72px; font-weight:700; color:#fff;55  }56 57  /* Empty space */58  .content-space {59    position:absolute; top:696px; left:0; right:0; bottom:1200px;60    background:transparent;61  }62 63  /* Keyboard */64  .keyboard {65    position:absolute; bottom:0; left:0; right:0;66    height:1200px; background:#1a1c1f; border-top:1px solid #24282E;67    padding:36px 36px 48px 36px;68  }69  .kb-toolbar {70    height:140px; display:flex; align-items:center; gap:54px; padding:0 18px; color:#C9C9C9; font-size:48px;71  }72  .kb-tool {73    width:110px; height:110px; border-radius:22px; background:#24262A; display:flex; align-items:center; justify-content:center;74  }75  .kb-tool svg { width:64px; height:64px; fill:#C9C9C9; }76 77  .kb-row { display:flex; justify-content:center; gap:24px; margin-top:36px; }78  .key {79    width:116px; height:160px; background:#2a2d31; border-radius:28px;80    display:flex; align-items:center; justify-content:center;81    font-size:64px; color:#E5E5E5; box-shadow: inset 0 0 0 1px #34383d;82  }83  .key.wide { width:180px; }84  .key.extra-wide { width:700px; }85  .key.backspace svg, .key.shift svg { width:72px; height:72px; fill:#E5E5E5; }86  .key.mic svg { width:72px; height:72px; fill:#E5E5E5; }87  .accept {88    width:180px; height:180px; background:#C8F8B8; color:#0b1a0b;89    border-radius:90px; display:flex; align-items:center; justify-content:center;90    box-shadow: inset 0 0 0 2px #a6e29d;91  }92  .accept svg { width:96px; height:96px; fill:#0b1a0b; }93 94  /* Utility icons */95  .dot-menu { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }96  .dot { width:14px; height:14px; background:#DADADA; border-radius:7px; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="status-bar">104    <div>9:06</div>105    <div class="status-right">106      <!-- simple icons -->107      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 11h14v2H3z"/></svg>108      <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 8l10 9 10-9-2-2-8 7-8-7z"/></svg>109      <svg class="status-icon" viewBox="0 0 24 24"><path d="M7 20h10a3 3 0 003-3V7a3 3 0 00-3-3H7a3 3 0 00-3 3v10a3 3 0 003 3zm2-2h6a1 1 0 001-1V7a1 1 0 00-1-1H9a1 1 0 00-1 1v10a1 1 0 001 1z"/></svg>110      <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 20h20v-2H2v2zm16-6h4v-8a2 2 0 00-2-2h-2v10z"/></svg>111    </div>112  </div>113 114  <!-- App Bar -->115  <div class="app-bar">116    <div class="icon-btn">117      <svg viewBox="0 0 24 24">118        <path d="M5 5l14 14M19 5L5 19" stroke="#DADADA" stroke-width="2" fill="none" stroke-linecap="round"/>119      </svg>120    </div>121    <div class="title">Share</div>122    <div class="app-actions">123      <div class="icon-btn">124        <svg viewBox="0 0 24 24"><path d="M3 20l18-8-18-8v6l12 2-12 2v6z"/></svg>125      </div>126      <div class="icon-btn">127        <div class="dot-menu">128          <div class="dot"></div>129          <div class="dot"></div>130          <div class="dot"></div>131        </div>132      </div>133    </div>134  </div>135 136  <!-- Input Row -->137  <div class="input-row">138    <svg class="person-icon" viewBox="0 0 24 24">139      <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-9 9c0-4 4-7 9-7s9 3 9 7H3zm16-13h2v2h2v2h-2v2h-2v-2h-2V8h2V6z" fill="#CFCFCF"/>140    </svg>141    <div class="email-field">Thomas123@gmail.com</div>142  </div>143 144  <!-- Suggestion item -->145  <div class="suggestion">146    <div>Thomas123@gmail.com</div>147    <div class="avatar">T</div>148  </div>149 150  <!-- Empty content area -->151  <div class="content-space"></div>152 153  <!-- Keyboard -->154  <div class="keyboard">155 156    <div class="kb-toolbar">157      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/></svg></div>158      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2C9 2 7 4 7 7s2 5 5 5 5-2 5-5-2-5-5-5zm-8 20c0-5 4-8 8-8s8 3 8 8H4z"/></svg></div>159      <div class="kb-tool">GIF</div>160      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></div>161      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7z"/></svg></div>162      <div class="kb-tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#C9C9C9"/></svg></div>163      <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 3a5 5 0 00-5 5v3H5v7h14v-7h-2V8a5 5 0 00-5-5zm-3 8V8a3 3 0 116 0v3H9z"/></svg></div>164    </div>165 166    <!-- Row 1 -->167    <div class="kb-row">168      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>169      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>170      <div class="key">o</div><div class="key">p</div>171    </div>172    <!-- Row 2 -->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>175      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>176      <div class="key">l</div>177    </div>178    <!-- Row 3 -->179    <div class="kb-row">180      <div class="key shift">181        <svg viewBox="0 0 24 24"><path d="M12 3l7 8h-4v8H9v-8H5l7-8z"/></svg>182      </div>183      <div class="key">z</div><div class="key">x</div><div class="key">c</div>184      <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>185      <div class="key backspace">186        <svg viewBox="0 0 24 24"><path d="M6 7l-4 5 4 5h14a2 2 0 002-2V9a2 2 0 00-2-2H6zm5 3l2 2 2-2 1 1-2 2 2 2-1 1-2-2-2 2-1-1 2-2-2-2 1-1z"/></svg>187      </div>188    </div>189    <!-- Row 4 -->190    <div class="kb-row">191      <div class="key wide">?123</div>192      <div class="key">,</div>193      <div class="key">😊</div>194      <div class="key extra-wide"></div>195      <div class="key">.</div>196      <div class="accept">197        <svg viewBox="0 0 24 24"><path d="M9 16.5l-4.5-4.5L3 13.5l6 6 12-12-1.5-1.5z"/></svg>198      </div>199    </div>200  </div>201 202</div>203</body>204</html>