From 207378202472608d15c370034732d77fbcb6ba32 Mon Sep 17 00:00:00 2001
From: DeenuRSD <124046429+DeenuRSD@users.noreply.github.com>
Date: Sat, 19 Oct 2024 08:46:12 +0530
Subject: [PATCH] Update index.html

---
 frontend/index.html | 174 +++++++++++++++++++++++---------------------
 1 file changed, 93 insertions(+), 81 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index debf9d5..2f09d6a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,92 +1,104 @@
-<!doctype html>
-<html lang="en">
+import React, { useState } from 'react';
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>MediHub Bug Report</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f4f4f4;
-      margin: 0;
-      padding: 20px;
-    }
+const ContactPage = () => {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    steps: '',
+    expected: '',
+    actual: '',
+    email: ''
+  });
 
-    .container {
-      max-width: 600px;
-      margin: auto;
-      background: #fff;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    }
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }));
+  };
 
-    h1 {
-      text-align: center;
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Logic to handle form submission
+    console.log('Bug Report Submitted:', formData);
+    // You can add API calls or form submission logic here
+  };
 
-    label {
-      display: block;
-      margin-bottom: 8px;
-      font-weight: bold;
-    }
+  return (
+    <div className="container">
+      <h1>Report a Bug</h1>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="title">Bug Title:</label>
+        <input
+          type="text"
+          id="title"
+          name="title"
+          value={formData.title}
+          onChange={handleChange}
+          required
+          placeholder="Enter a brief title for the bug"
+        />
 
-    input[type="text"],
-    input[type="email"],
-    textarea {
-      width: 100%;
-      padding: 10px;
-      margin-bottom: 20px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      box-sizing: border-box;
-    }
+        <label htmlFor="description">Description:</label>
+        <textarea
+          id="description"
+          name="description"
+          rows="6"
+          value={formData.description}
+          onChange={handleChange}
+          required
+          placeholder="Describe the bug in detail"
+        ></textarea>
 
-    button {
-      width: 100%;
-      padding: 10px;
-      background-color: #007bff;
-      border: none;
-      color: white;
-      font-size: 16px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
+        <label htmlFor="steps">Steps to Reproduce:</label>
+        <textarea
+          id="steps"
+          name="steps"
+          rows="6"
+          value={formData.steps}
+          onChange={handleChange}
+          required
+          placeholder="List the steps to reproduce the bug"
+        ></textarea>
 
-    button:hover {
-      background-color: #0056b3;
-    }
-  </style>
-</head>
+        <label htmlFor="expected">Expected Result:</label>
+        <textarea
+          id="expected"
+          name="expected"
+          rows="3"
+          value={formData.expected}
+          onChange={handleChange}
+          required
+          placeholder="What did you expect to happen?"
+        ></textarea>
 
-<body>
-  <div class="container">
-    <h1>Report a Bug</h1>
-    <form action="/submit-bug" method="POST">
-      <label for="title">Bug Title:</label>
-      <input type="text" id="title" name="title" required placeholder="Enter a brief title for the bug" />
+        <label htmlFor="actual">Actual Result:</label>
+        <textarea
+          id="actual"
+          name="actual"
+          rows="3"
+          value={formData.actual}
+          onChange={handleChange}
+          required
+          placeholder="What actually happened?"
+        ></textarea>
 
-      <label for="description">Description:</label>
-      <textarea id="description" name="description" rows="6" required placeholder="Describe the bug in detail"></textarea>
+        <label htmlFor="email">Your Email:</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          placeholder="Your email for follow-up"
+        />
 
-      <label for="steps">Steps to Reproduce:</label>
-      <textarea id="steps" name="steps" rows="6" required placeholder="List the steps to reproduce the bug"></textarea>
+        <button type="submit">Submit Bug Report</button>
+      </form>
+    </div>
+  );
+};
 
-      <label for="expected">Expected Result:</label>
-      <textarea id="expected" name="expected" rows="3" required placeholder="What did you expect to happen?"></textarea>
-
-      <label for="actual">Actual Result:</label>
-      <textarea id="actual" name="actual" rows="3" required placeholder="What actually happened?"></textarea>
-
-      <label for="email">Your Email:</label>
-      <input type="email" id="email" name="email" required placeholder="Your email for follow-up" />
-
-      <button type="submit">Submit Bug Report</button>
-    </form>
-  </div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
-</html>
+export default ContactPage;
