Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Scheduled Posts</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| .img-thumbnail { | |
| max-width: 80px; | |
| height: 80px; | |
| border-radius: 5px; | |
| object-fit: cover; | |
| } | |
| .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 td, | |
| .table-responsive th{ | |
| text-align: center; | |
| } | |
| .table-responsive { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .table-responsive td, .table-responsive th { | |
| vertical-align: baseline; | |
| text-align: center; | |
| } | |
| .table-responsive tr:hover{ | |
| background-color: red; | |
| } | |
| .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 class="bg-light" id="content"> | |
| <!-- loader --> | |
| <div id="ftco-loader"> | |
| <div class="loader"> | |
| <div class="loader-box"> | |
| <div class="spinner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container py-5"> | |
| <h1 class="text-center mb-4">Scheduled Posts</h1> | |
| <div class="row"> | |
| <div class="col-lg-12 mx-auto"> | |
| <div class="mb-5"> | |
| <h2 class="mb-3">LinkedIn Posts</h2> | |
| {% if linkedin_posts %} | |
| <div class="table-responsive"> | |
| <table class="table table-bordered table-striped align-middle"> | |
| <thead class="table-secondary"> | |
| <tr> | |
| <th style="width:20%;">Platform</th> | |
| <th style="width:40%;">Description</th> | |
| <th style="width:20%;">Image URL</th> | |
| <th style="width:20%;">Schedule Time</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for post in linkedin_posts %} | |
| <tr> | |
| <td style="width:20%;">{{ post.platform|capitalize }}</td> | |
| <td style="width:40%;">{{ post.text }}</td> | |
| <td style="width:20%;"> | |
| {% if post.image_url %} | |
| <img src="{{ post.image_url }}" alt="Post Image" class="img-thumbnail mb-1"> | |
| <!-- <img src="https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D" alt="Post Image" class="img-thumbnail mb-1"> --> | |
| <!-- <p style=" word-break: break-word;">{{ post.image_url }}</p> --> | |
| {% else %} | |
| No image | |
| {% endif %} | |
| </td> | |
| <td style="width:20%;">{{ post.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| {% else %} | |
| <div class="alert alert-warning">No LinkedIn posts scheduled.</div> | |
| {% endif %} | |
| </div> | |
| <div class="mb-5"> | |
| <h2 class="mb-3">Twitter Posts</h2> | |
| {% if twitter_posts %} | |
| <div class="table-responsive"> | |
| <table class="table table-bordered table-striped align-middle"> | |
| <thead class="table-secondary"> | |
| <tr> | |
| <th style="width:20%;">Platform</th> | |
| <th style="width:40%;">Description</th> | |
| <th style="width:20%;">Image URL</th> | |
| <th style="width:20%;">Schedule Time</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for post in twitter_posts %} | |
| <tr> | |
| <td style="width:20%;">{{ post.platform|capitalize }}</td> | |
| <td style="width:40%;">{{ post.text }}</td> | |
| <td style="width:20%;"> | |
| {% if post.image_url %} | |
| <img src="{{ post.image_url }}" alt="Post Image" class="img-thumbnail mb-1"> | |
| <!-- <img src="https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D" alt="Post Image" class="img-thumbnail mb-1"> --> | |
| <!-- <p style=" word-break: break-word;">{{ post.image_url }}</p> --> | |
| {% else %} | |
| No image | |
| {% endif %} | |
| </td> | |
| <td style="width:20%;">{{ post.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| {% else %} | |
| <div class="alert alert-warning">No Twitter posts scheduled.</div> | |
| {% endif %} | |
| </div> | |
| <div class="text-center"> | |
| <a href="{{ url_for('home') }}" class="btn back_btn">Back to Home</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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> |