GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Rendered UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #000000;14  }15 16  /* Top system status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 120px;23    background: #231c1c;24    color: #ffffff;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29    font-size: 40px;30    letter-spacing: 0.5px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-icon svg { width: 44px; height: 44px; fill: #ffffff; opacity: 0.95; }39 40  /* App toolbar below status bar */41  .toolbar {42    position: absolute;43    top: 120px;44    left: 0;45    width: 100%;46    height: 210px;47    background: #2a2222;48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52    color: #e6e6e6;53  }54  .toolbar .left {55    display: flex;56    align-items: center;57    gap: 26px;58  }59  .toolbar .title-wrap {60    display: flex;61    flex-direction: column;62    gap: 10px;63  }64  .toolbar .title {65    font-size: 64px;66    color: rgba(255,255,255,0.7);67  }68  .toolbar .subtitle {69    font-size: 34px;70    color: rgba(255,255,255,0.5);71  }72  .toolbar .actions {73    margin-left: auto;74    display: flex;75    align-items: center;76    gap: 40px;77    opacity: 0.55;78  }79  .toolbar .icon svg { width: 56px; height: 56px; fill: #ffffff; }80 81  /* Main content */82  .content {83    position: absolute;84    top: 330px; /* below toolbar */85    left: 40px;86    right: 40px;87    color: #ffffff;88  }89  .content .big-text {90    font-size: 120px;91    line-height: 1.1;92    font-weight: 400;93  }94 95  /* Floating action button */96  .fab {97    position: absolute;98    right: 60px;99    bottom: 260px;100    width: 132px;101    height: 132px;102    border-radius: 28px;103    background: rgba(169, 68, 61, 0.9);104    display: flex;105    align-items: center;106    justify-content: center;107    box-shadow: 0 10px 24px rgba(0,0,0,0.5);108  }109  .fab svg { width: 64px; height: 64px; fill: #f7f1ef; }110 111  /* Keyboard shadow area (to mimic dark keyboard visible) */112  .keyboard {113    position: absolute;114    left: 0;115    bottom: 0;116    width: 100%;117    height: 520px;118    background: rgba(0,0,0,0.75);119  }120  .kb-top-row {121    position: absolute;122    left: 24px;123    right: 24px;124    top: 24px;125    height: 84px;126    border-radius: 18px;127    background: rgba(255,255,255,0.04);128  }129  .kb-left-btn {130    position: absolute;131    left: 28px;132    bottom: 168px;133    width: 92px;134    height: 92px;135    border-radius: 22px;136    background: rgba(255,255,255,0.06);137    display: flex;138    align-items: center;139    justify-content: center;140  }141  .kb-left-btn svg { width: 44px; height: 44px; fill: rgba(255,255,255,0.6); }142 143  /* Gesture bar */144  .gesture {145    position: absolute;146    left: 50%;147    transform: translateX(-50%);148    bottom: 34px;149    width: 240px;150    height: 10px;151    background: #ffffff;152    border-radius: 8px;153    opacity: 0.9;154  }155</style>156</head>157<body>158<div id="render-target">159  <!-- Status bar -->160  <div class="status-bar">161    <div>7:53</div>162    <div class="status-right">163      <!-- simple round icons approximating system indicators -->164      <div class="status-icon">165        <svg viewBox="0 0 24 24"><path d="M12 2a9 9 0 100 18 9 9 0 000-18zm0 2a7 7 0 110 14A7 7 0 0112 4zm.8 3h-1.6v6.2l5 3 .8-1.3-4.2-2.5V7z"/></svg>166      </div>167      <div class="status-icon">168        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9h2a7 7 0 0114 0h2a9 9 0 00-9-9zm-7 9a7 7 0 0014 0h-2a5 5 0 01-10 0H5z"/></svg>169      </div>170      <div class="status-icon">171        <svg viewBox="0 0 24 24"><path d="M7 20h10a2 2 0 002-2V8l-4-4H7a2 2 0 00-2 2v12a2 2 0 002 2zm7-13l3 3h-3V7z"/></svg>172      </div>173    </div>174  </div>175 176  <!-- App toolbar -->177  <div class="toolbar">178    <div class="left">179      <div class="icon">180        <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/></svg>181      </div>182      <div class="title-wrap">183        <div class="title">Revised letter</div>184        <div class="subtitle">Saving...</div>185      </div>186    </div>187    <div class="actions">188      <div class="icon"><svg viewBox="0 0 24 24"><path d="M15 8H9v8h6V8zm-3-6l4 4H8l4-4zM5 20h14v2H5z"/></svg></div>189      <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 17h16v2H4v-2zm0-5h16v2H4v-2zM4 7h16v2H4V7z"/></svg></div>190      <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></div>191    </div>192  </div>193 194  <!-- Main content -->195  <div class="content">196    <div class="big-text">Noida sector 99</div>197  </div>198 199  <!-- Floating action button -->200  <div class="fab" aria-label="Edit">201    <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.8 9.95l-3.75-3.75L3 17.25zM20.7 7.05a1 1 0 000-1.4l-2.35-2.35a1 1 0 00-1.4 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>202  </div>203 204  <!-- Keyboard-like area -->205  <div class="keyboard">206    <div class="kb-top-row"></div>207    <div class="kb-left-btn" title="Keyboard options">208      <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>209    </div>210  </div>211 212  <!-- Gesture bar -->213  <div class="gesture"></div>214</div>215</body>216</html>