Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Review Posts</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .table img { | |
| max-width: 80px; | |
| height: 80px; | |
| border-radius: 5px; | |
| object-fit: cover; | |
| } | |
| .section-padding { | |
| padding: 40px 0; | |
| } | |
| .submit-btn { | |
| background-color: #75b798; | |
| color: #fff; | |
| border: none; | |
| padding: 7px 16px 8px; | |
| border-radius: 5px; | |
| font-size: 15px; | |
| border-radius: 25px; | |
| } | |
| .submit-btn:hover { | |
| background-color:transparent; | |
| color: #70c79e; | |
| border: 1px solid #70c79e; | |
| } | |
| .back-btn { | |
| margin-top: 20px; | |
| display: inline-block; | |
| color: #70c79e; | |
| text-decoration: none; | |
| } | |
| .back-btn:hover { | |
| text-decoration: underline; | |
| color: #58ad87; | |
| } | |
| .review_section{ | |
| padding:80px 0px; | |
| } | |
| .table>thead { | |
| vertical-align: bottom; | |
| border: 1px solid #f2f2f2; | |
| } | |
| .table{ | |
| margin-top: 30px; | |
| } | |
| .table tr, | |
| .table td{ | |
| text-align: center; | |
| font-size: 15px; | |
| } | |
| .back_btn{ | |
| background-color: #fff; | |
| color: #70c79e; | |
| padding: 7px 16px 8px; | |
| border: 1px solid #70c79e; | |
| cursor: pointer; | |
| font-size: 15px; | |
| transition: background-color 0.3s ease; | |
| text-decoration: none; | |
| border-radius: 25px; | |
| } | |
| .back_btn:hover{ | |
| background-color: #70c79f; | |
| color: #fff; | |
| } | |
| .table-responsive { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: 350px; | |
| overflow-y: auto; | |
| } | |
| .table>thead { | |
| vertical-align: bottom; | |
| border: 1px solid #f2f2f2; | |
| position: sticky; | |
| top: 0; | |
| padding: 0; | |
| } | |
| .table>thead th { | |
| background-color: #75b798; | |
| } | |
| /* loader css */ | |
| #ftco-loader { | |
| align-items: center; | |
| background-color: #ffffff; | |
| display: flex; | |
| height: 100vh; | |
| justify-content: center; | |
| left: 0; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 999999; | |
| } | |
| .loader { | |
| position: relative; | |
| } | |
| .loader .loader-box { | |
| display: flex; | |
| justify-self: center; | |
| align-items: center; | |
| margin: auto; | |
| transition: all 0.9s ease-in-out; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid #000000; | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body id="content"> | |
| <!-- loader --> | |
| <div id="ftco-loader"> | |
| <div class="loader"> | |
| <div class="loader-box"> | |
| <div class="spinner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="review_section"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-12 mx-auto"> | |
| <h1 class="mb-4 text-center">Review Generated Posts</h1> | |
| <div class="mb-3"> | |
| <p><strong>First Post Time:</strong> {{ first_post_time }}</p> | |
| <p><strong>Frequency:</strong> {{ frequency }} minutes</p> | |
| </div> | |
| <form method="POST"> | |
| <div class="table-responsive"> | |
| <table class="table table-bordered "> | |
| <thead class="table-light"> | |
| <tr> | |
| <th>Platform</th> | |
| <th>Description</th> | |
| <th>Image</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for post in posts %} | |
| <tr> | |
| <td>{{ post.platform|capitalize }}</td> | |
| <td>{{ post.text }}</td> | |
| <td> | |
| {% if post.image_url %} | |
| <img src="{{ post.image_url }}" alt="Post Image" class="img-fluid mb-1"> | |
| {% else %} | |
| <span class="text-muted">No image</span> | |
| {% endif %} | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="text-center mt-3"> | |
| <input type="submit" value="Schedule All Posts" class="btn submit-btn"> | |
| <a href="{{ url_for('create_post') }}" class="back_btn ms-2">← Back to Create Post</a> | |
| </div> | |
| </form> | |
| <div class="text-center"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| window.addEventListener("load", () => { | |
| const loader = document.getElementById("ftco-loader"); | |
| const content = document.getElementById("content"); | |
| setTimeout(() => { | |
| loader.style.display = "none"; | |
| content.style.display = "block"; | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |