From cf923979660598e5bfa69da823f12e22d313ed1b Mon Sep 17 00:00:00 2001
From: EduardSkibidiEdger <EduardSkibidiGooner@prigoana.lol>
Date: Tue, 15 Oct 2024 18:36:44 +0300
Subject: [PATCH] test

---
 CS/ProblemSolvingProcess/content.md |   0
 CS/ProblemSolvingProcess/index.html |  86 +++++++++++---
 CS/ProblemSolvingProcess/test.html  | 175 ++++++++++++++++++++++++++++
 3 files changed, 242 insertions(+), 19 deletions(-)
 create mode 100644 CS/ProblemSolvingProcess/content.md
 create mode 100644 CS/ProblemSolvingProcess/test.html

diff --git a/CS/ProblemSolvingProcess/content.md b/CS/ProblemSolvingProcess/content.md
new file mode 100644
index 0000000..e69de29
diff --git a/CS/ProblemSolvingProcess/index.html b/CS/ProblemSolvingProcess/index.html
index 0671505..3c8c0ce 100644
--- a/CS/ProblemSolvingProcess/index.html
+++ b/CS/ProblemSolvingProcess/index.html
@@ -6,59 +6,108 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Problem Solving Process Poster</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
+        /* Reset some default styles */
+        * {
+            box-sizing: border-box;
             margin: 0;
             padding: 0;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
             background-color: #080709; /* Dark background for body */
             color: #e0ceed; /* Light text color */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
         }
+
         .poster {
-            width: 210mm;
-            height: 297mm;
-            margin: 0 auto;
-            padding: 20mm;
+            width: 100%;
+            max-width: 800px; /* Limits width on larger screens */
             background-color: #151217; /* Dark background for poster */
             color: #e0ceed; /* Light text color */
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
             border-radius: 10px;
+            padding: 2em;
         }
+
         h1 {
             text-align: center;
             color: #b657ff; /* Lilac color for header */
-            margin-bottom: 30px;
-            font-size: 26px;
+            margin-bottom: 1.5em;
+            font-size: 2em;
             font-weight: bold;
         }
+
         h2 {
             color: #a29dfa; /* Softer lilac color */
             border-bottom: 2px solid #b657ff; /* Lilac border */
-            padding-bottom: 10px;
-            margin-top: 30px;
-            font-size: 20px;
+            padding-bottom: 0.5em;
+            margin-top: 1.5em;
+            font-size: 1.5em;
         }
+
         p {
-            font-size: 14px;
-            line-height: 1.8;
+            font-size: 1em;
+            line-height: 1.6;
+            margin-top: 0.5em;
             color: #e0ceed; /* Light text color */
         }
+
         .section {
-            margin-bottom: 20px;
+            margin-bottom: 1.5em;
         }
+
         .example {
             background-color: #211d26; /* Dark lilac tone for example box */
-            padding: 15px;
+            padding: 1em;
             border-radius: 8px;
-            margin-top: 15px;
+            margin-top: 1em;
             border: 1px solid #3b3442; /* Darker purple border */
         }
+
         .example p {
-            margin: 5px 0;
+            margin: 0.5em 0;
+        }
+
+        /* Responsive Typography */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 1.8em;
+            }
+
+            h2 {
+                font-size: 1.3em;
+            }
+
+            p {
+                font-size: 0.95em;
+            }
+        }
+
+        @media (max-width: 480px) {
+            h1 {
+                font-size: 1.5em;
+            }
+
+            h2 {
+                font-size: 1.2em;
+            }
+
+            p {
+                font-size: 0.9em;
+            }
+
+            .poster {
+                padding: 1.5em;
+            }
         }
     </style>
 </head>
 <body>
-<div style="height: 20mm;"></div>
     <div class="poster">
         <h1>Problem Solving Process</h1>
 
@@ -95,6 +144,5 @@
             </div>
         </div>
     </div>
-
 </body>
 </html>
