integerated form and fixed style issues

4darsh-Dev · Feb 11, 2024 · bd9a383 · bd9a383
1 parent 27d0223
commit bd9a383
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 10 deletions.
diff --git a/api/static/css/faqs.css b/api/static/css/faqs.css
@@ -19,10 +19,15 @@
 }
 .faqs {
   display: flex;
+  flex-direction: column;
   gap: 4rem;
 }
 .faq {
-  width: 25rem;
+  width: 60vw;
+  border: 1px solid gray;
+  border-radius: 6px;
+
+
 }
 .faqs-div {
   display: flex;
@@ -61,6 +66,33 @@
 }
 .hide.show {
   display: block;
-  border: 2px solid black;
-  padding: 0.5rem;
+  /* border: 2px solid black; */
+  padding: 1.5rem;
+  box-shadow: 0 0 25px gray;
+
+
 }
+
+.sub-head{
+  color: black;
+    display: block;
+    font-family: sans-serif, monospace;
+    font-size: 16px;
+    font-weight: 500;
+    width: 90px;
+    height: 25px;
+
+}
+
+.form-f{
+  width: 400px;
+    height: 40px;
+    border-radius: 8px;
+  border: 2px solid gray;
+    padding: 6px;
+    padding-left: 27px;
+    /* background-color:royalblue; */
+
+    margin-bottom: 10px;
+    font-size: 16px;
+}
diff --git a/api/static/css/report.css b/api/static/css/report.css
@@ -21,11 +21,19 @@
 .report-form form input {
   width: 33vw;
   height: 6vh;
+  border-radius: 6px;
+  border: 1px solid gray;
+  padding: 0 6px;
+
+
 }
 .report-form form textarea {
   border-radius: 5px;
   width: 33vw;
   height: 20vh;
+  border-radius: 6px;
+  border: 1px solid gray;
+  padding: 0 6px;
 }
 ::placeholder {
   font-family: monospace;

diff --git a/api/static/css/style.css b/api/static/css/style.css
@@ -69,7 +69,7 @@ ul {
   background-color: var(--color-primary);
   color: white;
   padding: 0.5rem 1rem;
-  border-radius: 0.625rem;
+  border-radius: 6px;
   border: none;
   cursor: pointer;
 }
@@ -150,6 +150,7 @@ ul {
   display: flex;
   align-items: center;
   gap: 1rem;
+  display: none !important;
 }
 /* header   */
 .welcome .welcome-text {

diff --git a/api/templates/report.html b/api/templates/report.html
@@ -7,7 +7,7 @@
 {% block title %}Report Dark Pattern{% endblock title %}
 
 {% block head %}
-<link rel="stylesheet" href="{% static "css/report.css"%}">
+<link rel="stylesheet" href="{% static " css/report.css"%}">
 {% endblock head %}
 
 {% block content %}
@@ -18,12 +18,24 @@ <h1 class="font-mid-large">Report Center</h1>
         <h4 class="blue-text">Eradicate Dark Patterns</h4>
     </section>
     <section class="report-form">
-        <form action="">
-            <input type="text" name="email" id="email" placeholder="Enter Your Email">
-            <input type="text" name="website-name" id="website-name" placeholder="Enter the website's name">
+        <form method="post" action="{% url 'report-dp' %}">
+            {% csrf_token %}
+            <label  for="name" class="sub-head">Name</label>
+            <input required type="text" name="name" id="name" placeholder="Enter Your Name" class="form-f">
+
+            <label for="email" class="sub-head">Email</label>
+            <input required type="email" name="email" id="email" placeholder="[email protected]" class="form-f">
+
+            <label  for="website-name" class="sub-head">Website Name</label>
+            <input required type="text" name="website-name" id="website-name" placeholder="Enter the website's name" class="form-f">
+
+            <label for="dark-pattern-type" class="sub-head">Dark Pattern Type</label>
             <input type="text" name="dark-pattern-type" id="dark-pattern-type"
-                placeholder="Enter the Dark Pattern Type (optional)">
-            <textarea name="description" id="description" placeholder="Describe the Dark Pattern"></textarea>
+                placeholder="Enter the Dark Pattern Type (optional)" class="form-f">
+
+            <label for="description" class="sub-head">Description</label>
+            <textarea required name="description" id="description" placeholder="Describe the Dark Pattern" class="form-f"></textarea>
+
             <button type="submit" class="btn-primary">Report</button>
         </form>
     </section>