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: #0a0a0a;23    color: #fff;24  }25  .status-content {26    height: 100%;27    padding: 0 32px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .icon {40    width: 44px;41    height: 44px;42  }43 44  /* Page counter pill */45  .page-pill {46    position: absolute;47    top: 138px;48    left: 36px;49    background: #d0d0d0;50    color: #2f2f2f;51    width: 210px;52    height: 68px;53    border-radius: 16px;54    display: flex;55    align-items: center;56    justify-content: center;57    font-weight: 600;58    font-size: 34px;59  }60 61  /* Content */62  .content {63    position: absolute;64    top: 230px;65    left: 48px;66    right: 48px;67    bottom: 140px;68    overflow: hidden;69  }70  .section {71    margin-bottom: 60px;72  }73  .title {74    font-size: 64px;75    font-weight: 700;76    color: #111;77    margin: 22px 0 24px 0;78  }79 80  .img-placeholder {81    width: 930px;82    height: 420px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #757575;89    font-size: 34px;90    border-radius: 6px;91    margin: 12px auto 12px auto;92  }93 94  .divider {95    width: 100%;96    height: 18px;97    background: #e9e9e9;98    margin: 18px 0 22px 0;99  }100 101  ul {102    list-style-type: disc;103    padding-left: 40px;104    margin: 10px 0 0 20px;105  }106  li {107    font-size: 42px;108    line-height: 64px;109    color: #222;110    margin-bottom: 10px;111  }112 113  /* Bottom gesture bar */114  .gesture {115    position: absolute;116    bottom: 30px;117    left: 50%;118    transform: translateX(-50%);119    width: 320px;120    height: 16px;121    background: #cfcfcf;122    border-radius: 10px;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <div class="status-bar">130    <div class="status-content">131      <div style="display:flex; align-items:center; gap:18px;">132        <span style="font-size:38px;">9:13</span>133      </div>134      <div class="status-icons">135        <!-- Simple Wi-Fi icon -->136        <svg class="icon" viewBox="0 0 24 24" fill="#fff">137          <path d="M2 8c5.5-5.3 14.5-5.3 20 0l-1.5 1.6C16 5.6 8 5.6 3.5 9.6L2 8zm4 4c3.6-3.4 9.4-3.4 13 0l-1.5 1.6c-2.6-2.4-7.4-2.4-10 0L6 12zm4 4c1.8-1.7 4.7-1.7 6.5 0L15 17.6c-1-1-2.9-1-3.9 0L10 16z"/>138        </svg>139        <!-- Simple battery icon -->140        <svg class="icon" viewBox="0 0 24 24" fill="#fff">141          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>142          <rect x="4" y="8" width="12" height="8" fill="#fff"/>143          <rect x="20" y="10" width="2" height="4" fill="#fff"/>144        </svg>145      </div>146    </div>147  </div>148 149  <div class="page-pill">6 of 58</div>150 151  <div class="content">152    <div class="section">153      <div class="title">What is SQL Process?</div>154      <div class="img-placeholder">[IMG: SQL Process Flowchart]</div>155    </div>156 157    <div class="divider"></div>158 159    <div class="section">160      <div class="title">What is Advantages of SQL?</div>161      <ul>162        <li>High speed</li>163        <li>No coding needed</li>164        <li>Well defined standards</li>165        <li>Portability</li>166        <li>Interactive language</li>167        <li>Multiple data view</li>168      </ul>169    </div>170 171    <div class="divider"></div>172 173    <div class="section">174      <div class="title">What is SQL Datatype?</div>175      <ul>176        <li>SQL Datatype is used to define the values that a column can contain.</li>177        <li>Every column is required to have a name and data type in the database table.</li>178      </ul>179    </div>180  </div>181 182  <div class="gesture"></div>183</div>184</body>185</html>