Skip to content

Instantly share code, notes, and snippets.

@jfjensen

jfjensen/home.html

Created October 20, 2023 16:54
Show Gist options
  • Save jfjensen/1ce19e730d228a6bdca8b5ee99cbdffe to your computer and use it in GitHub Desktop.
Save jfjensen/1ce19e730d228a6bdca8b5ee99cbdffe to your computer and use it in GitHub Desktop.
Download ZIP
An HTML webpage for managing a book database
Raw
home.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
</head>
<body onload="brython()">
<div class="container">
<div class="columns">
<div class="column col-6 col-mx-auto">
<br>
<div class="hero hero-sm bg-primary">
<div class="hero-body p-centered">
<h1>Book Database</h1>
</div>
</div>
<br>
<p>
<div id="canvas"></div>
</p>
<script type="text/python" src="static/home.py"></script>
<div class="float-right">
<button id="button_add_book" class="btn btn-primary">Add book</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal-add-book">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#" class="btn btn-clear float-right" id="modal_add_close" aria-label="Close"></a>
<div class="modal-title h5">Add book</div>
</div>
<div class="modal-body">
<div class="content">
<form class="form-horizontal">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Title</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-title" placeholder="Title">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Author</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-author" placeholder="Author">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Publisher</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-publisher" placeholder="Publisher">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Genre</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-genre" placeholder="Genre">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button id="button_add_book_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="modal" id="modal-edit-book">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#" class="btn btn-clear float-right" id="modal_edit_close" aria-label="Close"></a>
<div class="modal-title h5">Edit book</div>
</div>
<div class="modal-body">
<div class="content">
<form class="form-horizontal">
<div class="form-group">
<input type="hidden" id="edit-input-id" >
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Title</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-input-title">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Author</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-input-author">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Publisher</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-input-publisher">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Genre</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-input-genre">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button id="button_edit_book_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment