Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Campus Bike Rental Survey Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .filter-card { | |
| transition: all 0.3s ease; | |
| } | |
| .filter-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .data-card { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%); | |
| border-radius: 12px; | |
| } | |
| .highlight { | |
| background: linear-gradient(90deg, rgba(56,182,255,0.2) 0%, rgba(56,182,255,0) 100%); | |
| border-left: 4px solid #38b6ff; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="bicycle" class="text-blue-500 mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-900">Campus Bike Insights</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Raw Data</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Header --> | |
| <div class="mb-8 text-center" data-aos="fade-up"> | |
| <h1 class="text-3xl font-bold text-gray-900 mb-2">Bicycle Rental Survey Dashboard</h1> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Visual insights from student responses about bicycle usage and rental preferences on campus</p> | |
| </div> | |
| <!-- Filters --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8" data-aos="fade-up"> | |
| <div class="filter-card bg-white p-4 rounded-lg shadow-sm"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Filter by Cycling Experience</label> | |
| <select id="experience-filter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option value="all">All Responses</option> | |
| <option value="yes">Knows how to ride</option> | |
| <option value="no">Doesn't know how to ride</option> | |
| </select> | |
| </div> | |
| <div class="filter-card bg-white p-4 rounded-lg shadow-sm"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Filter by Current Transport</label> | |
| <select id="transport-filter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option value="all">All Transport Modes</option> | |
| <option value="Public Transport">Public Transport</option> | |
| <option value="Walking">Walking</option> | |
| </select> | |
| </div> | |
| <div class="filter-card bg-white p-4 rounded-lg shadow-sm"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Filter by Rental Interest</label> | |
| <select id="rental-filter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option value="all">All Responses</option> | |
| <option value="Yes">Interested in renting</option> | |
| <option value="No">Not interested</option> | |
| <option value="Maybe">Undecided</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8" data-aos="fade-up"> | |
| <div class="data-card p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i data-feather="users"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Responses</p> | |
| <p class="text-2xl font-bold text-gray-800">15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Know How to Ride</p> | |
| <p class="text-2xl font-bold text-gray-800">9 (60%)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i data-feather="dollar-sign"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Would Rent a Bike</p> | |
| <p class="text-2xl font-bold text-gray-800">7 (47%)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i data-feather="alert-triangle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Top Concern</p> | |
| <p class="text-2xl font-bold text-gray-800">Safety</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Cycling Frequency --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-right"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Current Bicycle Usage Frequency</h3> | |
| <div class="chart-container"> | |
| <canvas id="frequencyChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Rental Interest --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-left"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Interest in Bike Rental Service</h3> | |
| <div class="chart-container"> | |
| <canvas id="rentalChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Motivation Factors --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-right"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Top Motivations for Bike Rental</h3> | |
| <div class="chart-container"> | |
| <canvas id="motivationChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Rental Concerns --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-left"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Main Concerns About Bike Rental</h3> | |
| <div class="chart-container"> | |
| <canvas id="concernsChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Insights --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Preferred Rental Plans & Additional Services</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Rental Plan Preferences</h4> | |
| <div class="chart-container"> | |
| <canvas id="plansChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Requested Additional Services</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Free safety gear</span> | |
| <span class="text-sm font-medium text-gray-700">73%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 73%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Cycling lessons</span> | |
| <span class="text-sm font-medium text-gray-700">53%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 53%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Maintenance support</span> | |
| <span class="text-sm font-medium text-gray-700">47%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 47%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Group cycling events</span> | |
| <span class="text-sm font-medium text-gray-700">33%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 33%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Barriers to Cycling --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Perceived Barriers to Cycling on Campus</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="p-4 rounded-lg highlight"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3"> | |
| <i data-feather="alert-circle" class="text-red-500"></i> | |
| </div> | |
| <h4 class="font-medium">Lack of bike-friendly infrastructure</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">Mentioned by 40% of respondents as the primary barrier to cycling on campus.</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i data-feather="user" class="text-purple-500"></i> | |
| </div> | |
| <h4 class="font-medium">Personal preference for other transport</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">33% of respondents prefer other transportation modes over cycling.</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> | |
| <i data-feather="eye-off" class="text-yellow-500"></i> | |
| </div> | |
| <h4 class="font-medium">Lack of awareness of cycling benefits</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">13% believe students aren't sufficiently aware of cycling advantages.</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i data-feather="shield" class="text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium">Safety concerns</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">7% specifically mentioned safety as their main concern about cycling.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Raw Data Preview --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Survey Response Preview</h3> | |
| <button class="text-sm text-blue-500 hover:text-blue-700 font-medium">View Full Data</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Experience</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Frequency</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transport</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rental Interest</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Top Motivation</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Main Concern</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Yes</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Daily</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Public Transport</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Affordability</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Safety</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">No</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Occasionally</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Public Transport</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Maybe</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Convenience</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lack of skills</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">No</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Occasionally</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Walking</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Affordability</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cost</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="bicycle" class="text-blue-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-900">Campus Bike Insights</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center md:text-left"> | |
| <p class="text-xs text-gray-500">© 2023 Campus Bike Insights. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize animations and icons | |
| AOS.init(); | |
| feather.replace(); | |
| // Chart data | |
| const frequencyData = { | |
| labels: ['Daily', 'Occasionally', 'Never'], | |
| datasets: [{ | |
| data: [1, 10, 4], | |
| backgroundColor: ['#3B82F6', '#10B981', '#6366F1'], | |
| borderWidth: 0 | |
| }] | |
| }; | |
| const rentalData = { | |
| labels: ['Yes', 'No', 'Maybe'], | |
| datasets: [{ | |
| data: [7, 4, 4], | |
| backgroundColor: ['#10B981', '#EF4444', '#F59E0B'], | |
| borderWidth: 0 | |
| }] | |
| }; | |
| const motivationData = { | |
| labels: ['Convenience', 'Affordability', 'Availability', 'Eco-friendly', 'Exercise'], | |
| datasets: [{ | |
| label: 'Mentions', | |
| data: [10, 8, 6, 4, 5], | |
| backgroundColor: '#3B82F6', | |
| borderWidth: 0, | |
| borderRadius: 4 | |
| }] | |
| }; | |
| const concernsData = { | |
| labels: ['Safety', 'Cost', 'Lack of skills', 'Parking', 'Injury risk'], | |
| datasets: [{ | |
| label: 'Mentions', | |
| data: [7, 6, 5, 3, 2], | |
| backgroundColor: '#EF4444', | |
| borderWidth: 0, | |
| borderRadius: 4 | |
| }] | |
| }; | |
| const plansData = { | |
| labels: ['Pay-per-ride', 'Daily', 'Weekly', 'Semester'], | |
| datasets: [{ | |
| data: [5, 4, 2, 3], | |
| backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#6366F1'], | |
| borderWidth: 0 | |
| }] | |
| }; | |
| // Create charts | |
| const frequencyChart = new Chart( | |
| document.getElementById('frequencyChart'), | |
| { | |
| type: 'doughnut', | |
| data: frequencyData, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| } | |
| ); | |
| const rentalChart = new Chart( | |
| document.getElementById('rentalChart'), | |
| { | |
| type: 'pie', | |
| data: rentalData, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| } | |
| ); | |
| const motivationChart = new Chart( | |
| document.getElementById('motivationChart'), | |
| { | |
| type: 'bar', | |
| data: motivationData, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| } | |
| ); | |
| const concernsChart = new Chart( | |
| document.getElementById('concernsChart'), | |
| { | |
| type: 'bar', | |
| data: concernsData, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| indexAxis: 'y', | |
| scales: { | |
| x: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| } | |
| ); | |
| const plansChart = new Chart( | |
| document.getElementById('plansChart'), | |
| { | |
| type: 'polarArea', | |
| data: plansData, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| } | |
| ); | |
| // Filter functionality (simplified for demo) | |
| document.getElementById('experience-filter').addEventListener('change', function() { | |
| // In a real app, this would filter the data and update charts | |
| console.log('Filter by experience:', this.value); | |
| }); | |
| document.getElementById('transport-filter').addEventListener('change', function() { | |
| console.log('Filter by transport:', this.value); | |
| }); | |
| document.getElementById('rental-filter').addEventListener('change', function() { | |
| console.log('Filter by rental interest:', this.value); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |