Spaces:
Sleeping
Sleeping
File size: 6,663 Bytes
cce1e0e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FastAPI CRUD App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
</head>
<body>
<header class="text-center py-4 mb-5">
<div class="container">
<h1 class="display-4 fw-bold">FastAPI CRUD Application</h1>
<p class="lead mb-0">Create, Read, Update, and Delete Items</p>
</div>
</header>
<main class="container mb-5">
<div class="row g-4">
<!-- Form section -->
<div class="col-lg-4 col-md-5">
<div class="card h-100">
<div class="card-header d-flex align-items-center">
<i class="bi bi-plus-circle me-2"></i>
<h2 class="h5 mb-0" id="form-title">Add New Item</h2>
</div>
<div class="card-body">
<form id="item-form">
<input type="hidden" id="item-id">
<div class="mb-4">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Enter item title" required>
</div>
<div class="mb-4">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" rows="4" placeholder="Enter item description"></textarea>
</div>
<div class="mb-4 form-check">
<input type="checkbox" class="form-check-input" id="completed">
<label class="form-check-label" for="completed">Mark as completed</label>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-between">
<button type="submit" class="btn btn-primary px-4" id="submit-btn">
<i class="bi bi-save me-2"></i>Save
</button>
<button type="button" class="btn btn-secondary px-4" id="cancel-btn" style="display: none;">
<i class="bi bi-x-circle me-2"></i>Cancel
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Items list section -->
<div class="col-lg-8 col-md-7">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<i class="bi bi-list-ul me-2"></i>
<h2 class="h5 mb-0">Items List</h2>
</div>
<div class="spinner-border text-light spinner-border-sm" role="status" id="loading-spinner">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col" width="5%">ID</th>
<th scope="col" width="25%">Title</th>
<th scope="col" width="40%">Description</th>
<th scope="col" width="15%">Status</th>
<th scope="col" width="15%" class="text-center">Actions</th>
</tr>
</thead>
<tbody id="items-table-body">
<!-- Items will be loaded here -->
</tbody>
</table>
</div>
<div id="no-items-message" style="display: none;">
<i class="bi bi-inbox text-muted d-block text-center" style="font-size: 3rem;"></i>
<p class="text-center mt-3">No items found. Create a new item to get started.</p>
<div class="text-center">
<button class="btn btn-primary" id="create-first-item-btn">
<i class="bi bi-plus-circle me-2"></i>Create First Item
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Toast notifications -->
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi me-2" id="toast-icon"></i>
<strong class="me-auto" id="toast-title">Notification</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="toast-message">
<!-- Toast message will be inserted here -->
</div>
</div>
</div>
<footer class="py-4">
<div class="container">
<p>FastAPI CRUD Application © 2025 | Built with <i class="bi bi-heart-fill text-danger"></i> using FastAPI & SQLite</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', path='/js/script.js') }}"></script>
</body>
</html> |