CodeLens — Kodeviser
css.html
HTML 29,289 bytes
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeLens - Lær CSS</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>
        .sidebar-css h6 { color: var(--color-css); }
        .sidebar-css .menu-item.active { border-right-color: var(--color-css); }
        .explanation-css { border-right-color: var(--color-css); }
        .explanation-css strong { color: var(--color-css); }
        .code-header-css h5 { color: var(--color-css); }
        .code-header-css .code-info { color: var(--color-html); }
        
        .btn-show-all {
            background: #53d8fb;
            color: #1a1a2e;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.85rem;
            width: 100%;
            transition: all 0.3s;
            margin-bottom: 10px;
        }
        .btn-show-all:hover {
            background: #3ac0e0;
            transform: scale(1.02);
        }
        
        .btn-reset-all {
            background: #fd971f;
            color: #1a1a2e;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            width: 100%;
            transition: all 0.3s;
            margin-top: 5px;
        }
        .btn-reset-all:hover {
            background: #e0861a;
            transform: scale(1.02);
        }
        
        .btn-edit-code {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fd971f;
            color: #1a1a2e;
            border: none;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            z-index: 5;
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        .btn-edit-code:hover { opacity: 1; }
        
        .btn-preview {
            background: #e94560;
            color: #fff;
            border: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            transition: all 0.3s;
        }
        .btn-preview:hover {
            background: #c73652;
            transform: scale(1.02);
        }
        
        .code-viewer { position: relative; }
        
        .save-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 5px;
        }
        .save-indicator.saved { background: #53d8fb; box-shadow: 0 0 10px #53d8fb; }
        .save-indicator.unsaved { background: #fd971f; box-shadow: 0 0 10px #fd971f; }
        
        .storage-status {
            font-size: 0.7rem;
            color: #75715e;
            margin-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>

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

    <div class="codelens-container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="sidebar sidebar-css">
                    <h6><i class="fa fa-list-ul"></i> CSS Emner</h6>
                    
                    <button class="btn-show-all" onclick="showAllTopics(topics)">
                        <i class="fa fa-eye"></i> Vis alle emner
                    </button>
                    
                    <div class="menu-item active" data-id="intro" onclick="loadTopic('intro', topics)">
                        <i class="fa fa-info-circle"></i> Hva er CSS?
                    </div>
                    <div class="menu-item" data-id="syntax" onclick="loadTopic('syntax', topics)">
                        <i class="fa fa-code"></i> Syntaks
                    </div>
                    <div class="menu-item" data-id="color" onclick="loadTopic('color', topics)">
                        <i class="fa fa-paint-bucket"></i> Farger
                    </div>
                    <div class="menu-item" data-id="font" onclick="loadTopic('font', topics)">
                        <i class="fa fa-font"></i> Skrift
                    </div>
                    <div class="menu-item" data-id="background" onclick="loadTopic('background', topics)">
                        <i class="fa fa-image"></i> Bakgrunn
                    </div>
                    <div class="menu-item" data-id="margin-padding" onclick="loadTopic('margin-padding', topics)">
                        <i class="fa fa-arrows"></i> Margin/Padding
                    </div>
                    <div class="menu-item" data-id="border" onclick="loadTopic('border', topics)">
                        <i class="fa fa-square"></i> Ramme
                    </div>
                    <div class="menu-item" data-id="class-id" onclick="loadTopic('class-id', topics)">
                        <i class="fa fa-tags"></i> Klasse og ID
                    </div>
                    <div class="menu-item" data-id="display" onclick="loadTopic('display', topics)">
                        <i class="fa fa-th"></i> Display
                    </div>
                    <div class="menu-item" data-id="flexbox" onclick="loadTopic('flexbox', topics)">
                        <i class="fa fa-arrows-h"></i> Flexbox
                    </div>
                    <div class="menu-item" data-id="position" onclick="loadTopic('position', topics)">
                        <i class="fa fa-crosshairs"></i> Posisjon
                    </div>
                    <div class="menu-item" data-id="pseudo" onclick="loadTopic('pseudo', topics)">
                        <i class="fa fa-magic"></i> Pseudo-klasser
                    </div>
                    <div class="menu-item" data-id="animation" onclick="loadTopic('animation', topics)">
                        <i class="fa fa-play"></i> Animasjon
                    </div>
                    
                    <hr style="border-color: var(--border-color);">
                    <div class="color-legend">
                        <span><span class="dot" style="background:#a6e22e;"></span> Selectors</span>
                        <span><span class="dot" style="background:#66d9ef;"></span> Properties</span>
                        <span><span class="dot" style="background:#e6db74;"></span> Verdier</span>
                        <span><span class="dot" style="background:#75715e;"></span> Kommentarer</span>
                    </div>
                    <div style="margin-top: 10px; display: flex; flex-direction: column; gap: 5px;">
                        <button class="btn btn-sm btn-outline-primary-css w-100" onclick="copyCode('codeWindow')">
                            <i class="fa fa-copy"></i> Kopier kode
                        </button>
                        <button class="btn btn-sm btn-outline-primary-css w-100" onclick="editCode('codeWindow')">
                            <i class="fa fa-pencil"></i> Rediger kode
                        </button>
                        <button class="btn-reset-all" onclick="resetAllCode(topics)">
                            <i class="fa fa-refresh"></i> Nullstill ALLE endringer
                        </button>
                    </div>
                    <div class="storage-status">
                        <i class="fa fa-database"></i> 
                        <span id="storageStatus">Endringer lagres lokalt</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9">
                <div class="code-viewer">
                    <div class="code-header code-header-css">
                        <h5>
                            <i class="fa fa-file-code-o"></i> 
                            <span id="topicTitle">Hva er CSS?</span>
                            <span id="saveIndicator" class="save-indicator saved"></span>
                        </h5>
                        <div class="code-info">
                            <i class="fa fa-tag"></i> CSS
                            <span class="ms-3"><i class="fa fa-clock-o"></i> 13 emner</span>
                            <button class="btn-preview ms-3" onclick="showLivePreview()">
                                <i class="fa fa-eye"></i> Live Preview
                            </button>
                        </div>
                    </div>
                    <div id="codeWindow" class="code-window">
                        <span class="comment">/* Hva er CSS? */</span>
                        <span class="selector">body</span> <span class="bracket">{</span>
                            <span class="property">background-color</span>: <span class="value">#1a1a2e</span>;
                            <span class="property">color</span>: <span class="value">#e0e0e0</span>;
                        <span class="bracket">}</span>
                    </div>
                    <button class="btn-edit-code" onclick="editCode('codeWindow')">
                        <i class="fa fa-pencil"></i> Rediger
                    </button>
                </div>
                
                <div id="explanation" class="explanation explanation-css">
                    <strong>🎨 Hva er CSS?</strong><br>
                    CSS (Cascading Style Sheets) brukes til å <span class="highlight">style</span> nettsider.
                    <ul>
                        <li>Bestemmer <span class="highlight">farger, skrift, layout</span> og mer</li>
                        <li>Gjør HTML-sider <span class="highlight">pene og brukervennlige</span></li>
                        <li>Kan skrives i <span class="code-in-text">&lt;style&gt;</span>-tagg eller egen fil</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="../assets/js/main.js"></script>
    <script>
        // ====== CSS Topics ======
        const topics = {
            intro: {
                title: 'Hva er CSS?',
                code: `<span class="comment">/* CSS = Cascading Style Sheets */</span>
        <span class="selector">body</span> <span class="bracket">{</span>
            <span class="property">background-color</span>: <span class="value">#1a1a2e</span>;
            <span class="property">color</span>: <span class="value">#e0e0e0</span>;
            <span class="property">font-family</span>: <span class="value">'Segoe UI', sans-serif</span>;
        <span class="bracket">}</span>`,
                explain: `🎨 <strong>Hva er CSS?</strong><br>
                CSS (Cascading Style Sheets) brukes til å <span class="highlight">style</span> nettsider.
                <ul>
                    <li>Bestemmer <span class="highlight">farger, skrift, layout</span> og mer</li>
                    <li>Gjør HTML-sider <span class="highlight">pene og brukervennlige</span></li>
                    <li>Kan skrives i <span class="code-in-text">&lt;style&gt;</span>-tagg eller egen fil</li>
                </ul>`
            },
            syntax: {
                title: 'CSS Syntaks',
                code: `<span class="comment">/* CSS struktur */</span>
        <span class="selector">selector</span> <span class="bracket">{</span>
            <span class="property">property</span>: <span class="value">value</span>;
        <span class="bracket">}</span>
        
        <span class="comment">/* Eksempel */</span>
        <span class="selector">h1</span> <span class="bracket">{</span>
            <span class="property">color</span>: <span class="value">#e94560</span>;
            <span class="property">font-size</span>: <span class="value">2rem</span>;
        <span class="bracket">}</span>`,
                explain: `📐 <strong>CSS Syntaks</strong><br>
                En CSS-regel består av:
                <ul>
                    <li><span class="highlight">Selector</span> — hvilket element som styles (f.eks. <span class="code-in-text">h1</span>, <span class="code-in-text">.class</span>)</li>
                    <li><span class="highlight">Property</span> — hva som endres (f.eks. <span class="code-in-text">color</span>)</li>
                    <li><span class="highlight">Value</span> — den nye verdien (f.eks. <span class="code-in-text">#e94560</span>)</li>
                </ul>`
            },
            color: {
                title: 'Farger',
                code: `<span class="comment">/* Farger i CSS */</span>
        <span class="selector">p</span> <span class="bracket">{</span>
            <span class="property">color</span>: <span class="value">red</span>;        <span class="comment">/* Navn */</span>
            <span class="property">color</span>: <span class="value">#ff0000</span>;     <span class="comment">/* Hex */</span>
            <span class="property">color</span>: <span class="value">rgb(255,0,0)</span>; <span class="comment">/* RGB */</span>
            <span class="property">color</span>: <span class="value">rgba(255,0,0,0.5)</span>; <span class="comment">/* RGB med gjennomsiktighet */</span>
        <span class="bracket">}</span>`,
                explain: `🌈 <strong>Farger i CSS</strong><br>
                Du kan bruke farger på flere måter:
                <ul>
                    <li><span class="highlight">Fargenavn</span> — <span class="code-in-text">red</span>, <span class="code-in-text">blue</span></li>
                    <li><span class="highlight">Hex</span> — <span class="code-in-text">#ff0000</span> (rød)</li>
                    <li><span class="highlight">RGB</span> — <span class="code-in-text">rgb(255,0,0)</span></li>
                    <li><span class="highlight">RGBA</span> — med gjennomsiktighet</li>
                </ul>`
            },
            font: {
                title: 'Skrift',
                code: `<span class="selector">body</span> <span class="bracket">{</span>
            <span class="property">font-family</span>: <span class="value">'Segoe UI', Tahoma, sans-serif</span>;
            <span class="property">font-size</span>: <span class="value">16px</span>;
            <span class="property">font-weight</span>: <span class="value">bold</span>;
            <span class="property">font-style</span>: <span class="value">italic</span>;
        <span class="bracket">}</span>`,
                explain: `🔤 <strong>Skrift (Font)</strong><br>
                <ul>
                    <li><span class="highlight">font-family</span> — skrifttype</li>
                    <li><span class="highlight">font-size</span> — størrelse (px, rem, em)</li>
                    <li><span class="highlight">font-weight</span> — tykkelse (normal, bold)</li>
                    <li><span class="highlight">font-style</span> — stil (normal, italic)</li>
                </ul>`
            },
            background: {
                title: 'Bakgrunn',
                code: `<span class="selector">body</span> <span class="bracket">{</span>
            <span class="property">background-color</span>: <span class="value">#1a1a2e</span>;
            <span class="property">background-image</span>: <span class="value">url('bg.jpg')</span>;
            <span class="property">background-size</span>: <span class="value">cover</span>;
            <span class="property">background-repeat</span>: <span class="value">no-repeat</span>;
        <span class="bracket">}</span>`,
                explain: `🖼️ <strong>Bakgrunn</strong><br>
                <ul>
                    <li><span class="highlight">background-color</span> — farge på bakgrunn</li>
                    <li><span class="highlight">background-image</span> — bilde som bakgrunn</li>
                    <li><span class="highlight">background-size</span> — <span class="code-in-text">cover</span> (fyller hele) eller <span class="code-in-text">contain</span></li>
                    <li><span class="highlight">background-repeat</span> — om bildet gjentas</li>
                </ul>`
            },
            'margin-padding': {
                title: 'Margin og Padding',
                code: `<span class="selector">div</span> <span class="bracket">{</span>
            <span class="property">margin</span>: <span class="value">20px</span>;   <span class="comment">/* Utenfor boksen */</span>
            <span class="property">padding</span>: <span class="value">15px</span>;  <span class="comment">/* Inne i boksen */</span>
            
            <span class="comment">/* Individuelle sider */</span>
            <span class="property">margin-top</span>: <span class="value">10px</span>;
            <span class="property">padding-left</span>: <span class="value">5px</span>;
        <span class="bracket">}</span>`,
                explain: `📏 <strong>Margin og Padding</strong><br>
                <ul>
                    <li><span class="highlight">margin</span> — avstand <span class="highlight">utenfor</span> boksen</li>
                    <li><span class="highlight">padding</span> — avstand <span class="highlight">inne i</span> boksen</li>
                    <li>Kan styre hver side: <span class="code-in-text">top</span>, <span class="code-in-text">right</span>, <span class="code-in-text">bottom</span>, <span class="code-in-text">left</span></li>
                </ul>`
            },
            border: {
                title: 'Ramme (Border)',
                code: `<span class="selector">div</span> <span class="bracket">{</span>
            <span class="property">border</span>: <span class="value">2px solid #e94560</span>;
            <span class="property">border-radius</span>: <span class="value">10px</span>;
            <span class="property">border-width</span>: <span class="value">3px</span>;
            <span class="property">border-style</span>: <span class="value">dashed</span>;
            <span class="property">border-color</span>: <span class="value">#53d8fb</span>;
        <span class="bracket">}</span>`,
                explain: `🖍️ <strong>Ramme (Border)</strong><br>
                <ul>
                    <li><span class="highlight">border</span> — <span class="code-in-text">bredde type farge</span></li>
                    <li><span class="highlight">border-radius</span> — runde hjørner</li>
                    <li><span class="highlight">border-style</span> — <span class="code-in-text">solid</span>, <span class="code-in-text">dashed</span>, <span class="code-in-text">dotted</span></li>
                </ul>`
            },
            'class-id': {
                title: 'Klasse og ID',
                code: `<span class="comment">/* Klasse - brukes til mange elementer */</span>
        <span class="selector">.min-klasse</span> <span class="bracket">{</span>
            <span class="property">color</span>: <span class="value">blue</span>;
        <span class="bracket">}</span>
        
        <span class="comment">/* ID - kun til ett element */</span>
        <span class="selector">#min-id</span> <span class="bracket">{</span>
            <span class="property">font-size</span>: <span class="value">20px</span>;
        <span class="bracket">}</span>`,
                explain: `🏷️ <strong>Klasse og ID</strong><br>
                <ul>
                    <li><span class="highlight">Klasse (.)</span> — kan brukes på <span class="highlight">mange</span> elementer</li>
                    <li><span class="highlight">ID (#)</span> — kun til <span class="highlight">ett</span> element per side</li>
                    <li>I HTML: <span class="code-in-text">&lt;div class="min-klasse"&gt;</span></li>
                    <li>I HTML: <span class="code-in-text">&lt;div id="min-id"&gt;</span></li>
                </ul>`
            },
            display: {
                title: 'Display (inline/block)',
                code: `<span class="selector">.inline</span> <span class="bracket">{</span>
            <span class="property">display</span>: <span class="value">inline</span>;  <span class="comment">/* På samme linje */</span>
        <span class="bracket">}</span>
        <span class="selector">.block</span> <span class="bracket">{</span>
            <span class="property">display</span>: <span class="value">block</span>;   <span class="comment">/* Ny linje */</span>
        <span class="bracket">}</span>
        <span class="selector">.flex</span> <span class="bracket">{</span>
            <span class="property">display</span>: <span class="value">flex</span>;    <span class="comment">/* Fleksibel layout */</span>
        <span class="bracket">}</span>`,
                explain: `📦 <strong>Display</strong><br>
                <ul>
                    <li><span class="highlight">inline</span> — elementer på <span class="highlight">samme linje</span></li>
                    <li><span class="highlight">block</span> — elementer på <span class="highlight">ny linje</span></li>
                    <li><span class="highlight">flex</span> — <span class="highlight">kraftig</span> layout-verktøy</li>
                </ul>`
            },
            flexbox: {
                title: 'Flexbox',
                code: `<span class="selector">.container</span> <span class="bracket">{</span>
            <span class="property">display</span>: <span class="value">flex</span>;
            <span class="property">flex-direction</span>: <span class="value">row</span>;  <span class="comment">/* Horisontal */</span>
            <span class="property">justify-content</span>: <span class="value">center</span>; <span class="comment">/* Sentrer horisontalt */</span>
            <span class="property">align-items</span>: <span class="value">center</span>;    <span class="comment">/* Sentrer vertikalt */</span>
            <span class="property">gap</span>: <span class="value">10px</span>;           <span class="comment">/* Avstand mellom elementer */</span>
        <span class="bracket">}</span>`,
                explain: `🧩 <strong>Flexbox</strong><br>
                <ul>
                    <li><span class="highlight">display: flex</span> — aktiverer flexbox</li>
                    <li><span class="highlight">flex-direction</span> — <span class="code-in-text">row</span> eller <span class="code-in-text">column</span></li>
                    <li><span class="highlight">justify-content</span> — sentrerer <span class="highlight">horisontalt</span></li>
                    <li><span class="highlight">align-items</span> — sentrerer <span class="highlight">vertikalt</span></li>
                    <li><span class="highlight">gap</span> — avstand mellom elementer</li>
                </ul>`
            },
            position: {
                title: 'Posisjon',
                code: `<span class="selector">.static</span> <span class="bracket">{</span> <span class="property">position</span>: <span class="value">static</span>; <span class="bracket">}</span>  <span class="comment">/* Standard */</span>
        <span class="selector">.relative</span> <span class="bracket">{</span> <span class="property">position</span>: <span class="value">relative</span>; <span class="property">top</span>: <span class="value">10px</span>; <span class="bracket">}</span>
        <span class="selector">.absolute</span> <span class="bracket">{</span> <span class="property">position</span>: <span class="value">absolute</span>; <span class="property">right</span>: <span class="value">0</span>; <span class="bracket">}</span>
        <span class="selector">.fixed</span> <span class="bracket">{</span> <span class="property">position</span>: <span class="value">fixed</span>; <span class="property">bottom</span>: <span class="value">0</span>; <span class="bracket">}</span>`,
                explain: `📍 <strong>Posisjon</strong><br>
                <ul>
                    <li><span class="highlight">static</span> — standard (følger dokumentflyten)</li>
                    <li><span class="highlight">relative</span> — relativ til sin <span class="highlight">egen</span> posisjon</li>
                    <li><span class="highlight">absolute</span> — relativ til <span class="highlight">nærmeste</span> posisjonerte forelder</li>
                    <li><span class="highlight">fixed</span> — <span class="highlight">festet</span> til vinduet (skroller ikke)</li>
                </ul>`
            },
            pseudo: {
                title: 'Pseudo-klasser',
                code: `<span class="comment">/* Pseudo-klasser */</span>
        <span class="selector">a:hover</span> <span class="bracket">{</span>
            <span class="property">color</span>: <span class="value">#e94560</span>;
            <span class="property">text-decoration</span>: <span class="value">underline</span>;
        <span class="bracket">}</span>
        
        <span class="selector">input:focus</span> <span class="bracket">{</span>
            <span class="property">border</span>: <span class="value">2px solid #53d8fb</span>;
            <span class="property">outline</span>: <span class="value">none</span>;
        <span class="bracket">}</span>
        
        <span class="selector">li:first-child</span> <span class="bracket">{</span>
            <span class="property">font-weight</span>: <span class="value">bold</span>;
        <span class="bracket">}</span>
        
        <span class="selector">p:last-child</span> <span class="bracket">{</span>
            <span class="property">margin-bottom</span>: <span class="value">0</span>;
        <span class="bracket">}</span>`,
                explain: `✨ <strong>Pseudo-klasser</strong><br>
                Pseudo-klasser brukes til å style elementer i en <span class="highlight">spesiell tilstand</span>:
                <ul>
                    <li><span class="highlight">:hover</span> — når musen er over elementet</li>
                    <li><span class="highlight">:focus</span> — når elementet er i fokus</li>
                    <li><span class="highlight">:first-child</span> — det første barnet</li>
                    <li><span class="highlight">:last-child</span> — det siste barnet</li>
                    <li><span class="highlight">:nth-child()</span> — velger basert på posisjon</li>
                </ul>`
            },
            animation: {
                title: 'Animasjon',
                code: `<span class="comment">/* Keyframes - definerer animasjon */</span>
        <span class="selector">@keyframes fadeIn</span> <span class="bracket">{</span>
            <span class="selector">from</span> <span class="bracket">{</span> <span class="property">opacity</span>: <span class="value">0</span>; <span class="bracket">}</span>
            <span class="selector">to</span> <span class="bracket">{</span> <span class="property">opacity</span>: <span class="value">1</span>; <span class="bracket">}</span>
        <span class="bracket">}</span>
        
        <span class="comment">/* Bruk animasjon */</span>
        <span class="selector">.element</span> <span class="bracket">{</span>
            <span class="property">animation</span>: <span class="value">fadeIn 2s ease-in-out</span>;
        <span class="bracket">}</span>
        
        <span class="comment">/* Flere animasjoner */</span>
        <span class="selector">@keyframes bounce</span> <span class="bracket">{</span>
            <span class="number">0%</span>, <span class="number">100%</span> <span class="bracket">{</span> <span class="property">transform</span>: <span class="value">translateY(0)</span>; <span class="bracket">}</span>
            <span class="number">50%</span> <span class="bracket">{</span> <span class="property">transform</span>: <span class="value">translateY(-20px)</span>; <span class="bracket">}</span>
        <span class="bracket">}</span>`,
                explain: `🎬 <strong>Animasjon</strong><br>
                CSS-anasjoner gjør nettsider <span class="highlight">levende</span>:
                <ul>
                    <li><span class="highlight">@keyframes</span> — definerer animasjonssekvensen</li>
                    <li><span class="highlight">animation</span> — bruker animasjonen</li>
                    <li><span class="highlight">transition</span> — enklere overganger</li>
                    <li><span class="highlight">transform</span> — roter, skaler, flytt</li>
                </ul>`
            }
        };

        // Start med intro
        window.onload = function() {
            loadTopic('intro', topics);
        };
    </script>
</body>
</html>
( ! ) Warning: Undefined variable $file in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 246 Call Stack #TimeMemoryFunctionLocation 10.0003362560{main}( )...\index.php:0 20.0013396048show_code_viewer( $filename = 'css.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær CSS</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-css h6 {'..., $ext = 'html' )...\index.php:39
( ! ) Deprecated: dirname(): Passing null to parameter #1 ($path) of type string is deprecated in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 246
Call Stack
#TimeMemoryFunctionLocation
10.0003362560{main}( )...\index.php:0
20.0013396048show_code_viewer( $filename = 'css.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær CSS</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-css h6 {'..., $ext = 'html' )...\index.php:39
30.0066429976dirname( $path = NULL )...\index.php:246
" class="btn"> Tilbake
( ! ) Warning: Undefined variable $file in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 249 Call Stack #TimeMemoryFunctionLocation 10.0003362560{main}( )...\index.php:0 20.0013396048show_code_viewer( $filename = 'css.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær CSS</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-css h6 {'..., $ext = 'html' )...\index.php:39
( ! ) Deprecated: urlencode(): Passing null to parameter #1 ($string) of type string is deprecated in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 249
Call Stack
#TimeMemoryFunctionLocation
10.0003362560{main}( )...\index.php:0
20.0013396048show_code_viewer( $filename = 'css.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær CSS</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-css h6 {'..., $ext = 'html' )...\index.php:39
30.0097429976urlencode( $string = NULL )...\index.php:249
&raw=1" class="btn btn-primary" target="_blank"> Åpne raw
Gå til læring