Spaces:

ruslan312
/

medtrack

Running

App Files Files Community

ruslan312 commited on Mar 28

Commit

6ffe06c

verified ·

1 Parent(s): 0c876af

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +704 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Medtrack
-emoji: 🐢
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: medtrack
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,704 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MedTrack - Medication Reminder</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #4a89dc;
+            --secondary: #3bafda;
+            --success: #8cc152;
+            --danger: #e9573f;
+            --light: #f5f7fa;
+            --dark: #434a54;
+            --gray: #e6e9ed;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f9f9f9;
+            color: var(--dark);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--gray);
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo i {
+            color: var(--primary);
+            font-size: 28px;
+        }
+        .logo h1 {
+            font-size: 24px;
+            font-weight: 600;
+            color: var(--dark);
+        }
+        .btn {
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #3a70c2;
+        }
+        .btn-secondary {
+            background-color: var(--secondary);
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #2a9ac7;
+        }
+        .btn-success {
+            background-color: var(--success);
+            color: white;
+        }
+        .btn-success:hover {
+            background-color: #7aae4a;
+        }
+        .btn-danger {
+            background-color: var(--danger);
+            color: white;
+        }
+        .btn-danger:hover {
+            background-color: #d8422d;
+        }
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--gray);
+            color: var(--dark);
+        }
+        .btn-outline:hover {
+            background-color: var(--gray);
+        }
+        /* Dashboard Section */
+        .dashboard {
+            margin-bottom: 30px;
+        }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .stat-card {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        }
+        .stat-card h3 {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 5px;
+        }
+        .stat-card p {
+            font-size: 24px;
+            font-weight: 600;
+        }
+        /* Upcoming Medications */
+        .upcoming {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            padding: 20px;
+        }
+        .section-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .section-title h2 {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        .medication-list {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .medication-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            border-radius: 8px;
+            background-color: var(--light);
+            transition: all 0.3s ease;
+        }
+        .medication-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .med-icon {
+            width: 50px;
+            height: 50px;
+            background-color: var(--secondary);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            color: white;
+            font-size: 20px;
+        }
+        .med-details {
+            flex: 1;
+        }
+        .med-details h3 {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+        .med-details p {
+            font-size: 14px;
+            color: #666;
+        }
+        .med-time {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .med-time p {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background-color: white;
+            padding: 25px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .modal-header h2 {
+            font-size: 20px;
+        }
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+        .form-control {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid var(--gray);
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .time-inputs {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+        }
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        /* Notification */
+        .notification {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: var(--primary);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+        .notification.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        .notification i {
+            font-size: 20px;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .stats {
+                grid-template-columns: 1fr;
+            }
+            .medication-item {
+                flex-direction: column;
+                text-align: center;
+            }
+            .med-icon {
+                margin-right: 0;
+                margin-bottom: 15px;
+            }
+            .med-time {
+                align-items: center;
+                margin-top: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-pills"></i>
+                <h1>MedTrack</h1>
+            </div>
+            <button class="btn btn-primary" id="addMedBtn">
+                <i class="fas fa-plus"></i> Add Medication
+            </button>
+        </header>
+        <section class="dashboard">
+            <div class="stats">
+                <div class="stat-card">
+                    <h3>Upcoming Today</h3>
+                    <p id="upcomingCount">3</p>
+                </div>
+                <div class="stat-card">
+                    <h3>Medications</h3>
+                    <p id="totalMeds">5</p>
+                </div>
+                <div class="stat-card">
+                    <h3>Adherence</h3>
+                    <p id="adherenceRate">92%</p>
+                </div>
+            </div>
+        </section>
+        <section class="upcoming">
+            <div class="section-title">
+                <h2><i class="far fa-clock"></i> Upcoming Medications</h2>
+                <button class="btn btn-outline">
+                    <i class="fas fa-ellipsis-h"></i>
+                </button>
+            </div>
+            <div class="medication-list" id="medicationList">
+                <!-- Medication items will be added here dynamically -->
+            </div>
+        </section>
+    </div>
+    <!-- Add Medication Modal -->
+    <div class="modal" id="addMedModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Add New Medication</h2>
+                <button class="close-btn" id="closeModal">&times;</button>
+            </div>
+            <form id="medicationForm">
+                <div class="form-group">
+                    <label for="medName">Medication Name</label>
+                    <input type="text" id="medName" class="form-control" placeholder="e.g. Ibuprofen" required>
+                </div>
+                <div class="form-group">
+                    <label for="medDosage">Dosage</label>
+                    <input type="text" id="medDosage" class="form-control" placeholder="e.g. 200mg" required>
+                </div>
+                <div class="form-group">
+                    <label for="medFrequency">Frequency</label>
+                    <select id="medFrequency" class="form-control" required>
+                        <option value="">Select frequency</option>
+                        <option value="once">Once daily</option>
+                        <option value="twice">Twice daily</option>
+                        <option value="thrice">Three times daily</option>
+                        <option value="as_needed">As needed</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Times</label>
+                    <div class="time-inputs" id="timeInputs">
+                        <div>
+                            <input type="time" id="time1" class="form-control" required>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="medNotes">Notes (Optional)</label>
+                    <textarea id="medNotes" class="form-control" rows="3" placeholder="Special instructions..."></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline" id="cancelBtn">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Add Medication</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- Notification -->
+    <div class="notification" id="notification">
+        <i class="fas fa-check-circle"></i>
+        <span id="notificationText">Medication added successfully!</span>
+    </div>
+    <script>
+        // Sample data for medications
+        const sampleMedications = [
+            {
+                id: 1,
+                name: "Ibuprofen",
+                dosage: "200mg",
+                time: "08:00",
+                isTaken: false,
+                note: "Take with food"
+            },
+            {
+                id: 2,
+                name: "Vitamin D",
+                dosage: "1000IU",
+                time: "12:00",
+                isTaken: false,
+                note: "With lunch"
+            },
+            {
+                id: 3,
+                name: "Multivitamin",
+                dosage: "1 tablet",
+                time: "18:00",
+                isTaken: false,
+                note: ""
+            }
+        ];
+        // DOM Elements
+        const medicationList = document.getElementById('medicationList');
+        const addMedBtn = document.getElementById('addMedBtn');
+        const addMedModal = document.getElementById('addMedModal');
+        const closeModal = document.getElementById('closeModal');
+        const cancelBtn = document.getElementById('cancelBtn');
+        const medicationForm = document.getElementById('medicationForm');
+        const medFrequency = document.getElementById('medFrequency');
+        const timeInputs = document.getElementById('timeInputs');
+        const notification = document.getElementById('notification');
+        const notificationText = document.getElementById('notificationText');
+        const upcomingCount = document.getElementById('upcomingCount');
+        const totalMeds = document.getElementById('totalMeds');
+        const adherenceRate = document.getElementById('adherenceRate');
+        // Current medications
+        let medications = [...sampleMedications];
+        let nextId = 4;
+        // Initialize the app
+        function init() {
+            renderMedications();
+            updateStats();
+            checkNotifications();
+        }
+        // Render medications to the list
+        function renderMedications() {
+            medicationList.innerHTML = '';
+            // Sort medications by time
+            const sortedMeds = [...medications].sort((a, b) => {
+                return a.time.localeCompare(b.time);
+            });
+            sortedMeds.forEach(med => {
+                if (!med.isTaken) {
+                    const medItem = document.createElement('div');
+                    medItem.className = 'medication-item';
+                    medItem.dataset.id = med.id;
+                    const [hours, minutes] = med.time.split(':');
+                    let timeDisplay = med.time;
+                    const hour = parseInt(hours);
+                    const amPm = hour >= 12 ? 'PM' : 'AM';
+                    const hour12 = hour % 12 || 12;
+                    timeDisplay = `${hour12}:${minutes} ${amPm}`;
+                    medItem.innerHTML = `
+                        <div class="med-icon">
+                            <i class="fas fa-pills"></i>
+                        </div>
+                        <div class="med-details">
+                            <h3>${med.name}</h3>
+                            <p>${med.dosage} ${med.note ? '· ' + med.note : ''}</p>
+                        </div>
+                        <div class="med-time">
+                            <p>${timeDisplay}</p>
+                            <button class="btn btn-success btn-sm take-btn">
+                                <i class="fas fa-check"></i> Taken
+                            </button>
+                        </div>
+                    `;
+                    medicationList.appendChild(medItem);
+                    // Add event listener to the take button
+                    medItem.querySelector('.take-btn').addEventListener('click', () => takeMedication(med.id));
+                }
+            });
+        }
+        // Mark medication as taken
+        function takeMedication(id) {
+            const index = medications.findIndex(med => med.id === id);
+            if (index !== -1) {
+                medications[index].isTaken = true;
+                renderMedications();
+                updateStats();
+                showNotification(`Marked ${medications[index].name} as taken.`);
+                // Schedule notification for next dose
+                scheduleNextNotification(medications[index]);
+            }
+        }
+        // Show notification to take medication
+        function showNotification(message) {
+            notificationText.textContent = message;
+            notification.classList.add('show');
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 3000);
+        }
+        // Check if any medications are due
+        function checkNotifications() {
+            const now = new Date();
+            const currentHours = now.getHours().toString().padStart(2, '0');
+            const currentMinutes = now.getMinutes().toString().padStart(2, '0');
+            const currentTime = `${currentHours}:${currentMinutes}`;
+            medications.forEach(med => {
+                if (!med.isTaken && med.time === currentTime) {
+                    showNotification(`Time to take ${med.name} (${med.dosage})`);
+                }
+            });
+        }
+        // Schedule next notification for recurring medications
+        function scheduleNextNotification(medication) {
+            // In a real app, this would schedule an actual notification
+            console.log(`Setting reminder for next dose of ${medication.name} at ${medication.time}`);
+        }
+        // Update statistics
+        function updateStats() {
+            const total = medications.length;
+            const upcoming = medications.filter(med => !med.isTaken).length;
+            const taken = medications.filter(med => med.isTaken).length;
+            const adherence = total > 0 ? Math.round((taken / total) * 100) : 0;
+            upcomingCount.textContent = upcoming;
+            totalMeds.textContent = total;
+            adherenceRate.textContent = `${adherence}%`;
+        }
+        // Show modal
+        function showModal() {
+            addMedModal.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        }
+        // Hide modal
+        function hideModal() {
+            addMedModal.style.display = 'none';
+            document.body.style.overflow = 'auto';
+            medicationForm.reset();
+            while (timeInputs.children.length > 1) {
+                timeInputs.removeChild(timeInputs.lastChild);
+            }
+        }
+        // Add new medication
+        function addMedication(name, dosage, frequency, times, note) {
+            times.forEach(time => {
+                const newMed = {
+                    id: nextId++,
+                    name,
+                    dosage,
+                    time,
+                    isTaken: false,
+                    note
+                };
+                medications.push(newMed);
+            });
+            renderMedications();
+            updateStats();
+            showNotification(`Added ${name} to your medications.`);
+            hideModal();
+        }
+        // Event Listeners
+        addMedBtn.addEventListener('click', showModal);
+        closeModal.addEventListener('click', hideModal);
+        cancelBtn.addEventListener('click', hideModal);
+        // Handle frequency change
+        medFrequency.addEventListener('change', function() {
+            const count = this.value === 'once' ? 1 :
+                         this.value === 'twice' ? 2 :
+                         this.value === 'thrice' ? 3 : 1;
+            // Clear existing time inputs except the first one
+            while (timeInputs.children.length > 1) {
+                timeInputs.removeChild(timeInputs.lastChild);
+            }
+            // Add additional time inputs as needed
+            for (let i = 1; i < count; i++) {
+                const div = document.createElement('div');
+                div.innerHTML = `<input type="time" id="time${i+1}" class="form-control" required>`;
+                timeInputs.appendChild(div);
+            }
+        });
+        // Handle form submission
+        medicationForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('medName').value;
+            const dosage = document.getElementById('medDosage').value;
+            const frequency = document.getElementById('medFrequency').value;
+            const note = document.getElementById('medNotes').value;
+            // Get all time values
+            const times = [];
+            const timeInputElements = timeInputs.querySelectorAll('input[type="time"]');
+            timeInputElements.forEach(input => {
+                if (input.value) times.push(input.value);
+            });
+            if (times.length === 0) {
+                alert('Please enter at least one time');
+                return;
+            }
+            addMedication(name, dosage, frequency, times, note);
+        });
+        // Initialize the app
+        init();
+        // Check every minute for due medications
+        setInterval(checkNotifications, 60000);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>