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 Editor UI</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;10    position:relative; overflow:hidden;11    background:#FFFFFF;12    border-radius:20px;13  }14 15  /* Status bar */16  .status-bar {17    height:120px; background:#66C7D0; color:#fff;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 36px; font-size:40px; letter-spacing:1px;20  }21  .status-right { display:flex; gap:28px; align-items:center; }22  .dot { width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; margin:0 6px; opacity:0.9; }23 24  /* Editor header with title */25  .editor-header {26    height:220px; background:#fff; display:flex; align-items:center;27    padding:0 30px; border-bottom:1px solid #e6e6e6;28  }29  .back-btn {30    width:90px; height:90px; border-radius:45px; background:#E9F6F8; color:#4BAFBB;31    display:flex; align-items:center; justify-content:center; font-size:54px; margin-right:20px;32  }33  .title-input {34    flex:1; height:120px; background:#F5F5F5; border:1px solid #ddd; border-radius:10px;35    display:flex; align-items:center; padding:0 30px; font-size:52px; color:#777;36  }37  .header-actions { display:flex; align-items:center; gap:32px; margin-left:24px; }38  .action-btn {39    width:90px; height:90px; border-radius:12px; background:#F5F8F9; border:1px solid #DDECEF;40    display:flex; align-items:center; justify-content:center; color:#555; font-size:44px;41  }42 43  /* Formatting toolbar */44  .toolbar {45    background:#fff; padding:26px 36px 30px 36px; border-bottom:1px solid #e6e6e6;46  }47  .row { display:flex; gap:22px; margin-bottom:26px; }48  .tool {49    width:140px; height:96px; border:1px solid #D8D8D8; border-radius:8px; background:#F7F7F7;50    display:flex; align-items:center; justify-content:center; font-size:40px; color:#333;51  }52  .tool.small { width:120px; }53  .done-btn {54    margin-left:auto; width:220px; height:96px; border-radius:10px; background:#58C0CB;55    color:#fff; font-weight:bold; display:flex; align-items:center; justify-content:center; font-size:40px;56  }57 58  /* Content area */59  .content {60    height:880px; background:#fff; padding:40px;61    font-size:56px; color:#111; line-height:1.4;62  }63  .content .line { margin-bottom:16px; }64 65  /* Keyboard */66  .keyboard {67    position:absolute; bottom:0; left:0; width:100%; height:760px; background:#171717; color:#fff;68    box-shadow:0 -10px 20px rgba(0,0,0,0.2);69  }70  .kb-top {71    height:110px; display:flex; align-items:center; justify-content:center; gap:44px; color:#ddd;72    font-size:40px;73  }74  .kb-icon {75    width:80px; height:80px; background:#242424; border-radius:16px; display:flex; align-items:center; justify-content:center;76    border:1px solid #2f2f2f;77  }78  .kb-rows { padding:0 20px; }79  .kb-row { display:flex; gap:12px; padding:18px 20px; justify-content:center; }80  .key {81    width:88px; height:120px; background:#2A2A2A; border-radius:16px; border:1px solid #333; display:flex; align-items:center; justify-content:center;82    font-size:44px; color:#eee;83  }84  .key.w120 { width:120px; }85  .key.w140 { width:140px; }86  .key.space { width:440px; }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status Bar -->93  <div class="status-bar">94    <div>11:13</div>95    <div class="status-right">96      <div class="dot"></div><div class="dot"></div><div class="dot"></div>97      <span style="font-size:34px;">▲</span>98      <span style="font-size:40px;">•</span>99      <span style="font-size:40px;">📶</span>100      <span style="font-size:40px;">🔋</span>101    </div>102  </div>103 104  <!-- Editor Header -->105  <div class="editor-header">106    <div class="back-btn">←</div>107    <div class="title-input">Title</div>108    <div class="header-actions">109      <div class="action-btn">∨</div>110      <div class="action-btn">🗑</div>111      <div class="action-btn">?</div>112    </div>113  </div>114 115  <!-- Formatting Toolbar -->116  <div class="toolbar">117    <div class="row">118      <div class="tool">OCR</div>119      <div class="tool">B</div>120      <div class="tool">I</div>121      <div class="tool">T</div>122      <div class="tool">U</div>123      <div class="tool">A</div>124      <div class="tool">Tt</div>125    </div>126 127    <div class="row">128      <div class="tool small">↦•</div>129      <div class="tool small">•↤</div>130      <div class="tool small">x²</div>131      <div class="tool small">x₂</div>132      <div class="tool small">↶</div>133      <div class="tool small">↷</div>134    </div>135 136    <div class="row">137      <div class="tool small">≡</div>138      <div class="tool small">≡</div>139      <div class="tool small">≡</div>140      <div class="tool small">•</div>141      <div class="tool small">1 2 3</div>142      <div class="tool small">☑</div>143      <div class="done-btn">DONE</div>144    </div>145  </div>146 147  <!-- Content area -->148  <div class="content">149    <div class="line">Manager</div>150    <div class="line">AA Technologies</div>151    <div class="line">Pune</div>152  </div>153 154  <!-- Keyboard -->155  <div class="keyboard">156    <div class="kb-top">157      <div class="kb-icon">⠿</div>158      <div class="kb-icon">😊</div>159      <div class="kb-icon">GIF</div>160      <div class="kb-icon">⚙</div>161      <div class="kb-icon">G</div>162      <div class="kb-icon">🎨</div>163      <div class="kb-icon">🎤</div>164    </div>165 166    <div class="kb-rows">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><div class="key">T</div>169        <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>170      </div>171      <div class="kb-row">172        <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>173        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>174      </div>175      <div class="kb-row">176        <div class="key w120">⇧</div>177        <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>178        <div class="key w120">⌫</div>179      </div>180      <div class="kb-row">181        <div class="key w120">?123</div>182        <div class="key w120" style="width:100px;">,</div>183        <div class="key w120" style="width:100px;">😊</div>184        <div class="key space"> </div>185        <div class="key w120" style="width:100px;">.</div>186        <div class="key w140">↵</div>187      </div>188    </div>189  </div>190 191</div>192</body>193</html>