Hugging Face's logo

Spaces:
Hasan3030
/
moodle
Running

App Files Community
moodle / index.html
Hasan3030's picture
Hasan3030
Add 2 files
7c869e9 verified
Raw
History Blame Contribute Delete
14 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Moodle Mobile WebView App</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .webview-container {
 position: relative;
 height: 100vh;
 overflow: hidden;
 }
#moodle-webview {
 width: 100%;
 height: 100%;
 border: none;
 }
.native-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 pointer-events: none;
 z-index: 10;
 }
.native-controls {
 position: absolute;
 bottom: 20px;
 left: 0;
 right: 0;
 display: flex;
 justify-content: center;
 gap: 15px;
 pointer-events: auto;
 }
.control-btn {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color: #3b82f6;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 transition: all 0.2s;
 }
.control-btn:hover {
 transform: scale(1.1);
 background-color: #2563eb;
 }
.header {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 60px;
 background-color: white;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 15px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 z-index: 20;
 }
.focus-mode-indicator {
 position: absolute;
 top: 70px;
 right: 15px;
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px 12px;
 border-radius: 20px;
 font-size: 12px;
 display: none;
 z-index: 30;
 }
.file-upload-modal {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: white;
 padding: 20px;
 border-radius: 10px;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 z-index: 40;
 display: none;
 width: 90%;
 max-width: 400px;
 }
.modal-backdrop {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 35;
 display: none;
 }
.upload-option {
 display: flex;
 align-items: center;
 padding: 15px;
 margin-bottom: 10px;
 border-radius: 8px;
 background-color: #f3f4f6;
 cursor: pointer;
 transition: all 0.2s;
 }
.upload-option:hover {
 background-color: #e5e7eb;
 }
.upload-option i {
 margin-right: 10px;
 font-size: 20px;
 color: #3b82f6;
 }
.notification-badge {
 position: absolute;
 top: -5px;
 right: -5px;
 background-color: #ef4444;
 color: white;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 }
 </style>
</head>
<body class="bg-gray-100">
 <div class="webview-container">
 <!-- Header with native controls -->
 <div class="header">
 <button id="back-btn" class="text-blue-500">
 <i class="fas fa-arrow-left"></i>
 </button>
 <h1 class="text-lg font-semibold">Moodle Mobile</h1>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button id="notifications-btn" class="text-blue-500">
 <i class="fas fa-bell"></i>
 <span id="notification-count" class="notification-badge">3</span>
 </button>
 </div>
 <button id="focus-mode-btn" class="text-blue-500">
 <i class="fas fa-moon"></i>
 </button>
 </div>
 </div>
<!-- Focus mode indicator -->
 <div id="focus-mode-indicator" class="focus-mode-indicator">
 <i class="fas fa-moon mr-1"></i> Focus Mode Active
 </div>
<!-- WebView content -->
 <iframe id="moodle-webview" src="https://demo1.sumoodtech.com"></iframe>
<!-- Native overlay for controls -->
 <div class="native-overlay">
 <div class="native-controls">
 <button id="upload-btn" class="control-btn" title="Upload Files">
 <i class="fas fa-upload"></i>
 </button>
 <button id="camera-btn" class="control-btn" title="Take Photo">
 <i class="fas fa-camera"></i>
 </button>
 <button id="mic-btn" class="control-btn" title="Record Audio">
 <i class="fas fa-microphone"></i>
 </button>
 <button id="refresh-btn" class="control-btn" title="Refresh">
 <i class="fas fa-sync-alt"></i>
 </button>
 <button id="downloads-btn" class="control-btn" title="Downloads">
 <i class="fas fa-download"></i>
 </button>
 </div>
 </div>
<!-- File upload modal -->
 <div id="modal-backdrop" class="modal-backdrop"></div>
 <div id="file-upload-modal" class="file-upload-modal">
 <h2 class="text-xl font-bold mb-4">Upload Options</h2>
 <div class="upload-option" id="file-upload-option">
 <i class="fas fa-file"></i>
 <span>Select File from Device</span>
 </div>
 <div class="upload-option" id="camera-upload-option">
 <i class="fas fa-camera"></i>
 <span>Take Photo</span>
 </div>
 <div class="upload-option" id="audio-upload-option">
 <i class="fas fa-microphone"></i>
 <span>Record Audio</span>
 </div>
 <div class="upload-option" id="gallery-upload-option">
 <i class="fas fa-images"></i>
 <span>Choose from Gallery</span>
 </div>
 <button id="cancel-upload-btn" class="mt-4 w-full py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">
 Cancel
 </button>
 </div>
 </div>
