Skip to content

Commit 8447cd6

Browse files
mennlomennlo
authored
Merge pull request #24 from mennlo/add-feedback
feedback form
2 parents cfe3a8c + 488469c commit 8447cd6

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-0
lines changed

‎assets/css/feedback.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* Feedback Section Styles */
2+
.feedback-section {
3+
margin-top: 2rem;
4+
padding: 1.5rem;
5+
background-color: #f0f8ff;
6+
border-radius: 8px;
7+
border: 1px solid #ddd;
8+
}
9+
10+
.feedback-section h3 {
11+
margin-bottom: 1rem;
12+
color: var(--primary-color);
13+
}
14+
15+
.feedback-button {
16+
padding: 0.5rem 1rem;
17+
background-color: var(--secondary-color);
18+
color: white;
19+
border: none;
20+
border-radius: 4px;
21+
cursor: pointer;
22+
font-size: 1rem;
23+
}
24+
25+
.feedback-button:hover {
26+
background-color: #2980b9;
27+
}
28+
29+
.form-group {
30+
margin-bottom: 1rem;
31+
}
32+
33+
.form-group label {
34+
display: block;
35+
margin-bottom: 0.5rem;
36+
font-weight: bold;
37+
}
38+
39+
.form-group select,
40+
.form-group textarea {
41+
width: 100%;
42+
padding: 0.5rem;
43+
border: 1px solid #ddd;
44+
border-radius: 4px;
45+
font-family: inherit;
46+
}
47+
48+
.form-actions {
49+
display: flex;
50+
gap: 0.5rem;
51+
}
52+
53+
.submit-button {
54+
padding: 0.5rem 1rem;
55+
background-color: #27ae60;
56+
color: white;
57+
border: none;
58+
border-radius: 4px;
59+
cursor: pointer;
60+
}
61+
62+
.submit-button:hover {
63+
background-color: #219653;
64+
}
65+
66+
.cancel-button {
67+
padding: 0.5rem 1rem;
68+
background-color: #e74c3c;
69+
color: white;
70+
border: none;
71+
border-radius: 4px;
72+
cursor: pointer;
73+
}
74+
75+
.cancel-button:hover {
76+
background-color: #c0392b;
77+
}
78+
79+
#feedback-message {
80+
padding: 1rem;
81+
background-color: #e8f7ee;
82+
border-radius: 4px;
83+
text-align: center;
84+
}
85+
86+
#feedback-message p {
87+
margin-bottom: 1rem;
88+
}

‎md-viewer.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Grappling Game Viewer</title>
77
<link rel="stylesheet" href="assets/css/style.css">
8+
<link rel="stylesheet" href="assets/css/feedback.css">
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
910
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
1011
</head>
@@ -25,12 +26,41 @@ <h1>Grappling Games</h1>
2526
<h2 id="file-title">Loading...</h2>
2627
<div id="markdown-content"></div>
2728
</div>
29+
30+
<div id="feedback-section" class="feedback-section">
31+
<h3>Provide Feedback</h3>
32+
<button id="show-feedback-form" class="feedback-button">Leave Feedback</button>
33+
<div id="feedback-form-container" style="display: none;">
34+
<form id="feedback-form">
35+
<div class="form-group">
36+
<label for="feedback-type">Type of Feedback:</label>
37+
<select id="feedback-type" required>
38+
<option value="">Select an option</option>
39+
<option value="suggestion">Suggestion</option>
40+
<option value="improvement">Improvement</option>
41+
<option value="correction">Correction</option>
42+
<option value="question">Question</option>
43+
</select>
44+
</div>
45+
<div class="form-group">
46+
<label for="feedback-text">Your Feedback:</label>
47+
<textarea id="feedback-text" rows="4" required></textarea>
48+
</div>
49+
<div class="form-actions">
50+
<button type="submit" class="submit-button">Submit Feedback</button>
51+
<button type="button" id="cancel-feedback" class="cancel-button">Cancel</button>
52+
</div>
53+
</form>
54+
<div id="feedback-message" style="display: none;"></div>
55+
</div>
56+
</div>
2857
</main>
2958

