d-coder111 · d-coder111 · Oct 27, 2024 · Oct 26, 2024
diff --git a/app.py b/app.py
@@ -3,17 +3,20 @@
 
 app = Flask(__name__)
 
+
 # default page
 @app.route('/')
 def index():
     return render_template('index.html')
 
+
 # render home page
 @app.route('/home')
 def home():
     """ Reder home page """
     return render_template('index.html')
 
+
 # render about page
 @app.route('/about')
 def about():
@@ -37,5 +40,27 @@ def language():
 
     return render_template('index.html', questions=questions, language=language)
 
+
+@app.route('/problem/<filename>')
+def problem_solution(filename):
+    """
+    Read the solution code from the file and return the problem_solution.html page to show the solution code to user
+    """
+    # get the language which is passed as a parameter from the index.html
+    language = request.args.get('language')
+
+    if not language:
+        return "Language not specified. Please select a language." # Error Message if no Language is selected
+
+    file_path = f"{language}/{filename}" # Filepath
+
+    with open(file_path, 'r') as f:
+        code = f.read()
+
+    question_name = filename.replace('_', ' ').replace('.cpp', '').replace('.java', '').replace('.py', '')
+
+    return render_template('problem_solution.html', code=code, question_name=question_name)
+
+
 if __name__ == '__main__':
-    app.run()
+    app.run(debug=True)
diff --git a/templates/about.html b/templates/about.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DSAmplify - Contribute</title>
+    <title>DSAmplify - About</title>
 
     <style>
       body {
@@ -111,7 +111,6 @@
     <header>
       <div class="Head-Name">
         <p>DSAmplify</p>
-        <h4>Make your DSA journey easier with us</h4>
       </div>
       <ul>
         <li><a href="home">Home</a></li>

diff --git a/templates/index.html b/templates/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DSAmplify</title>
+    <title>DSAmplify - Home</title>
 
     <style>
       body {
@@ -111,7 +111,6 @@
     <header>
       <div class="Head-Name">
         <p>DSAmplify</p>
-        <h4>Make your DSA journey easier with us</h4>
       </div>
       <ul>
         <li><a href="home">Home</a></li>
@@ -137,7 +136,7 @@ <h1>DSA Problem Solutions</h1>
       <h2>{{ language }} Problems</h2>
       <ul>
           {% for question in questions %}
-              <li><a href="#">{{ question['name'] }}</a></li>
+          <li><a href="{{ url_for('problem_solution', filename=question['file'], language=language) }}">{{ question['name'] }}</a></li>
           {% endfor %}
       </ul>
     {% endif %}

diff --git a/templates/problem_solution.html b/templates/problem_solution.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DSAmplify - Problem</title>
+
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+          Arial, sans-serif;
+        background-color: #f6f8fa;
+        color: #24292e;
+        max-width: 900px;
+        margin: 40px auto;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e1e4e8;
+      }
+
+      header {
+        background-color: #0366d6;
+        padding: 20px;
+        color: white;
+        text-align: center;
+        border-radius: 8px;
+      }
+
+      header .Head-Name p {
+        font-size: 2rem;
+        font-weight: bold;
+      }
+
+      header ul {
+        list-style: none;
+        padding: 0;
+      }
+
+      header ul li {
+        display: inline;
+        margin-right: 15px;
+      }
+
+      header ul li a {
+        color: white;
+        text-decoration: none;
+        font-size: 1rem;
+      }
+
+      header ul li a:hover {
+        text-decoration: underline;
+      }
+
+      h2 {
+        color: #0366d6;
+        margin-top: 30px;
+        font-size: 1.5rem;
+      }
+
+      p {
+        margin-bottom: 15px;
+      }
+
+      code {
+        background-color: #f3f4f6;
+        color: #0366d6;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: "Courier New", Courier, monospace;
+        font-size: 0.95rem;
+        border: 1px solid #e1e4e8;
+      }
+
+      a {
+        color: #0366d6;
+        text-decoration: none;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      .container {
+        background-color: white;
+        padding: 30px;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(27, 31, 35, 0.12),
+          0 8px 24px rgba(27, 31, 35, 0.1);
+        border: 1px solid #e1e4e8;
+        margin-top: 20px;
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 15px;
+        }
+
+        h2 {
+          text-align: center;
+        }
+
+        header ul li {
+          display: block;
+          margin: 10px 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="Head-Name">
+        <p>DSAmplify</p>
+      </div>
+      <ul>
+        <li><a href="{{ url_for('home') }}">Home</a></li>
+        <li><a href="{{ url_for('about') }}">About</a></li>
+        <li><a href="#">Contributors</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </header>
+
+    <h2>{{ question_name }}</h2>
+    <pre><code>{{ code }}</code></pre>
+
+  </body>
+</html>