-
Notifications
You must be signed in to change notification settings - Fork 139
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
93 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |