-
Notifications
You must be signed in to change notification settings - Fork 242
Expand file tree
/
Copy pathblog.html.bak
More file actions
176 lines (149 loc) · 7.14 KB
/
blog.html.bak
File metadata and controls
176 lines (149 loc) · 7.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgriTech Blog</title>
<link rel="stylesheet" href="blog.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<section class="agritech-blog">
<div class="blog-container">
<!-- Blog Header with Favorites -->
<div class="blog-header">
<div class="header-actions">
<a href="index.html" class="home-btn">
<i class="fas fa-arrow-left"></i> Back to Home
</a>
<button class="theme-toggle" id="themeToggle">
<span id="themeIcon">☀️</span>
<span id="themeText">Light Mode</span>
</button>
<a href="favorites.html" class="favorites-link">
<i class="fas fa-heart"></i>
<span>My Favorites</span>
<span class="favorite-count">0</span>
</a>
</div>
<h1 class="blog-title">🌱 AgriTech Blog — Farming Tips & Insights</h1>
<p class="blog-subtitle">Stay updated with the latest in agriculture, technology, and sustainability.
</p>
</div>
<!-- Search and Filter Section -->
<div class="search-filter-section">
<input type="text" class="search-bar" placeholder="Search blog posts..." id="searchInput">
<div class="category-filters">
<button class="filter-btn active" data-category="all">All Posts</button>
<button class="filter-btn" data-category="farming-tips">Farming Tips</button>
<button class="filter-btn" data-category="technology">Technology</button>
<button class="filter-btn" data-category="market-trends">Market Trends</button>
<button class="filter-btn" data-category="sustainability">Sustainability</button>
<button class="filter-btn" data-category="business">Business</button>
</div>
</div>
<!-- Empty State for Blogs -->
<div id="empty-blog-state" class="empty-state">
<div>🌾</div>
<h3>No blogs yet 🌱</h3>
<p>New insights will appear here once available.</p>
</div>
<!-- Blog Grid -->
<div class="blog-grid" id="blogGrid">
<!-- Blog cards will be populated by JavaScript -->
</div>
<!-- Load More Button -->
<div class="load-more-container">
<button class="load-more-btn" id="loadMoreBtn">Load More Posts</button>
</div>
</div>
</section>
<!-- Modal for Blog Post with Favorite Button -->
<div id="blogModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modalTitle"></h2>
<div class="icons">
<button class="close">×</button>
<button
class="modal-favorite-btn"
id="modalFavoriteBtn"
aria-label="Add blog to favorites"
aria-pressed="false"
>
<i class="far fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="modal-meta">
<span id="modalAuthor"><i class="fas fa-user"></i> </span>
<span id="modalDate"><i class="far fa-calendar-alt"></i> </span>
</div>
<span class="modal-category" id="modalCategory"></span>
</div>
<div class="modal-body">
<img class="modal-image" id="modalImage" alt="Blog post image">
<div class="modal-text" id="modalContent"></div>
</div>
</div>
</div>
<div id="noResultsPopup" class="no-results-popup">
<div class="popup-card">
<i class="fas fa-search"></i>
<h3>No Posts Found</h3>
<p>Try changing keywords or selecting a different category.</p>
</div>
</div>
<!-- Floating Action Button for Creating Post -->
<button class="fab-btn" id="createPostBtn" title="Create New Post">
<i class="fas fa-plus"></i>
</button>
<!-- Modal for Creating New Post -->
<div id="createPostModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Create New Post</h2>
<button class="close" id="closeCreateModal">×</button>
</div>
<div class="modal-body">
<form id="createPostForm" class="create-post-form">
<div class="form-group">
<label for="postTitle">Title</label>
<input type="text" id="postTitle" required placeholder="Enter post title">
</div>
<div class="form-group">
<label for="postCategory">Category</label>
<select id="postCategory" required>
<option value="farming-tips">Farming Tips</option>
<option value="technology">Technology</option>
<option value="market-trends">Market Trends</option>
<option value="sustainability">Sustainability</option>
<option value="business">Business</option>
</select>
</div>
<div class="form-group">
<label for="postDescription">Short Description</label>
<textarea id="postDescription" required placeholder="Brief summary of your post" rows="2"></textarea>
</div>
<div class="form-group">
<label for="postImage">Image URL</label>
<input type="url" id="postImage" required placeholder="https://example.com/image.jpg">
</div>
<div class="form-group">
<label for="postContent">Content (HTML supported)</label>
<textarea id="postContent" required placeholder="Write your full article here..." rows="6"></textarea>
</div>
<div class="form-group">
<label for="postAuthor">Author Name</label>
<input type="text" id="postAuthor" required placeholder="Your name">
</div>
<button type="submit" class="submit-btn">Publish Post</button>
</form>
</div>
</div>
</div>
<!-- JavaScript Files -->
<script src="js/features/favorites.js"></script>
<script src="blog.js"></script>
<script src="auth.js"></script>
</body>
</html>