<script>
 // DOM elements
 const uploadBtn = document.getElementById('upload-btn');
 const cameraBtn = document.getElementById('camera-btn');
 const micBtn = document.getElementById('mic-btn');
 const refreshBtn = document.getElementById('refresh-btn');
 const downloadsBtn = document.getElementById('downloads-btn');
 const backBtn = document.getElementById('back-btn');
 const notificationsBtn = document.getElementById('notifications-btn');
 const focusModeBtn = document.getElementById('focus-mode-btn');
 const fileUploadModal = document.getElementById('file-upload-modal');
 const modalBackdrop = document.getElementById('modal-backdrop');
 const cancelUploadBtn = document.getElementById('cancel-upload-btn');
 const focusModeIndicator = document.getElementById('focus-mode-indicator');
 const moodleWebview = document.getElementById('moodle-webview');
// Upload option buttons
 const fileUploadOption = document.getElementById('file-upload-option');
 const cameraUploadOption = document.getElementById('camera-upload-option');
 const audioUploadOption = document.getElementById('audio-upload-option');
 const galleryUploadOption = document.getElementById('gallery-upload-option');
// State variables
 let isFocusMode = false;
 let notificationCount = 3;
// Event listeners
 uploadBtn.addEventListener('click', () => {
 showModal();
 });
cameraBtn.addEventListener('click', () => {
 alert('Camera access would be requested here in the Flutter app');
 // In Flutter, this would trigger the camera plugin
 });
micBtn.addEventListener('click', () => {
 alert('Microphone access would be requested here in the Flutter app');
 // In Flutter, this would trigger the audio recording plugin
 });
refreshBtn.addEventListener('click', () => {
 moodleWebview.src = moodleWebview.src;
 showToast('Page refreshed');
 });
downloadsBtn.addEventListener('click', () => {
 alert('Downloads folder would open here in the Flutter app');
 // In Flutter, this would open the downloads directory
 });
backBtn.addEventListener('click', () => {
 if (window.history.length > 1) {
 window.history.back();
 } else {
 showToast('Cannot go back further');
 }
 });
notificationsBtn.addEventListener('click', () => {
 alert('Notifications screen would open here');
 // In Flutter, this would navigate to a notifications screen
 // Clear notifications
 notificationCount = 0;
 document.getElementById('notification-count').textContent = '0';
 document.getElementById('notification-count').style.display = 'none';
 });
focusModeBtn.addEventListener('click', () => {
 isFocusMode = !isFocusMode;
 if (isFocusMode) {
 focusModeBtn.innerHTML = '<i class="fas fa-sun"></i>';
 focusModeIndicator.style.display = 'block';
 showToast('Focus mode activated');
 } else {
 focusModeBtn.innerHTML = '<i class="fas fa-moon"></i>';
 focusModeIndicator.style.display = 'none';
 showToast('Focus mode deactivated');
 }
 });
cancelUploadBtn.addEventListener('click', () => {
 hideModal();
 });
modalBackdrop.addEventListener('click', () => {
 hideModal();
 });
fileUploadOption.addEventListener('click', () => {
 hideModal();
 alert('File picker would open here in the Flutter app');
 // In Flutter, this would trigger the file picker plugin
 });
cameraUploadOption.addEventListener('click', () => {
 hideModal();
 alert('Camera would open here in the Flutter app');
 // In Flutter, this would trigger the camera plugin
 });
audioUploadOption.addEventListener('click', () => {
 hideModal();
 alert('Audio recorder would open here in the Flutter app');
 // In Flutter, this would trigger the audio recording plugin
 });
galleryUploadOption.addEventListener('click', () => {
 hideModal();
 alert('Gallery would open here in the Flutter app');
 // In Flutter, this would trigger the image picker plugin
 });
// Helper functions
 function showModal() {
 fileUploadModal.style.display = 'block';
 modalBackdrop.style.display = 'block';
 }
function hideModal() {
 fileUploadModal.style.display = 'none';
 modalBackdrop.style.display = 'none';
 }
function showToast(message) {
 const toast = document.createElement('div');
 toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm';
 toast.textContent = message;
 document.body.appendChild(toast);
setTimeout(() => {
 toast.remove();
 }, 2000);
 }
// Simulate receiving a notification
 setInterval(() => {
 if (Math.random() > 0.9 && !isFocusMode) {
 notificationCount++;
 const badge = document.getElementById('notification-count');
 badge.textContent = notificationCount;
 badge.style.display = 'flex';
 showToast('New notification received');
 }
 }, 10000);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hasan3030/moodle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>