diff --git a/CS/ProblemSolvingProcess/test.html b/CS/ProblemSolvingProcess/test.html
new file mode 100644
index 0000000..c16fc14
--- /dev/null
+++ b/CS/ProblemSolvingProcess/test.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="icon" type="image/x-icon" href="/favicon.png">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem Solving Process Poster</title>
+    <style>
+        /* Reset some default styles */
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #080709; /* Dark background for body */
+            color: #e0ceed; /* Light text color */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .poster {
+            width: 100%;
+            max-width: 800px; /* Limits width on larger screens */
+            background-color: #151217; /* Dark background for poster */
+            color: #e0ceed; /* Light text color */
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            padding: 2em;
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+        }
+
+        .poster.visible {
+            opacity: 1;
+        }
+
+        /* Styling for dynamically generated content */
+        .poster h1 {
+            text-align: center;
+            color: #b657ff; /* Lilac color for header */
+            margin-bottom: 1.5em;
+            font-size: 2em;
+            font-weight: bold;
+        }
+
+        .poster h2 {
+            color: #a29dfa; /* Softer lilac color */
+            border-bottom: 2px solid #b657ff; /* Lilac border */
+            padding-bottom: 0.5em;
+            margin-top: 1.5em;
+            font-size: 1.5em;
+        }
+
+        .poster p {
+            font-size: 1em;
+            line-height: 1.6;
+            margin-top: 0.5em;
+            color: #e0ceed; /* Light text color */
+        }
+
+        .example {
+            background-color: #211d26; /* Dark lilac tone for example box */
+            padding: 1em;
+            border-radius: 8px;
+            margin-top: 1em;
+            border: 1px solid #3b3442; /* Darker purple border */
+        }
+
+        .example p {
+            margin: 0.5em 0;
+        }
+
+        /* Responsive Typography */
+        @media (max-width: 768px) {
+            .poster h1 {
+                font-size: 1.8em;
+            }
+
+            .poster h2 {
+                font-size: 1.3em;
+            }
+
+            .poster p {
+                font-size: 0.95em;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .poster h1 {
+                font-size: 1.5em;
+            }
+
+            .poster h2 {
+                font-size: 1.2em;
+            }
+
+            .poster p {
+                font-size: 0.9em;
+            }
+
+            .poster {
+                padding: 1.5em;
+            }
+        }
+    </style>
+    <!-- Include marked.js from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <div class="poster" id="poster-content">
+        <!-- Markdown content will be injected here -->
+    </div>
+
+    <script>
+        // Function to fetch and render Markdown content
+        async function loadMarkdown() {
+            try {
+                const response = await fetch('content.md');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const markdown = await response.text();
+                const htmlContent = marked.parse(markdown);
+                document.getElementById('poster-content').innerHTML = htmlContent;
+
+                // After inserting the HTML, wrap example sections
+                wrapExamples();
+
+                // Make the poster visible
+                document.querySelector('.poster').classList.add('visible');
+            } catch (error) {
+                console.error('Error fetching or parsing Markdown:', error);
+                document.getElementById('poster-content').innerHTML = '<p>Failed to load content.</p>';
+            }
+        }
+
+        // Function to wrap example sections in a div with class 'example'
+        function wrapExamples() {
+            const poster = document.getElementById('poster-content');
+            const paragraphs = poster.querySelectorAll('p');
+
+            paragraphs.forEach((p, index) => {
+                if (p.textContent.startsWith('Example:')) {
+                    // Create a new div with class 'example'
+                    const exampleDiv = document.createElement('div');
+                    exampleDiv.className = 'example';
+
+                    // Move the 'Example:' paragraph into the div
+                    exampleDiv.appendChild(p.cloneNode(true));
+
+                    // Check if the next paragraph starts with 'Define:'
+                    const nextP = paragraphs[index + 1];
+                    if (nextP && nextP.textContent.startsWith('Define:')) {
+                        exampleDiv.appendChild(nextP.cloneNode(true));
+                        // Remove the original paragraphs
+                        nextP.remove();
+                    }
+
+                    // Replace the original 'Example:' paragraph with the div
+                    p.replaceWith(exampleDiv);
+                }
+            });
+        }
+
+        // Load the Markdown content when the page loads
+        window.addEventListener('DOMContentLoaded', loadMarkdown);
+    </script>
+</body>
+</html>