-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblog.html
273 lines (243 loc) · 8.94 KB
/
blog.html
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Blog</title>
<style>
/* General Body Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
color: #f4f4f4;
background: #111; /* Dark background */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
overflow-x: hidden;
}
/* Smooth Transition */
* {
transition: all 0.3s ease;
}
/* Background Image with Blur */
body::before {
content: ""; /* Create a pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Ensure it covers the full height of the viewport */
background-image: url('Screenshot 2025-01-22 234604.png'); /* Your image */
background-size: cover; /* Ensures the image covers the entire area */
background-position: center; /* Centers the background image */
z-index: -1; /* Place it behind the content */
background-repeat: no-repeat; /* Prevent repetition */
opacity: 0.3; /* Dimmed background */
filter: blur(8px); /* Blurred background */
}
/* Glass Effect for Header */
header {
background-color: rgba(13, 14, 15, 0.7); /* Slightly transparent background */
color: #fff;
padding: 1.5rem 2rem;
text-align: center;
border-radius: 20px;
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
width: 80%;
margin-top: 2rem;
font-size: 2.5rem;
font-weight: 600;
backdrop-filter: blur(10px); /* Glass effect (frosted glass) */
-webkit-backdrop-filter: blur(10px); /* For Safari */
border: 1px solid rgba(27, 27, 27, 0.7); /* Light border for added effect */
}
/* Blog Container */
.blog-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin-top: 3rem;
width: 100%;
}
/* Blog Post Styling */
.blog-post {
background: rgba(13, 14, 15, 0.7); /* Semi-transparent background */
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(6px); /* Blur effect */
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-post:hover {
transform: translateY(-10px); /* Hover effect */
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}
.blog-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
.blog-author {
color: #ccc;
font-size: 0.9rem;
margin-top: 1rem;
}
/* Floating Add Button */
.add-button {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #0078d4;
color: white;
border: none;
padding: 20px;
border-radius: 50%;
font-size: 1.8rem;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.add-button:hover {
background-color: #005a9e;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Modal Styling */
#blog-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px); /* Blur effect for modal background */
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-content {
background: rgba(24, 25, 26, 0.9);
padding: 2rem;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
color: white;
}
.modal-content input,
.modal-content textarea {
width: 100%;
margin-bottom: 1.2rem;
padding: 1rem;
border: 1px solid #0078d4;
border-radius: 8px;
background-color: #222;
color: white;
font-size: 1rem;
}
.modal-content button {
padding: 1rem 2rem;
border: none;
border-radius: 8px;
background-color: #0078d4;
color: white;
font-size: 1rem;
cursor: pointer;
}
.modal-content button:hover {
background-color: #005a9e;
}
.modal-content input:focus,
.modal-content textarea:focus {
border-color: #005a9e;
outline: none;
}
</style>
</head>
<body>
<header>
Interactive Blog
</header>
<div class="blog-container" id="blog-container">
<!-- Blog widgets will appear here -->
</div>
<button class="add-button" onclick="openModal()">+</button>
<!-- Modal for adding a blog -->
<div id="blog-modal">
<div class="modal-content">
<h2>Add Blog Post</h2>
<input type="text" id="blog-title" placeholder="Title" />
<textarea id="blog-content" placeholder="Content"></textarea>
<button onclick="addBlogPost()">Add Post</button>
</div>
</div>
<script>
const blogContainer = document.getElementById('blog-container');
const modal = document.getElementById('blog-modal');
const blogTitleInput = document.getElementById('blog-title');
const blogContentInput = document.getElementById('blog-content');
const exampleRecipes = [
{ title: 'Classic Pancakes', content: 'Mix flour, eggs, milk, and a pinch of salt. Cook on a hot griddle and serve with syrup.', author: 'John Doe' },
{ title: 'Spaghetti Aglio e Olio', content: 'Sauté garlic in olive oil, toss with cooked spaghetti, and sprinkle with parsley.', author: 'Jane Smith' },
{ title: 'Chocolate Chip Cookies', content: 'Combine butter, sugar, eggs, and chocolate chips. Bake at 375°F for 12 minutes.', author: 'Emily Johnson' },
{ title: 'Caesar Salad', content: 'Toss romaine lettuce with Caesar dressing, croutons, and grated Parmesan cheese.', author: 'Michael Brown' },
{ title: 'Grilled Cheese Sandwich', content: 'Butter two slices of bread, place cheese between them, and grill until golden brown.', author: 'Sarah Davis' },
];
const savedBlogs = JSON.parse(localStorage.getItem('blogs')) || exampleRecipes;
function renderBlogs() {
blogContainer.innerHTML = ''; // Clear existing blogs
savedBlogs.forEach((blog, index) => {
const blogPost = document.createElement('div');
blogPost.classList.add('blog-post');
blogPost.innerHTML = `
<div class="blog-title">${blog.title}</div>
<div class="blog-content">${blog.content}</div>
<div class="blog-author">Written by: ${blog.author}</div>
`;
blogContainer.appendChild(blogPost);
});
}
function openModal() {
modal.style.display = 'flex';
}
function closeModal() {
modal.style.display = 'none';
}
function addBlogPost() {
const title = blogTitleInput.value.trim();
const content = blogContentInput.value.trim();
if (title && content) {
const author = 'Anonymous';
const newBlog = { title, content, author };
savedBlogs.push(newBlog);
localStorage.setItem('blogs', JSON.stringify(savedBlogs));
renderBlogs();
blogTitleInput.value = '';
blogContentInput.value = '';
closeModal();
} else {
alert('Please fill out both fields!');
}
}
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
renderBlogs();
</script>
</body>
</html>