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>Dictionary - Disaster</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#0c1113;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color:#e8eef0;15 }16 17 /* Status bar area */18 .status-bar {19 position:absolute; top:0; left:0; right:0;20 height:120px;21 background:#143c4a;22 color:#cfe1e7;23 padding:28px 36px;24 box-sizing:border-box;25 }26 .status-left { display:flex; align-items:center; gap:16px; font-weight:600; }27 .status-right { position:absolute; right:36px; top:28px; display:flex; gap:20px; align-items:center; }28 .status-icon {29 width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,0.5);30 display:flex; align-items:center; justify-content:center;31 }32 .status-text { font-size:34px; }33 34 /* Toast */35 .toast {36 position:absolute; top:96px; left:40px; right:40px;37 background:#2f3335; color:#d9e1e4;38 border-radius:26px;39 box-shadow: 0 8px 24px rgba(0,0,0,0.4);40 padding:30px 40px;41 display:flex; align-items:center; gap:24px;42 font-size:34px;43 }44 .toast .chevron { margin-left:auto; opacity:0.9; }45 46 /* Header */47 .header {48 position:absolute; top:240px; left:0; right:0;49 height:560px;50 background: linear-gradient(180deg, #0e4453 0%, #0c3d4d 60%, #0b3745 100%);51 display:flex; flex-direction:column; align-items:center; justify-content:center;52 text-align:center;53 }54 .title {55 font-family: Georgia, "Times New Roman", serif;56 font-size:130px; color:#ffffff; letter-spacing:1px;57 margin:40px 0 40px 0;58 }59 .header-actions { display:flex; gap:60px; margin-top:10px; }60 .circle-btn {61 width:120px; height:120px; border-radius:60px;62 border:4px solid rgba(255,255,255,0.75);63 display:flex; align-items:center; justify-content:center;64 }65 .circle-btn svg { width:58px; height:58px; fill:none; stroke:#ffffff; stroke-width:8; }66 67 /* Content area */68 .content {69 position:absolute; top:800px; left:0; right:0; bottom:0;70 background:#0c0f10;71 padding:48px 54px 240px 54px;72 box-sizing:border-box;73 overflow:hidden;74 }75 .section-title {76 color:#78a7b8; font-weight:800; font-size:70px; margin-top:10px;77 }78 .pronounce { color:#b9d1da; font-size:46px; display:flex; align-items:center; gap:18px; margin:20px 0 10px; }79 .audio {80 width:56px; height:56px; border-radius:28px; border:3px solid #9ec3cf;81 display:inline-flex; align-items:center; justify-content:center;82 }83 .audio svg { width:28px; height:28px; fill:#9ec3cf; }84 .subtle { color:#bcd4dc; font-style:italic; font-size:42px; }85 .strong { color:#ffffff; font-weight:700; }86 .definition-title { color:#83b2c1; font-size:76px; font-weight:800; margin:42px 0 12px; }87 .entry { margin:24px 0; }88 .num { color:#d9e7ec; font-weight:800; font-size:60px; margin-right:20px; }89 .entry-text { font-size:50px; line-height:1.6; color:#e3eef2; }90 .example { font-style:italic; color:#cde0e7; margin-top:14px; font-size:48px; }91 .link { color:#88c3d5; text-decoration:underline; }92 93 /* Tabs + ad bar */94 .tabs {95 position:absolute; left:0; right:0; bottom:280px;96 height:110px; background:#144c5c; display:flex; align-items:center;97 padding:0 40px; box-sizing:border-box; gap:60px;98 }99 .tab {100 font-size:54px; color:#d7e8ee; opacity:0.9; position:relative; padding-bottom:16px;101 }102 .tab.active { opacity:1; font-weight:800; }103 .tab.active::after {104 content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:#cde6ee; border-radius:8px;105 }106 107 .ad-bar {108 position:absolute; left:0; right:0; bottom:120px;109 height:150px; padding:18px 20px; box-sizing:border-box;110 background:#0f1012;111 border-top:8px solid #144c5c;112 display:flex; align-items:center; gap:18px;113 }114 .ad-image {115 width:150px; height:120px;116 background:#E0E0E0; border:1px solid #BDBDBD;117 display:flex; align-items:center; justify-content:center; color:#757575;118 font-size:28px; text-align:center; padding:6px; box-sizing:border-box;119 }120 .ad-close {121 position:absolute; right:20px; top:-20px;122 width:54px; height:54px; border-radius:27px;123 background:#1c2c33; color:#cfe1e7; display:flex; align-items:center; justify-content:center;124 border:2px solid #3a5864; font-weight:900; font-size:28px;125 }126 .home-indicator {127 position:absolute; bottom:28px; left:50%; transform:translateX(-50%);128 width:360px; height:16px; background:#dcdcdc; border-radius:12px; opacity:0.7;129 }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div class="status-left">138 <div class="status-icon">139 <svg viewBox="0 0 24 24">140 <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm9 .9-2.2-.8-1-2.3-2.3 1-1.6-1.6 1-2.3-2.3-1L10.6 2 9.8 4.2 7.5 5.2 6.5 7.5l-2.3 1 0 2.9 2.3 1 .9 2.3 2.3-.9 1.6 1.6-1 2.3 2.3 1 2.9 0 1-2.3 2.3-.9.9-2.3 2.2-.8-.7-2.8z" fill="#cfe1e7"/>141 </svg>142 </div>143 <div class="status-text">Android System</div>144 </div>145 <div class="status-right">146 <svg width="36" height="36" viewBox="0 0 24 24">147 <path d="M12 3L1 9l11 6 9-5.4V17h2V8L12 3z" fill="#cfe1e7"/>148 </svg>149 <svg width="36" height="36" viewBox="0 0 24 24">150 <path d="M16 22H8a2 2 0 0 1-2-2V6h12v14a2 2 0 0 1-2 2zM18 4H6l1-2h10l1 2z" fill="#cfe1e7"/>151 </svg>152 </div>153 </div>154 155 <!-- Toast notification -->156 <div class="toast">157 <div class="status-icon" style="border-color:#8fb4c1;">158 <svg viewBox="0 0 24 24">159 <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z" fill="#9ec3cf"/>160 </svg>161 </div>162 <div>163 <div style="font-weight:800;">USB debugging connected <span style="font-size:32px;">馃敂</span></div>164 <div style="opacity:0.85;">Tap to turn off USB debugging</div>165 </div>166 <div class="chevron">167 <svg width="40" height="40" viewBox="0 0 24 24">168 <path d="M7 10l5 5 5-5" stroke="#cfe1e7" stroke-width="2" fill="none"/>169 </svg>170 </div>171 </div>172 173 <!-- Header -->174 <div class="header">175 <div class="title">disaster</div>176 <div class="header-actions">177 <div class="circle-btn" title="Save">178 <svg viewBox="0 0 24 24">179 <path d="M6 20V4h12v16l-6-4-6 4z"/>180 </svg>181 </div>182 <div class="circle-btn" title="Share">183 <svg viewBox="0 0 24 24">184 <path d="M18 8a3 3 0 1 0-2.9-3.8L7.7 7.6a3 3 0 0 0 0 4.8l7.4 3.4A3 3 0 1 0 16 17l-7.4-3.4a3 3 0 0 0 0-4.8L16 5a3 3 0 0 0 2 .9z"/>185 </svg>186 </div>187 </div>188 </div>189 190 <!-- Content -->191 <div class="content">192 <div class="section-title">noun</div>193 194 <div class="pronounce">195 di路sas路ter | \ di-藞za-st蓹r , 藞sa-196 <span class="audio">197 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>198 </span>199 <span class="audio">200 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>201 </span>202 </div>203 204 <div class="subtle">plural <span class="strong">disasters</span></div>205 206 <div class="definition-title">Definition</div>207 208 <div class="entry">209 <span class="num">1</span>210 <span class="entry-text">: a sudden <span class="link">calamitous</span> event bringing great damage, loss, or destruction<br>211 <span class="subtle">// natural disasters</span>212 </span>213 </div>214 215 <div class="entry">216 <span class="num">2</span>217