GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=device-width, initial-scale=1.0">5<title>Share & Export Panel</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0b0c0f;14 }15 16 /* Dimmed app background hint */17 .app-content {18 position: absolute;19 left: 0;20 top: 0;21 width: 1080px;22 height: 2400px;23 background: #0b0c0f;24 }25 .dim {26 position: absolute;27 inset: 0;28 background: rgba(0,0,0,0.55);29 }30 31 /* Status bar mock */32 .statusbar {33 position: absolute;34 top: 16px;35 left: 24px;36 right: 24px;37 height: 44px;38 color: #d6d6d6;39 display: flex;40 align-items: center;41 font-size: 30px;42 letter-spacing: 1px;43 }44 .statusbar .right {45 margin-left: auto;46 display: flex;47 gap: 18px;48 align-items: center;49 }50 .icon-mini {51 width: 32px; height: 32px;52 }53 54 /* Floating edit button hint */55 .fab {56 position: absolute;57 right: 48px;58 bottom: 220px;59 width: 150px;60 height: 150px;61 border-radius: 50%;62 background: #0e2835;63 box-shadow: 0 10px 22px rgba(0,0,0,0.5);64 display: flex; align-items: center; justify-content: center;65 }66 .fab svg { width: 64px; height: 64px; stroke: #9fc6d9; stroke-width: 8; fill: none; }67 68 /* Modal panel */69 .panel {70 position: absolute;71 top: 180px;72 left: 230px;73 width: 720px;74 background: #1d1f22;75 border-radius: 18px;76 box-shadow: 0 28px 50px rgba(0,0,0,0.6);77 color: #fff;78 overflow: hidden;79 }80 .panel-header {81 display: flex;82 align-items: center;83 gap: 24px;84 padding: 26px 30px;85 border-bottom: 1px solid rgba(255,255,255,0.06);86 font-size: 46px;87 font-weight: 600;88 }89 .panel-header svg { width: 42px; height: 42px; fill: none; stroke: #e6e6e6; stroke-width: 8; }90 91 .menu {92 padding: 6px 0 22px;93 }94 .menu-item {95 display: flex;96 align-items: center;97 padding: 26px 30px;98 gap: 28px;99 }100 .menu-item + .menu-item { }101 .menu-item:hover { background: rgba(255,255,255,0.03); }102 .menu-item .ico {103 width: 64px;104 height: 64px;105 display: inline-flex;106 align-items: center;107 justify-content: center;108 color: #d8d8d8;109 }110 .menu-item .ico svg { width: 60px; height: 60px; fill: none; stroke: #e0e0e0; stroke-width: 7; }111 .menu-item .label {112 font-size: 44px;113 color: #f3f3f3;114 letter-spacing: 0.2px;115 }116 117 /* Behind panel simple placeholder text */118 .behind-text {119 position: absolute;120 top: 280px;121 left: 120px;122 width: 840px;123 color: #a7a7a7;124 font-size: 40px;125 opacity: 0.15;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <div class="app-content">133 <div class="statusbar">134 10:14135 <div class="right">136 <svg class="icon-mini" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#d6d6d6"/></svg>137 <svg class="icon-mini" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" fill="#d6d6d6"/></svg>138 <svg class="icon-mini" viewBox="0 0 24 24"><path d="M2 12h20" stroke="#d6d6d6" stroke-width="3"/></svg>139 </div>140 </div>141 <div class="behind-text">Upcoming events - dimmed background</div>142 <div class="fab">143 <svg viewBox="0 0 48 48">144 <path d="M8 40 L16 40 41 15 33 7 8 32 Z"></path>145 <path d="M28 10 L38 20"></path>146 </svg>147 </div>148 <div class="dim"></div>149 </div>150 151 <!-- Modal share & export panel -->152 <div class="panel">153 <div class="panel-header">154 <svg viewBox="0 0 48 48">155 <path d="M30 8 L12 24 L30 40" />156 </svg>157 <div>Share & export</div>158 </div>159 160 <div class="menu">161 <div class="menu-item">162 <div class="ico">163 <!-- person plus -->164 <svg viewBox="0 0 48 48">165 <circle cx="16" cy="16" r="8"></circle>166 <path d="M2 40c6-10 22-10 28 0"></path>167 <path d="M34 12v12M28 18h12"></path>168 </svg>169 </div>170 <div class="label">Share</div>171 </div>172 173 <div class="menu-item">174 <div class="ico">175 <!-- group/manage access -->176 <svg viewBox="0 0 48 48">177 <circle cx="16" cy="18" r="7"></circle>178 <circle cx="34" cy="14" r="5"></circle>179 <path d="M3 40c6-10 20-10 26 0"></path>180 <path d="M26 34c4-6 12-6 16 0"></path>181 </svg>182 </div>183 <div class="label">Manage access</div>184 </div>185 186 <div class="menu-item">187 <div class="ico">188 <!-- link -->189 <svg viewBox="0 0 48 48">190 <path d="M18 30l-4 4a8 8 0 0 1-12-12l4-4"></path>191 <path d="M30 18l4-4a8 8 0 0 1 12 12l-4 4"></path>192 <path d="M16 24h16"></path>193 </svg>194 </div>195 <div class="label">Copy link</div>196 </div>197 198 <div class="menu-item">199 <div class="ico">200 <!-- share arrow -->201 <svg viewBox="0 0 48 48">202 <circle cx="10" cy="38" r="5"></circle>203 <circle cx="38" cy="10" r="5"></circle>204 <circle cx="38" cy="38" r="5"></circle>205 <path d="M15 36 L33 12 M33 36 L15 36"></path>206 </svg>207 </div>208 <div class="label">Send a copy</div>209 </div>210 211 <div class="menu-item">212 <div class="ico">213 <!-- document -->214 <svg viewBox="0 0 48 48">215 <path d="M10 6h18l10 10v26H10z"></path>216 <path d="M28 6v12h12"></path>217 </svg>218 </div>219 <div class="label">Save As</div>220 </div>221 222 <div class="menu-item">223 <div class="ico">224 <!-- printer -->225 <svg viewBox="0 0 48 48">226 <rect x="10" y="18" width="28" height="16" rx="3"></rect>227 <rect x="14" y="6" width="20" height="10"></rect>228 <rect x="14" y="34" width="20" height="8"></rect>229 </svg>230 </div>231 <div class="label">Print</div>232 </div>233 234 <div class="menu-item">235 <div class="ico">236 <!-- copy -->237 <svg viewBox="0 0 48 48">238 <rect x="16" y="14" width="22" height="26" rx="2"></rect>239 <rect x="8" y="8" width="22" height="26" rx="2"></rect>240 </svg>241 </div>242 <div class="label">Make a copy</div>243 </div>244 245 <div class="menu-item">246 <div class="ico">247 <!-- open in new (home screen style) -->248 <svg viewBox="0 0 48 48">249 <rect x="8" y="14" width="28" height="26" rx="3"></rect>250 <path d="M26 10h12v12"></path>251 <path d="M20 28L38 10"></path>252 </svg>253 </div>254 <div class="label">Add to Home screen</div>255 </div>256 </div>257 </div>258 259</div>260</body>261</html>