<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeLens - Lær koding</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        .learning-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        .learning-card {
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            padding: 30px 25px;
            text-align: center;
            transition: all 0.3s ease;
            text-decoration: none;
            color: var(--text-light);
            position: relative;
            overflow: hidden;
        }
        .learning-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }
        .learning-card .icon-wrapper {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 2.5rem;
            transition: all 0.3s;
        }
        .learning-card:hover .icon-wrapper { transform: scale(1.1); }
        .learning-card .card-html .icon-wrapper { background: #e9456020; color: #e94560; }
        .learning-card .card-css .icon-wrapper { background: #53d8fb20; color: #53d8fb; }
        .learning-card .card-js .icon-wrapper { background: #fd971f20; color: #fd971f; }
        
        .learning-card h5 { font-weight: 600; margin-bottom: 5px; }
        .learning-card p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
        .learning-card .badge-count {
            position: absolute; top: 12px; right: 12px;
            background: var(--bg-code); padding: 3px 12px;
            border-radius: 20px; font-size: 0.7rem; color: #53d8fb;
        }
        .learning-card .topic-count {
            margin-top: 12px; font-size: 0.8rem; color: var(--text-muted);
        }
        .welcome-section {
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            padding: 30px;
            margin-top: 30px;
        }
        .welcome-section h3 { color: #e94560; font-weight: 300; }
    </style>
</head>
<body>

    <header class="codelens-header">
        <div class="brand">
            <i class="fa fa-code"></i> CodeLens
            <span>— Lær koding</span>
        </div>
        <div class="nav-links">
            <a href="index.html" class="active"><i class="fa fa-home"></i> Hjem</a>
            <a href="../index.php"><i class="fa fa-folder-open"></i> Filbehandler</a>
        </div>
    </header>

    <div class="codelens-container">
        <h4 style="color: #e94560; font-weight: 300; margin-bottom: 5px;">
            <i class="fa fa-graduation-cap"></i> Velg læringsmodul
        </h4>
        <p style="color: var(--text-muted);">Velg et språk for å starte læringen. Koden skrives ut sakte med Notepad++-farger.</p>

        <div class="learning-grid">
            <a href="html.html" class="learning-card card-html">
                <div class="badge-count">12 emner</div>
                <div class="icon-wrapper"><i class="fa fa-html5"></i></div>
                <h5 style="color: #e94560;">HTML</h5>
                <p>Lær strukturen på nettsider</p>
                <div class="topic-count"><i class="fa fa-tags"></i> Tags, Attributes, Struktur</div>
            </a>

            <a href="css.html" class="learning-card card-css">
                <div class="badge-count">11 emner</div>
                <div class="icon-wrapper"><i class="fa fa-css3"></i></div>
                <h5 style="color: #53d8fb;">CSS</h5>
                <p>Lær å style nettsider</p>
                <div class="topic-count"><i class="fa fa-paint-bucket"></i> Farger, Layout, Flexbox</div>
            </a>

            <a href="js.html" class="learning-card card-js">
                <div class="badge-count">10 emner</div>
                <div class="icon-wrapper"><i class="fa fa-code"></i></div>
                <h5 style="color: #fd971f;">JavaScript</h5>
                <p>Lær å lage interaktive nettsider</p>
                <div class="topic-count"><i class="fa fa-cogs"></i> Variabler, Funksjoner, DOM</div>
            </a>
        </div>

        <div class="welcome-section">
            <h3><i class="fa fa-info-circle"></i> Om CodeLens</h3>
            <p style="color: #c4c4d4; margin-top: 10px;">
                CodeLens viser kode med <strong style="color: #e94560;">Notepad++-farger</strong>.
                Koden skrives ut <strong style="color: #53d8fb;">sakte</strong> slik at du kan følge med.
            </p>
            <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 12px;">
                <span><span style="color: #f92672;">■</span> Tags / Keywords</span>
                <span><span style="color: #a6e22e;">■</span> Attributes / Functions</span>
                <span><span style="color: #e6db74;">■</span> Values / Strings</span>
                <span><span style="color: #66d9ef;">■</span> Properties / Keywords</span>
                <span><span style="color: #fd971f;">■</span> Variables</span>
                <span><span style="color: #75715e;">■</span> Kommentarer</span>
            </div>
        </div>
    </div>

    <script src="../assets/js/main.js"></script>
</body>
</html>