Skip to content

Commit a5db77a

Browse files
tuxusertuxuser
committed
site: Try error submission form
1 parent 6f2209a commit a5db77a

File tree

2 files changed

+299
-0
lines changed

2 files changed

+299
-0
lines changed

‎site/index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,88 @@ <h1>Xbox POST Error Codes</h1>
3535
Consider a <a href="https://github.com/sponsors/tuxuser">donation or sponsoring</a> if you find this project useful!
3636
</center>
3737
</div>
38+
<div class="info-text">
39+
<center>
40+
Do you want to help grow this database?<br><br> <button id="submit-code-btn" class="submit-code-btn"> Submit new error-code</button>
41+
</center>
42+
</div>
43+
44+
<!-- Modal -->
45+
<div id="submit-modal" class="modal">
46+
<div class="modal-content">
47+
<span class="close-modal">&times;</span>
48+
<h2>Submit Error Code</h2>
49+
<form action="https://nocodeform.io/f/6838a75640c263b75e9d8dff" method="POST" class="submit-form">
50+
<div class="form-group">
51+
<input type="email" placeholder="Email" name="email" required>
52+
</div>
53+
<div class="form-group">
54+
<input type="text" placeholder="Error Code" name="code" required>
55+
</div>
56+
<div class="form-group">
57+
<select name="console_type" required>
58+
<option value="">Select Console Type</option>
59+
<option value="xbox_one_phat">Xbox One Phat</option>
60+
<option value="xbox_one_s">Xbox One S</option>
61+
<option value="xbox_one_x">Xbox One X</option>
62+
<option value="series_s">Xbox Series S</option>
63+
<option value="series_x">Xbox Series X</option>
64+
</select>
65+
</div>
66+
<div class="form-group">
67+
<select name="code_type" required>
68+
<option value="">Select Code Type</option>
69+
<option value="smc">SMC</option>
70+
<option value="sp">SP</option>
71+
<option value="cpu">CPU</option>
72+
<option value="os">OS</option>
73+
</select>
74+
</div>
75+
<div class="form-group radio-group">
76+
<label>Is this an error?</label>
77+
<div class="radio-options">
78+
<div>
79+
<input type="radio" name="is_error" value="true" id="error_yes" required>
80+
<label for="error_yes">Yes</label>
81+
</div>
82+
<div>
83+
<input type="radio" name="is_error" value="false" id="error_no">
84+
<label for="error_no">No</label>
85+
</div>
86+
</div>
87+
</div>
88+
<div class="form-group">
89+
Please provide as many technical informations as possible.
90+
<ul>
91+
<li>Which components are involved?</li>
92+
<li>Components to check / measure</li>
93+
<li>etc.</li>
94+
</ul>
95+
<textarea name="technical_infos" placeholder="Technical information" required></textarea>
96+
</div>
97+
<div class="form-group radio-group">
98+
<label>Was it fixed?</label>
99+
<div class="radio-options">
100+
<div>
101+
<input type="radio" name="fixed" value="yes" id="fixed_yes" required>
102+
<label for="fixed_yes">Yes</label>
103+
</div>
104+
<div>
105+
<input type="radio" name="fixed" value="no" id="fixed_no">
106+
<label for="fixed_no">No</label>
107+
</div>
108+
</div>
109+
</div>
110+
<div class="form-group">
111+
<textarea name="message" placeholder="Additional information"></textarea>
112+
</div>
113+
<div class="form-group">
114+
<button type="submit" class="submit-button">Submit Code</button>
115+
</div>
116+
</form>
117+
</div>
118+
</div>
119+
38120
<div id="loading" class="loading">Loading error codes...</div>
39121
<div id="error" class="error" style="display: none;"></div>
40122
<div id="table-container" class="table-container" style="display: none;">
@@ -91,6 +173,15 @@ <h1>Xbox POST Error Codes</h1>
91173
</div>
92174
</main>
93175

176+
<!-- Thank you popup -->
177+
<div id="thanks-popup" class="modal">
178+
<div class="modal-content thanks-content">
179+
<span class="close-modal">&times;</span>
180+
<h2>Thank You!</h2>
181+
<p>Thanks for submitting a new error code. We will review it and update the site.</p>
182+
</div>
183+
</div>
184+
94185
<footer>
95186
<div class="container">
96187
<div class="footer-content">
@@ -109,6 +200,50 @@ <h1>Xbox POST Error Codes</h1>
109200
<script type="module">
110201
import { filters, setupFilters, updateActiveFilters, applyFilters } from './filters.js';
111202

