GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Share Sheet - Importance of Hiking</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;11    position: relative; overflow: hidden;12    background: #0f0f0f; color: #e0e0e0;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; padding: 0 28px;19    display: flex; align-items: center; justify-content: space-between;20    color: #f5f5f5; font-size: 38px; letter-spacing: 0.5px;21    background: #0f0f0f;22  }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .icon { display: inline-flex; width: 48px; height: 48px; }25 26  /* App bar */27  .app-bar {28    position: absolute; top: 110px; left: 0; right: 0;29    height: 140px; padding: 0 24px 0 16px;30    display: flex; align-items: center; gap: 18px;31    background: #161616; color: #9e9e9e;32    border-bottom: 1px solid #222;33  }34  .app-title {35    font-size: 48px; font-weight: 500; flex: 1;36  }37  .app-actions { display: flex; align-items: center; gap: 28px; }38 39  /* Behind content (PDF preview look) */40  .content {41    position: absolute; top: 250px; left: 0; right: 0; bottom: 0;42    background: #2a1f1d;43  }44  .preview-strip {45    display: grid; grid-template-columns: 1fr 1fr 1fr;46    gap: 0; border-bottom: 6px solid #000;47    height: 280px;48  }49  .panel { background: #5a3636; display: flex; align-items: center; justify-content: center; color: #c1c1c1; font-size: 34px; }50  .panel:nth-child(2) {51    background: #4a2e2e; position: relative;52  }53  .hero-img {54    width: 86%; height: 80%; background: #E0E0E0;55    border: 1px solid #BDBDBD; color: #757575;56    display: flex; align-items: center; justify-content: center;57    text-align: center; font-size: 30px;58  }59  .title-section {60    height: 420px; background: #2b2318; display: flex; align-items: center; padding-left: 60px; border-bottom: 6px solid #000;61  }62  .title-section h1 { margin: 0; font-size: 78px; font-weight: 500; color: #bfbfbf; }63  .text-section {64    display: grid; grid-template-columns: 2fr 1fr;65    height: 480px; border-bottom: 6px solid #000;66  }67  .text-left { background: #2b2318; padding: 56px 60px; }68  .text-left p { margin: 0; font-size: 46px; line-height: 1.35; color: #bdbdbd; }69  .text-right { background: #5a3636; }70 71  /* Share sheet */72  .sheet {73    position: absolute; left: 0; right: 0; bottom: 0;74    height: 1350px; background: #1f2325; color: #e6e6e6;75    border-top-left-radius: 28px; border-top-right-radius: 28px;76    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);77  }78  .handle {79    width: 160px; height: 10px; background: #5f666b; border-radius: 10px;80    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);81  }82  .file-row {83    display: flex; align-items: center; gap: 28px;84    padding: 90px 36px 22px 36px; font-size: 44px; color: #cfcfcf;85  }86  .file-icon {87    width: 90px; height: 110px; background: #9aa0a6; border-radius: 10px;88    display: flex; align-items: center; justify-content: center; color: #1f2325; font-weight: 700;89  }90  .nearby-wrap { padding: 22px 36px; }91  .nearby-btn {92    display: inline-flex; align-items: center; gap: 20px;93    padding: 18px 34px; border: 2px solid #78a7ff; color: #cfe1ff;94    border-radius: 18px; font-size: 40px; background: transparent;95  }96  .nearby-icon {97    width: 44px; height: 44px; display: inline-block;98  }99  .subtle {100    text-align: center; color: #9aa0a6; font-size: 36px; margin-top: 44px;101  }102 103  .share-grid {104    margin-top: 70px; padding: 0 40px;105    display: flex; justify-content: space-between; align-items: flex-start;106  }107  .app {108    width: 210px; display: flex; flex-direction: column; align-items: center; gap: 22px;109  }110  .app .circle {111    width: 150px; height: 150px; border-radius: 50%;112    display: flex; align-items: center; justify-content: center;113    color: #fff; font-size: 56px; font-weight: 700;114  }115  .app span { font-size: 34px; color: #d8d8d8; text-align: center; }116 117  /* Gesture bar */118  .gesture {119    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);120    width: 360px; height: 10px; background: #cfcfcf; border-radius: 8px; opacity: 0.9;121  }122</style>123</head>124<body>125<div id="render-target">126  <!-- Status bar -->127  <div class="status-bar">128    <div>8:43</div>129    <div class="status-right">130      <!-- simple dot indicators -->131      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>132      <!-- WiFi -->133      <svg class="icon" viewBox="0 0 24 24">134        <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>135        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>136        <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>137        <circle cx="12" cy="18" r="1.6" fill="#fff"/>138      </svg>139      <!-- Battery -->140      <svg class="icon" viewBox="0 0 24 24">141        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>142        <rect x="4" y="9" width="12" height="6" fill="#fff"/>143        <rect x="20" y="10" width="2" height="4" fill="#fff"/>144      </svg>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="app-bar">150    <!-- back -->151    <svg class="icon" viewBox="0 0 24 24">152      <path d="M15 5L7 12l8 7" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>153    </svg>154    <div class="app-title">Importance of hiking</div>155    <div class="app-actions">156      <!-- cloud -->157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M7 16h9a4 4 0 0 0 0-8 5 5 0 0 0-9.7 1.4A3.5 3.5 0 1 0 7 16z" fill="none" stroke="#9e9e9e" stroke-width="2"/>159        <path d="M12 9v6M12 9l-3 3M12 9l3 3" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>160      </svg>161      <!-- more vert -->162      <svg class="icon" viewBox="0 0 24 24">163        <circle cx="12" cy="5" r="2" fill="#9e9e9e"/><circle cx="12" cy="12" r="2" fill="#9e9e9e"/><circle cx="12" cy="19" r="2" fill="#9e9e9e"/>164      </svg>165    </div>166  </div>167 168  <!-- PDF preview behind the sheet -->169  <div class="content">170    <div class="preview-strip">171      <div class="panel"></div>172      <div class="panel">173        <div class="hero-img">[IMG: Hiking gear flatlay]</div>174      </div>175      <div class="panel"></div>176    </div>177    <div class="title-section">178      <h1>Importance of Hiking</h1>179    </div>180    <div class="text-section">181      <div class="text-left">182        <p>Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind</p>183      </div>184      <div class="text-right"></div>185    </div>186  </div>187 188  <!-- Share sheet overlay -->189  <div class="sheet">190    <div class="handle"></div>191    <div class="file-row">192      <div class="file-icon">PDF</div>193      <div>Importance of hiking.pdf</div>194    </div>195    <div class="nearby-wrap">196      <div class="nearby-btn">197        <svg class="nearby-icon" viewBox="0 0 24 24">198          <path d="M4 12h4M16 12h4M8 12l4-4 4 4-4 4-4-4z" fill="none" stroke="#9fc0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>199        </svg>200        Nearby201      </div>202    </div>203    <div class="subtle">No recommended people to share with</div>204 205    <div class="share-grid">206      <div class="app">207        <div class="circle" style="background: linear-gradient(45deg,#ea4335,#fbbc05,#34a853,#4285f4);">M</div>208        <span>Gmail</span>209      </div>210      <div class="app">211        <div class="circle" style="background:#1976d2;">SMS</div>212        <span>Messages</span>213      </div>214      <div class="app">215        <div class="circle" style="background:#8a3ab9;">m</div>216        <span>Messenger Chats</span>217      </div>218      <div class="app">219        <div class="circle" style="background:#0f9d58;">D</div>220        <span>Drive</span>221      </div>222    </div>223  </div>224 225  <div class="gesture"></div>226</div>227</body>228</html>