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>