computerclubkec · ajogseneca · Nov 19, 2024 · Nov 20, 2024
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -158,6 +158,14 @@
                     >Blog</a
                 >
             </li>
+            <li>
+                <a
+                    href="{{ '/create-blog' }}"
+                    class="md:m-2 lg:m-4 sm:p-4 flex items-center hover:text-[#023047]"
+                    id="blog-page"
+                    >Create Blog Post</a
+                >
+            </li>
         </ul>
         <div>
             <a
@@ -317,6 +325,13 @@
                 >Blog</a
             >
         </li>
+        <li>
+            <a
+                href="{{ '/create-blog' }}"
+                class="m-2 px-4 py-1 flex items-center hover:text-[#023047]"
+                >Create Blog Post</a
+            >
+        </li>
         <li>
             <a
                 href="{{ '/contact' }}"

diff --git a/_layouts/blog-post.html b/_layouts/blog-post.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      {% include header.html %}
+      <style>
+         /* Blog header styles */
+         .blog-header {
+         background-color: #f8f9fa; 
+         color: #333333; 
+         text-align: center;
+         padding: 2.5rem 0;
+         }
+         .blog-header h2 {
+         font-size: 2.5rem;
+         font-weight: bold;
+         margin: 0;
+         }
+         .blog-header p {
+         font-size: 1rem;
+         margin-top: 0.5rem;
+         }
+         /* Blog card styles */
+         .blog-card {
+         background-color: rgb(255, 255, 255);
+         border: 2px solid #000000; 
+         border-radius: 10px; 
+         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+         padding: 1.5rem; 
+         max-width: 800px; 
+         margin: 2rem auto; 
+         }
+         .blog-card img {
+         border-radius: 8px;
+         margin: 2rem auto;
+         max-height: 400px;
+         max-width: 100%; 
+         object-fit: contain; 
+         }
+         .blog-card p {
+         font-size: 1.1rem;
+         line-height: 1.8;
+         color: #4a4a4a;
+         }
+      </style>
+   </head>
+   <body>
+      {% include nav.html %}
+      <div class="blog-header">
+         <h2>{{ page.title }}</h2>
+         <p>Published on {{ page.date | date: "%B %d, %Y" }} · Reading Time: {{ page.reading_time }} minutes</p>
+      </div>
+      <div class="content container mx-auto py-8 px-4">
+         <div class="blog-card">
+            <div class="blog-image">
+               {% if page.image %}
+               <img src="{{ page.image | relative_url }}" alt="Blog Image">
+               {% endif %}
+            </div>
+            <div class="blog-content">
+               <p>{{ content }}</p>
+            </div>
+         </div>
+      </div>
+      {% include footer.html %}
+      <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+   </body>
+</html>
diff --git a/_layouts/create-blog.html b/_layouts/create-blog.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% include header.html %}
+  <style>
+
+    /* Wrapper Setup prevent problems with footer */
+    .wrapper {
+      display: flex;
+      justify-content: center; 
+      align-items: auto; 
+      min-height: 100vh; 
+      padding: 0; 
+
+    }
+
+    .container {
+      width: 100%;
+      max-width: 800px; 
+    }
+
+    /* Card Styling */
+    .card {
+      background-color: white;
+      border-radius: 10px;
+      padding: 2rem;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      width: 100%;
+      max-width: auto; 
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+    }
+
+    .card-header {
+      font-size: 1.75rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: #333;
+    }
+
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+
+    label {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 0.5rem;
+      text-align: left;
+    }
+
+    input, textarea {
+      width: 100%;
+      padding: 0.75rem;
+      font-size: 1rem;
+      border: 1px solid #ccc;
+      border-radius: 12px; /* Rounded corners */
+      margin-top: 0.25rem;
+      box-sizing: border-box;
+    }
+
+    textarea {
+      height: 150px;
+      resize: vertical;
+    }
+
+    /* Image Preview and Remove Button */
+    .image-preview {
+      margin-top: 1rem;
+      max-width: 150px; 
+      height: auto;
+      border: 1px solid #cccccc;
+      border-radius: 8px;
+      display: none; 
+    }
+
+    .remove-image-btn {
+      background-color: #f8d7da;
+      border: 1px solid #f5c6cb;
+      padding: 0.5rem 1rem;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 1rem;
+      margin-top: 1rem;
+      display: none; 
+    }
+
+    /* Preview Button */
+    .preview-btn {
+      background-color: #007bff;
+      color: white;
+      border: none;
+      padding: 0.75rem 1.25rem;
+      font-size: 1rem;
+      border-radius: 5px;
+      cursor: pointer;
+      margin-top: 1rem;
+      transition: background-color 0.3s ease;
+    }
+
+    .preview-btn:hover {
+      background-color: #0056b3;
+    }
+
+    /* Blog Preview Section */
+    .blog-preview {
+      margin-top: 2rem;
+      padding: 1rem;
+      background: #f8f9fa;
+      border: 1px solid #dddddd;
+      border-radius: 10px;
+      display: none; 
+    }
+
+    .blog-preview h2 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
+    /* Centered Layout Styling */
+    @media (max-width: 768px) {
+      .container {
+        padding: 1rem;
+      }
+
+      .card-header {
+        font-size: 1.5rem;
+      }
+
+      .form-group input, .form-group textarea {
+        font-size: 0.875rem;
+      }
+
+      .preview-btn {
+        font-size: 0.875rem;
+        padding: 0.5rem 1rem;
+      }
+
+      .remove-image-btn {
+        font-size: 0.875rem;
+        padding: 0.5rem 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  {% include nav.html %}
+
+  <div class="wrapper">
+    <div class="container">
+      <div class="card">
+        <div class="card-header">
+          Create a new blog
+        </div>
+        <form id="blog-form">
+          <div class="form-group">
+            <label for="title">Title</label>
+            <input type="text" id="title" placeholder="Enter your blog title">
+          </div>
+          <div class="form-group">
+            <label for="content">Content</label>
+            <textarea id="content" placeholder="Write your blog content here"></textarea>
+          </div>
+          <div class="form-group">
+            <label for="image">Upload an Image</label>
+            <input type="file" id="image" accept="image/*">
+            <img id="image-preview" class="image-preview" alt="Preview">
+            <button type="button" id="remove-image" class="remove-image-btn" style="display: none;">Remove Image</button>
+          </div>
+          <div class="form-group">
+            <button type="button" id="preview-btn" class="preview-btn">Preview</button>
+          </div>
+        </form>
+
+        <!-- Blog Preview Section -->
+        <div class="blog-preview">
+          <h2 id="preview-title">Blog Title Preview</h2>
+          <p id="preview-content">Your blog content will appear here...</p>
+          <img id="preview-image" class="image-preview" src="#" alt="Image Preview" style="display: none;">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const titleInput = document.getElementById('title');
+    const contentInput = document.getElementById('content');
+    const imageInput = document.getElementById('image');
+    const previewBtn = document.getElementById('preview-btn');
+    const previewTitle = document.getElementById('preview-title');
+    const previewContent = document.getElementById('preview-content');
+    const imagePreview = document.getElementById('image-preview');
+    const previewImage = document.getElementById('preview-image');
+    const removeImageBtn = document.getElementById('remove-image');
+    const blogPreview = document.querySelector('.blog-preview');
+
+    // Update title preview
+    titleInput.addEventListener('input', () => {
+      previewTitle.textContent = titleInput.value || 'Blog Title Preview';
+    });
+
+    // Update content preview
+    contentInput.addEventListener('input', () => {
+      previewContent.textContent = contentInput.value || 'Your blog content will appear here...';
+    });
+
+    // Handle image upload
+    imageInput.addEventListener('change', (event) => {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+          imagePreview.src = e.target.result;
+          imagePreview.style.display = 'block';
+          previewImage.src = e.target.result;
+          previewImage.style.display = 'block';
+          removeImageBtn.style.display = 'inline-block';  
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+
+    // Toggle Preview section
+    previewBtn.addEventListener('click', () => {
+      if (blogPreview.style.display === 'none') {
+        blogPreview.style.display = 'block';  
+        previewBtn.textContent = 'Hide Preview'; 
+      } else {
+        blogPreview.style.display = 'none';  
+        previewBtn.textContent = 'Preview';  
+      }
+    });
+
+    // Remove image
+    removeImageBtn.addEventListener('click', () => {
+      imagePreview.src = '';
+      imagePreview.style.display = 'none';
+      previewImage.src = '';
+      previewImage.style.display = 'none';
+      removeImageBtn.style.display = 'none';  
+      imageInput.value = '';  
+    });
+  </script>
+
+  {% include footer.html %}
+</body>
+</html>
diff --git a/_posts/2024-10-14-blog_2.markdown b/_posts/2024-10-14-blog_2.markdown
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: blog-post
 title: "The Future of Remote Work Technology"
 date: 2024-10-14
 image: ../assets/images/blog/blog2.png

diff --git a/_posts/2024-10-15-blog_3.markdown b/_posts/2024-10-15-blog_3.markdown
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: blog-post
 title: "The Importance of Cybersecurity in the Digital Age"
 date: 2024-10-15
 image: ../assets/images/blog/blog1.png

diff --git a/_posts/2024-10-16-blog_1.markdown b/_posts/2024-10-16-blog_1.markdown
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: blog-post
 title: "The Rise of AI in Everyday Life"
 date: 2024-10-16
 image: ../assets/images/blog/blog3.png

diff --git a/create-blog.markdown b/create-blog.markdown
@@ -0,0 +1,6 @@
+---
+layout: create-blog
+title: Create Blog Post
+permalink: /create-blog
+---
+