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>Importance of Hiking - Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1b1b1b; color: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height: 80px; background: #111111; color: #eaeaea; display: flex; align-items: center; padding: 0 24px; font-size: 32px;17 }18 .status-bar .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }19 20 /* Simple status icons */21 .icon { display: inline-flex; }22 .icon svg { display: block; }23 24 /* App bar */25 .app-bar {26 height: 120px; background: #222222; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #2c2c2c;27 }28 .app-title { font-size: 44px; color: #dddddd; margin-left: 18px; }29 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }30 31 /* Scrollable content area */32 .content {33 position: absolute; top: 200px; left: 0; right: 0; bottom: 180px;34 overflow-y: auto; background: #000000;35 }36 37 /* Section styles */38 .sep { height: 10px; background: #000; }39 .panel-brown { background: #5a4a3b; color: #f2efe9; }40 41 /* Top collage row */42 .collage { display: grid; grid-template-columns: repeat(4, 1fr); height: 230px; border-bottom: 4px solid #000; }43 .tile { position: relative; border-right: 2px solid #000; }44 .tile:last-child { border-right: none; }45 .tile.maroon { background: #7b4a47; }46 .tile.pink { background: #d2a9a8; }47 .tile .stripe-vert { position: absolute; top: 0; bottom: 0; width: 12px; left: 50%; transform: translateX(-50%); background: #d9c6b9; opacity: 0.9; }48 .tile .stripe-horz { position: absolute; left: 0; right: 0; height: 12px; top: 50%; transform: translateY(-50%); background: #d9c6b9; opacity: 0.9; }49 .bow {50 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);51 width: 120px; height: 120px;52 }53 .bow svg { width: 100%; height: 100%; }54 .pattern-label {55 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);56 color: rgba(0,0,0,0.35); font-size: 28px;57 }58 59 /* Image placeholder */60 .img-ph {61 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;62 display: flex; align-items: center; justify-content: center; text-align: center;63 }64 65 /* Main title banner */66 .title-banner { padding: 60px 60px; border-top: 4px solid #000; border-bottom: 8px solid #000; }67 .title-banner h1 { margin: 0; font-size: 70px; font-weight: 600; letter-spacing: 0.5px; }68 69 /* Body section */70 .body-section { display: grid; grid-template-columns: 70% 30%; min-height: 640px; border-bottom: 8px solid #000; }71 .body-left { padding: 60px; }72 .body-left p { font-size: 44px; line-height: 1.28; margin: 0 0 40px 0; color: #f2efe9; }73 .body-left .info-img { width: 370px; height: 480px; margin: 0 auto; }74 .body-right { position: relative; }75 .stack { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; }76 .stack .tile { border-right: none; border-bottom: 2px solid #000; }77 .stack .tile:last-child { border-bottom: none; }78 79 /* Large empty brown area simulating next slide */80 .large-brown { height: 700px; }81 82 /* Bottom navigation bar */83 .bottom-bar {84 position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: #202020; border-top: 1px solid #2b2b2b;85 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; color: #cccccc;86 }87 .bottom-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }88 .bottom-item span { font-size: 28px; }89 .bottom-item svg { width: 44px; height: 44px; }90 91 /* Gesture pill */92 .gesture-pill {93 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);94 width: 240px; height: 10px; border-radius: 6px; background: #eaeaea; opacity: 0.8;95 }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status Bar -->102 <div class="status-bar">103 <div>8:42</div>104 <div class="right">105 <!-- Simple dot indicator -->106 <div class="icon"><svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="3" fill="#bfbfbf"/></svg></div>107 <!-- WiFi -->108 <div class="icon"><svg width="36" height="24" viewBox="0 0 36 24">109 <path d="M2 8c8-8 24-8 32 0" stroke="#e0e0e0" stroke-width="2" fill="none"/>110 <path d="M7 12c6-6 16-6 22 0" stroke="#e0e0e0" stroke-width="2" fill="none"/>111 <path d="M13 16c4-4 6-4 10 0" stroke="#e0e0e0" stroke-width="2" fill="none"/>112 <circle cx="18" cy="20" r="2" fill="#e0e0e0"/>113 </svg></div>114 <!-- Battery -->115 <div class="icon"><svg width="54" height="24" viewBox="0 0 54 24">116 <rect x="1" y="4" width="44" height="16" rx="3" ry="3" stroke="#e0e0e0" fill="none" stroke-width="2"/>117 <rect x="5" y="7" width="28" height="10" fill="#e0e0e0"/>118 <rect x="47" y="8" width="6" height="8" rx="2" fill="#e0e0e0"/>119 </svg></div>120 </div>121 </div>122 123 <!-- App Bar -->124 <div class="app-bar">125 <!-- Back arrow -->126 <div class="icon"><svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" stroke="#dddddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>127 <div class="app-title">Importance of hiking</div>128 <div class="app-actions">129 <!-- Cloud Upload -->130 <div class="icon"><svg width="48" height="48" viewBox="0 0 24 24">131 <path d="M7 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11-2A4 4 0 0 0 7 18z" fill="none" stroke="#d0d0d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>132 <path d="M12 14v-6M9.5 10.5L12 8l2.5 2.5" stroke="#d0d0d0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg></div>134 <!-- More vertical dots -->135 <div class="icon"><svg width="36" height="36" viewBox="0 0 24 24">136 <circle cx="12" cy="5" r="2" fill="#d0d0d0"/><circle cx="12" cy="12" r="2" fill="#d0d0d0"/><circle cx="12" cy="19" r="2" fill="#d0d0d0"/>137 </svg></div>138 </div>139 </div>140 141 <!-- Scrollable Content -->142 <div class="content">143 <!-- Collage Row -->144 <div class="collage">145 <div class="tile maroon">146 <div class="stripe-horz"></div>147 <div class="stripe-vert"></div>148 <div class="bow">149 <svg viewBox="-30 -30 60 60">150 <path d="M0 0 C-12 -14,-22 -8,-24 0 C-22 8,-12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>151 <path d="M0 0 C12 -14,22 -8,24 0 C22 8,12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>152 </svg>153 </div>154 </div>155 <div class="tile">156 <div class="img-ph" style="width:100%;height:100%;"><span>[IMG: Hiking gear flatlay]</span></div>157 </div>158 <div class="tile maroon">159 <div class="stripe-vert"></div>160 <div class="bow">161 <svg viewBox="-30 -30 60 60">162 <path d="M0 0 C-12 -14,-22 -8,-24 0 C-22 8,-12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>163 <path d="M0 0 C12 -14,22 -8,24 0 C22 8,12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>164 </svg>165 </div>166 </div>167 <div class="tile pink">168 <div class="pattern-label">pattern</div>169 </div>170 </div>171 172 <!-- Title Banner -->173 <div class="panel-brown title-banner">174 <h1>Importance of Hiking</h1>175 </div>176 177 <!-- Body Section -->178 <div class="panel-brown body-section">179 <div class="body-left">180 <p>Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind</p>181 <div class="img-ph info-img">[IMG: Hiking benefits infographic]</div>182 </div>183 <div class="body-right">184 <div class="stack">185 <div class="tile maroon">186 <div class="stripe-horz"></div>187 <div class="stripe-vert"></div>188 <div class="bow">189 <svg viewBox="-30 -30 60 60">190 <path d="M0 0 C-12 -14,-22 -8,-24 0 C-22 8,-12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>191 <path d="M0 0 C12 -14,22 -8,24 0 C22 8,12 14,0 0" stroke="#d9c6b9" stroke-width="4" fill="none"/>192 </svg>193 </div>194 </div>195 <div class="tile pink">196 <div class="pattern-label">pattern</div>197 </div>198 </div>199 </div>200 </div>201 202 <!-- Large empty brown area -->203 <div class="panel-brown large-brown"></div>204 </div>205 206 <!-- Bottom Navigation -->207 <div class="bottom-bar">208 <div class="bottom-item">209 <svg viewBox="0 0 24 24"><path d="M6 4v16l12-8-12-8z" fill="#4dd17f"/></svg>210 <span>Present</span>211 </div>212 <div class="bottom-item">213 <svg viewBox="0 0 24 24">214 <rect x="5" y="3" width="14" height="18" rx="2" fill="none" stroke="#d0d0d0" stroke-width="2"/>215 <line x1="8" y1="8" x2="16" y2="8" stroke="#d0d0d0" stroke-width="2"/>216 <line x1="8" y1="12" x2="16" y2="12" stroke="#d0d0d0" stroke-width="2"/>217 <line x1="8" y1="16" x2="13" y2="16" stroke="#d0d0d0" stroke-width="2"/>218 </svg>219 <span>Notes</span>220 </div>221 <div class="bottom-item">222 <svg viewBox="0 0 24 24">223 <path d="M4 20l8-2 8-12-5-2-11 16z" fill="none" stroke="#d0d0d0" stroke-width="2" stroke-linejoin="round"/>224 </svg>225 <span>Edit</span>226 </div>227 <div class="bottom-item">228 <svg viewBox="0 0 24 24">229 <circle cx="11" cy="11" r="7" fill="none" stroke="#d0d0d0" stroke-width="2"/>230 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#d0d0d0" stroke-width="2"/>231 </svg>232 <span>Find</span>233 </div>234 <div class="bottom-item">235 <svg viewBox="0 0 24 24">236 <circle cx="6" cy="12" r="3" fill="none" stroke="#d0d0d0" stroke-width="2"/>237 <circle cx="18" cy="6" r="3" fill="none" stroke="#d0d0d0" stroke-width="2"/>238 <circle cx="18" cy="18" r="3" fill="none" stroke="#d0d0d0" stroke-width="2"/>239 <line x1="8.7" y1="10.4" x2="15.3" y2="7.6" stroke="#d0d0d0" stroke-width="2"/>240 <line x1="8.7" y1="13.6" x2="15.3" y2="16.4" stroke="#d0d0d0" stroke-width="2"/>241 </svg>242 <span>Share</span>243 </div>244 </div>245 246 <!-- Gesture Pill -->247 <div class="gesture-pill"></div>248</div>249</body>250</html>