GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>SQL Operations UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #ffffff;13    border-radius: 26px;14    box-shadow: 0 8px 24px rgba(0,0,0,0.12);15  }16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0e0e0f;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    font-size: 44px;29  }30  .status-left { display: flex; align-items: center; gap: 22px; flex: 1; }31  .status-right { display: flex; align-items: center; gap: 26px; }32  .sb-icon {33    width: 50px; height: 50px; border-radius: 8px; background: rgba(255,255,255,0.15);34  }35 36  /* Overlay page indicator */37  .page-indicator {38    position: absolute;39    top: 138px;40    left: 30px;41    background: #151515;42    color: #fff;43    padding: 18px 26px;44    border-radius: 18px;45    font-size: 40px;46    box-shadow: 0 6px 14px rgba(0,0,0,0.35);47  }48 49  /* Content area */50  .content {51    position: absolute;52    top: 120px;53    left: 0;54    width: 1080px;55    height: 2160px;56    background: #ffffff;57    color: #222;58    overflow: hidden;59  }60  .page-padding { padding: 40px 60px 160px; }61 62  .small-note {63    font-size: 32px;64    line-height: 48px;65    color: #333;66    margin-bottom: 16px;67  }68 69  .syntax-block, .example-block {70    margin-top: 20px;71    margin-bottom: 28px;72  }73  .label {74    font-weight: 700;75    font-size: 34px;76    color: #222;77    margin-bottom: 12px;78  }79  .code {80    font-family: "Courier New", monospace;81    font-size: 36px;82    line-height: 60px;83    color: #111;84  }85  .divider {86    width: 100%;87    height: 18px;88    background: #e6e6e6;89    margin: 24px 0 34px;90  }91 92  .section-title {93    font-size: 64px;94    font-weight: 800;95    color: #e53935;96    margin-bottom: 24px;97    letter-spacing: 0.5px;98  }99  .bullets { margin: 6px 0 14px; }100  .bullets li {101    font-size: 34px;102    line-height: 54px;103    margin: 12px 0;104  }105 106  /* Floating button */107  .fab {108    position: absolute;109    right: 36px;110    bottom: 220px;111    width: 120px;112    height: 120px;113    background: #4dabf5;114    border-radius: 50%;115    box-shadow: 0 10px 20px rgba(0,0,0,0.25);116    display: flex;117    flex-direction: column;118    justify-content: center;119    align-items: center;120    gap: 4px;121  }122  .fab-arrow {123    width: 0; height: 0;124    border-left: 14px solid transparent;125    border-right: 14px solid transparent;126    border-bottom: 24px solid white;127  }128  .fab-arrow.down {129    border-bottom: none;130    border-top: 24px solid white;131  }132 133  /* Bottom navigation bar */134  .bottom-bar {135    position: absolute;136    bottom: 0;137    left: 0;138    width: 1080px;139    height: 120px;140    background: #0e0e0f;141    display: flex;142    justify-content: center;143    align-items: center;144  }145  .home-pill {146    width: 360px;147    height: 16px;148    background: #f2f2f2;149    border-radius: 8px;150    opacity: 0.9;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status Bar -->158  <div class="status-bar">159    <div class="status-left">160      <div style="font-weight:700;">9:14</div>161      <div class="sb-icon"></div>162      <div class="sb-icon"></div>163      <div class="sb-icon"></div>164      <div class="sb-icon"></div>165    </div>166    <div class="status-right">167      <!-- Simple inline SVG icons -->168      <svg width="44" height="44">169        <circle cx="22" cy="22" r="18" fill="#fff"></circle>170      </svg>171      <svg width="44" height="44">172        <rect x="6" y="10" width="32" height="24" rx="4" fill="#fff"></rect>173      </svg>174    </div>175  </div>176 177  <!-- Overlay indicator -->178  <div class="page-indicator">57 of 58</div>179 180  <!-- Content -->181  <div class="content">182    <div class="page-padding">183      <!-- Residual UNION text snippet -->184      <div class="small-note">185        same in both the tables on which UNION operation is being applied.<br>186        Union operation eliminates the duplicate rows from its resultset.187      </div>188      <div class="label">Syntax</div>189      <div class="code syntax-block">190        SELECT column_name FROM table1<br>191        UNION<br>192        SELECT column_name FROM table2;193      </div>194      <div class="label">Example</div>195      <div class="code example-block">196        SELECT * FROM First<br>197        UNION<br>198        SELECT * FROM Second;199      </div>200 201      <div class="divider"></div>202 203      <!-- Intersect Operation -->204      <div class="section-title">Intersect Operation</div>205      <ul class="bullets">206        <li>It is used to combine two SELECT statements. The Intersect operation returns the common rows from both the SELECT statements.</li>207        <li>In the Intersect operation, the number of datatype and columns must be the same.</li>208        <li>It has no duplicates and it arranges the data in ascending order by default.</li>209      </ul>210 211      <div class="label">Syntax</div>212      <div class="code syntax-block">213        SELECT column_name FROM table1<br>214        INTERSECT<br>215        SELECT column_name FROM table2;216      </div>217      <div class="label">Example</div>218      <div class="code example-block">219        SELECT * FROM First<br>220        INTERSECT<br>221        SELECT * FROM Second;222      </div>223 224      <div class="divider"></div>225 226      <!-- MINUS Operation -->227      <div class="section-title">MINUSOperation</div>228      <ul class="bullets">229        <li>It combines the result of two SELECT statements. Minus operator is used to display the rows which are present in the first query but absent in the second query.</li>230        <li>It has no duplicates and data arranged in ascending order by default.</li>231      </ul>232 233      <div class="label">Syntax</div>234      <div class="code syntax-block">235        SELECT column_name FROM table1<br>236        MINUS<br>237        SELECT column_name FROM table2;238      </div>239      <div class="label">Example</div>240      <div class="code example-block">241        SELECT * FROM First<br>242        MINUS<br>243        SELECT * FROM Second;244      </div>245    </div>246  </div>247 248  <!-- Floating button -->249  <div class="fab">250    <div class="fab-arrow"></div>251    <div class="fab-arrow down"></div>252  </div>253 254  <!-- Bottom navigation -->255  <div class="bottom-bar">256    <div class="home-pill"></div>257  </div>258 259</div>260</body>261</html>