Skip to content

Study tracker #2456

Open
Open
Study tracker#2456

Description

@emonhossan09
emonhossan09
opened on Jul 25, 2026

Error code

ERRW:ST1.0

Were you logged in?

Yes

Your username (if logged in)

Yeash

Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Study Tracker (Clone)</title>
    <style>
        /* --- CSS Reset and Global Styles --- */
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #ffffff;
            /* Subtly gridded background */
            background-color: #0d0e12;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* --- Colors --- */
        :root {
            --bg-page: #0d0e12;
            --bg-card: #18191d;
            --accent-green: #d4ff00; /* Vivid Neon Green */
            --accent-teal: #42fbf2;
            --text-secondary: #aaaaaa;
        }

        /* --- Global Container --- */
        .container {
            padding: 20px 20px 80px 20px; /* Space at bottom for navigation */
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- Header Section (image_0.png top) --- */
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .user-avatar {
            width: 70px;
            height: 70px;
            background-color: #7b61ff; /* Purple avatar */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: bold;
            margin-right: 20px;
        }

        .user-details {
            flex-grow: 1;
        }

        .user-name {
            font-size: 24px;
            font-weight: bold;
        }

        .pro-badge {
            color: var(--accent-green);
            font-weight: normal;
            font-size: 14px;
            margin-left: 5px;
        }

        .school-info {
            color: var(--text-secondary);
            font-size: 14px;
            margin-top: 5px;
        }

        /* --- KPI Cards Grid --- */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 15px;
        }

        .card {
            background-color: var(--bg-card);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .kpi-value {
            color: var(--accent-green);
            font-size: 32px;
            font-weight: bold;
        }

        .kpi-title {
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
        }

        /* Rank Cards */
        .rank-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 25px;
        }

        .rank-card .kpi-value {
            color: #ffffff; /* Rank numbers are white */
        }

        /* --- Benchmark Section --- */
        .benchmark-section {
            margin-top: 25px;
        }

        .section-title {
            font-size: 14px;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }

        .benchmark-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .benchmark-card .kpi-value {
            font-size: 28px; /* Slightly smaller than top KPIs */
        }

        /* --- Bottom Navigation --- */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background-color: #000000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }

        .nav-item {
            text-align: center;
            color: var(--text-secondary);
            font-size: 11px;
            flex-grow: 1;
            padding: 10px 0;
        }

        .nav-item.active {
            color: var(--accent-green);
        }

        .study-btn-container {
            position: absolute;
            top: -25px; /* Floats above navigation */
            left: 50%;
            transform: translateX(-50%);
        }

        .study-btn {
            width: 55px;
            height: 55px;
            background-color: var(--accent-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid #000000;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* Placeholder icon symbols */
        .icon { font-size: 20px; display: block; margin-bottom: 3px; }
        .study-icon { color: #000000; font-size: 28px; }

    </style>
</head>
<body>

    <div class="container">
        <!-- Header -->
        <div class="header">
            <div class="user-avatar">Y</div>
            <div class="user-details">
                <div class="user-name">Your Name Here <span class="pro-badge">PRO</span></div>
                <div class="school-info">My Goal: HSC 2026 • Days Remaining: 642</div>
            </div>
        </div>

        <!-- KPI Grid -->
        <div class="kpi-grid">
            <div class="card">
                <div class="kpi-value">2h 15m</div>
                <div class="kpi-title">TODAY'S STUDY</div>
            </div>
            <div class="card">
                <div class="kpi-value">14h 45m</div>
                <div class="kpi-title">THIS WEEK</div>
            </div>
            <div class="card">
                <div class="kpi-value">15</div>
                <div class="kpi-title">DAY STREAK</div>
            </div>
            <div class="card">
                <div class="kpi-value">30%</div>
                <div class="kpi-title">ON-PACE SYLLABUS</div>
            </div>
        </div>

        <!-- Rank Grid -->
        <div class="rank-grid">
            <div class="card rank-card">
                <div class="kpi-value">--</div>
                <div class="kpi-title">YOUR DAILY RANK</div>
            </div>
            <div class="card rank-card">
                <div class="kpi-value">--</div>
                <div class="kpi-title">YOUR MONTHLY RANK</div>
            </div>
        </div>

        <!-- Benchmarks Section -->
        <div class="benchmark-section">
            <div class="section-title">MY GOAL BENCHMARKS</div>
            <div class="benchmark-grid">
                <div class="card benchmark-card">
                    <div class="kpi-value">3h 30m</div>
                    <div class="kpi-title">DAILY STUDY GOAL</div>
                </div>
                <div class="card benchmark-card">
                    <div class="kpi-value">11h 0m</div>
                    <div class="kpi-title">TOP DAILY RECORD</div>
                </div>
            </div>
        </div>

    </div> <!-- End Container -->

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="nav-item active">
            <span class="icon">⌂</span> Overview
        </div>
        <div class="nav-item">
            <span class="icon">≡</span> Syllabus
        </div>

        <!-- Floated Study Button -->
        <div class="study-btn-container">
            <div class="study-btn">
                <span class="study-icon">▶</span>
            </div>
        </div>

        <div class="nav-item" style="margin-left: 55px;"> <!-- Offset for the center button -->
            <span class="icon">📈</span> Progress
        </div>
        <div class="nav-item">
            <span class="icon">💳</span> Subscribe
        </div>
    </div>

</body>
</html>

Your JavaScript

const myStudyData = {
  userInfo: {
    name: "Your Name",
    goal: "HSC 2026", // Or your exam
    examDate: "2026-05-01" // Crucial for pace calculation
  },
  syllabus: {
    // List your subjects. The original had: Physics, Chemistry, Biology, Math, Bangla, English, ICT.
    subjects: [
      {
        name: "Physics 1st Paper",
        nameBN: "পদার্থবিজ্ঞান ১ম পত্র", // Include if you want the original aesthetic
        chapters: [
          { id: "p1c1", name: "Chapter 1", isCompleted: true, revision1: true, revision2: false },
          { id: "p1c2", name: "Chapter 2", isCompleted: false, revision1: false, revision2: false },
          // ... list all chapters
        ]
      },
      {
        name: "Chemistry 1st Paper",
        nameBN: "রসায়ন ১ম পত্র",
        chapters: [ /* ... */ ]
      }
    ]
  },
  dailyLogs: [
    // This logs your daily study sessions
    { date: "2024-07-28", subject: "Physics", chapter: "Chapter 1", durationMinutes: 120 },
  ],
  benchmarks: {
    // In a personal app, you might use 'goal' averages
    goalAverageStudyTimeMinutes: 240, // 4 hours
    currentStreak: 12
  }
};

Your CSS

/* ==========================================
   GLOBAL & RESET STYLES
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    /* Dark background with a subtle graph/blueprint grid pattern */
    background-color: #0d0e12;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    padding-bottom: 90px; /* Space for fixed bottom navigation */
}

/* ==========================================
   COLOR VARIABLES
   ========================================== */
:root {
    --bg-page: #0d0e12;
    --bg-card: #18191d;
    --bg-card-hover: #22242a;
    --accent-green: #d4ff00; /* Vivid Neon Green from original UI */
    --accent-teal: #42fbf2;
    --accent-red: #ff4d4d;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   LAYOUT CONTAINERS
   ========================================== */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* ==========================================
   HEADER SECTION (USER PROFILE)
   ========================================== */
.header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding: 10px 0;
}

.user-avatar {
    width: 65px;
    height: 65px;
    background-color: #5c6ac4; /* Purple avatar background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-right: 15px;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-badge {
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 600;
}

.school-info {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
}

/* ==========================================
   CARDS & GRIDS
   ========================================== */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

/* Top 4 Dashboard Stats */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.kpi-value {
    color: var(--accent-green);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-title {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
}

/* Ranks Section */
.rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.rank-card .kpi-value {
    color: #ffffff;
}

/* Section Labels */
.section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.benchmark-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* ==========================================
   PROGRESS BARS (IMAGE 1 REPLICATION)
   ========================================== */
.progress-container {
    margin-bottom: 20px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}

.bar-bg {
    width: 100%;
    height: 10px;
    background-color: #252830;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 15px;
}

.bar-fill-green {
    height: 100%;
    background-color: var(--accent-green);
    border-radius: 20px;
}

.bar-fill-teal {
    height: 100%;
    background-color: var(--accent-teal);
    border-radius: 20px;
}

.alert-badge {
    display: inline-block;
    background-color: rgba(255, 77, 77, 0.15);
    color: var(--accent-red);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}

/* ==========================================
   SUBJECT PILLS & FILTER TABS
   ========================================== */
.pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pill {
    background-color: #202228;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.pill.active {
    background-color: var(--accent-green);
    color: #000000;
    font-weight: 600;
}

/* ==========================================
   SYLLABUS TABLE (IMAGE 2 REPLICATION)
   ========================================== */
.table-container {
    width: 100%;
    border-collapse: collapse;
}

.table-container th {
    text-align: left;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
}

.table-container td {
    padding: 14px 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

/* Custom Checkbox Styling */
.checkbox-square {
    width: 22px;
    height: 22px;
    border: 2px solid #333742;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox-square.checked {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: #000000;
    font-weight: bold;
}

/* ==========================================
   BOTTOM NAVIGATION BAR
   ========================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background-color: #000000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-color);
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.nav-item.active {
    color: var(--accent-green);
}

/* Center Floating Study Button */
.study-btn-wrapper {
    position: relative;
    top: -15px;
}

.study-btn {
    width: 58px;
    height: 58px;
    background-color: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #0d0e12;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(212, 255, 0, 0.2);
}

/* ==========================================
   RESPONSIVE DESIGN (FOR MOBILE SCREENS)
   ========================================== */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on phone screens */
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions