survey form is working fine

Author: AdityaSingh-7

public/responses/survey-responses.json

@@ -1,23 +0,0 @@
-[
-  {
-    "q1": "Yes",
-    "q2": "Not yet, but I plan to",
-    "q3": "1-3 months ago",
-    "q9": ""
-  },
-  {
-    "q5": "Yes",
-    "q7": "Handwriting practice sheets",
-    "q9": "ajfvrnarkjvnrnvanvjav;jaewv;jawbvrjawb"
-  },
-  {
-    "id": null,
-    "timestamp": "2025-01-31T12:38:34.816Z",
-    "q1": "No",
-    "q2": "Not yet, but I plan to",
-    "q4": "15-30 minutes",
-    "q5": "Not sure",
-    "q7": "Interactive apps or websites",
-    "q9": "cccccccccccccccccccc"
-  }
-]

src/assets/styles/survey.css

@@ -0,0 +1,149 @@
+.survey-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  background: #0f172a;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.survey-header {
+  text-align: center;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.survey-header h1 {
+  font-size: 2rem;
+  color: #d8d9d9;
+  margin-bottom: 1rem;
+}
+
+.survey-header p {
+  font-size: 1rem;
+  color: #fafafa;
+  margin-bottom: 2rem;
+}
+
+.questions-container {
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 1rem;
+  background: #fdfdfd;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.question-card {
+  background: #e3e2e2;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.question-card h3 {
+  font-size: 1.5rem;
+  color: #2d3748;
+  margin-bottom: 0.75rem;
+}
+
+.options-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.option-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background: #f8fafc;
+  cursor: pointer;
+  color: rgb(24, 22, 22);
+}
+
+.radio-input,
+.checkbox-input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #3b82f6;
+}
+
+.textarea-input {
+  width: 100%;
+  padding: 0.5rem;
+  background-color: #ffffff;
+  border-radius: 4px;
+  resize: vertical;
+  color: #2d3748;
+}
+
+.survey-controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1.5rem;
+  padding: 1rem;
+}
+
+.submit-btn,
+.download-btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+}
+
+.submit-btn {
+  background: #3b82f6;
+  color: white;
+}
+
+.submit-btn:hover {
+  background: #2563eb;
+}
+
+.download-btn {
+  background: white;
+  color: #3b82f6;
+  border: 1px solid #3b82f6;
+}
+
+.download-btn:hover {
+  background: #f8fafc;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .survey-container {
+    padding: 1rem;
+  }
+
+  .survey-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .survey-header p {
+    font-size: 0.9rem;
+  }
+
+  .question-card h3 {
+    font-size: 0.9rem;
+  }
+
+  .submit-btn,
+  .download-btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .survey-controls {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

src/components/surveyForm.astro

@@ -10,10 +10,10 @@ const { data } = Astro.props;
 
 <div class="survey-wrapper">
   <div class="survey-container">
-    <header class="survey-header">
+    <div class="survey-header">
       <h1>{data.surveyTitle}</h1>
       <p>{data.description}</p>
-    </header>
+    <div/>
 
     <div class="questions-container">
       <form id="surveyForm" class="survey-form">
@@ -140,161 +140,3 @@ const { data } = Astro.props;
   downloadBtn?.addEventListener('click', downloadResults);
 </script>
 
-<style>
-  .survey-wrapper {
-    width: 100%;
-    min-height: 100vh;
-    font-family: Arial, sans-serif;
-    color: #333;
-    padding: 1rem;
-    background-color: #f8fafc;
-  }
-
-  .survey-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 1.5rem;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-
-  .survey-header {
-    text-align: center;
-    margin-bottom: 2rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .survey-header h1 {
-    font-size: 2rem;
-    color: #1a365d;
-    margin-bottom: 0.5rem;
-  }
-
-  .survey-header p {
-    font-size: 1rem;
-    color: #4a5568;
-  }
-
-  .questions-container {
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 1rem;
-    background: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  }
-
-  .question-card {
-    background: #ffffff;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .question-card h3 {
-    font-size: 1rem;
-    color: #2d3748;
-    margin-bottom: 0.75rem;
-  }
-
-  .options-group {
-    display: grid;
-    gap: 0.75rem;
-  }
-
-  .option-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    border-radius: 4px;
-    background: #f8fafc;
-    cursor: pointer;
-  }
-
-  .radio-input,
-  .checkbox-input {
-    width: 1rem;
-    height: 1rem;
-    accent-color: #3b82f6;
-  }
-
-  .textarea-input {
-    width: 100%;
-    padding: 0.5rem;
-    background-color: #e2e8f0;
-    border: 1px solid #e2e8f0;
-    border-radius: 4px;
-    resize: vertical;
-  }
-
-  .survey-controls {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    margin-top: 1.5rem;
-    padding: 1rem;
-  }
-
-  .submit-btn,
-  .download-btn {
-    padding: 0.75rem 1.5rem;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.3s ease;
-  }
-
-  .submit-btn {
-    background: #3b82f6;
-    color: white;
-  }
-
-  .submit-btn:hover {
-    background: #2563eb;
-  }
-
-  .download-btn {
-    background: white;
-    color: #3b82f6;
-    border: 1px solid #3b82f6;
-  }
-
-  .download-btn:hover {
-    background: #f8fafc;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .survey-container {
-      padding: 1rem;
-    }
-
-    .survey-header h1 {
-      font-size: 1.5rem;
-    }
-
-    .survey-header p {
-      font-size: 0.9rem;
-    }
-
-    .question-card h3 {
-      font-size: 0.9rem;
-    }
-
-    .submit-btn,
-    .download-btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.9rem;
-    }
-
-    .survey-controls {
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-  }
-</style>