feat(frontend): Integrate bootstrap into UI

frontend/src/pages/SQLInjection.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Card, Container, Form, Button, Alert } from 'react-bootstrap';
 
 export default function SQLInjection() {
   const [username, setUsername] = useState('');
@@ -17,13 +18,41 @@ export default function SQLInjection() {
   };
 
   return (
-    <div>
-      <h2>SQL Injection Demo</h2>
-      <p>Try: <code>admin' --</code> as username</p>
-      <input placeholder="Username" onChange={e => setUsername(e.target.value)} />
-      <input placeholder="Password" type="password" onChange={e => setPassword(e.target.value)} />
-      <button onClick={handleLogin}>Login</button>
-      <p>{msg}</p>
-    </div>
+    <Container className="mt-5">
+      <Card className="shadow">
+        <Card.Body>
+          <Card.Title className="text-center">SQL Injection Demo</Card.Title>
+          <Card.Text className="text-muted text-center">
+            Try: <code>admin' --</code> as username
+          </Card.Text>
+          <Form>
+            <Form.Group className="mb-3" controlId="formUsername">
+              <Form.Control
+                type="text"
+                placeholder="Username"
+                onChange={e => setUsername(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group className="mb-3" controlId="formPassword">
+              <Form.Control
+                type="password"
+                placeholder="Password"
+                onChange={e => setPassword(e.target.value)}
+              />
+            </Form.Group>
+            <div className="d-grid">
+              <Button variant="primary" onClick={handleLogin}>
+                Login
+              </Button>
+            </div>
+          </Form>
+          {msg && (
+            <Alert className="mt-3" variant="info">
+              {msg}
+            </Alert>
+          )}
+        </Card.Body>
+      </Card>
+    </Container>
   );
-}
+}