-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (86 loc) · 4.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="icon" href="./images/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="d-flex justify-content-center align-items-center min-vh-100">
<form action="" class="container1" id="form" onsubmit="sendEmail(event)">
<div class="container">
<div class="row">
<h1>Bug Report</h1>
</div>
<div class="row input-container">
<div class="col-md-6 col-sm-12">
<div class="styled-input">
<input class="input" type="text" name="email" id="email" required oninput="validateEmail()">
<label>Email</label>
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="styled-input">
<input class="input" type="text" name="title" placeholder="Describe the bug in 2 words"
required>
<label>Short title</label>
</div>
</div>
<div class="col-12">
<div class="styled-input wide">
<textarea class="input" name="message"
placeholder="Provide as much as information, step by step guide to create the bug. "
required></textarea>
<label>Detailed description</label>
</div>
</div>
<div class="col-12 fileInput">
<div class="styled-input wide">
<input class="input" type="file" name="file"
accept="image/*, video/* , .txt , .trace , .log , .dump , .dmp " multiple>
<label>Choose Files( Max 10 files )</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-lg btn-primary" disabled>Send Report</button>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
function validateEmail() {
const emailInput = document.getElementById('email');
const email = emailInput.value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = emailPattern.test(email);
const button = document.querySelector('button[type="submit"]');
const invalidFeedback = emailInput.parentNode.querySelector('.invalid-feedback');
if (isValid) {
emailInput.classList.remove('is-invalid');
button.removeAttribute('disabled');
invalidFeedback.style.display = 'none';
} else {
emailInput.classList.add('is-invalid');
button.setAttribute('disabled', true);
invalidFeedback.style.display = 'block';
}
}
function sendEmail(event) {
event.preventDefault();
alert("Worked!, but still in Test mode");
console.log('Form submitted!');
}
document.addEventListener('DOMContentLoaded', (event) => {
const inputs = document.querySelectorAll('input, textarea');
input => input.value = ''
});
</script>
</body>
</html>