GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>SQL Slides UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Top status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #111111;23    color: #ffffff;24    padding: 0 32px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .status-left {31    display: flex;32    align-items: center;33    gap: 22px;34    font-size: 42px;35    font-weight: 600;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .icon {43    width: 44px;44    height: 44px;45  }46 47  /* Light grey app strip below status bar */48  .app-strip {49    position: absolute;50    top: 120px;51    left: 0;52    width: 1080px;53    height: 34px;54    background: #DADADA;55  }56 57  .page-tag {58    position: absolute;59    top: 160px;60    left: 40px;61    background: #BDBDBD;62    color: #ffffff;63    border-radius: 10px;64    padding: 16px 28px;65    font-size: 36px;66    font-weight: 600;67    letter-spacing: 0.5px;68  }69 70  /* Content */71  .content {72    position: absolute;73    top: 220px;74    left: 0;75    width: 100%;76    padding: 0 58px;77    box-sizing: border-box;78    color: #222;79  }80 81  h1 {82    margin: 20px 0 24px;83    font-size: 72px;84    font-weight: 700;85    letter-spacing: -0.5px;86  }87  .subtitle {88    font-size: 44px;89    color: #444;90    margin-bottom: 18px;91  }92  ul {93    margin: 0 0 34px 24px;94    padding: 0;95    list-style: disc;96    font-size: 40px;97    line-height: 1.6;98  }99  li { margin: 14px 0; }100  .divider {101    width: 100%;102    height: 10px;103    background: #E6E6E6;104    margin: 42px 0;105  }106  .section-title {107    font-size: 68px;108    font-weight: 800;109    color: #D84343; /* red heading */110    margin: 8px 0 24px;111  }112  .diagram {113    width: 920px;114    height: 480px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 42px;122    margin: 24px auto 0;123  }124 125  /* Bottom gesture bar */126  .gesture-bar {127    position: absolute;128    bottom: 26px;129    left: 50%;130    transform: translateX(-50%);131    width: 420px;132    height: 14px;133    background: #000000;134    opacity: 0.28;135    border-radius: 7px;136  }137</style>138</head>139<body>140<div id="render-target">141  <div class="status-bar">142    <div class="status-left">143      <div>9:13</div>144      <!-- simple app icons placeholders -->145      <svg class="icon" viewBox="0 0 24 24">146        <circle cx="12" cy="12" r="10" fill="#CCCCCC"></circle>147      </svg>148      <svg class="icon" viewBox="0 0 24 24">149        <rect x="4" y="4" width="16" height="16" fill="#CCCCCC"></rect>150      </svg>151    </div>152    <div class="status-icons">153      <!-- Wi-Fi icon -->154      <svg class="icon" viewBox="0 0 24 24">155        <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M9 14c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>156      </svg>157      <!-- Battery icon -->158      <svg class="icon" viewBox="0 0 24 24">159        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>160        <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>161        <rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect>162      </svg>163    </div>164  </div>165 166  <div class="app-strip"></div>167  <div class="page-tag">4 of 58</div>168 169  <div class="content">170    <h1>What are the SQL?</h1>171    <div class="subtitle">SQL follows the following rules:</div>172    <ul>173      <li>Structure query language is not case sensitive. Generally, keywords of SQL are written in uppercase.</li>174      <li>Statements of SQL are dependent on text lines. We can use a single SQL statement on one or multiple text line.</li>175      <li>Using the SQL statements, you can perform most of the actions in a database.</li>176      <li>SQL depends on tuple relational calculus and relational algebra.</li>177    </ul>178 179    <div class="divider"></div>180 181    <div class="section-title">What is SQL Process?</div>182    <ul>183      <li>When an SQL command is executing for any RDBMS, then the system figure out the best way to carry out the request and the SQL engine determines that how to interpret the task.</li>184      <li>In the process, various components are included. These components can be optimization Engine, Query engine, Query dispatcher, classic, etc.</li>185      <li>All the non-SQL queries are handled by the classic query engine, but SQL query engine won't handle logical files.</li>186    </ul>187 188    <div class="divider"></div>189 190    <div class="section-title">What is SQL Process?</div>191    <div class="diagram">[IMG: Diagram - SQL Process Flow]</div>192  </div>193 194  <div class="gesture-bar"></div>195</div>196</body>197</html>