GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Comments Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; border-radius: 40px;13    box-shadow: 0 10px 30px rgba(0,0,0,0.15);14    color: #1f1f1f;15  }16  .status-bar {17    height: 110px; padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    font-weight: 600; font-size: 40px; color: #2b2b2b;20  }21  .status-icons { display: flex; gap: 22px; align-items: center; }22  .title-bar {23    height: 140px; display: flex; align-items: center; justify-content: center; position: relative;24  }25  .back-btn {26    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);27    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;28  }29  .title-text { font-size: 60px; font-weight: 700; color: #222; }30  /* Comment block */31  .content {32    padding: 0 48px;33  }34  .comment-header {35    margin-top: 20px;36    display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; column-gap: 24px;37  }38  .avatar {39    width: 90px; height: 90px; border-radius: 45px; background: #F3BB2A; color: #1f1f1f;40    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;41  }42  .user-meta .name { font-weight: 700; font-size: 36px; color: #ef4d2d; letter-spacing: 0.2px; }43  .user-meta .time { margin-top: 6px; font-size: 30px; color: #777; display: flex; gap: 14px; align-items: center; }44  .flag-report {45    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;46  }47  .comment-text {48    margin-top: 26px; font-size: 40px; color: #222;49  }50  .translate-row {51    margin-top: 12px; font-size: 32px; color: #777;52  }53  .translate-row .link { color: #ff6d3f; font-weight: 600; }54  .photo {55    margin-top: 32px; width: 984px; height: 620px; border-radius: 26px;56    background: #E0E0E0; border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;58  }59  /* Comment input bar above keyboard */60  .comment-input {61    position: absolute; left: 0; right: 0; bottom: 830px;62    padding: 16px 32px; border-top: 1px solid #eee; background: #fff;63    display: flex; align-items: center; gap: 20px;64  }65  .camera-btn {66    width: 84px; height: 84px; border-radius: 22px; border: 2px solid #FF6D3F; display: flex; align-items: center; justify-content: center;67    color: #FF6D3F;68  }69  .input-field {70    flex: 1; height: 90px; border: 2px solid #222; border-radius: 22px; padding: 0 26px; display: flex; align-items: center; color: #999; font-size: 36px;71  }72  .send-btn { font-size: 36px; color: #888; font-weight: 600; }73  /* Keyboard */74  .keyboard {75    position: absolute; left: 0; bottom: 0; width: 100%; height: 830px;76    background: #eef0f8; border-top-left-radius: 26px; border-top-right-radius: 26px; padding: 30px 28px;77    box-sizing: border-box;78  }79  .kbd-top-row { display: flex; align-items: center; gap: 44px; padding: 0 8px; }80  .kbd-tool {81    width: 90px; height: 90px; border-radius: 45px; background: #cfe4a7; display: flex; align-items: center; justify-content: center;82  }83  .kbd-tool.gray { background: #e2e4ef; }84  .kbd-tool svg { width: 44px; height: 44px; }85  .keys { margin-top: 26px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 22px; }86  .key {87    height: 120px; background: #ffffff; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #222;88    box-shadow: inset 0 0 0 2px #e8e8ee;89  }90  .row2, .row3 { margin-top: 16px; }91  .row3 { grid-template-columns: 120px repeat(7, 1fr) 120px; }92  .key.pink { background: #ffd9e8; }93  .key.green { background: #cfe4a7; }94  .space-row { margin-top: 18px; display: grid; grid-template-columns: 160px 120px 1fr 120px 160px; gap: 22px; }95  .home-indicator {96    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);97    width: 400px; height: 10px; background: #777; border-radius: 6px; opacity: 0.5;98  }99  /* Simple icon styles */100  .icon { width: 44px; height: 44px; }101</style>102</head>103<body>104<div id="render-target">105  <!-- Status bar -->106  <div class="status-bar">107    <div>12:44</div>108    <div class="status-icons">109      <!-- Connection icon -->110      <svg class="icon" viewBox="0 0 24 24">111        <path d="M2 12a10 10 0 0 1 20 0h-3a7 7 0 0 0-14 0H2z" fill="#666"></path>112      </svg>113      <!-- Battery icon -->114      <svg class="icon" viewBox="0 0 24 24">115        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"></rect>116        <rect x="4" y="8" width="12" height="8" fill="#666"></rect>117        <rect x="20" y="10" width="2" height="4" fill="#666"></rect>118      </svg>119    </div>120  </div>121 122  <!-- Title bar -->123  <div class="title-bar">124    <div class="back-btn">125      <svg class="icon" viewBox="0 0 24 24">126        <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>127      </svg>128    </div>129    <div class="title-text">Comments</div>130  </div>131 132  <!-- Main content -->133  <div class="content">134    <div class="comment-header">135      <div class="avatar">S</div>136      <div class="user-meta">137        <div class="name">Sara</div>138        <div class="time">4 days ago <span>🇧🇪</span></div>139      </div>140      <div class="flag-report">141        <svg class="icon" viewBox="0 0 24 24">142          <path d="M6 21V4h7l1 2h4v9h-7l-1-2H6z" fill="#222"></path>143        </svg>144      </div>145    </div>146    <div class="comment-text">easy and delicious!</div>147    <div class="translate-row">Show original language: <span class="link">English</span></div>148 149    <div class="photo">[IMG: Blueberry loaf cake on board]</div>150  </div>151 152  <!-- Comment input bar -->153  <div class="comment-input">154    <div class="camera-btn">155      <svg class="icon" viewBox="0 0 24 24">156        <path d="M4 7h4l2-2h4l2 2h4v10H4V7zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#FF6D3F"></path>157      </svg>158    </div>159    <div class="input-field">Write a comment</div>160    <div class="send-btn">Send</div>161  </div>162 163  <!-- Keyboard -->164  <div class="keyboard">165    <!-- tools row -->166    <div class="kbd-top-row">167      <div class="kbd-tool">168        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#5b7e2b"/></svg>169      </div>170      <div class="kbd-tool gray">171        <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="3" fill="#666"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>172      </div>173      <div class="kbd-tool gray"><span style="font-weight:700;">GIF</span></div>174      <div class="kbd-tool gray">175        <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#666" stroke-width="2" fill="none"/></svg>176      </div>177      <div class="kbd-tool gray">178        <svg viewBox="0 0 24 24"><path d="M6 12h7l-2 2 4 4-2 2-4-4-2 2V12z" fill="#666"/></svg>179      </div>180      <div class="kbd-tool gray">181        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#666"></circle></svg>182      </div>183      <div class="kbd-tool gray">184        <svg viewBox="0 0 24 24"><path d="M5 10v4h4l7 7V3l-7 7H5z" fill="#666"/></svg>185      </div>186    </div>187 188    <!-- letter rows -->189    <div class="keys">190      <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>191    </div>192 193    <div class="keys row2">194      <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><div class="key">;</div>195    </div>196 197    <div class="keys row3">198      <div class="key pink">⇧</div>199      <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>200      <div class="key pink">⌫</div>201    </div>202 203    <div class="space-row">204      <div class="key pink">?123</div>205      <div class="key pink">,</div>206      <div class="key">🙂</div>207      <div class="key pink">.</div>208      <div class="key green">➤</div>209    </div>210 211    <div class="home-indicator"></div>212  </div>213</div>214</body>215</html>