GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Polaris Editor Mock</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; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0;11 }12 13 /* App top bar */14 .appbar {15 position:absolute; left:0; top:0; width:100%; height:220px; background:#2E6CE6; color:#fff;16 }17 .status {18 position:absolute; left:0; top:0; width:100%; height:90px; padding:18px 28px; box-sizing:border-box;19 display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:34px; letter-spacing:1px;20 }21 .status .left { display:flex; align-items:center; gap:22px; }22 .status .right { display:flex; align-items:center; gap:22px; }23 .dot { width:18px; height:18px; border-radius:50%; background:#fff; opacity:.85; }24 .wifi {25 width:42px; height:28px; position:relative;26 }27 .wifi:before, .wifi:after {28 content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #fff; border-top-color:#fff; border-radius:50%;29 }30 .wifi:before { top:2px; width:36px; height:18px; border-bottom:0; border-left-color:transparent; border-right-color:transparent; opacity:.9; }31 .wifi:after { top:10px; width:22px; height:10px; border-bottom:0; border-left-color:transparent; border-right-color:transparent; opacity:.9; }32 .battery {33 width:64px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;34 }35 .battery:after {36 content:""; position:absolute; right:-8px; top:6px; width:8px; height:16px; background:#fff; border-radius:2px;37 }38 .battery .level { position:absolute; top:3px; left:3px; right:18px; bottom:3px; background:#fff; }39 40 .toolbar {41 position:absolute; left:0; top:90px; height:130px; width:100%; display:flex; align-items:center; justify-content:center;42 }43 .title { position:absolute; left:0; right:0; top:132px; text-align:center; font-weight:600; font-size:38px; color:#dfe8ff; opacity:.95; }44 45 .tool-left, .tool-right {46 position:absolute; top:115px; height:100px; display:flex; align-items:center; gap:34px;47 }48 .tool-left { left:28px; }49 .tool-right { right:28px; }50 51 .icon-btn {52 width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:12px;53 color:#fff;54 }55 .icon-btn.disabled svg { opacity:.45; }56 .hamburger span { display:block; width:46px; height:5px; background:#fff; margin:4px 0; border-radius:3px; }57 .text-done { font-size:42px; font-weight:600; margin-left:10px; }58 59 /* Document area */60 .page {61 position:absolute; top:220px; left:0; right:0; bottom:210px; background:#fff;62 }63 .doc-line {64 font-size:120px; line-height:1.2; color:#000; padding:80px 50px;65 white-space:nowrap;66 }67 68 /* Toast */69 .toast {70 position:absolute; left:50%; transform:translateX(-50%); bottom:290px;71 background:#ffffff; color:#222; border-radius:60px; padding:26px 42px; box-shadow:0 12px 24px rgba(0,0,0,0.18);72 display:flex; align-items:center; gap:24px; font-size:40px;73 }74 .toast .doc-icon {75 width:58px; height:58px; border:2px solid #3b7cff; border-radius:10px; position:relative; background:#f3f6ff;76 }77 .doc-icon:before, .doc-icon:after {78 content:""; position:absolute; left:10px; right:10px; height:6px; background:#3b7cff; border-radius:3px;79 }80 .doc-icon:before { top:16px; }81 .doc-icon:after { top:34px; }82 83 /* Bottom editor toolbar */84 .bottom-bar {85 position:absolute; left:0; bottom:0; width:100%; height:210px; background:#fafafa; border-top:1px solid #e5e5e5;86 display:flex; align-items:center; justify-content:space-between; padding:0 36px; box-sizing:border-box;87 }88 .format-group {89 display:flex; align-items:center; gap:64px;90 }91 .circle-tool {92 width:86px; height:86px; border-radius:50%; background:#fff; border:1px solid #dcdcdc; display:flex; align-items:center; justify-content:center;93 font-size:48px; color:#333;94 }95 .letter { font-weight:700; }96 .underline {97 position:relative; padding-bottom:10px;98 }99 .underline:after {100 content:""; position:absolute; left:12px; right:12px; bottom:10px; height:8px; background:#000;101 border-radius:4px;102 }103 .a-underline { position:relative; font-weight:700; }104 .a-underline:after { content:""; position:absolute; left:-2px; right:-2px; bottom:-14px; height:10px; background:#000; border-radius:5px; }105 .a-highlight { position:relative; }106 .a-highlight:after { content:""; position:absolute; left:-4px; right:-4px; bottom:-14px; height:10px; background:#2E6CE6; border-radius:5px; }107 .caret { font-size:60px; font-weight:700; }108 .grid {109 width:78px; height:78px; border:2px solid #333; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:6px; padding:8px; box-sizing:border-box; border-radius:10px;110 }111 .grid div { background:#333; }112 113 /* Gesture pill */114 .gesture {115 position:absolute; left:50%; transform:translateX(-50%); bottom:16px; width:300px; height:12px; background:#111; opacity:.2; border-radius:8px;116 }117 118 /* Simple inline SVG default styles */119 svg { fill:#fff; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Top App Bar -->126 <div class="appbar">127 <div class="status">128 <div class="left">129 <div style="font-weight:700;">9:14</div>130 <div class="dot" style="opacity:.95;"></div>131 <div class="dot" style="opacity:.75;"></div>132 <div class="dot" style="opacity:.6;"></div>133 </div>134 <div class="right">135 <div class="wifi"></div>136 <div class="battery"><div class="level"></div></div>137 </div>138 </div>139 140 <div class="toolbar">141 <div class="tool-left">142 <div class="hamburger icon-btn" aria-label="Menu">143 <span></span><span></span><span></span>144 </div>145 146 <!-- Undo -->147 <div class="icon-btn">148 <svg width="52" height="52" viewBox="0 0 24 24">149 <path d="M7 7V3L1 9l6 6v-4h6a5 5 0 1 1 0 10h-2v2h2a7 7 0 1 0 0-14H7z"/>150 </svg>151 </div>152 153 <!-- Redo (disabled) -->154 <div class="icon-btn disabled">155 <svg width="52" height="52" viewBox="0 0 24 24">156 <path d="M17 7V3l6 6-6 6v-4h-6a5 5 0 0 0 0 10h2v2h-2a7 7 0 0 1 0-14h6z"/>157 </svg>158 </div>159 </div>160 161 <div class="tool-right">162 <!-- Crown -->163 <div class="icon-btn" title="Premium">164 <svg width="56" height="56" viewBox="0 0 24 24">165 <path d="M2 8l5 3 5-6 5 6 5-3-2 10H4L2 8zM5 18h14v2H5z"/>166 </svg>167 </div>168 <!-- People -->169 <div class="icon-btn" title="Collaborate">170 <svg width="56" height="56" viewBox="0 0 24 24">171 <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-7 8a7 7 0 0 1 14 0v2H5zM19 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3z"/>172 </svg>173 </div>174 <div class="text-done">Done</div>175 </div>176 </div>177 178 <div class="title">Dinner Plan.docx</div>179 </div>180 181 <!-- Document page -->182 <div class="page">183 <div class="doc-line">staurants next week.</div>184 </div>185 186 <!-- Toast -->187 <div class="toast">188 <div class="doc-icon"></div>189 <div>Saved in Polaris Drive.</div>190 </div>191 192 <!-- Bottom editor toolbar -->193 <div class="bottom-bar">194 <div class="format-group">195 <div class="circle-tool" title="Pen">196 <svg width="44" height="44" viewBox="0 0 24 24" style="fill:#333;">197 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>198 </svg>199 </div>200 <div class="circle-tool letter">B</div>201 <div class="circle-tool letter" style="font-style:italic; font-weight:600;">I</div>202 <div class="circle-tool underline letter">U</div>203 <div class="circle-tool a-underline">A</div>204 <div class="circle-tool a-highlight">A</div>205 </div>206 207 <div class="format-group">208 <div class="circle-tool caret">^</div>209 <div class="grid" title="Table">210 <div></div><div></div><div></div>211 <div></div><div></div><div></div>212 <div></div><div></div><div></div>213 </div>214 </div>215 </div>216 217 <!-- Gesture bar -->218 <div class="gesture"></div>219 220</div>221</body>222</html>