Home
Alif Bima Pradana
SalivaGuard Dashboard Modern

SalivaGuard Dashboard Modern

This is a mobile app interface design (Android style) for "SalivaGuard AI." I've designed it in a single file that includes HTML, CSS (via Tailwind), and JavaScript for the interaction logic.

This tailwind example is contributed by Alif Bima Pradana, on 17-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Alif Bima Pradana

122

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SalivaHealth AI - Sensor Monitoring</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#6102f0',
                        primaryDark: '#4a00c2',
                        secondary: '#8b5cf6',
                        bgDark: '#0f172a',
                        surfaceDark: '#1e293b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444'
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    }
                }
            }
        }
    </script>

.glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .dark .glass {
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

.page-section {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .page-section.active {
            display: block;
            opacity: 1;
            animation: fadeIn 0.4s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Custom Chart Styles for Dark Mode */
        .dark .apexcharts-tooltip {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #fff;
        }
        .dark .apexcharts-tooltip-title {
            background: #0f172a !important;
            border-bottom: 1px solid #334155 !important;
        }
        .dark .apexcharts-text {
            fill: #94a3b8 !important; 
        }
        .dark .apexcharts-gridline {
            stroke: #334155 !important;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-bgDark dark:text-white transition-colors duration-300 font-sans h-screen overflow-hidden flex flex-col">

<header class="fixed top-0 w-full z-50 px-6 py-4 glass flex justify-between items-center transition-colors duration-300">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/40">
                <i data-lucide="cpu" class="w-5 h-5"></i>
            </div>
            <span class="font-bold text-xl tracking-tight">Saliva<span class="text-primary">Guard</span></span>
        </div>
        <div class="flex items-center gap-3">
            
            <div id="connection-status" class="flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-500 text-xs font-medium transition-colors">
                <span class="w-2 h-2 rounded-full bg-slate-400" id="status-dot"></span>
                <span id="status-text">Offline</span>
            </div>
            <button onclick="toggleTheme()" class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700 transition-all">
                <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
                <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
            </button>
        </div>
    </header>

<main class="flex-1 pt-20 pb-24 overflow-y-auto no-scrollbar px-5 relative">
        
        
        <section id="home-page" class="page-section active">
            
            
            <div class="flex justify-between items-end mb-6">
                <div>
                    <h2 class="text-2xl font-bold">Monitor Realtime</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Data sensor Arduino langsung.</p>
                </div>
                <button onclick="toggleSensorConnection()" id="connect-btn" class="px-4 py-2 bg-primary text-white text-xs font-bold rounded-xl shadow-lg shadow-primary/30 active:scale-95 transition-all flex items-center gap-2">
                    <i data-lucide="wifi" class="w-4 h-4"></i>
                    Hubungkan
                </button>
            </div>

<div class="space-y-6">
                
                
                <div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
                                <i data-lucide="droplet" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">pH Level</h3>
                                <p class="text-[10px] text-slate-500">Keasaman Sampel</p>
                            </div>
                        </div>
                        <span id="ph-value" class="text-xl font-bold text-blue-600">7.0</span>
                    </div>
                    
                    <div id="chart-ph" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Kekeruhan</h3>
                                <p class="text-[10px] text-slate-500">Sensor Warna</p>
                            </div>
                        </div>
                        <span id="color-value" class="text-xl font-bold text-purple-600">0 NTU</span>
                    </div>
                    
                    <div id="chart-color" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">
                                <i data-lucide="scale" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Viskositas</h3>
                                <p class="text-[10px] text-slate-500">Load Cell (Gram)</p>
                            </div>
                        </div>
                        <span id="load-value" class="text-xl font-bold text-orange-600">0 g</span>
                    </div>
                    
                    <div id="chart-load" class="h-40 w-full"></div>
                </div>

</div>

<div class="mt-6">
                <button onclick="startFullAnalysis()" id="analyze-btn" disabled class="w-full py-4 rounded-2xl bg-slate-200 dark:bg-slate-800 text-slate-400 font-bold flex items-center justify-center gap-2 transition-all">
                    <i data-lucide="brain-circuit" class="w-5 h-5"></i>
                    Menunggu Data Sensor...
                </button>
            </div>
        </section>

<section id="analysis-page" class="page-section hidden h-full flex flex-col items-center justify-center text-center">
            <div class="relative w-40 h-40 mb-8">
                
                <div class="absolute inset-0 rounded-full border-4 border-slate-200 dark:border-slate-700 opacity-30"></div>
                <div class="absolute inset-0 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
                <div class="absolute inset-4 rounded-full bg-primary/10 flex items-center justify-center animate-pulse">
                    <i data-lucide="cpu" class="w-12 h-12 text-primary"></i>
                </div>
            </div>
            <h2 class="text-2xl font-bold mb-2">Memproses Data...</h2>
            <p class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto">Gemini AI sedang mengkorelasikan data pH, Kekeruhan, dan Berat Jenis dari sensor.</p>
            
            <div class="mt-8 flex gap-4 text-xs font-mono text-slate-400">
                <span class="animate-pulse">pH: OK</span>
                <span class="animate-pulse delay-75">RGB: OK</span>
                <span class="animate-pulse delay-150">LOAD: OK</span>
            </div>
        </section>

<section id="result-page" class="page-section hidden">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 mb-4 ring-4 ring-green-50 dark:ring-green-900/10">
                    <i data-lucide="check-circle-2" class="w-8 h-8"></i>
                </div>
                <h2 class="text-2xl font-bold">Diagnosis Selesai</h2>
                <p class="text-slate-500 dark:text-slate-400 text-xs">ID Tes: #ARD-SENSOR-001</p>
            </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-6 shadow-lg border-t-4 border-primary mb-6">
                <h3 class="font-bold text-lg mb-3">Ringkasan Sensor</h3>
                <div class="grid grid-cols-3 gap-2 mb-6 text-center">
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Rata-rata pH</div>
                        <div class="font-bold text-blue-600">7.2</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Kekeruhan</div>
                        <div class="font-bold text-purple-600">Normal</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Viskositas</div>
                        <div class="font-bold text-orange-600">Cair</div>
                    </div>
                </div>
                
                <h3 class="font-bold mb-2">Analisis AI:</h3>
                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                    Berdasarkan input sensor, parameter biokimia sampel liur berada dalam rentang fisiologis normal. Tidak terdeteksi adanya asidosis atau infeksi bakteri berat berdasarkan profil kekeruhan.
                </p>
            </div>

<button onclick="openChatWithContext()" class="w-full py-4 rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg shadow-primary/30 flex items-center justify-center gap-2 hover:scale-[1.02] transition-transform">
                <i data-lucide="message-square-plus" class="w-5 h-5"></i>
                Tanya Gemini AI
            </button>
        </section>

<section id="chat-page" class="page-section hidden h-full flex flex-col">
            <div class="flex-1 bg-slate-50 dark:bg-bgDark overflow-y-auto no-scrollbar pb-4" id="chat-container">
                
                <div class="flex gap-3 mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs">
                        <i data-lucide="bot" class="w-4 h-4"></i>
                    </div>
                    <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]">
                        <p class="text-slate-700 dark:text-slate-200">Halo! Saya telah menerima data dari Arduino Anda. Ada yang ingin ditanyakan tentang grafik pH atau hasil sensor lainnya?</p>
                    </div>
                </div>
            </div>

</main>

<nav class="fixed bottom-0 w-full glass z-50 pb-safe pt-2 px-6 rounded-t-3xl shadow-[0_-5px_20px_rgba(0,0,0,0.05)] dark:shadow-[0_-5px_20px_rgba(0,0,0,0.2)]">
        <div class="flex justify-between items-center h-16">
            <button onclick="navTo('home-page')" class="nav-btn active flex flex-col items-center gap-1 text-primary transition-all">
                <i data-lucide="activity" class="w-6 h-6"></i>
                <span class="text-[10px] font-medium">Monitor</span>
            </button>
            
            <div class="relative -top-6">
                <button onclick="startFullAnalysis()" class="w-14 h-14 rounded-full bg-primary text-white shadow-lg shadow-primary/40 flex items-center justify-center transform transition hover:scale-110">
                    <i data-lucide="brain-circuit" class="w-7 h-7"></i>
                </button>
            </div>

<script>
        lucide.createIcons();

// --- GLOBAL VARIABLES ---
        let isConnected = false;
        let sensorInterval = null;
        let charts = {};
        
        // --- APEXCHARTS CONFIGURATION ---
        const commonOptions = {
            chart: {
                type: 'line',
                height: 160,
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'linear',
                    dynamicAnimation: { speed: 1000 }
                },
                background: 'transparent'
            },
            stroke: { curve: 'smooth', width: 3 },
            dataLabels: { enabled: false },
            xaxis: {
                labels: { show: false },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: { show: false },
            grid: {
                show: true,
                borderColor: '#f1f5f9',
                strokeDashArray: 4,
                padding: { top: 0, right: 0, bottom: 0, left: 10 } 
            },
            theme: { mode: 'light' } // Will update dynamically
        };

// Initialize Charts on Load
        document.addEventListener('DOMContentLoaded', () => {
            initCharts();
        });

function initCharts() {
            // 1. pH Chart
            charts.ph = new ApexCharts(document.querySelector("#chart-ph"), {
                ...commonOptions,
                series: [{ name: 'pH', data: [7, 7, 7, 7, 7, 7, 7, 7, 7, 7] }],
                colors: ['#2563eb'], // Blue
                yaxis: { min: 0, max: 14, show: false }
            });
            charts.ph.render();

// 2. Color/Turbidity Chart (Area)
            charts.color = new ApexCharts(document.querySelector("#chart-color"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'area' },
                series: [{ name: 'Turbidity', data: [20, 22, 21, 23, 20, 21, 22, 20, 21, 20] }],
                colors: ['#9333ea'], // Purple
                yaxis: { min: 0, max: 100, show: false }
            });
            charts.color.render();

// 3. Load Cell Chart (Bar)
            charts.load = new ApexCharts(document.querySelector("#chart-load"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'bar' },
                series: [{ name: 'Weight', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }],
                colors: ['#ea580c'], // Orange
                yaxis: { min: 0, max: 50, show: false }
            });
            charts.load.render();
        }

// --- ARDUINO SIMULATION LOGIC ---
        function toggleSensorConnection() {
            const btn = document.getElementById('connect-btn');
            const statusDot = document.getElementById('status-dot');
            const statusText = document.getElementById('status-text');
            const analyzeBtn = document.getElementById('analyze-btn');

if (!isConnected) {
                // CONNECTING
                btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Menghubungkan...`;
                
                setTimeout(() => {
                    isConnected = true;
                    // Update UI
                    btn.innerHTML = `<i data-lucide="wifi-off" class="w-4 h-4"></i> Putuskan`;
                    btn.classList.replace('bg-primary', 'bg-red-500');
                    btn.classList.replace('shadow-primary/30', 'shadow-red-500/30');
                    
                    statusDot.classList.replace('bg-slate-400', 'bg-green-500');
                    statusText.innerText = "Online";
                    statusText.classList.add('text-green-600', 'font-bold');
                    
                    // Enable Analysis Button
                    analyzeBtn.disabled = false;
                    analyzeBtn.classList.remove('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                    analyzeBtn.classList.add('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                    analyzeBtn.innerHTML = `<i data-lucide="brain-circuit" class="w-5 h-5"></i> Analisis Sekarang`;

lucide.createIcons();
                    
                    // Start Data Stream
                    startDataStream();
                }, 1500);

} else {
                // DISCONNECTING
                isConnected = false;
                clearInterval(sensorInterval);
                
                // Update UI
                btn.innerHTML = `<i data-lucide="wifi" class="w-4 h-4"></i> Hubungkan`;
                btn.classList.replace('bg-red-500', 'bg-primary');
                btn.classList.replace('shadow-red-500/30', 'shadow-primary/30');
                
                statusDot.classList.replace('bg-green-500', 'bg-slate-400');
                statusText.innerText = "Offline";
                statusText.classList.remove('text-green-600', 'font-bold');

// Disable Analysis Button
                analyzeBtn.disabled = true;
                analyzeBtn.classList.add('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                analyzeBtn.classList.remove('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                analyzeBtn.innerHTML = `<i data-lucide="wifi-off" class="w-5 h-5"></i> Sensor Offline`;

lucide.createIcons();
            }
        }

function startDataStream() {
            // Initial data arrays
            let dataPH = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7];
            let dataColor = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
            let dataLoad = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5];

sensorInterval = setInterval(() => {
                // Generate random sensor data (Simulation)
                const newPH = (Math.random() * (7.8 - 6.5) + 6.5).toFixed(1);
                const newColor = Math.floor(Math.random() * (40 - 20) + 20);
                const newLoad = Math.floor(Math.random() * (15 - 10) + 10);

// Update DOM Text
                document.getElementById('ph-value').innerText = newPH;
                document.getElementById('color-value').innerText = newColor + ' NTU';
                document.getElementById('load-value').innerText = newLoad + ' g';

// Shift arrays
                dataPH.push(newPH); dataPH.shift();
                dataColor.push(newColor); dataColor.shift();
                dataLoad.push(newLoad); dataLoad.shift();

// Update Charts
                charts.ph.updateSeries([{ data: dataPH }]);
                charts.color.updateSeries([{ data: dataColor }]);
                charts.load.updateSeries([{ data: dataLoad }]);

}, 1000); // Update every 1 second
        }

// --- NAVIGATION & UTILS ---
        function toggleTheme() {
            const html = document.documentElement;
            const isDark = html.classList.toggle('dark');
            html.classList.toggle('light');
            
            // Update Chart Theme
            const themeMode = isDark ? 'dark' : 'light';
            const gridColor = isDark ? '#334155' : '#f1f5f9';
            
            [charts.ph, charts.color, charts.load].forEach(chart => {
                chart.updateOptions({
                    theme: { mode: themeMode },
                    grid: { borderColor: gridColor }
                });
            });
        }

function navTo(pageId) {
            document.querySelectorAll('.page-section').forEach(el => {
                el.classList.remove('active');
                el.classList.add('hidden');
            });
            const target = document.getElementById(pageId);
            target.classList.remove('hidden');
            setTimeout(() => target.classList.add('active'), 10);

// Update Nav Icons
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('text-primary');
                btn.classList.add('text-slate-400');
            });
        }

// Chat Logic
        const chatContainer = document.getElementById('chat-container');
        const chatInput = document.getElementById('chat-input');

function sendMessage() {
            const text = chatInput.value.trim();
            if (!text) return;
            addUserMessage(text);
            chatInput.value = '';
            setTimeout(() => {
                let response = "Berdasarkan grafik realtime, fluktuasi pH Anda stabil di angka normal.";
                addBotMessage(response);
            }, 1000);
        }

function addUserMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 flex-row-reverse animate-in slide-in-from-right-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex-shrink-0 flex items-center justify-center text-slate-600 dark:text-slate-300"><i data-lucide="user" class="w-4 h-4"></i></div>
                <div class="bg-primary text-white p-3 rounded-2xl rounded-tr-none shadow-md text-sm max-w-[80%]"><p>${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function addBotMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 animate-in slide-in-from-left-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs"><i data-lucide="bot" class="w-4 h-4"></i></div>
                <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]"><p class="text-slate-700 dark:text-slate-200">${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

chatInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') sendMessage();
        });
        
        // Context Chat Action
        function openChatWithContext() {
            navTo('chat-page');
        }

</script>
</body>
</html>

Related Examples

quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Anonymous

2 years ago

12.9k
dashboard layout

Author:
AKASH GANDHAR

11 months ago

1.7k
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Katherine Glenn

1 year ago

1.8k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

1 year ago

1.5k
E-Voting Dashboard
For You

Author:
Alif Bima Pradana

4 days ago

79
sidebar

Author:
Abhishek Kumar

6 months ago

547
User dashboard

Author:
Anonymous

2 years ago

13.5k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Author:
Alif Bima Pradana

3 weeks ago

85
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
sidebar

Author:
Abhishek Kumar

6 months ago

784
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

3 months ago

154
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

932

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components