3059
<footer>
3160
<div class="container">
3261
<p>Last updated: June 19, 2025</p>
3362
<p><a href="https://github.com/mennlo/grappling-games">View on GitHub <i class="fab fa-github"></i></a></p>
63+
<p><a href="https://github.com/mennlo/grappling-games/issues/new?title=Feedback%20on%20" id="feedback-link" target="_blank">Provide Feedback <i class="fas fa-comment"></i></a></p>
3464
</div>
3565
</footer>
3666

@@ -53,6 +83,10 @@ <h2 id="file-title">Loading...</h2>
5383
document.getElementById('file-title').textContent = `${formatName(fileName)} ${contentType}`;
5484
document.title = `${formatName(fileName)} - Grappling Games`;
5585

86+
// Update the feedback link with the current file
87+
const feedbackLink = document.getElementById('feedback-link');
88+
feedbackLink.href = `https://github.com/mennlo/grappling-games/issues/new?title=Feedback%20on%20${formatName(fileName)}&body=Feedback%20for:%20${filePath}%0A%0AYour%20feedback:%20`;
89+
5690
// Fetch the markdown content from GitHub
5791
const baseRepoUrl = 'https://api.github.com/repos/mennlo/grappling-games/contents/';
5892

@@ -82,6 +116,64 @@ <h2 id="file-title">Loading...</h2>
82116
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
83117
.join(' ');
84118
}
119+
120+
// Handle feedback form
121+
const showFeedbackFormButton = document.getElementById('show-feedback-form');
122+
const feedbackFormContainer = document.getElementById('feedback-form-container');
123+
const feedbackForm = document.getElementById('feedback-form');
124+
const cancelFeedbackButton = document.getElementById('cancel-feedback');
125+
const feedbackMessage = document.getElementById('feedback-message');
126+
127+
showFeedbackFormButton.addEventListener('click', function() {
128+
feedbackFormContainer.style.display = 'block';
129+
showFeedbackFormButton.style.display = 'none';
130+
});
131+
132+
cancelFeedbackButton.addEventListener('click', function() {
133+
feedbackFormContainer.style.display = 'none';
134+
showFeedbackFormButton.style.display = 'block';
135+
feedbackForm.reset();
136+
});
137+
138+
feedbackForm.addEventListener('submit', function(e) {
139+
e.preventDefault();
140+
141+
const feedbackType = document.getElementById('feedback-type').value;
142+
const feedbackText = document.getElementById('feedback-text').value;
143+
144+
// Create a GitHub issue via the API
145+
createGitHubIssue(fileName, filePath, feedbackType, feedbackText);
146+
});
147+
148+
function createGitHubIssue(fileName, filePath, feedbackType, feedbackText) {
149+
// Normally, you would use the GitHub API here, but that requires authentication
150+
// For simplicity, we'll redirect to the new issue page with pre-filled information
151+
const issueTitle = `Feedback [${feedbackType}]: ${formatName(fileName)}`;
152+
const issueBody = `Feedback for: ${filePath}\n\nType: ${feedbackType}\n\n${feedbackText}`;
153+
154+
const encodedTitle = encodeURIComponent(issueTitle);
155+
const encodedBody = encodeURIComponent(issueBody);
156+
157+
const issueUrl = `https://github.com/mennlo/grappling-games/issues/new?title=${encodedTitle}&body=${encodedBody}`;
158+
159+
// Show success message
160+
feedbackForm.style.display = 'none';
161+
feedbackMessage.innerHTML = `
162+
<p>Thank you for your feedback!</p>
163+
<p>Please complete your submission on GitHub:</p>
164+
<a href="${issueUrl}" target="_blank" class="submit-button">Continue to GitHub</a>
165+
<button type="button" id="close-feedback" class="cancel-button">Close</button>
166+
`;
167+
feedbackMessage.style.display = 'block';
168+
169+
document.getElementById('close-feedback').addEventListener('click', function() {
170+
feedbackFormContainer.style.display = 'none';
171+
showFeedbackFormButton.style.display = 'block';
172+
feedbackForm.reset();
173+
feedbackForm.style.display = 'block';
174+
feedbackMessage.style.display = 'none';
175+
});
176+
}
85177
});
86178
</script>
87179
</body>

0 commit comments

Comments
 (0)