GD-ML/AndroidCode
13.4k
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>Comments Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #FFFFFF;11 }12 /* Status bar */13 .statusbar {14 height: 84px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: #212121;15 font-weight: 600; font-size: 34px;16 }17 .status-icons { display: flex; gap: 24px; align-items: center; }18 .status-dot { width: 22px; height: 22px; border-radius: 50%; background: #9E9E9E; }19 /* Header */20 .header {21 height: 140px; display: flex; align-items: center; position: relative;22 }23 .back-btn {24 width: 80px; height: 80px; margin-left: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;25 }26 .header-title {27 position: absolute; left: 0; right: 0; text-align: center; font-size: 64px; font-weight: 700; color: #212121;28 }29 30 /* Content area */31 .content { padding: 0 48px; }32 .comment-header { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 24px; }33 .user-block { display: flex; gap: 24px; align-items: center; }34 .avatar {35 width: 92px; height: 92px; border-radius: 50%; background: #FFC107; display: flex; align-items: center; justify-content: center;36 color: #212121; font-weight: 700; font-size: 48px;37 }38 .user-meta { line-height: 1.2; }39 .name { font-size: 36px; color: #FF7043; font-weight: 700; letter-spacing: 0.2px; }40 .meta-row { margin-top: 4px; font-size: 28px; color: #757575; display: flex; align-items: center; gap: 10px; }41 .flag-emoji { font-size: 28px; }42 .flag-btn { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-top: 12px; }43 .comment-text { margin: 24px 0 12px 116px; font-size: 40px; color: #333; }44 .lang-row { margin-left: 116px; font-size: 28px; }45 .lang-row .label { color: #9E9E9E; }46 .lang-row .value { color: #FF7043; font-weight: 600; }47 48 .photo {49 margin: 24px 0 28px 116px; width: 884px; height: 560px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;50 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center;51 }52 53 /* Composer */54 .composer {55 position: absolute; left: 36px; right: 36px; bottom: 820px; height: 108px;56 background: #FFFFFF; border: 2px solid #D0D0D0; border-radius: 28px; display: flex; align-items: center; padding: 0 24px; gap: 20px;57 box-shadow: 0 2px 0 rgba(0,0,0,0.06);58 }59 .camera { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }60 .composer input {61 flex: 1; border: none; outline: none; font-size: 36px; color: #333; background: transparent;62 }63 .send-btn { color: #FF7043; font-size: 36px; font-weight: 700; }64 65 /* Keyboard mock */66 .keyboard {67 position: absolute; left: 0; bottom: 0; width: 1080px; height: 780px; background: #F4F3FF; border-top-left-radius: 28px; border-top-right-radius: 28px;68 box-shadow: 0 -2px 0 rgba(0,0,0,0.04);69 }70 .kb-toolbar {71 display: flex; align-items: center; gap: 40px; padding: 32px 36px; color: #555;72 }73 .kb-icon { width: 60px; height: 60px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center; font-size: 26px; }74 .kb-rows { padding: 0 24px; }75 .kb-row { display: flex; gap: 18px; justify-content: center; margin-bottom: 26px; }76 .key {77 width: 86px; height: 100px; background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 26px; display: flex; align-items: center; justify-content: center;78 font-size: 40px; color: #333;79 }80 .key.wide { width: 140px; }81 .key.space { flex: 1; min-width: 360px; }82 .key.pink { background: #FFD9E8; border-color: #FFC9D9; }83 .key.green {84 width: 120px; height: 120px; background: #C9DB8A; border-color: #B7CD71; border-radius: 50%; font-weight: 700;85 }86 87 .home-indicator {88 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);89 width: 300px; height: 10px; background: #BDBDBD; border-radius: 8px;90 }91 92 /* SVG helpers */93 svg { display: block; }94</style>95</head>96<body>97<div id="render-target">98 99 <div class="statusbar">100 <div>12:45</div>101 <div class="status-icons">102 <div class="status-dot"></div>103 <div class="status-dot"></div>104 </div>105 </div>106 107 <div class="header">108 <div class="back-btn">109 <svg width="40" height="40" viewBox="0 0 24 24">110 <path d="M15 6l-6 6 6 6" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>111 </svg>112 </div>113 <div class="header-title">Comments</div>114 </div>115 116 <div class="content">117 <div class="comment-header">118 <div class="user-block">119 <div class="avatar">S</div>120 <div class="user-meta">121 <div class="name">Sara</div>122 <div class="meta-row">123 <span>4 days ago</span>124 <span class="flag-emoji">🇧🇪</span>125 </div>126 </div>127 </div>128 <div class="flag-btn">129 <svg width="28" height="28" viewBox="0 0 24 24">130 <path d="M6 3v18M6 4h9l-1.5 3L15 10H6" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>131 </svg>132 </div>133 </div>134 135 <div class="comment-text">easy and delicious!</div>136 137 <div class="lang-row">138 <span class="label">Show original language:</span>139 <span class="value">English</span>140 </div>141 142 <div class="photo">[IMG: Loaf cake with blueberries]</div>143 </div>144 145 <div class="composer">146 <div class="camera">147 <svg width="36" height="36" viewBox="0 0 24 24">148 <path d="M4 7h4l2-2h4l2 2h4v12H4z" fill="none" stroke="#FF7043" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>149 <circle cx="12" cy="13" r="4" fill="none" stroke="#FF7043" stroke-width="2"/>150 </svg>151 </div>152 <input type="text" value="the recipe turned out great." />153 <div class="send-btn">Send</div>154 </div>155 156 <div class="keyboard">157 <div class="kb-toolbar">158 <div class="kb-icon">⌨️</div>159 <div class="kb-icon">😊</div>160 <div class="kb-icon">GIF</div>161 <div class="kb-icon">⚙️</div>162 <div class="kb-icon">G✕</div>163 <div class="kb-icon">🎨</div>164 <div class="kb-icon">🎤</div>165 </div>166 167 <div class="kb-rows">168 <div class="kb-row">169 <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>170 <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>171 </div>172 <div class="kb-row">173 <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>174 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>175 </div>176 <div class="kb-row">177 <div class="key pink wide">⇧</div>178 <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>179 <div class="key">n</div><div class="key">m</div>180 <div class="key pink wide">⌫</div>181 </div>182 <div class="kb-row">183 <div class="key pink wide">?123</div>184 <div class="key wide">,</div>185 <div class="key wide">😊</div>186 <div class="key space"></div>187 <div class="key wide">.</div>188 <div class="key green">189 <svg width="44" height="44" viewBox="0 0 24 24">190 <path d="M5 12h12M12 5l7 7-7 7" fill="none" stroke="#1B1B1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 </div>194 </div>195 <div class="home-indicator"></div>196 </div>197 198</div>199</body>200</html>