GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>SQL Basics - Mobile Doc</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#101010; /* outer app chrome */10  }11  /* Top bars */12  .status-bar {13    position:absolute; top:0; left:0; width:100%; height:90px;14    background:#121212; color:#fff; display:flex; align-items:center;15    padding:0 36px; box-sizing:border-box; font-size:36px; letter-spacing:0.5px;16  }17  .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }18  .app-bar {19    position:absolute; top:90px; left:0; width:100%; height:120px;20    background:#1a1a1a; color:#fff; display:flex; align-items:center;21    padding:0 32px; box-sizing:border-box;22  }23  .title { font-size:42px; color:#fff; margin-left:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:660px; }24  .app-actions { margin-left:auto; display:flex; align-items:center; gap:38px; }25  .icon { width:52px; height:52px; fill:#E0E0E0; }26  .back { width:64px; height:64px; fill:#E0E0E0; }27 28  /* Document content area */29  .content {30    position:absolute; top:210px; left:0; right:0; bottom:220px;31    background:#ffffff; overflow:hidden;32  }33  .page {34    padding:60px 64px 40px 64px; box-sizing:border-box; color:#222;35  }36  h1 {37    text-align:center; margin:10px 0 48px; font-size:76px; color:#e53935; font-weight:700;38  }39  .author {40    color:#2979ff; font-size:42px; margin-bottom:16px; font-weight:600;41  }42  .org, .city { color:#3b3b3b; font-size:36px; }43  .separator { height:18px; background:#e6e6e6; margin:48px -64px 40px; }44  h2 {45    font-size:58px; margin:10px 0 24px; color:#111; font-weight:700;46  }47  ul { margin:0; padding-left:44px; }48  li {49    font-size:38px; line-height:1.52; margin:16px 0; color:#222;50  }51  .highlight-red { color:#e53935; font-weight:700; }52  .highlight-blue { color:#1e88e5; font-weight:700; }53  .bold { font-weight:700; }54  .foot-space { height:180px; } /* breathing room above bottom toolbar */55 56  /* Bottom toolbar */57  .bottom-toolbar {58    position:absolute; left:0; right:0; bottom:0; height:200px;59    background:#0f0f0f; display:flex; align-items:center; padding:0 40px;60    box-sizing:border-box; border-top:1px solid rgba(255,255,255,0.08);61  }62  .tool-left { display:flex; align-items:center; gap:50px; }63  .tool-right { margin-left:auto; display:flex; align-items:center; gap:36px; }64  .tool-icon { width:90px; height:90px; fill:#bdbdbd; }65  .share-btn {66    background:#3d6df7; color:#fff; font-size:42px; border-radius:20px;67    padding:22px 38px; box-shadow:0 2px 0 rgba(0,0,0,0.2);68  }69  /* Floating Edit pill */70  .edit-pill {71    position:absolute; left:40px; bottom:260px;72    background:#202020; color:#fff; border-radius:50px; padding:18px 36px;73    display:flex; align-items:center; gap:22px; font-size:40px;74    box-shadow:0 10px 30px rgba(0,0,0,0.35);75  }76  .home-indicator {77    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);78    width:320px; height:12px; background:#e0e0e0; border-radius:12px; opacity:0.8;79  }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status Bar -->86  <div class="status-bar">87    <div>9:12</div>88    <div class="status-right">89      <!-- Simple status icons -->90      <svg class="icon" viewBox="0 0 24 24">91        <path d="M4 10v6h2v-6H4zm4 3v3h2v-3H8zm4-5v8h2V8h-2zm4 2v6h2v-6h-2z"/>92      </svg>93      <svg class="icon" viewBox="0 0 24 24">94        <path d="M3 18h18v2H3zm2-8h14l-3-4H8l-3 4zm2 0v6h10v-6H7z"/>95      </svg>96      <svg class="icon" viewBox="0 0 24 24">97        <path d="M7 20h10a2 2 0 002-2V6a2 2 0 00-2-2H7a2 2 0 00-2 2v12a2 2 0 002 2zm0-2V6h10v12H7z"/>98      </svg>99    </div>100  </div>101 102  <!-- App Bar -->103  <div class="app-bar">104    <svg class="back" viewBox="0 0 24 24">105      <path d="M15 18l-6-6 6-6" stroke="#E0E0E0" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>106    </svg>107    <div class="title">Structured query lan...</div>108    <div class="app-actions">109      <svg class="icon" viewBox="0 0 24 24">110        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#E0E0E0" stroke-width="2"/>111      </svg>112      <svg class="icon" viewBox="0 0 24 24">113        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21l1-1-5.5-5.5zM9.5 14A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z"/>114      </svg>115      <svg class="icon" viewBox="0 0 24 24">116        <circle cx="12" cy="5" r="2.2"/>117        <circle cx="12" cy="12" r="2.2"/>118        <circle cx="12" cy="19" r="2.2"/>119      </svg>120    </div>121  </div>122 123  <!-- Document Content -->124  <div class="content">125    <div class="page">126      <h1>SQL Basics</h1>127 128      <div class="author">Dr. Sanjeev Verma</div>129      <div class="org">IMS, University of Lucknow,</div>130      <div class="city">Lucknow - 226021</div>131 132      <div class="separator"></div>133 134      <h2>What is SQL?</h2>135      <ul>136        <li>SQL stands for <span class="highlight-red">Structured Query Language</span>. It is used for storing and managing data in Relational Database Management System (RDBMS).</li>137        <li>It is a standard language for Relational Database System. It enables a user to <span class="highlight-blue">create</span>, <span class="highlight-blue">read</span>, <span class="highlight-blue">update</span> and <span class="highlight-blue">delete</span> relational databases and tables.</li>138        <li>All the RDBMS like <span class="bold">MySQL</span>, <span class="bold">Informix</span>, <span class="bold">Oracle</span>, <span class="bold">MS Access</span> and <span class="bold">SQL Server</span> use SQL as their standard database language.</li>139        <li>SQL allows users to query the database in a number of ways, using English‑like statements.</li>140      </ul>141 142      <div class="separator"></div>143 144      <h2>What are the SQL?</h2>145      <ul>146        <li>Structure query language is not case sensitive. Generally...</li>147      </ul>148 149      <div class="foot-space"></div>150    </div>151  </div>152 153  <!-- Floating Edit pill -->154  <div class="edit-pill">155    <svg class="icon" viewBox="0 0 24 24" style="width:48px;height:48px;fill:#fff;">156      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/>157    </svg>158    <span>Edit</span>159  </div>160 161  <!-- Bottom Toolbar -->162  <div class="bottom-toolbar">163    <div class="tool-left">164      <svg class="tool-icon" viewBox="0 0 24 24">165        <path d="M4 4h16v12H12l-4 4v-4H4z"/>166      </svg>167      <svg class="tool-icon" viewBox="0 0 24 24">168        <path d="M19 3H5a2 2 0 00-2 2v14l4-4h12a2 2 0 002-2V5a2 2 0 00-2-2z"/>169      </svg>170      <svg class="tool-icon" viewBox="0 0 24 24">171        <path d="M3.9 12.5a5 5 0 017.1 0l1 1 1-1a5 5 0 017.1 0l-1.4 1.4a3 3 0 00-4.2 0l-2.5 2.5-2.5-2.5a3 3 0 00-4.2 0L3.9 12.5z"/>172      </svg>173    </div>174    <div class="tool-right">175      <div class="share-btn">Share</div>176    </div>177  </div>178 179  <div class="home-indicator"></div>180</div>181</body>182</html>