GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Presentation UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0E0E0E;11  }12  .status-bar {13    position: absolute; top: 0; left: 0; width: 100%; height: 110px;14    background: #1A1A1A; color: #EAEAEA; display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;15    font-size: 36px;16  }17  .status-icons { margin-left: 24px; display: flex; gap: 22px; align-items: center; }18  .header {19    position: absolute; top: 110px; left: 0; width: 100%; height: 120px;20    background: #1F1F1F; color: #F0F0F0; display: flex; align-items: center; box-sizing: border-box; padding: 0 24px;21    font-size: 44px;22  }23  .header .title { margin-left: 24px; }24  .header .menu { margin-left: auto; margin-right: 16px; }25  .top-strip {26    position: absolute; top: 230px; left: 18px; width: 1044px; height: 230px;27    background: #000; border: 4px solid #2B2B2B; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0;28  }29  .tile { height: 100%; }30  .tile.maroon { background: #7A4745; position: relative; }31  .tile.pink { background: #CFA09F; position: relative; }32  .tile.ribbon { background: #7A4745; position: relative; }33  .tile.ribbon:after {34    content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 100%; background: #A9D5C8; transform: translateX(-50%);35  }36  .tile.maroon .bow, .tile.pink .bow {37    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;38  }39  .tile.maroon .bow svg, .tile.pink .bow svg { width: 120px; height: 120px; opacity: 0.8; }40  .tile.pink .sprinkles {41    position: absolute; right: 24px; bottom: 24px; color: rgba(0,0,0,0.25); font-size: 28px;42  }43  .img-placeholder {44    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;45    display: flex; justify-content: center; align-items: center; font-size: 30px;46  }47  .slide-badge {48    position: absolute; right: 24px; top: 18px; background: rgba(0,0,0,0.8); color: #FFF;49    padding: 12px 20px; border-radius: 16px; font-size: 34px;50  }51  .slide-large {52    position: absolute; top: 476px; left: 18px; width: 1044px; height: 650px;53    background: #564634; border: 6px solid #000; box-sizing: border-box; color: #F7F7F7; padding: 80px 80px;54  }55  .slide-large h1 { margin: 0; font-size: 78px; font-weight: 600; letter-spacing: 0.5px; }56  .slide-two {57    position: absolute; top: 1146px; left: 18px; width: 1044px; height: 650px;58    background: transparent; border: 6px solid #D9623A; box-sizing: border-box; display: grid; grid-template-columns: 70% 30%;59  }60  .slide-two .left {61    background: #564634; color: #F7F7F7; padding: 70px; font-size: 44px; line-height: 1.35;62  }63  .slide-two .right { display: grid; grid-template-rows: 1fr 1fr; }64  .slide-two .right .top { background: #7A4745; position: relative; }65  .slide-two .right .bottom { background: #CFA09F; position: relative; }66  .slide-two .right .top .bow, .slide-two .right .bottom .sprinkle {67    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;68  }69  .slide-two .right .top .bow svg { width: 160px; height: 160px; opacity: 0.9; }70  .slide-two .right .bottom .sprinkle {71    color: rgba(0,0,0,0.25); font-size: 28px;72  }73  .filler {74    position: absolute; top: 1816px; left: 0; width: 100%; height: 390px; background: #0E0E0E;75  }76  .bottom-bar {77    position: absolute; bottom: 30px; left: 0; width: 100%; height: 220px; background: #1F1F1F; color: #DADADA;78    box-sizing: border-box; padding: 20px 32px;79  }80  .bottom-bar .mode { text-align: center; font-size: 40px; margin-bottom: 18px; color: #EDEDED; }81  .bottom-bar .tools { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 20px; }82  .tool { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 16px; }83  .tool svg { width: 56px; height: 56px; fill: none; stroke: #DADADA; stroke-width: 3; }84  .tool span { font-size: 30px; color: #DADADA; }85  .home-indicator {86    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);87    width: 360px; height: 16px; background: #DADADA; border-radius: 10px; opacity: 0.7;88  }89  /* Simple icon styles */90  .icon { width: 48px; height: 48px; fill: none; stroke: #EAEAEA; stroke-width: 3; }91  .dot { width: 8px; height: 8px; background: #EAEAEA; border-radius: 50%; display: inline-block; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>12:30</div>100    <div class="status-icons">101      <!-- moon -->102      <svg class="icon" viewBox="0 0 24 24">103        <path d="M21 14a9 9 0 1 1-9-12 7 7 0 0 0 9 12z" stroke="#EAEAEA" fill="none"></path>104      </svg>105      <!-- cast -->106      <svg class="icon" viewBox="0 0 24 24">107        <path d="M3 6h18v10H13" />108        <path d="M3 18c3 0 5 2 5 5" />109        <path d="M3 14c5 0 9 4 9 9" />110      </svg>111      <!-- play/YouTube -->112      <svg class="icon" viewBox="0 0 24 24">113        <rect x="3" y="5" width="18" height="14" rx="3"></rect>114        <path d="M10 9l6 3-6 3z" />115      </svg>116      <span class="dot"></span>117      <!-- signal/battery simplified -->118      <svg class="icon" viewBox="0 0 24 24">119        <path d="M3 18h14v3H3zM19 10v8" />120      </svg>121    </div>122  </div>123 124  <!-- Header -->125  <div class="header">126    <!-- back arrow -->127    <svg class="icon" viewBox="0 0 24 24">128      <path d="M15 5L6 12l9 7" />129    </svg>130    <div class="title">Presentation.pptx</div>131    <div class="menu">132      <svg class="icon" viewBox="0 0 24 24">133        <circle cx="12" cy="5" r="2" />134        <circle cx="12" cy="12" r="2" />135        <circle cx="12" cy="19" r="2" />136      </svg>137    </div>138  </div>139 140  <!-- Top strip with decorative tiles -->141  <div class="top-strip">142    <div class="tile maroon">143      <div class="bow">144        <svg viewBox="0 0 100 100">145          <path d="M50 15v70M20 50h60" stroke="#D9C7C1" stroke-width="8" fill="none" />146          <path d="M35 50c-10-10-10-20 0-30M65 50c10-10 10-20 0-30" stroke="#D9C7C1" stroke-width="6" fill="none"/>147          <path d="M35 50c-10 10-10 20 0 30M65 50c10 10 10 20 0 30" stroke="#D9C7C1" stroke-width="6" fill="none"/>148        </svg>149      </div>150    </div>151    <div class="tile img-placeholder">152      [IMG: Hiking gear flat lay]153    </div>154    <div class="tile ribbon"></div>155    <div class="tile pink">156      <div class="sprinkles">··· small pattern ···</div>157    </div>158    <div class="slide-badge">Slide 1 of 2</div>159  </div>160 161  <!-- Main slide -->162  <div class="slide-large">163    <h1>Importance of Hiking</h1>164  </div>165 166  <!-- Second slide preview -->167  <div class="slide-two">168    <div class="left">169      Regular nature hikes strengthen170      our heart, lungs, and muscles, as171      well as our mind172    </div>173    <div class="right">174      <div class="top">175        <div class="bow">176          <svg viewBox="0 0 100 100">177            <path d="M50 10v80M20 50h60" stroke="#E4D6D0" stroke-width="8" fill="none" />178            <path d="M35 50c-10-10-10-20 0-30M65 50c10-10 10-20 0-30" stroke="#E4D6D0" stroke-width="6" fill="none"/>179            <path d="M35 50c-10 10-10 20 0 30M65 50c10 10 10 20 0 30" stroke="#E4D6D0" stroke-width="6" fill="none"/>180          </svg>181        </div>182      </div>183      <div class="bottom">184        <div class="sprinkle">subtle dotted circle pattern</div>185      </div>186    </div>187  </div>188 189  <!-- Filler dark area -->190  <div class="filler"></div>191 192  <!-- Bottom toolbar -->193  <div class="bottom-bar">194    <div class="mode">Reading view</div>195    <div class="tools">196      <div class="tool">197        <svg viewBox="0 0 48 48">198          <rect x="6" y="8" width="36" height="24" rx="3"></rect>199          <path d="M22 20l8 4-8 4z" />200        </svg>201        <span>Present</span>202      </div>203      <div class="tool">204        <svg viewBox="0 0 48 48">205          <rect x="10" y="8" width="28" height="32" rx="2"></rect>206          <path d="M16 16h16M16 22h16M16 28h12" />207        </svg>208        <span>Notes</span>209      </div>210      <div class="tool">211        <svg viewBox="0 0 48 48">212          <path d="M10 36l12-12 8 8-12 12H10z" />213          <path d="M26 14l8 8" />214        </svg>215        <span>Edit</span>216      </div>217      <div class="tool">218        <svg viewBox="0 0 48 48">219          <circle cx="20" cy="20" r="10"></circle>220          <path d="M30 30l10 10"></path>221        </svg>222        <span>Find</span>223      </div>224      <div class="tool">225        <svg viewBox="0 0 48 48">226          <circle cx="12" cy="24" r="5"></circle>227          <circle cx="36" cy="12" r="5"></circle>228          <circle cx="36" cy="36" r="5"></circle>229          <path d="M17 23l14-8M17 25l14 8" />230        </svg>231        <span>Share</span>232      </div>233    </div>234  </div>235 236  <div class="home-indicator"></div>237</div>238</body>239</html>