GD-ML/AndroidCode

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>UI Rendering</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #101214; color: #fff;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;14  }15 16  /* Status bar */17  #status-bar {18    position: absolute; top: 0; left: 0; width: 100%; height: 120px;19    background: #131313;20    display: flex; align-items: center; justify-content: space-between;21    box-sizing: border-box; padding: 0 36px;22    font-size: 42px; letter-spacing: 0.3px;23  }24  #status-bar .sb-left { opacity: 0.95; }25  #status-bar .sb-right { display: flex; align-items: center; gap: 26px; }26  .sb-icon { width: 48px; height: 48px; }27 28  /* App bar */29  #app-bar {30    position: absolute; top: 120px; left: 0; width: 100%; height: 160px;31    background: #1A1A1A; border-bottom: 1px solid #222;32    display: flex; align-items: center; justify-content: space-between;33    box-sizing: border-box; padding: 0 36px;34  }35  #app-bar .left { display: flex; align-items: center; gap: 28px; }36  #app-bar .right { display: flex; align-items: center; gap: 34px; }37  #app-bar .title { font-size: 56px; font-weight: 600; opacity: 0.98; }38  .icon { width: 60px; height: 60px; opacity: 0.9; }39 40  /* Viewer */41  #viewer {42    position: absolute; top: 280px; left: 0; right: 0; bottom: 0;43    background: #0F0F10;44    overflow: hidden;45  }46  .page {47    width: 960px;48    background: #FFFFFF; color: #1e1e1e;49    margin: 36px auto; border-radius: 4px;50    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);51  }52 53  /* First page header */54  .page-header {55    background: #53A7FF;56    height: 420px; border-radius: 4px 4px 0 0;57    display: flex; align-items: flex-end; padding: 44px 60px;58    box-sizing: border-box; gap: 24px;59    color: #fff;60  }61  .brand { font-size: 38px; font-weight: 600; opacity: 0.95; }62  .title-text { font-size: 64px; font-weight: 700; margin-top: 12px; }63 64  .page-body { padding: 56px 60px 48px; box-sizing: border-box; }65  .illustration-placeholder {66    width: 840px; height: 820px; margin: 0 auto 36px;67  }68  .foot-note { font-size: 30px; line-height: 1.45; color: #222; }69  .foot-note .link { color: #1E6BFF; text-decoration: underline; }70 71  /* Second page */72  .second .page-content { padding: 44px 60px 0; box-sizing: border-box; }73  .top-row { display: flex; justify-content: space-between; align-items: flex-start; }74  .headline { display: grid; grid-template-columns: auto auto; column-gap: 18px; row-gap: 8px; align-items: center; }75  .headline .big { font-size: 64px; font-weight: 800; }76  .headline .with { grid-column: 1 / span 2; font-size: 34px; font-weight: 700; margin-top: 8px; }77  .badge { width: 340px; height: 110px; margin-top: 8px; }78  .scaler .mini { width: 200px; height: 80px; }79  .paragraph { font-size: 32px; color: #222; margin: 36px 0 48px; line-height: 1.6; }80  .blue-band { height: 160px; background: #1E5AEF; border-radius: 0 0 4px 4px; }81 82  /* Floating action button */83  .fab {84    position: absolute; right: 56px; bottom: 420px;85    width: 160px; height: 160px; background: #1F7C6D;86    border: none; border-radius: 36px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);87    display: flex; align-items: center; justify-content: center; cursor: pointer;88  }89  .fab-icon { width: 90px; height: 90px; }90 91  /* Image placeholders */92  .img-placeholder {93    background: #E0E0E0; border: 1px solid #BDBDBD;94    display: flex; align-items: center; justify-content: center;95    color: #757575; font-size: 28px; text-align: center;96  }97  .logo-holder .img-placeholder { width: 160px; height: 160px; border-radius: 6px; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status Bar -->104  <div id="status-bar">105    <div class="sb-left">10:47</div>106    <div class="sb-right">107      <!-- Wi-Fi -->108      <svg class="sb-icon" viewBox="0 0 48 48">109        <path d="M6 18 Q24 6 42 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>110        <path d="M12 24 Q24 16 36 24" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>111        <path d="M18 30 Q24 26 30 30" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>112        <circle cx="24" cy="36" r="3" fill="#fff"/>113      </svg>114      <!-- Battery -->115      <svg class="sb-icon" viewBox="0 0 48 48">116        <rect x="6" y="12" width="32" height="24" rx="3" ry="3" stroke="#fff" stroke-width="3" fill="none"/>117        <rect x="40" y="18" width="4" height="12" fill="#fff"/>118        <rect x="9" y="15" width="26" height="18" fill="#fff"/>119      </svg>120    </div>121  </div>122 123  <!-- App Bar -->124  <div id="app-bar">125    <div class="left">126      <!-- Back Arrow -->127      <svg class="icon" viewBox="0 0 48 48">128        <path d="M28 12 L14 24 L28 36" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>129        <path d="M14 24 H38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>130      </svg>131      <div class="title">SQL Data.pdf</div>132    </div>133    <div class="right">134      <!-- Magnifier -->135      <svg class="icon" viewBox="0 0 48 48">136        <circle cx="22" cy="22" r="10" stroke="#fff" stroke-width="3.5" fill="none"/>137        <path d="M31 31 L42 42" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>138      </svg>139      <!-- Drive-like triangle with plus -->140      <svg class="icon" viewBox="0 0 48 48">141        <path d="M10 34 L24 10 L38 34 Z" stroke="#fff" stroke-width="3.5" fill="none" stroke-linejoin="round"/>142        <path d="M24 20 V30 M19 25 H29" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>143      </svg>144      <!-- More (vertical) -->145      <svg class="icon" viewBox="0 0 48 48">146        <circle cx="24" cy="14" r="3.5" fill="#fff"/>147        <circle cx="24" cy="24" r="3.5" fill="#fff"/>148        <circle cx="24" cy="34" r="3.5" fill="#fff"/>149      </svg>150    </div>151  </div>152 153  <!-- Viewer area -->154  <div id="viewer">155    <!-- Document Page 1 -->156    <div class="page first">157      <div class="page-header">158        <div class="logo-holder">159          <div class="img-placeholder">[IMG: InterviewBit Logo]</div>160        </div>161        <div class="header-text">162          <div class="brand">InterviewBit</div>163          <div class="title-text">SQL Interview Questions</div>164        </div>165      </div>166      <div class="page-body">167        <div class="illustration-placeholder img-placeholder">[IMG: Blue Illustrations]</div>168        <div class="foot-note">169          <div>To view the live version of the page, <span class="link">click here.</span></div>170          <div>© Copyright by Interviewbit</div>171        </div>172      </div>173    </div>174 175    <!-- Document Page 2 (preview section) -->176    <div class="page second">177      <div class="page-content">178        <div class="top-row">179          <div class="headline">180            <div class="big">DIVE</div>181            <div class="big">DEEP</div>182            <div class="with">WITH</div>183            <div class="badge img-placeholder">[IMG: LIVE LEARNING SESSIONS]</div>184          </div>185          <div class="scaler">186            <div class="img-placeholder mini">[IMG: SCALER Logo]</div>187          </div>188        </div>189        <div class="paragraph">190          If you're preparing for your upcoming SQL interview, on top of the interview questions, guidance from an expert can prove to be extremely useful. One of our top instructors is hosting a FREE Masterclass for aspirants like you! Feel free to register if you're interested.191        </div>192      </div>193      <div class="blue-band"></div>194    </div>195 196    <!-- Floating Action Button -->197    <button class="fab" aria-label="Annotate">198      <svg viewBox="0 0 100 100" class="fab-icon">199        <path d="M20 70 L50 30 L80 70" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200        <circle cx="50" cy="70" r="6" fill="#fff"/>201      </svg>202    </button>203  </div>204 205</div>206</body>207</html>