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>MyfitShare.PNG UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #000; color: #fff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 background: #0c0c0c; display: flex; align-items: center; justify-content: space-between;18 padding: 0 36px; box-sizing: border-box;19 }20 .status-left { font-size: 40px; letter-spacing: 0.5px; }21 .status-right { display: flex; align-items: center; gap: 22px; }22 .status-dot { width: 10px; height: 10px; background: #bbb; border-radius: 50%; opacity: 0.7; }23 24 /* Header */25 .header {26 position: absolute; top: 110px; left: 0; width: 100%; height: 120px;27 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box; color: #fff;28 }29 .back-btn { width: 60px; height: 60px; }30 .header-title { flex: 1; text-align: center; font-size: 46px; font-weight: 500; }31 32 /* Share card (Fitbit) */33 .share-card { position: absolute; top: 300px; left: 0; width: 100%; height: 860px; background: #0e2c36; }34 .card-content { position: absolute; top: 40px; left: 52px; right: 52px; }35 .card-top { display: flex; justify-content: space-between; align-items: flex-start; }36 .card-top .title { font-size: 82px; font-weight: 700; }37 .card-top .subtitle { font-size: 30px; color: #cde1ea; margin-top: 8px; }38 .fitbit { font-size: 64px; color: #cde1ea; opacity: 0.95; font-weight: 600; letter-spacing: 1px; }39 40 .metric { display: flex; align-items: center; margin-top: 56px; }41 .badge {42 width: 150px; height: 150px; border-radius: 50%;43 border: 8px solid #e6f2e8; display: flex; align-items: center; justify-content: center;44 margin-right: 36px; background: #9bcf4e;45 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);46 }47 .badge.white { background: #fff; border-color: #eaeaea; }48 .metric .value { font-size: 96px; font-weight: 600; margin-right: 16px; color: #fff; }49 .metric .desc { font-size: 34px; color: #cfe5ef; }50 .metric .desc b { color: #ffffff; font-weight: 700; }51 52 .metrics-bottom {53 position: absolute; bottom: 40px; left: 52px; right: 52px;54 display: flex; align-items: center; gap: 40px; color: #fff;55 }56 .metrics-bottom .item { display: flex; align-items: center; gap: 16px; font-size: 38px; color: #eaf5fb; }57 .icon { width: 48px; height: 48px; }58 59 .divider { position: absolute; top: 1160px; left: 0; width: 100%; height: 14px; background: #0e2c36; }60 61 /* Preview button */62 .button-preview {63 position: absolute; top: 1288px; left: 50%; transform: translateX(-50%);64 padding: 22px 36px; border: 2px solid #444; border-radius: 40px;65 color: #cfcfcf; font-size: 34px; background: rgba(255,255,255,0.02);66 }67 68 /* Bottom actions */69 .actions {70 position: absolute; bottom: 220px; left: 0; width: 100%;71 display: flex; justify-content: space-around; padding: 0 60px; box-sizing: border-box;72 }73 .action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }74 .action .label { font-size: 34px; color: #ddd; }75 .action .icon { width: 80px; height: 80px; }76 77 .premium-badge {78 position: absolute; top: -28px; right: -16px;79 background: #e6c787; color: #000; font-weight: 700; font-size: 28px;80 padding: 8px 18px; border-radius: 20px;81 }82 83 .home-indicator {84 position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);85 width: 240px; height: 10px; background: #fff; border-radius: 6px; opacity: 0.85;86 }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Status Bar -->93 <div class="status-bar">94 <div class="status-left">9:07</div>95 <div class="status-right">96 <span class="status-dot"></span>97 <span class="status-dot"></span>98 <span class="status-dot"></span>99 <!-- Do not disturb -->100 <svg class="icon" viewBox="0 0 24 24">101 <circle cx="12" cy="12" r="10" fill="none" stroke="#bbb" stroke-width="2"/>102 <rect x="6" y="10.5" width="12" height="3" fill="#bbb"/>103 </svg>104 <!-- Wi-Fi -->105 <svg class="icon" viewBox="0 0 24 24">106 <path d="M2 8c5-4 15-4 20 0" stroke="#bbb" stroke-width="2" fill="none"/>107 <path d="M5 12c3-3 11-3 14 0" stroke="#bbb" stroke-width="2" fill="none"/>108 <path d="M8 16c2-2 6-2 8 0" stroke="#bbb" stroke-width="2" fill="none"/>109 <circle cx="12" cy="19" r="2" fill="#bbb"/>110 </svg>111 <!-- Battery -->112 <svg class="icon" viewBox="0 0 28 24">113 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#bbb" stroke-width="2"/>114 <rect x="4" y="8" width="14" height="8" fill="#bbb"/>115 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#bbb"/>116 </svg>117 <div style="font-size:32px; color:#bbb;">100%</div>118 </div>119 </div>120 121 <!-- Header -->122 <div class="header">123 <svg class="back-btn" viewBox="0 0 24 24">124 <path d="M15 5 L7 12 L15 19" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125 </svg>126 <div class="header-title">MyfitShare.PNG</div>127 </div>128 129 <!-- Fitbit Share Card -->130 <div class="share-card">131 <div class="card-content">132 <div class="card-top">133 <div>134 <div class="title">Walk</div>135 <div class="subtitle">Nov 14, 2023</div>136 </div>137 <div class="fitbit">fitbit</div>138 </div>139 140 <!-- Metric 1 -->141 <div class="metric">142 <div class="badge">143 <!-- Shoe icon -->144 <svg viewBox="0 0 100 100" width="80" height="80">145 <path d="M20 60 L70 60 L85 70 L85 75 L15 75 Q10 60 20 60 Z" fill="#0b1a21"/>146 <rect x="40" y="55" width="8" height="6" fill="#0b1a21"/>147 <rect x="52" y="55" width="8" height="6" fill="#0b1a21"/>148 </svg>149 </div>150 <div class="value">+98</div>151 <div class="desc">of <b>117</b> steps taken</div>152 </div>153 154 <!-- Metric 2 -->155 <div class="metric">156 <div class="badge white">157 <!-- Flame icon -->158 <svg viewBox="0 0 100 100" width="70" height="70">159 <path d="M60 25 C50 35 65 50 50 55 C35 60 35 80 50 85 C65 80 70 65 60 50 C70 45 67 35 60 25 Z" fill="#0b1a21"/>160 </svg>161 </div>162 <div class="value">+15</div>163 <div class="desc">of <b>519</b> calories burned</div>164 </div>165 166 <!-- Bottom metrics -->167 <div class="metrics-bottom">168 <div class="item">169 <!-- Clock -->170 <svg class="icon" viewBox="0 0 24 24">171 <circle cx="12" cy="12" r="9" fill="none" stroke="#eaf5fb" stroke-width="2"/>172 <path d="M12 6 V12 L16 14" stroke="#eaf5fb" stroke-width="2" fill="none" stroke-linecap="round"/>173 </svg>174 <span>16 mins</span>175 </div>176 <div class="item">177 <!-- Pin -->178 <svg class="icon" viewBox="0 0 24 24">179 <path d="M12 2 C8 2 5 5 5 9 C5 13 12 22 12 22 C12 22 19 13 19 9 C19 5 16 2 12 2 Z" fill="none" stroke="#eaf5fb" stroke-width="2"/>180 <circle cx="12" cy="9" r="3" fill="#eaf5fb"/>181 </svg>182 <span>0.08 km</span>183 </div>184 <div class="item">185 <!-- Shoe small -->186 <svg class="icon" viewBox="0 0 24 24">187 <path d="M4 14 H16 L19 16 V17 H3 Q2 15 4 14 Z" fill="#eaf5fb"/>188 </svg>189 <span>197'02" pace</span>190 </div>191 </div>192 </div>193 </div>194 195 <div class="divider"></div>196 197 <!-- Preview button -->198 <div class="button-preview">Preview original image(94.2KB)</div>199 200 <!-- Bottom actions -->201 <div class="actions">202 <div class="action">203 <!-- Download icon -->204 <svg class="icon" viewBox="0 0 64 64">205 <path d="M32 10 V36" stroke="#fff" stroke-width="4" stroke-linecap="round" fill="none"/>206 <path d="M22 28 L32 38 L42 28" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 <rect x="16" y="44" width="32" height="6" rx="3" fill="#fff"/>208 </svg>209 <div class="label">Download</div>210 </div>211 <div class="action">212 <!-- Share icon -->213 <svg class="icon" viewBox="0 0 64 64">214 <circle cx="16" cy="32" r="7" fill="none" stroke="#fff" stroke-width="4"/>215 <circle cx="48" cy="16" r="7" fill="none" stroke="#fff" stroke-width="4"/>216 <circle cx="48" cy="48" r="7" fill="none" stroke="#fff" stroke-width="4"/>217 <path d="M22 30 L41 20" stroke="#fff" stroke-width="4" fill="none" />218 <path d="M22 34 L41 44" stroke="#fff" stroke-width="4" fill="none" />219 </svg>220 <div class="label">Share</div>221 </div>222 <div class="action">223 <!-- Edit icon (sparkle + pencil) -->224 <div class="premium-badge">Premium</div>225 <svg class="icon" viewBox="0 0 64 64">226 <path d="M18 46 L30 44 L48 26 L38 16 L20 34 Z" fill="none" stroke="#fff" stroke-width="4"/>227 <path d="M45 13 L47 9 M50 18 L54 16 M50 9 L52 13" stroke="#fff" stroke-width="3" stroke-linecap="round"/>228 </svg>229 <div class="label">EDIT</div>230 </div>231 <div class="action">232 <!-- Delete icon -->233 <svg class="icon" viewBox="0 0 64 64">234 <rect x="18" y="22" width="28" height="32" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="4"/>235 <rect x="24" y="16" width="16" height="6" rx="3" fill="#fff"/>236 <path d="M24 28 V46 M32 28 V46 M40 28 V46" stroke="#fff" stroke-width="4"/>237 </svg>238 <div class="label">Delete</div>239 </div>240 </div>241 242 <!-- Home indicator -->243 <div class="home-indicator"></div>244 245</div>246</body>247</html>