203+
// Check for thanks parameter and show popup if present
204+
const urlParams = new URLSearchParams(window.location.search);
205+
if (urlParams.has('thanks')) {
206+
const thanksPopup = document.getElementById('thanks-popup');
207+
const closeThanks = thanksPopup.querySelector('.close-modal');
208+
209+
thanksPopup.style.display = "block";
210+
211+
closeThanks.onclick = function() {
212+
thanksPopup.style.display = "none";
213+
// Remove the thanks parameter from URL without reloading
214+
const newUrl = window.location.pathname + window.location.search.replace(/[?&]thanks/, '');
215+
window.history.replaceState({}, '', newUrl);
216+
}
217+
218+
window.onclick = function(event) {
219+
if (event.target == thanksPopup) {
220+
thanksPopup.style.display = "none";
221+
// Remove the thanks parameter from URL without reloading
222+
const newUrl = window.location.pathname + window.location.search.replace(/[?&]thanks/, '');
223+
window.history.replaceState({}, '', newUrl);
224+
}
225+
}
226+
}
227+
228+
// Modal handling
229+
const modal = document.getElementById('submit-modal');
230+
const btn = document.getElementById('submit-code-btn');
231+
const span = document.getElementsByClassName('close-modal')[0];
232+
233+
btn.onclick = function() {
234+
modal.style.display = "block";
235+
}
236+
237+
span.onclick = function() {
238+
modal.style.display = "none";
239+
}
240+
241+
window.onclick = function(event) {
242+
if (event.target == modal) {
243+
modal.style.display = "none";
244+
}
245+
}
246+
112247
const SUPPORTED_FORMAT_VERSION = 2;
113248
let errorData = [];
114249
let currentSort = { column: 'code', direction: 'asc' };

‎site/styles.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,4 +453,168 @@ footer {
453453
display: flex;
454454
align-items: center;
455455
gap: 4px;
456+
}
457+
458+
/* Submit Code Button and Modal Styles */
459+
.submit-code-btn {
460+
background-color: var(--primary-color);
461+
color: var(--on-primary);
462+
border: none;
463+
padding: 8px 16px;
464+
border-radius: 4px;
465+
cursor: pointer;
466+
font-size: 1em;
467+
transition: background-color 0.2s;
468+
}
469+
470+
.submit-code-btn:hover {
471+
background-color: var(--primary-variant);
472+
}
473+
474+
.modal {
475+
display: none;
476+
position: fixed;
477+
z-index: 1000;
478+
left: 0;
479+
top: 0;
480+
width: 100%;
481+
height: 100%;
482+
background-color: rgba(0, 0, 0, 0.5);
483+
overflow-y: auto;
484+
padding: 20px;
485+
box-sizing: border-box;
486+
}
487+
488+
.modal-content {
489+
background-color: var(--surface);
490+
margin: 20px auto;
491+
padding: 20px;
492+
border-radius: 8px;
493+
width: 90%;
494+
max-width: 600px;
495+
position: relative;
496+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
497+
max-height: calc(100vh - 40px);
498+
overflow-y: auto;
499+
box-sizing: border-box;
500+
}
501+
502+
.close-modal {
503+
position: absolute;
504+
right: 20px;
505+
top: 10px;
506+
font-size: 28px;
507+
font-weight: bold;
508+
cursor: pointer;
509+
color: var(--on-surface);
510+
}
511+
512+
.close-modal:hover {
513+
color: var(--primary-color);
514+
}
515+
516+
.submit-form {
517+
display: flex;
518+
flex-direction: column;
519+
gap: 16px;
520+
margin-top: 20px;
521+
padding-right: 4px; /* Add some padding for the scrollbar */
522+
}
523+
524+
.form-group {
525+
display: flex;
526+
flex-direction: column;
527+
gap: 8px;
528+
}
529+
530+
.form-group label {
531+
font-weight: 500;
532+
color: var(--on-surface);
533+
}
534+
535+
.form-group input[type="text"],
536+
.form-group input[type="email"],
537+
.form-group select,
538+
.form-group textarea {
539+
padding: 8px 12px;
540+
border: 1px solid var(--border-color);
541+
border-radius: 4px;
542+
background-color: var(--background);
543+
color: var(--on-background);
544+
font-size: 1em;
545+
}
546+
547+
.form-group textarea {
548+
min-height: 100px;
549+
resize: vertical;
550+
}
551+
552+
.radio-group {
553+
margin-top: 8px;
554+
}
555+
556+
.radio-options {
557+
display: flex;
558+
gap: 20px;
559+
}
560+
561+
.radio-options > div {
562+
display: flex;
563+
align-items: center;
564+
gap: 8px;
565+
}
566+
567+
.submit-button {
568+
background-color: var(--primary-color);
569+
color: var(--on-primary);
570+
border: none;
571+
padding: 12px 24px;
572+
border-radius: 4px;
573+
cursor: pointer;
574+
font-size: 1em;
575+
font-weight: 500;
576+
transition: background-color 0.2s;
577+
margin-top: 8px;
578+
}
579+
580+
.submit-button:hover {
581+
background-color: var(--primary-variant);
582+
}
583+
584+
@media (max-width: 768px) {
585+
.modal {
586+
padding: 10px;
587+
}
588+
589+
.modal-content {
590+
margin: 10px auto;
591+
width: 95%;
592+
padding: 15px;
593+
max-height: calc(100vh - 20px);
594+
}
595+
596+
.radio-options {
597+
flex-direction: column;
598+
gap: 10px;
599+
}
600+
}
601+
602+
/* Thank you popup styles */
603+
.thanks-content {
604+
text-align: center;
605+
max-width: 400px !important;
606+
padding: 30px !important;
607+
}
608+
609+
.thanks-content h2 {
610+
color: var(--primary-color);
611+
margin-top: 0;
612+
margin-bottom: 20px;
613+
}
614+
615+
.thanks-content p {
616+
color: var(--on-surface);
617+
font-size: 1.1em;
618+
line-height: 1.5;
619+
margin: 0;
456620
}

0 commit comments

Comments
 (0)