html - master - dashytka/Interactive-Progress-Dashboard

html
246 строк7 KB
dashytka
create html
13 ноя 2025, 21:11
13 ноя 2025, 21:11df873db
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Progress Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .dashboard-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 500px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #333;
            font-size: 2.2em;
            margin-bottom: 10px;
        }

        .header p {
            color: #666;
            font-size: 1.1em;
        }

        .progress-section {
            margin-bottom: 25px;
        }

        .progress-label {
            display: flex;
            justify-content: between;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .progress-bar {
            background: #e0e0e0;
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #45a049);
            border-radius: 10px;
            transition: width 0.5s ease;
            width: 0%;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 30px;
        }

        .stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            border-left: 4px solid #667eea;
        }

        .stat-number {
            font-size: 1.8em;
            font-weight: bold;
            color: #333;
        }

        .stat-label {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }

        .motivation-text {
            text-align: center;
            margin-top: 25px;
            padding: 15px;
            background: #fff3cd;
            border-radius: 10px;
            border-left: 4px solid #ffc107;
            font-style: italic;
            color: #856404;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="header">
            <h1>Progress Tracker</h1>
            <p>Track your journey to success</p>
        </div>

        <div class="progress-section">
            <div class="progress-label">
                <span>Overall Progress</span>
                <span id="progress-percent">0%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" id="main-progress"></div>
            </div>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number" id="tasks-completed">0</div>
                <div class="stat-label">Tasks Completed</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="productivity-score">0%</div>
                <div class="stat-label">Productivity</div>
            </div>
        </div>

        <div class="motivation-text" id="motivation-message">
            Every small step brings you closer to your goal!
        </div>

        <div class="controls">
            <button class="btn-primary" onclick="updateProgress(10)">Add Progress</button>
            <button class="btn-secondary" onclick="resetProgress()">Reset</button>
        </div>
    </div>

    <script>
        let currentProgress = 0;
        let tasksCompleted = 0;

        const progressFill = document.getElementById('main-progress');
        const progressPercent = document.getElementById('progress-percent');
        const tasksElement = document.getElementById('tasks-completed');
        const productivityElement = document.getElementById('productivity-score');
        const motivationElement = document.getElementById('motivation-message');

        const motivationMessages = [
            "Great start! Keep going!",
            "You're making progress!",
            "Halfway there! Don't stop now!",
            "Almost there! Finish strong!",
            "Amazing! You reached your goal!",
            "Time to set new challenges!"
        ];

        function updateProgress(increment) {
            if (currentProgress < 100) {
                currentProgress = Math.min(currentProgress + increment, 100);
                tasksCompleted++;
                
                progressFill.style.width = currentProgress + '%';
                progressPercent.textContent = Math.round(currentProgress) + '%';
                tasksElement.textContent = tasksCompleted;
                
                const productivity = Math.min(100, Math.round((tasksCompleted / 10) * 100));
                productivityElement.textContent = productivity + '%';
                
                updateMotivationMessage();
            }
        }

        function resetProgress() {
            currentProgress = 0;
            tasksCompleted = 0;
            
            progressFill.style.width = '0%';
            progressPercent.textContent = '0%';
            tasksElement.textContent = '0';
            productivityElement.textContent = '0%';
            motivationElement.textContent = motivationMessages[0];
        }

        function updateMotivationMessage() {
            let messageIndex;
            if (currentProgress < 20) messageIndex = 0;
            else if (currentProgress < 40) messageIndex = 1;
            else if (currentProgress < 60) messageIndex = 2;
            else if (currentProgress < 80) messageIndex = 3;
            else if (currentProgress < 100) messageIndex = 4;
            else messageIndex = 5;
            
            motivationElement.textContent = motivationMessages[messageIndex];
        }

        // Initialize
        resetProgress();
    </script>
</body>
</html>