| | <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>AI Comic Factory</title></head><body><main class="app"> |
| | |
| | <h1 class="title">AI Comic Factory</h1> |
| |
|
| | |
| | <nav> |
| | <ul class="nav flex-column"> |
| | <li class="nav-item"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#new-comic-modal">Create Comic</button></li> |
| | <li class="nav-item"><button type="button" class="btn btn-danger" href="/comics">Edit Comic</button></li> |
| | <li class="nav-item"><button type="button" class="btn btn-danger" href="/comics">Delete Comic</button></li> |
| | <li class="nav-item"><button type="button" class="btn btn-success" href="/comics">Generate Comic</button></li> |
| | </ul> |
| | </nav> |
| |
|
| | |
| | <section class="content mt-3"> |
| | <div class="container"> |
| | |
| | <div class="row"> |
| | {{#ebooks}} |
| | <div class="col-4"> |
| | <div class="card"> |
| | <img src="{{image_url}}" alt="{{title}}" class="card-img-top" height="200"> |
| | <div class="card-body"> |
| | <h5 class="card-title">{{title}}</h5> |
| | <p class="card-text">{{description}}</p> |
| | <a href="{{ebook_url}}" class="btn btn-primary">Read Comic</a> |
| | <a href="/comics/{{id}}/edit" class="btn btn-warning">Edit Comic</a> |
| | <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete-comic-modal">Delete Comic</button> |
| | </div> |
| | </div> |
| | </div> |
| | {{/ebooks}} |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <div class="modal fade" id="new-comic-modal" tabindex="-1" aria-labelledby="new-comic-modal-label" aria-hidden="true"> |
| | <div class="modal-dialog"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h5 class="modal-title" id="new-comic-modal-label">Create New Comic</h5> |
| | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| | </div> |
| | <div class="modal-body"> |
| | |
| | <form> |
| | <label for="title">Title:</label> |
| | <input type="text" class="form-control" id="title" placeholder="Enter title"><br> |
| | <label for="description">Description:</label> |
| | <textarea class="form-control" id="description" placeholder="Enter description" rows="3"></textarea><br> |
| | <label for="image">Image URL:</label> |
| | <input type="text" class="form-control" id="image" placeholder="Enter image URL"><br> |
| | <button type="submit" class="btn btn-primary">Create Comic</button> |
| | </form> |
| | </div> |
| | <div class="modal-footer"> |
| | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="modal fade" id="delete-comic-modal" tabindex="-1" aria-labelledby="delete-comic-modal-label" aria-hidden="true"> |
| | <div class="modal-dialog"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h5 class="modal-title" id="delete-comic-modal-label">Delete Comic</h5> |
| | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| | </div> |
| | <div class="modal-body"> |
| | <p>Are you sure you want to delete this comic?</p> |
| | </div> |
| | <div class="modal-footer"> |
| | <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Delete</button> |
| | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main></body></html> |
