Hugging Face's logo

Spaces:
AiDeveloper1
/
Rss
Sleeping

App Files Community
AiDeveloper1 commited on
Commit
beb6417
·
verified ·
1 Parent(s): 566b26a

Upload 4 files

Browse files
Files changed (4) hide show
  1. templates/home.html +289 -0
  2. templates/post.html +234 -0
  3. templates/review.html +227 -0
  4. templates/scheduled.html +219 -0
templates/home.html ADDED
@@ -0,0 +1,289 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Home - Social Media Scheduler</title>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <!-- Bootstrap 5 CDN -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
12
+
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ background-color: #f8f9fa;
17
+ }
18
+
19
+ /* Loader Styles */
20
+ #ftco-loader {
21
+ align-items: center;
22
+ background-color: #ffffff;
23
+ display: flex;
24
+ height: 100vh;
25
+ justify-content: center;
26
+ left: 0;
27
+ position: fixed;
28
+ top: 0;
29
+ width: 100%;
30
+ z-index: 999999;
31
+ }
32
+
33
+ .loader {
34
+ position: relative;
35
+ }
36
+
37
+ .loader .loader-box {
38
+ display: flex;
39
+ justify-self: center;
40
+ align-items: center;
41
+ margin: auto;
42
+ transition: all 0.9s ease-in-out;
43
+ }
44
+
45
+ .spinner {
46
+ width: 40px;
47
+ height: 40px;
48
+ border: 4px solid #000000;
49
+ border-top-color: transparent;
50
+ border-radius: 50%;
51
+ animation: spin 1s linear infinite;
52
+ }
53
+
54
+ @keyframes spin {
55
+ to {
56
+ transform: rotate(360deg);
57
+ }
58
+ }
59
+
60
+ /* Rest of your CSS remains unchanged */
61
+ .platform-status {
62
+ background-color: #fff;
63
+ border-radius: 10px;
64
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
65
+ padding: 20px;
66
+ margin-bottom: 20px;
67
+ border-top: 5px solid #0A66C2;
68
+ display: flex;
69
+ justify-content: center;
70
+ flex-direction: column;
71
+ align-items: center;
72
+ text-align: center;
73
+ transition: all .3s ease;
74
+ }
75
+
76
+ .platform-status:hover {
77
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
78
+ }
79
+
80
+ .btn-custom {
81
+ min-width: 180px;
82
+ }
83
+
84
+ .btn-connect {
85
+ background-color: #0A66C2;
86
+ color: #fff;
87
+ }
88
+
89
+ .btn-connect:hover {
90
+ background-color: #0A66C2;
91
+ }
92
+
93
+ .icon {
94
+ border-bottom: 1px solid #f2f2f2;
95
+ width: 100%;
96
+ padding: 30px 0px;
97
+ }
98
+
99
+ .icon i {
100
+ font-size: 50px;
101
+ color: #0A66C2;
102
+ }
103
+
104
+ .linkedin {
105
+ margin: 20px auto;
106
+ font-size: 20px;
107
+ color: #333333;
108
+ font-weight: 600;
109
+ }
110
+
111
+ .submit_btn {
112
+ background-color: green;
113
+ color: white;
114
+ padding: 6px 16px 7px;
115
+ border: none;
116
+ border-radius: 25px;
117
+ cursor: pointer;
118
+ font-size: 15px;
119
+ transition: background-color 0.3s ease;
120
+ text-decoration: none !important;
121
+ }
122
+
123
+ .submit_btn:hover {
124
+ background-color: transparent;
125
+ color: green;
126
+ border: 1px solid green;
127
+ }
128
+
129
+ .connected {
130
+ color: green !important;
131
+ transition: background-color 0.3s ease;
132
+ font-size: 14px;
133
+ padding: 6px 16px 9px;
134
+ border-radius: 25px;
135
+ text-decoration: none;
136
+ margin: 10px 0px;
137
+ }
138
+
139
+ .connected_btn {
140
+ background-color: green;
141
+ color: #fff;
142
+ transition: background-color 0.3s ease;
143
+ font-size: 14px;
144
+ padding: 6px 16px 9px;
145
+ border-radius: 25px;
146
+ text-decoration: none;
147
+ margin: 10px 0px;
148
+ }
149
+
150
+ .connected_btn:hover {
151
+ background-color: transparent;
152
+ color: green;
153
+ border: 1px solid green;
154
+ }
155
+
156
+ .not-connected {
157
+ color: #dc3545 !important;
158
+ transition: background-color 0.3s ease;
159
+ font-size: 14px;
160
+ padding: 6px 16px 9px;
161
+ border-radius: 25px;
162
+ text-decoration: none;
163
+ margin: 10px 0px;
164
+ }
165
+
166
+ .disconnected {
167
+ background-color: #dc3545;
168
+ color: #ffffff;
169
+ transition: background-color 0.3s ease;
170
+ font-size: 14px;
171
+ padding: 6px 16px 9px;
172
+ border-radius: 25px;
173
+ text-decoration: none;
174
+ margin: 10px 0px;
175
+ }
176
+
177
+ .disconnected:hover {
178
+ background-color: transparent;
179
+ color: #dc3545;
180
+ border: 1px solid #dc3545;
181
+ }
182
+
183
+ .social_media {
184
+ padding: 80px 0px;
185
+ }
186
+
187
+ .back_btn {
188
+ background-color: #f8f9fa;
189
+ color: green;
190
+ padding: 6px 16px 9px;
191
+ border: 1px solid green;
192
+ border-radius: 25px;
193
+ cursor: pointer;
194
+ font-size: 14px;
195
+ transition: background-color 0.3s ease;
196
+ margin: 10px 0px;
197
+ }
198
+
199
+ .back_btn:hover {
200
+ background-color: green;
201
+ color: #fff;
202
+ border: 1px solid #fff;
203
+ }
204
+ </style>
205
+ </head>
206
+
207
+ <body>
208
+ <!-- Loader -->
209
+ <div id="ftco-loader">
210
+ <div class="loader">
211
+ <div class="loader-box">
212
+ <div class="spinner"></div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Main Content -->
218
+ <div id="content" style="display: none;">
219
+ <section class="social_media">
220
+ <div class="container">
221
+ <h1 class="text-center mb-5">Social Media Scheduler</h1>
222
+ <div class="row justify-content-center align-items-center">
223
+ <div class="col-lg-4 col-md-6">
224
+ <div class="platform-status">
225
+ <div class="icon">
226
+ <i class="fab fa-linkedin"></i>
227
+ </div>
228
+ <h2 class="linkedin">LinkedIn</h2>
229
+ <div style="display: flex;align-items: center;">
230
+ {% if connected_platforms.linkedin %}
231
+ <p class="connected ">Connected ✓ </p>
232
+ <a href="{{ url_for('disconnect', platform='linkedin') }}" class="ms-2 btn disconnected ">Disconnect</a>
233
+ {% else %}
234
+ <p class=" not-connected">Not Connected</p>
235
+ <a href="{{ url_for('linkedin_auth') }}" class="ms-2 btn submit_btn">Connect</a>
236
+ {% endif %}
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="col-lg-4 col-md-6">
242
+ <div class="platform-status">
243
+ <div class="icon">
244
+ <i class="fab fa-x-twitter text-dark"></i>
245
+ </div>
246
+ <h2 class="linkedin">Twitter</h2>
247
+ <div style="display: flex;align-items: center;">
248
+ {% if connected_platforms.twitter %}
249
+ <p class="connected ">Connected ✓ </p>
250
+ <a href="{{ url_for('disconnect', platform='twitter') }}" class="ms-2 btn disconnected ">Disconnect</a>
251
+ {% else %}
252
+ <p class=" not-connected">Not Connected</p>
253
+ <a href="{{ url_for('twitter_auth') }}" class="ms-2 btn submit_btn">Connect</a>
254
+ {% endif %}
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="text-center mt-4">
261
+ {% if not (connected_platforms.linkedin and connected_platforms.twitter) %}
262
+ <a href="{{ url_for('connect_all') }}" class="btn connected_btn me-2">Connect All Platforms</a>
263
+ {% endif %}
264
+
265
+ {% if connected_platforms.linkedin or connected_platforms.twitter %}
266
+ <a href="{{ url_for('create_post') }}" class="btn back_btn ">Go to Post</a>
267
+ {% endif %}
268
+ </div>
269
+ </div>
270
+ </section>
271
+ </div>
272
+
273
+ <!-- Loader Script -->
274
+ <script>
275
+ window.addEventListener("load", () => {
276
+ const loader = document.getElementById("ftco-loader");
277
+ const content = document.getElementById("content");
278
+ setTimeout(() => {
279
+ loader.style.display = "none";
280
+ content.style.display = "block";
281
+ }, 1000);
282
+ });
283
+ </script>
284
+
285
+ <!-- Bootstrap JS -->
286
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
287
+ </body>
288
+
289
+ </html>
templates/post.html ADDED
@@ -0,0 +1,234 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Schedule RSS Posts</title>
6
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9
+
10
+
11
+ <script>
12
+ function addRssField() {
13
+ const container = document.getElementById('rss-container');
14
+ const newField = document.createElement('div');
15
+ newField.className = "input-group mb-3";
16
+ newField.innerHTML = `
17
+ <input type="text" class="form-control" name="rss_urls" placeholder="RSS Feed URL" required>
18
+ <button type="button" class="btn minus_btn" onclick="this.parentElement.remove()">
19
+ <i class="fas fa-minus"></i></button>
20
+ `;
21
+ container.appendChild(newField);
22
+ }
23
+ </script>
24
+ <style>
25
+ body {
26
+ font-family: 'Inter', sans-serif;
27
+ }
28
+ .form_section{
29
+ padding: 50px 0px;
30
+ }
31
+
32
+ .plus_btn,
33
+ .minus_btn {
34
+ border: none;
35
+ background-color: #4CAF50;
36
+ color: white;
37
+ padding: 6px 14px;
38
+ border-radius: 5px;
39
+ cursor: pointer;
40
+ font-size: 13px;
41
+
42
+ }
43
+ .minus_btn{
44
+ background-color: #dc3545;
45
+
46
+ }
47
+ .minus_btn:hover
48
+ {
49
+ background-color: #d33241;
50
+ color: white;
51
+ }
52
+ .plus_btn:hover
53
+ {
54
+ background-color: #3ea141;
55
+ color: white;
56
+ }
57
+ .form-label{
58
+ color: #222;
59
+ }
60
+ .form .form-control,
61
+ .form select{
62
+ font-size: 15px;
63
+ color: #222;
64
+ box-shadow: none !important;
65
+ }
66
+ .form .form-control::placeholder{
67
+ font-size: 15px;
68
+ color: #999;
69
+ }
70
+ .submit_btn{
71
+ background-color: #75b798;
72
+ color: white;
73
+ padding: 10px 20px;
74
+ border: none;
75
+ border-radius: 5px;
76
+ cursor: pointer;
77
+ font-size: 15px;
78
+ transition: background-color 0.3s ease;
79
+
80
+ }
81
+ .submit_btn:hover{
82
+ background-color: #70c79e;
83
+ color: white;
84
+ }
85
+ .back_btn{
86
+ background-color: #f8f9fa;
87
+ color: #70c79e;
88
+ padding: 8px 20px;
89
+ border: 1px solid #70c79e;
90
+ border-radius: 5px;
91
+ cursor: pointer;
92
+ font-size: 15px;
93
+ transition: background-color 0.3s ease;
94
+ margin-top: 20px;
95
+ margin-bottom: 20px;
96
+
97
+ }
98
+ .back_btn:hover{
99
+ background-color: #70c79f;
100
+ color: #fff;
101
+
102
+
103
+ }
104
+ /* loader css */
105
+ #ftco-loader {
106
+ align-items: center;
107
+ background-color: #ffffff;
108
+ display: flex;
109
+ height: 100vh;
110
+ justify-content: center;
111
+ left: 0;
112
+ position: fixed;
113
+ top: 0;
114
+ width: 100%;
115
+ z-index: 999999;
116
+ }
117
+
118
+ .loader {
119
+ position: relative;
120
+ }
121
+
122
+ .loader .loader-box {
123
+ display: flex;
124
+ justify-self: center;
125
+ align-items: center;
126
+ margin: auto;
127
+ transition: all 0.9s ease-in-out;
128
+ }
129
+
130
+ .spinner {
131
+ width: 40px;
132
+ height: 40px;
133
+ border: 4px solid #000000;
134
+ border-top-color: transparent;
135
+ border-radius: 50%;
136
+ animation: spin 1s linear infinite;
137
+ }
138
+
139
+ @keyframes spin {
140
+ to {
141
+ transform: rotate(360deg);
142
+ }
143
+ }
144
+
145
+ </style>
146
+ </head>
147
+ <body class="bg-light" id="content">
148
+
149
+ <!-- loader -->
150
+ <div id="ftco-loader">
151
+ <div class="loader">
152
+ <div class="loader-box">
153
+ <div class="spinner"></div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <section class="form_section">
158
+ <div class="container ">
159
+ <h1 class="text-center mb-4">Schedule RSS Posts</h1>
160
+ <div class="row">
161
+ <div class="col-lg-6 mx-auto">
162
+ <form method="POST" class="bg-white p-4 shadow rounded form">
163
+ <div id="rss-container">
164
+ <label class="form-label">RSS Feed URL:</label>
165
+ <div class="input-group mb-3">
166
+ <input type="text" class="form-control" name="rss_urls" placeholder="RSS Feed URL" required>
167
+ <button type="button" class="btn plus_btn" onclick="addRssField()">
168
+ <i class="fas fa-plus"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="mb-3">
174
+ <label class="form-label">Number of Posts per Day:</label>
175
+ <input type="number" class="form-control" name="posts_per_day" max="15" placeholder="Number of Posts per Day" required>
176
+ </div>
177
+
178
+ <div class="mb-3">
179
+ <label class="form-label">Schedule Type:</label>
180
+ <select class="form-select form-control" name="schedule_type">
181
+ <option value="daily">Daily</option>
182
+ <option value="weekly">Weekly (5 posts/day × 7 days)</option>
183
+ <option value="monthly">Monthly (5 posts/day × 30 days)</option>
184
+ </select>
185
+ </div>
186
+
187
+ <div class="mb-3">
188
+ <label class="form-label">First Post Time:</label>
189
+ <input type="datetime-local" class="form-control" name="first_post_time" required>
190
+ </div>
191
+
192
+ <div class="mb-3">
193
+ <label class="form-label">Frequency Between Posts:</label>
194
+ <label for="frequency" class="form-label">Enter frequency (in minutes, must be greater than 30):</label><br>
195
+ <input type="number" id="frequency" class="form-control" name="frequency" min="30 " placeholder="Enter frequency in minutes">
196
+
197
+ </div>
198
+
199
+ <div class="d-grid">
200
+ <input type="submit" class="btn submit_btn" value="Generate Posts">
201
+ </div>
202
+ </form>
203
+
204
+ <div class="text-center mt-4">
205
+ <a href="{{ url_for('scheduled_posts') }}" class="btn submit_btn me-2">View Scheduled Posts</a>
206
+ <a href="{{ url_for('home') }}" class="btn back_btn">Back</a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+
212
+ </div>
213
+
214
+
215
+ </section>
216
+
217
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
218
+ <script>
219
+ window.addEventListener("load", () => {
220
+ const loader = document.getElementById("ftco-loader");
221
+ const content = document.getElementById("content");
222
+
223
+
224
+ setTimeout(() => {
225
+ loader.style.display = "none";
226
+ content.style.display = "block";
227
+ }, 2000);
228
+ });
229
+
230
+
231
+
232
+ </script>
233
+ </body>
234
+ </html>
templates/review.html ADDED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Review Posts</title>
6
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ font-family: 'Inter', sans-serif;
11
+
12
+ }
13
+ .table img {
14
+ max-width: 80px;
15
+ height: 80px;
16
+ border-radius: 5px;
17
+ object-fit: cover;
18
+ }
19
+ .section-padding {
20
+ padding: 40px 0;
21
+ }
22
+ .submit-btn {
23
+ background-color: #75b798;
24
+ color: #fff;
25
+ border: none;
26
+ padding: 7px 16px 8px;
27
+ border-radius: 5px;
28
+ font-size: 15px;
29
+ border-radius: 25px;
30
+ }
31
+ .submit-btn:hover {
32
+ background-color:transparent;
33
+ color: #70c79e;
34
+ border: 1px solid #70c79e;
35
+ }
36
+ .back-btn {
37
+ margin-top: 20px;
38
+ display: inline-block;
39
+ color: #70c79e;
40
+ text-decoration: none;
41
+ }
42
+ .back-btn:hover {
43
+ text-decoration: underline;
44
+ color: #58ad87;
45
+ }
46
+ .review_section{
47
+ padding:80px 0px;
48
+ }
49
+
50
+ .table>thead {
51
+ vertical-align: bottom;
52
+ border: 1px solid #f2f2f2;
53
+ }
54
+ .table{
55
+ margin-top: 30px;
56
+
57
+ }
58
+ .table tr,
59
+ .table td{
60
+ text-align: center;
61
+ font-size: 15px;
62
+ }
63
+ .back_btn{
64
+ background-color: #fff;
65
+ color: #70c79e;
66
+ padding: 7px 16px 8px;
67
+ border: 1px solid #70c79e;
68
+ cursor: pointer;
69
+ font-size: 15px;
70
+ transition: background-color 0.3s ease;
71
+ text-decoration: none;
72
+ border-radius: 25px;
73
+ }
74
+ .back_btn:hover{
75
+ background-color: #70c79f;
76
+ color: #fff;
77
+
78
+
79
+ }
80
+ .table-responsive {
81
+
82
+ -webkit-overflow-scrolling: touch;
83
+ max-height: 350px;
84
+ overflow-y: auto;
85
+ }
86
+ .table>thead {
87
+ vertical-align: bottom;
88
+ border: 1px solid #f2f2f2;
89
+ position: sticky;
90
+ top: 0;
91
+ padding: 0;
92
+
93
+ }
94
+
95
+ .table>thead th {
96
+ background-color: #75b798;
97
+ }
98
+
99
+ /* loader css */
100
+ #ftco-loader {
101
+ align-items: center;
102
+ background-color: #ffffff;
103
+ display: flex;
104
+ height: 100vh;
105
+ justify-content: center;
106
+ left: 0;
107
+ position: fixed;
108
+ top: 0;
109
+ width: 100%;
110
+ z-index: 999999;
111
+ }
112
+
113
+ .loader {
114
+ position: relative;
115
+ }
116
+
117
+ .loader .loader-box {
118
+ display: flex;
119
+ justify-self: center;
120
+ align-items: center;
121
+ margin: auto;
122
+ transition: all 0.9s ease-in-out;
123
+ }
124
+
125
+ .spinner {
126
+ width: 40px;
127
+ height: 40px;
128
+ border: 4px solid #000000;
129
+ border-top-color: transparent;
130
+ border-radius: 50%;
131
+ animation: spin 1s linear infinite;
132
+ }
133
+
134
+ @keyframes spin {
135
+ to {
136
+ transform: rotate(360deg);
137
+ }
138
+ }
139
+
140
+ </style>
141
+ </head>
142
+ <body id="content">
143
+
144
+ <!-- loader -->
145
+ <div id="ftco-loader">
146
+ <div class="loader">
147
+ <div class="loader-box">
148
+ <div class="spinner"></div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <section class="review_section">
154
+ <div class="container">
155
+ <div class="row">
156
+ <div class="col-lg-12 mx-auto">
157
+
158
+
159
+ <h1 class="mb-4 text-center">Review Generated Posts</h1>
160
+
161
+ <div class="mb-3">
162
+ <p><strong>First Post Time:</strong> {{ first_post_time }}</p>
163
+ <p><strong>Frequency:</strong> {{ frequency }} minutes</p>
164
+ </div>
165
+
166
+ <form method="POST">
167
+ <div class="table-responsive">
168
+ <table class="table table-bordered ">
169
+ <thead class="table-light">
170
+ <tr>
171
+ <th>Platform</th>
172
+ <th>Description</th>
173
+ <th>Image</th>
174
+ </tr>
175
+ </thead>
176
+ <tbody>
177
+ {% for post in posts %}
178
+ <tr>
179
+ <td>{{ post.platform|capitalize }}</td>
180
+ <td>{{ post.text }}</td>
181
+ <td>
182
+ {% if post.image_url %}
183
+ <img src="{{ post.image_url }}" alt="Post Image" class="img-fluid mb-1">
184
+
185
+
186
+ {% else %}
187
+ <span class="text-muted">No image</span>
188
+ {% endif %}
189
+ </td>
190
+ </tr>
191
+ {% endfor %}
192
+ </tbody>
193
+ </table>
194
+ </div>
195
+
196
+ <div class="text-center mt-3">
197
+ <input type="submit" value="Schedule All Posts" class="btn submit-btn">
198
+ <a href="{{ url_for('create_post') }}" class="back_btn ms-2">← Back to Create Post</a>
199
+ </div>
200
+ </form>
201
+
202
+ <div class="text-center">
203
+
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
211
+ <script>
212
+ window.addEventListener("load", () => {
213
+ const loader = document.getElementById("ftco-loader");
214
+ const content = document.getElementById("content");
215
+
216
+
217
+ setTimeout(() => {
218
+ loader.style.display = "none";
219
+ content.style.display = "block";
220
+ }, 2000);
221
+ });
222
+
223
+
224
+
225
+ </script>
226
+ </body>
227
+ </html>
templates/scheduled.html ADDED
@@ -0,0 +1,219 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Scheduled Posts</title>
6
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
7
+ <style>
8
+ .img-thumbnail {
9
+ max-width: 80px;
10
+ height: 80px;
11
+ border-radius: 5px;
12
+ object-fit: cover;
13
+ }
14
+ .back_btn{
15
+ background-color: #fff;
16
+ color: #70c79e;
17
+ padding: 7px 16px 8px;
18
+ border: 1px solid #70c79e;
19
+ cursor: pointer;
20
+ font-size: 15px;
21
+ transition: background-color 0.3s ease;
22
+ text-decoration: none;
23
+ border-radius: 25px;
24
+ }
25
+ .back_btn:hover{
26
+ background-color: #70c79f;
27
+ color: #fff;
28
+
29
+
30
+ }
31
+ .table-responsive td,
32
+ .table-responsive th{
33
+ text-align: center;
34
+ }
35
+ .table-responsive {
36
+ -webkit-overflow-scrolling: touch;
37
+ max-height: 500px;
38
+ overflow-y: auto;
39
+ }
40
+ .table-responsive td, .table-responsive th {
41
+ vertical-align: baseline;
42
+ text-align: center;
43
+ }
44
+ .table-responsive tr:hover{
45
+ background-color: red;
46
+ }
47
+ .table>thead {
48
+ vertical-align: bottom;
49
+ border: 1px solid #f2f2f2;
50
+ position: sticky;
51
+ top: 0;
52
+ padding: 0;
53
+ }
54
+ .table>thead th{
55
+ background-color: #75b798;
56
+
57
+ }
58
+
59
+ /* loader css */
60
+ #ftco-loader {
61
+ align-items: center;
62
+ background-color: #ffffff;
63
+ display: flex;
64
+ height: 100vh;
65
+ justify-content: center;
66
+ left: 0;
67
+ position: fixed;
68
+ top: 0;
69
+ width: 100%;
70
+ z-index: 999999;
71
+ }
72
+
73
+ .loader {
74
+ position: relative;
75
+ }
76
+
77
+ .loader .loader-box {
78
+ display: flex;
79
+ justify-self: center;
80
+ align-items: center;
81
+ margin: auto;
82
+ transition: all 0.9s ease-in-out;
83
+ }
84
+
85
+ .spinner {
86
+ width: 40px;
87
+ height: 40px;
88
+ border: 4px solid #000000;
89
+ border-top-color: transparent;
90
+ border-radius: 50%;
91
+ animation: spin 1s linear infinite;
92
+ }
93
+
94
+ @keyframes spin {
95
+ to {
96
+ transform: rotate(360deg);
97
+ }
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="bg-light" id="content">
102
+ <!-- loader -->
103
+ <div id="ftco-loader">
104
+ <div class="loader">
105
+ <div class="loader-box">
106
+ <div class="spinner"></div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="container py-5">
112
+ <h1 class="text-center mb-4">Scheduled Posts</h1>
113
+ <div class="row">
114
+ <div class="col-lg-12 mx-auto">
115
+ <div class="mb-5">
116
+ <h2 class="mb-3">LinkedIn Posts</h2>
117
+ {% if linkedin_posts %}
118
+ <div class="table-responsive">
119
+ <table class="table table-bordered table-striped align-middle">
120
+ <thead class="table-secondary">
121
+ <tr>
122
+ <th style="width:20%;">Platform</th>
123
+ <th style="width:40%;">Description</th>
124
+ <th style="width:20%;">Image URL</th>
125
+ <th style="width:20%;">Schedule Time</th>
126
+ </tr>
127
+ </thead>
128
+ <tbody>
129
+ {% for post in linkedin_posts %}
130
+ <tr>
131
+ <td style="width:20%;">{{ post.platform|capitalize }}</td>
132
+ <td style="width:40%;">{{ post.text }}</td>
133
+ <td style="width:20%;">
134
+ {% if post.image_url %}
135
+ <img src="{{ post.image_url }}" alt="Post Image" class="img-thumbnail mb-1">
136
+ <!-- <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"> -->
137
+
138
+ <!-- <p style=" word-break: break-word;">{{ post.image_url }}</p> -->
139
+ {% else %}
140
+ No image
141
+ {% endif %}
142
+ </td>
143
+ <td style="width:20%;">{{ post.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</td>
144
+ </tr>
145
+ {% endfor %}
146
+ </tbody>
147
+ </table>
148
+ </div>
149
+ {% else %}
150
+ <div class="alert alert-warning">No LinkedIn posts scheduled.</div>
151
+ {% endif %}
152
+ </div>
153
+
154
+ <div class="mb-5">
155
+ <h2 class="mb-3">Twitter Posts</h2>
156
+ {% if twitter_posts %}
157
+ <div class="table-responsive">
158
+ <table class="table table-bordered table-striped align-middle">
159
+ <thead class="table-secondary">
160
+ <tr>
161
+ <th style="width:20%;">Platform</th>
162
+ <th style="width:40%;">Description</th>
163
+ <th style="width:20%;">Image URL</th>
164
+ <th style="width:20%;">Schedule Time</th>
165
+ </tr>
166
+ </thead>
167
+ <tbody>
168
+ {% for post in twitter_posts %}
169
+ <tr>
170
+ <td style="width:20%;">{{ post.platform|capitalize }}</td>
171
+ <td style="width:40%;">{{ post.text }}</td>
172
+ <td style="width:20%;">
173
+ {% if post.image_url %}
174
+ <img src="{{ post.image_url }}" alt="Post Image" class="img-thumbnail mb-1">
175
+ <!-- <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"> -->
176
+ <!-- <p style=" word-break: break-word;">{{ post.image_url }}</p> -->
177
+ {% else %}
178
+ No image
179
+ {% endif %}
180
+ </td>
181
+ <td style="width:20%;">{{ post.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</td>
182
+ </tr>
183
+ {% endfor %}
184
+ </tbody>
185
+ </table>
186
+ </div>
187
+ {% else %}
188
+ <div class="alert alert-warning">No Twitter posts scheduled.</div>
189
+ {% endif %}
190
+ </div>
191
+
192
+ <div class="text-center">
193
+ <a href="{{ url_for('home') }}" class="btn back_btn">Back to Home</a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+
199
+ </div>
200
+
201
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
202
+
203
+ <script>
204
+ window.addEventListener("load", () => {
205
+ const loader = document.getElementById("ftco-loader");
206
+ const content = document.getElementById("content");
207
+
208
+
209
+ setTimeout(() => {
210
+ loader.style.display = "none";
211
+ content.style.display = "block";
212
+ }, 2000);
213
+ });
214
+
215
+
216
+
217
+ </script>
218
+ </body>
219
+ </html>