computerclubkec · ajogseneca · Nov 19, 2024 · Nov 20, 2024 · Dec 7, 2024 · Dec 11, 2024
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,5 @@ _site
 vendor
 .DS_Store
 .vercel
+__pycache__/
+*.pyc
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,238 @@
+<!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 {
+        visibility: hidden;
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.3s ease, height 0.3s ease;
+      }
+
+      .blog-preview.active {
+        visibility: visible;
+        opacity: 1;
+        height: auto;
+      }
+
+      .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);
+        }
+      });
+      previewBtn.addEventListener('click', () => {
+        if (blogPreview.classList.contains('active')) {
+          blogPreview.classList.remove('active'); // Hide preview
+          previewBtn.textContent = 'Preview';
+        } else {
+          blogPreview.classList.add('active'); // Show preview
+          previewBtn.textContent = 'Hide 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/_test/test-image.jpg b/_test/test-image.jpg
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,5 @@ _site @@
     vendor
     .DS_Store
     .vercel
+    __pycache__/
+    *.pyc