<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campus Feedback System</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1em;
}
.user-info {
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.guest-badge {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 50px;
font-size: 0.9em;
}
.login-btn {
background: white;
color: #667eea;
border: none;
padding: 8px 25px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.login-btn:hover {
transform: scale(1.05);
}
/* Quick Stats */
.stats-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 30px;
background: #f8f9fa;
border-bottom: 1px solid #e0e0e0;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-icon {
font-size: 2em;
margin-bottom: 10px;
}
.stat-card h3 {
font-size: 1.8em;
color: #333;
margin-bottom: 5px;
}
.stat-card p {
color: #666;
font-size: 0.9em;
}
/* Tabs */
.tabs {
display: flex;
background: white;
border-bottom: 2px solid #f0f0f0;
padding: 0 20px;
}
.tab-btn {
padding: 15px 25px;
border: none;
background: none;
font-size: 1em;
font-weight: 600;
color: #666;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 3px solid transparent;
transition: all 0.2s;
}
.tab-btn:hover {
color: #667eea;
}
.[Link] {
color: #667eea;
border-bottom-color: #667eea;
}
/* Tab Content */
.tab-content {
display: none;
padding: 30px;
}
.[Link] {
display: block;
}
/* Forms */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #667eea;
}
textarea {
min-height: 100px;
resize: vertical;
}
/* Rating */
.rating-container {
margin: 20px 0;
}
.emoji-rating {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 10px;
}
.emoji-rating span {
font-size: 2.5em;
cursor: pointer;
opacity: 0.5;
transition: all 0.2s;
filter: grayscale(100%);
}
.emoji-rating span:hover,
.emoji-rating [Link] {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.2);
}
/* Urgency Options */
.urgency-options {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 10px;
}
.urgency-options label {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 8px 15px;
border-radius: 50px;
border: 2px solid transparent;
transition: all 0.2s;
}
.urgency-options input[type="radio"] {
width: auto;
margin-right: 5px;
}
.urgency-low { background: #d4edda; color: #155724; }
.urgency-medium { background: #fff3cd; color: #856404; }
.urgency-high { background: #f8d7da; color: #721c24; }
.urgency-critical { background: #dc3545; color: white; }
/* Checkboxes */
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
.checkbox-group input[type="checkbox"] {
width: auto;
margin: 0;
}
.checkbox-group label {
margin: 0;
cursor: pointer;
}
/* File Upload */
.file-upload {
border: 2px dashed #e0e0e0;
padding: 20px;
text-align: center;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s;
}
.file-upload:hover {
border-color: #667eea;
}
.file-upload input {
display: none;
}
.file-upload label {
cursor: pointer;
color: #667eea;
margin: 0;
}
/* Buttons */
.submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: transform 0.2s;
}
.submit-btn:hover {
transform: translateY(-2px);
}
/* History Items */
.history-item {
background: #f8f9fa;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
border-left: 4px solid transparent;
}
.[Link] { border-left-color: #667eea; }
.[Link] { border-left-color: #dc3545; }
.history-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.history-type {
font-weight: 600;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.9em;
}
.type-feedback { background: #e3f2fd; color: #1976d2; }
.type-complaint { background: #ffebee; color: #c62828; }
.status-badge {
padding: 3px 10px;
border-radius: 50px;
font-size: 0.9em;
}
.status-pending { background: #fff3cd; color: #856404; }
.status-progress { background: #b8daff; color: #004085; }
.status-resolved { background: #d4edda; color: #155724; }
/* News Items */
.news-item {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
}
.news-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 50px;
font-size: 0.9em;
font-weight: 600;
margin-bottom: 10px;
}
.badge-announcement { background: #cce5ff; color: #004085; }
.badge-resolved { background: #d4edda; color: #155724; }
.badge-achievement { background: #fff3cd; color: #856404; }
.badge-event { background: #e2d5f1; color: #6f42c1; }
.news-date {
color: #666;
font-size: 0.9em;
margin: 10px 0;
}
.news-footer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
color: #666;
font-size: 0.9em;
}
.verified-badge {
color: #28a745;
font-weight: 600;
}
/* Footer */
.footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
.footer-links {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 20px;
}
.footer-links a {
color: #ccc;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1 1 auto;
justify-content: center;
}
.urgency-options {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1> Campus Feedback System</h1>
<p>Your voice matters - Help us make our campus better!</p>
<div class="user-info">
<span class="guest-badge"> Guest User (Demo Mode)</span>
<button class="login-btn" onclick="alert('Login feature coming soon!')">Login</button>
</div>
</div>
<!-- Quick Stats -->
<div class="stats-container">
<div class="stat-card">
<div class="stat-icon"> </div>
<h3>12</h3>
<p>Feedback Given</p>
</div>
<div class="stat-card">
<div class="stat-icon"> </div>
<h3>3</h3>
<p>Active Complaints</p>
</div>
<div class="stat-card">
<div class="stat-icon"> </div>
<h3>8</h3>
<p>Resolved</p>
</div>
<div class="stat-card">
<div class="stat-icon"> </div>
<h3>5</h3>
<p>New Updates</p>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('feedback')">
<span> </span> Feedback
</button>
<button class="tab-btn" onclick="switchTab('complaint')">
<span> </span> Complaint
</button>
<button class="tab-btn" onclick="switchTab('history')">
<span> </span> My History
</button>
<button class="tab-btn" onclick="switchTab('news')">
<span> </span> News
</button>
</div>
<!-- Feedback Tab -->
<div id="feedbackTab" class="tab-content active">
<h2 style="margin-bottom: 20px;"> Submit Feedback</h2>
<form id="feedbackForm" onsubmit="[Link](); submitFeedback();">
<div class="form-group">
<label>Feedback Type:</label>
<select id="feedbackType" required>
<option value="">Select feedback type</option>
<option value="course"> Course Feedback</option>
<option value="faculty"> Faculty Feedback</option>
<option value="facility"> Campus Facilities</option>
<option value="other"> Other</option>
</select>
</div>
<div class="rating-container">
<label>Your Rating:</label>
<div class="emoji-rating" id="emojiRating">
<span data-rating="1" onclick="setRating(1)"> </span>
<span data-rating="2" onclick="setRating(2)"> </span>
<span data-rating="3" onclick="setRating(3)"> </span>
<span data-rating="4" onclick="setRating(4)"> </span>
<span data-rating="5" onclick="setRating(5)"> </span>
</div>
<input type="hidden" id="ratingValue" value="0">
</div>
<div class="form-group">
<label>Your Feedback:</label>
<textarea id="feedbackText" placeholder="Please share your thoughts..."
required></textarea>
</div>
<div class="checkbox-group">
<input type="checkbox" id="anonymousFeedback">
<label for="anonymousFeedback"> Submit Anonymously</label>
</div>
<button type="submit" class="submit-btn">Submit Feedback</button>
</form>
</div>
<!-- Complaint Tab -->
<div id="complaintTab" class="tab-content">
<h2 style="margin-bottom: 20px;"> Lodge a Complaint</h2>
<form id="complaintForm" onsubmit="[Link](); submitComplaint();">
<div class="form-group">
<label>Category:</label>
<select id="complaintCategory" required>
<option value="">Select category</option>
<option value="infrastructure"> Infrastructure (Broken furniture, lights,
etc.)</option>
<option value="faculty"> Faculty-Related</option>
<option value="canteen"> Canteen/Food Quality</option>
<option value="academic"> Academic Issues</option>
<option value="hygiene"> Hygiene/Sanitation</option>
<option value="maintenance"> Maintenance Required</option>
<option value="harassment"> Harassment/Bullying</option>
<option value="other"> Other</option>
</select>
</div>
<div class="form-group">
<label>Urgency Level:</label>
<div class="urgency-options">
<label class="urgency-low">
<input type="radio" name="urgency" value="low" required> Low
</label>
<label class="urgency-medium">
<input type="radio" name="urgency" value="medium"> Medium
</label>
<label class="urgency-high">
<input type="radio" name="urgency" value="high"> High
</label>
<label class="urgency-critical">
<input type="radio" name="urgency" value="critical"> Critical
</label>
</div>
</div>
<div class="form-group">
<label>Complaint Title:</label>
<input type="text" id="complaintTitle" placeholder="Brief title" required>
</div>
<div class="form-group">
<label>Detailed Description:</label>
<textarea id="complaintDescription" placeholder="Describe the issue in detail..."
required></textarea>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" id="complaintLocation" placeholder="Building/Room number"
required>
</div>
<div class="form-group">
<label>Upload Evidence (Optional):</label>
<div class="file-upload">
<input type="file" id="evidenceFile" accept="image/*" multiple>
<label for="evidenceFile"> Click to upload images</label>
<p style="font-size: 0.8em; color: #666; margin-top: 5px;">Max 5 files</p>
</div>
</div>
<div class="checkbox-group">
<input type="checkbox" id="complaintAnonymous">
<label for="complaintAnonymous"> Submit Anonymously</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="complaintTerms" required>
<label for="complaintTerms">✓ I confirm this complaint is genuine</label>
</div>
<button type="submit" class="submit-btn">Lodge Complaint</button>
</form>
</div>
<!-- History Tab -->
<div id="historyTab" class="tab-content">
<h2 style="margin-bottom: 20px;"> My History</h2>
<div class="form-group">
<select id="historyFilter" onchange="filterHistory()">
<option value="all">All Items</option>
<option value="feedback">Feedback Only</option>
<option value="complaint">Complaints Only</option>
<option value="pending">Pending Complaints</option>
<option value="resolved">Resolved Complaints</option>
</select>
</div>
<div id="historyList">
<!-- Sample History Items -->
<div class="history-item feedback">
<div class="history-header">
<span class="history-type type-feedback"> Feedback</span>
<span class="history-date">March 15, 2024</span>
</div>
<h4>Course: Computer Science 101</h4>
<p>Rating: ☆</p>
<p>"Great teaching but need more practical examples"</p>
</div>
<div class="history-item complaint">
<div class="history-header">
<span class="history-type type-complaint"> Complaint</span>
<span class="status-badge status-progress"> In Progress</span>
</div>
<h4>Canteen Food Quality</h4>
<p>Urgency: High</p>
<p>"Food quality has declined significantly..."</p>
</div>
<div class="history-item complaint">
<div class="history-header">
<span class="history-type type-complaint"> Complaint</span>
<span class="status-badge status-resolved"> Resolved</span>
</div>
<h4>Broken AC in Library</h4>
<p>Urgency: Medium</p>
<p>"AC on 2nd floor not working for 3 days"</p>
</div>
</div>
</div>
<!-- News Tab -->
<div id="newsTab" class="tab-content">
<h2 style="margin-bottom: 20px;"> Campus Updates</h2>
<div id="newsList">
<div class="news-item">
<span class="news-badge badge-announcement"> ANNOUNCEMENT</span>
<h3>Library Timings Extended</h3>
<p>Library will remain open from 8 AM to 12 AM during exam week (March 20-30).</p>
<div class="news-date"> March 15, 2024</div>
<div class="news-footer">
<span>— Admin Office</span>
<span class="verified-badge"> Verified</span>
</div>
</div>
<div class="news-item">
<span class="news-badge badge-resolved"> RESOLVED</span>
<h3>WiFi Issue Fixed in Library</h3>
<p>The internet connectivity issue in the library has been resolved. Thank you for your
patience.</p>
<div class="news-date"> March 14, 2024</div>
<div class="news-footer">
<span>— IT Department</span>
<span class="verified-badge"> Verified</span>
</div>
</div>
<div class="news-item">
<span class="news-badge badge-achievement"> ACHIEVEMENT</span>
<h3>Green Campus Award 2024</h3>
<p>Our campus has been recognized as the 'Best Green Campus' for our environmental
initiatives.</p>
<div class="news-date"> March 13, 2024</div>
<div class="news-footer">
<span>— Director's Office</span>
<span class="verified-badge"> Verified</span>
</div>
</div>
<div class="news-item">
<span class="news-badge badge-event"> EVENT</span>
<h3>Annual Sports Day</h3>
<p>Annual Sports Day will be held on March 25th. Register by March 20th.</p>
<div class="news-date"> March 12, 2024</div>
<div class="news-footer">
<span>— Sports Department</span>
<span class="verified-badge"> Verified</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2024 Campus Feedback System - Your Voice Matters</p>
<div class="footer-links">
<a href="#" onclick="alert('About page coming soon!')">About</a>
<a href="#" onclick="alert('FAQ page coming soon!')">FAQ</a>
<a href="#" onclick="alert('Contact page coming soon!')">Contact</a>
</div>
</div>
</div>
<script>
// Tab Switching
function switchTab(tabName) {
// Hide all tabs
[Link]('.tab-content').forEach(tab => {
[Link]('active');
});
// Remove active class from all buttons
[Link]('.tab-btn').forEach(btn => {
[Link]('active');
});
// Show selected tab
[Link](tabName + 'Tab').[Link]('active');
// Add active class to clicked button
[Link]('active');
}
// Rating System
let currentRating = 0;
function setRating(rating) {
currentRating = rating;
[Link]('ratingValue').value = rating;
// Update emoji styles
[Link]('.emoji-rating span').forEach((emoji, index) => {
if (index < rating) {
[Link]('selected');
} else {
[Link]('selected');
}
});
}
// Submit Feedback
function submitFeedback() {
const type = [Link]('feedbackType').value;
const rating = currentRating;
const text = [Link]('feedbackText').value;
const anonymous = [Link]('anonymousFeedback').checked;
if (!type || rating === 0 || !text) {
alert('Please fill all required fields!');
return;
}
alert(' Feedback submitted successfully!\n' +
'Type: ' + type + '\n' +
'Rating: ' + rating + ' stars\n' +
'Anonymous: ' + (anonymous ? 'Yes' : 'No'));
// Reset form
[Link]('feedbackForm').reset();
setRating(0);
}
// Submit Complaint
function submitComplaint() {
const category = [Link]('complaintCategory').value;
const urgency = [Link]('input[name="urgency"]:checked');
const title = [Link]('complaintTitle').value;
const description = [Link]('complaintDescription').value;
const location = [Link]('complaintLocation').value;
const anonymous = [Link]('complaintAnonymous').checked;
const terms = [Link]('complaintTerms').checked;
if (!category || !urgency || !title || !description || !location || !terms) {
alert('Please fill all required fields!');
return;
}
alert(' Complaint lodged successfully!\n' +
'Category: ' + category + '\n' +
'Urgency: ' + [Link] + '\n' +
'Title: ' + title + '\n' +
'Location: ' + location + '\n' +
'Anonymous: ' + (anonymous ? 'Yes' : 'No'));
// Reset form
[Link]('complaintForm').reset();
}
// Filter History
function filterHistory() {
const filter = [Link]('historyFilter').value;
alert('Filtering by: ' + filter + ' (This will be implemented with real data soon!)');
}
// File upload preview (simplified)
[Link]('evidenceFile')?.addEventListener('change', function(e) {
const files = [Link];
if ([Link] > 5) {
alert('Maximum 5 files allowed!');
[Link] = '';
}
});
// Simulate loading effect
[Link]('load', function() {
[Link]('Campus Feedback System loaded successfully!');
});
</script>
</body>
</html>