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: 1px solid rgba(0, 0, 0, 0.2); 
+         border-radius: 10px; 
+         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+         padding: 1.5rem; 
+         width: 80%; 
+         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,75 @@
+<!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;
+      }
+
+      /* Google Form iframe */
+      iframe {
+        width: 100%;
+        height: 840px;
+        border: 0;
+        margin: 0;
+        padding: 0;
+      }
+
+      /* Centered Layout Styling */
+      @media (max-width: 768px) {
+        .container {
+          padding: 1rem;
+        }
+
+        .card-header {
+          font-size: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <body> 
+    {% include nav.html %}
+    <div class="wrapper">
+      <div class="container">
+        <div class="card">
+          <div class="card-header"> Form </div>
+          <!-- Google Form iframe -->
+          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBKJnsVFyDtfzmbY8FtCMEvExLt9nFUnzSLX4LRwasmV5Jwg/viewform?embedded=true" width="640" height="840" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+      </div>
+    </div>
+    {% 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_blog_form.py b/_test/test_blog_form.py
@@ -0,0 +1,58 @@
+import unittest
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+
+
+class TestGoogleForm(unittest.TestCase):
+    def setUp(self):
+        """Set up the WebDriver."""
+        self.driver = webdriver.Chrome()  # Ensure ChromeDriver is installed and in PATH
+        self.driver.maximize_window()
+
+    def test_fill_google_form(self):
+        """Test case for filling out the Google Form."""
+        driver = self.driver
+
+
+        driver.get("http://localhost:4000/create-blog")
+
+        # Switch to the iframe containing the Google Form
+        iframe = driver.find_element(By.TAG_NAME, "iframe")
+        driver.switch_to.frame(iframe)
+
+        # Wait for the form to load
+        wait = WebDriverWait(driver, 10)
+
+        # Fill out the "Title" question
+        title_field = wait.until(
+            EC.presence_of_element_located((By.CSS_SELECTOR, 'input[aria-labelledby="i1 i4"]'))
+        )
+        title_field.send_keys("Sample Title")
+
+        # Fill out the "Content" question
+        content_field = wait.until(
+            EC.presence_of_element_located((By.CSS_SELECTOR, 'textarea[aria-labelledby="i6 i9"]'))
+        )
+        content_field.send_keys("This is a test content for the Google Form.")
+
+        # Submit the form
+        submit_button = wait.until(
+            EC.element_to_be_clickable((By.XPATH, '//span[contains(@class, "NPEfkd") and text()="Submit"]'))
+        )
+        submit_button.click()
+
+        # Verify submission
+        success_message = wait.until(
+            EC.presence_of_element_located((By.XPATH, '//div[contains(@class, "vHW8K") and text()="Your response has been recorded."]'))
+        )
+        self.assertTrue(success_message.is_displayed(), "Form submission failed!")
+
+    def tearDown(self):
+        """Tear down the WebDriver."""
+        self.driver.quit()
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/create-blog.markdown b/create-blog.markdown
@@ -0,0 +1,6 @@
+---
+layout: create-blog
+title: Create Blog Post
+permalink: /create-blog
+---
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,5 @@ _site @@
     vendor
     .DS_Store
     .vercel
+    __pycache__/
+    *.pyc