Merge pull request #8 from QAInsights/ruturaj-dev

QAInsights · Feb 5, 2023 · 2f3b94b · 2f3b94b
2 parents 5ec93f6 + a0da874
commit 2f3b94b
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 85 deletions.
diff --git a/templates/about.html b/templates/about.html
@@ -1,35 +1,24 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <meta charset="utf-8">
-    <title>PerfGPT - Analyze your performance test results using OpenAI</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
-    </head>
-<body>
-    {% include 'includes/navbar.html' %}
-    <br/>
-    <div class="container">
-        <h3>🤔 What is PerfGPT?</h3>
-        <p class="lead">
-          PerfGPT helps you to analyze the performance test results swiftly and correlate the metrics to find the issues. It uses the latest version of OpenAI algorithm to process the raw data.
-        </p>
+{% extends 'layout.html' %}
+{% block contents %}
+<div class="container">
+  <h3>🤔 What is PerfGPT?</h3>
+  <p class="lead">
+    PerfGPT helps you to analyze the performance test results swiftly and correlate the metrics to find the issues. It uses the latest version of OpenAI algorithm to process the raw data.
+  </p>
 
-        <h3>🔐 Is my data safe?</h3>
-        <p class="lead">
-          We do not store your data nor read them. We convert your data into prompts for OpenAI to analyze.
-        </p>
+  <h3>🔐 Is my data safe?</h3>
+  <p class="lead">
+    We do not store your data nor read them. We convert your data into prompts for OpenAI to analyze.
+  </p>
 
-        <h3>🆓 Is this free?</h3>
-        <p class="lead">
-          Yes. We will add more features eventually. Premium features are in roadmap.
-        </p>
+  <h3>🆓 Is this free?</h3>
+  <p class="lead">
+    Yes. We will add more features eventually. Premium features are in roadmap.
+  </p>
 
-        <h3>💰 Will there be any premium features?</h3>
-        <p class="lead">
-          Yes, premium features are in roadmap.
-        </p>
-    </div>
-</body>
-</html>
+  <h3>💰 Will there be any premium features?</h3>
+  <p class="lead">
+    Yes, premium features are in roadmap.
+  </p>
+</div>
+{% endblock %}
diff --git a/templates/analysis_response.html b/templates/analysis_response.html
@@ -1,11 +1,11 @@
-{% extends 'layout.html' %}
+{% extends 'index.html' %}
 {% block body %}
 
-<div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title">📊 Performance Results Analysis</h3>
+<div class="card bg-primary">
+      <div class="card-header">
+        <h3 class="card-title">📊 Performance Results Analysis</h3>
       </div>
-      <div class="panel-body">
+      <div class="card-body bg-light">
         {{ response }}
       </div>
 </div>

diff --git a/templates/features.html b/templates/features.html
@@ -1,25 +1,14 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <meta charset="utf-8">
-    <title>PerfGPT - Analyze your performance test results using OpenAI</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
-    </head>
-<body>
-    {% include 'includes/navbar.html' %}
-    <br/>
-    <div class="container">
-        <h3>✅ Features and Limitations</h3>
-        <h4>Upload file format</h4>
-        <p class="lead">
-          You can upload raw data in csv format (recommended) using the performance testing tool of your choice.
-        </p>
-        <h4>Maximum file size</h4>
-        <p class="lead">
-          The maximum file size is 1 GB. Based on the tool usage, we may increase it further.
-        </p>
-    </div>
-</body>
-</html>
+{% extends 'layout.html' %}
+{% block contents %}
+<div class="container">
+  <h3>✅ Features and Limitations</h3>
+  <h4>Upload file format</h4>
+  <p class="lead">
+    You can upload raw data in csv format (recommended) using the performance testing tool of your choice.
+  </p>
+  <h4>Maximum file size</h4>
+  <p class="lead">
+    The maximum file size is 1 GB. Based on the tool usage, we may increase it further.
+  </p>
+</div>
+{% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -1,5 +1,37 @@
 {% extends 'layout.html' %}
-
+{% block contents %}
+<div class="container">
+    <div class="mt-4 p-5 bg-light rounded">
+        <div class="container">
+            <p class="lead fs-4">🤖 PerfGPT helps you to analyze your performance test results using OpenAI.</p>
+        </div>
+    </div>
+    <h1 class="display-6 fw-bold">Step 1:</h1>
+    <p class="lead">Upload raw data of your performance test using the tool of your choice.</p>
+    <p class="lead">Your privacy is paramount to us. We <strong>DO NOT store or read your file</strong>.</p>
+    <h3 class="display-6 fw-bold" style="font-weight: bold;">Step 2:</h3>
+    <p class="lead">OpenAI will analyze the results and present its findings.</p>
+    <h4>⬆️ Upload test results:</h4>
+
+    <form action="/upload" method="post" enctype="multipart/form-data">
+        <span class="input-group-btn">
+            <div class="row">
+                <div class="col">
+                    <input   class="form-control" type="file" name="file">        
+                </div>
+                <div class="col">
+                    <input   class="btn btn-primary mb-3" type="submit" value="Upload" onclick="loading();">
+                </div>
+            </div>
+        </span>
+    </form>
+<h1></h1>
+<div class="row">
+    <div class="spinner-grow mx-auto" id="loading" role="status" style="display: none;">
+        <span class="visually-hidden">Loading...</span>
+    </div>
+</div>
+{% endblock %}
 {% block body %}
 
 {% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
@@ -4,34 +4,23 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>PerfGPT - Analyze your performance test results using OpenAI</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+        function loading(){
+            document.getElementById("loading").style.display = "block";
+        }
+    </script>
     </head>
 <body>
     {% include 'includes/navbar.html' %}
     <br/>
-    <div class="container">
-        <div class="jumbotron jumbotron-fluid">
-            <div class="container">
-                <p class="lead">🤖 PerfGPT helps you to analyze your performance test results using OpenAI.</p>
-            </div>
-        </div>
-        <h3 class="display-3" style="font-weight: bold;">Step 1:</h3>
-        <p class="lead">Upload raw data of your performance test using the tool of your choice.</p>
-        <p class="lead">Your privacy is paramount to us. We <strong>DO NOT store or read your file</strong>.</p>
-        <h3 class="display-3" style="font-weight: bold;">Step 2:</h3>
-        <p class="lead">OpenAI will analyze the results and present its findings.</p>
-        <h4>⬆️ Upload test results:</h4>
-        <form action="/upload" method="post" enctype="multipart/form-data">
-            <span class="input-group-btn">
-                <input   class="form-control" type="file" name="file">
-                <input   class="btn btn-primary mb-3" type="submit" value="Upload">
-            </span>
-        </form>
-    <h1></h1>
+    {% block contents %}
+    {% endblock %}
     {% block body %}
-    <br/>
     {% endblock %}
+    <br/>
+    <div class="mb-4"></div>
     </div>
     {% include 'includes/footer.html' %}
 </body>