Stian/SMF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9a7a7b9ef1a2908404b0fa9127772dfd744b578b
SMF/app/index.html
Sterister 8933e9501d Initial commit: SMF2290 studie-app for eksamen vår 2026 
Komplett pensumstudie-app med:
- 120 flashcards, 49 quiz-spørsmål, 16 eksamenstrener-oppgaver
- Sammendrag av alle 12 forelesninger
- tl;dr-side for siste-minutts pugging
- Søk gjennom hele pensumet
- Dark/light mode, mobile-vennlig

Cross-platform launchere (Start.sh + Start.bat) med auto-detect
og auto-install av HTTP-server. PowerShell-fallback for Windows.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 18:44:00 +02:00

372 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="nb" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="description" content="Studie-app for SMF2290 — Etikk, bærekraft og samfunnsansvar">
<title>SMF2290 · Pensum</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%23E07B5F'/%3E%3Ctext x='16' y='22' text-anchor='middle' fill='%230F1218' font-family='serif' font-style='italic' font-size='18' font-weight='400'%3ES%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="css/style.css">
<script src="vendor/marked.min.js"></script>
</head>
<body>
<!-- Mobile menu toggle -->
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Vis meny">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="sidebar-scrim" id="sidebarScrim"></div>
<div class="app" id="app">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<a href="#" class="sidebar__brand" data-route="home">
<span class="sidebar__brand-code">SMF · 2290</span>
<span class="sidebar__brand-name">Pensum</span>
</a>
<div class="sidebar__section">
<div class="sidebar__label">Studie</div>
<nav class="sidebar__nav">
<a href="#" data-route="home" class="sidebar__link">
<span class="sidebar__link-num">00</span>
<span>Oversikt</span>
</a>
<a href="#/tldr" data-route="tldr" class="sidebar__link sidebar__link--tldr">
<span class="sidebar__link-num">!</span>
<span>tl;dr — i farta</span>
</a>
<a href="#/flashcards" data-route="flashcards" class="sidebar__link">
<span class="sidebar__link-num">FC</span>
<span>Flashcards</span>
</a>
<a href="#/quiz" data-route="quiz" class="sidebar__link">
<span class="sidebar__link-num">QZ</span>
<span>Selvtest</span>
</a>
<a href="#/eksamen" data-route="eksamen" class="sidebar__link">
<span class="sidebar__link-num">EX</span>
<span>Eksamenstrener</span>
</a>
</nav>
</div>
<div class="sidebar__section">
<div class="sidebar__label">Uker</div>
<nav class="sidebar__nav" id="weekNav">
<!-- populated by JS -->
</nav>
</div>
<div class="sidebar__exam">
<div class="sidebar__exam-label">Eksamen om</div>
<div class="sidebar__exam-countdown" id="examCountdown">—</div>
<div class="sidebar__exam-detail">01.06.2026 · 09:00 · 4t · Inspera</div>
</div>
</aside>
<!-- Main canvas -->
<main class="canvas">
<!-- Top bar -->
<div class="topbar">
<div class="topbar__crumbs" id="crumbs">
<strong>SMF2290</strong>
<span>/</span>
<span id="crumbCurrent">Oversikt</span>
</div>
<div class="search">
<svg class="search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" class="search__input" id="searchInput" placeholder="Søk i pensum — begreper, teorier …" autocomplete="off">
<kbd class="search__kbd">/</kbd>
<div class="search-results" id="searchResults"></div>
</div>
<div class="topbar__actions">
<button class="icon-btn" id="themeBtn" aria-label="Bytt tema" title="Bytt tema">
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</div>
</div>
<!-- View container -->
<div id="view" class="view"></div>
</main>
</div>
<!-- Templates -->
<template id="t-home">
<div class="page">
<section class="hero reveal">
<div>
<div class="hero__meta">
<span><strong>SMF2290</strong> · Vår 2026</span>
<span>NTNU</span>
<span>Martina Ortová</span>
</div>
<h1 class="hero__title">Etikk, bærekraft<br>& <em>samfunnsansvar</em></h1>
<div class="hero__quote">Det viktigste er ikke å kunne alle teorier og prinsipper, men å utvikle etisk bevissthet og evne til refleksjon.</div>
<div class="hero__attribution">— Martina Ortová, Uke 17</div>
</div>
</section>
<div class="exam-strip reveal">
<div class="exam-cell">
<span class="exam-cell__label">Dato</span>
<span class="exam-cell__value">Mandag 01.06.26</span>
</div>
<div class="exam-cell">
<span class="exam-cell__label">Tid</span>
<span class="exam-cell__value">09:00 · 4 timer</span>
</div>
<div class="exam-cell">
<span class="exam-cell__label">System</span>
<span class="exam-cell__value">Inspera</span>
</div>
<div class="exam-cell">
<span class="exam-cell__label">Sted</span>
<span class="exam-cell__value">Campus Gjøvik</span>
</div>
<div class="exam-cell">
<span class="exam-cell__label">Hjelpemiddel</span>
<span class="exam-cell__value">Kode E</span>
</div>
<div class="exam-cell">
<span class="exam-cell__label">Vekting</span>
<span class="exam-cell__value">100/100</span>
</div>
</div>
<section class="themes">
<div class="themes__head reveal">
<h2 class="themes__title">Fire domener · <em class="serif">eksamen i fire deler</em></h2>
<span class="themes__count">25 % hver</span>
</div>
<div class="themes__grid">
<a href="#/tema/etikk" class="theme-card theme-card--etikk reveal" data-route="tema-etikk">
<span class="theme-card__num">01</span>
<div class="theme-card__eyebrow">Oppgave I</div>
<h3 class="theme-card__title"><em>Etikk</em></h3>
<p class="theme-card__summary">Pliktetikk, konsekvensetikk og dydsetikk. De seks etiske prinsippene, Kvalnes-hjulet, og bedrifters etiske dilemmaer.</p>
<div class="theme-card__list">
<span class="theme-card__chip">Kant</span>
<span class="theme-card__chip">Mill</span>
<span class="theme-card__chip">Aristoteles</span>
<span class="theme-card__chip">Kvalnes</span>
<span class="theme-card__chip">6 prinsipper</span>
</div>
<div class="theme-card__foot">
<span>Uke 3 · 4 · 5 · 17</span>
<span class="theme-card__arrow">Les →</span>
</div>
</a>
<a href="#/tema/baerekraft" class="theme-card theme-card--baerekraft reveal" data-route="tema-baerekraft">
<span class="theme-card__num">02</span>
<div class="theme-card__eyebrow">Oppgave II</div>
<h3 class="theme-card__title"><em>Bærekraft</em></h3>
<p class="theme-card__summary">Triple Bottom Line, sirkulær økonomi, planetens tålegrenser og motvekst. Brundtland-arven og SDG.</p>
<div class="theme-card__list">
<span class="theme-card__chip">TBL</span>
<span class="theme-card__chip">Sirkulær</span>
<span class="theme-card__chip">SDG</span>
<span class="theme-card__chip">Smultringen</span>
<span class="theme-card__chip">Degrowth</span>
</div>
<div class="theme-card__foot">
<span>Uke 2 · 11 · 16</span>
<span class="theme-card__arrow">Les →</span>
</div>
</a>
<a href="#/tema/samfunn" class="theme-card theme-card--samfunn reveal" data-route="tema-samfunn">
<span class="theme-card__num">03</span>
<div class="theme-card__eyebrow">Oppgave III</div>
<h3 class="theme-card__title">Samfunns<em>ansvar</em></h3>
<p class="theme-card__summary">CSR vs CSV, Carrolls pyramide, stakeholder-teori og institusjonell teori. Eksternaliteter og sosial pilar.</p>
<div class="theme-card__list">
<span class="theme-card__chip">CSR</span>
<span class="theme-card__chip">CSV</span>
<span class="theme-card__chip">Carroll</span>
<span class="theme-card__chip">Mitchell</span>
<span class="theme-card__chip">Friedman</span>
</div>
<div class="theme-card__foot">
<span>Uke 6 · 7 · 8 · 10</span>
<span class="theme-card__arrow">Les →</span>
</div>
</a>
<a href="#/tema/verktoy" class="theme-card theme-card--verktoy reveal" data-route="tema-verktoy">
<span class="theme-card__num">04</span>
<div class="theme-card__eyebrow">Oppgave IV · Case</div>
<h3 class="theme-card__title"><em>Verktøy</em> & implementering</h3>
<p class="theme-card__summary">Etiske kodekser, CSRD, GRI, ISO, Green Deal. Implementeringssteg og verktøykasse for case-drøftingen.</p>
<div class="theme-card__list">
<span class="theme-card__chip">CSRD</span>
<span class="theme-card__chip">GRI</span>
<span class="theme-card__chip">ISO 26000</span>
<span class="theme-card__chip">Green Deal</span>
<span class="theme-card__chip">5 steg</span>
</div>
<div class="theme-card__foot">
<span>Uke 12 · 16</span>
<span class="theme-card__arrow">Les →</span>
</div>
</a>
</div>
</section>
<section class="tldr-promo reveal">
<a href="#/tldr" class="tldr-promo__card" data-route="tldr">
<div class="tldr-promo__icon">!</div>
<div class="tldr-promo__body">
<div class="tldr-promo__label">tl;dr — i farta</div>
<div class="tldr-promo__title">Eksamen <em>i morgen?</em> Dette må du kunne.</div>
<div class="tldr-promo__desc">Det aller viktigste destillert til én side. Definisjoner, navn, formler. Bruk på bussen, i køen, eller når det panikker.</div>
</div>
<div class="tldr-promo__arrow">→</div>
</a>
</section>
<section class="modes">
<div class="themes__head reveal" style="margin-bottom: var(--sp-7)">
<h2 class="themes__title">Studiemodus · <em class="serif">tren før eksamen</em></h2>
</div>
<div class="modes__grid">
<a href="#/flashcards" class="mode-card reveal" data-route="flashcards">
<span class="mode-card__label">Flashcards</span>
<span class="mode-card__title">Pugg <em>begreper</em></span>
<span class="mode-card__desc">Spaced-repetition over alle definisjoner, modeller og navn fra pensum. Klikk for å snu kortet.</span>
<span class="mode-card__cta">Start</span>
</a>
<a href="#/quiz" class="mode-card reveal" data-route="quiz">
<span class="mode-card__label">Selvtest</span>
<span class="mode-card__title"><em>Sjekk</em> kunnskapen</span>
<span class="mode-card__desc">Flervalg, kort fasitsvar, og forklaringer. Test deg innenfor hvert tema eller hele pensum.</span>
<span class="mode-card__cta">Start</span>
</a>
<a href="#/eksamen" class="mode-card reveal" data-route="eksamen">
<span class="mode-card__label">Eksamenstrener</span>
<span class="mode-card__title">Skriv <em>som på</em> Inspera</span>
<span class="mode-card__desc">Tidligere eksempelspørsmål med veiledede svar og sjekkliste for hva som forventes.</span>
<span class="mode-card__cta">Start</span>
</a>
</div>
</section>
</div>
</template>
<template id="t-lesson">
<div class="page">
<header class="lesson-header reveal">
<div class="lesson-header__num" id="lessonNum">Uke 00</div>
<h1 class="lesson-header__title" id="lessonTitle">—</h1>
<div class="lesson-header__meta" id="lessonMeta"></div>
</header>
<article class="lesson" id="lessonBody">
<div class="is-loading" style="height: 400px;"></div>
</article>
<nav class="lesson-pager" id="lessonPager"></nav>
</div>
</template>
<template id="t-flashcards">
<div class="page">
<header class="lesson-header reveal" style="text-align:center; border:none; padding-bottom:var(--sp-5)">
<div class="lesson-header__num">Studiemodus</div>
<h1 class="lesson-header__title"><em>Flashcards</em></h1>
<div class="lesson-header__meta" style="justify-content:center"><span>Klikk på kortet for å snu · piltaster for navigering</span></div>
</header>
<div class="fc-filters reveal" id="fcFilters"></div>
<div class="fc-stage">
<div class="fc-meta reveal">
<span><strong id="fcCurrent">1</strong> / <span id="fcTotal">0</span></span>
<span class="fc-meta__sep">·</span>
<span id="fcCategory">—</span>
<span class="fc-meta__sep">·</span>
<span><strong id="fcKnown">0</strong> mestret</span>
</div>
<div class="fc-card reveal" id="fcCard">
<div class="fc-face fc-face--front">
<span class="fc-face__type" id="fcFrontType">SPØRSMÅL</span>
<div class="fc-face__front-text" id="fcFront">Trykk for å starte</div>
<div class="fc-face__hint"><span>klikk for å snu</span><span>SPACE</span></div>
</div>
<div class="fc-face fc-face--back">
<span class="fc-face__type" id="fcBackType">SVAR</span>
<div class="fc-face__back-text" id="fcBack">—</div>
<div class="fc-face__hint"><span>vurder hvor godt du husker</span></div>
</div>
</div>
<div class="fc-controls reveal">
<button class="fc-btn" id="fcPrev">← Forrige</button>
<button class="fc-btn fc-btn--hard" id="fcHard">Glemt</button>
<button class="fc-btn fc-btn--good" id="fcGood">Ok</button>
<button class="fc-btn fc-btn--easy" id="fcEasy">Kunne</button>
<button class="fc-btn" id="fcNext">Neste →</button>
</div>
</div>
</div>
</template>
<template id="t-quiz">
<div class="page">
<div class="quiz-stage" id="quizStage"></div>
</div>
</template>
<template id="t-eksamen">
<div class="page">
<header class="lesson-header reveal">
<div class="lesson-header__num">Eksamenstrener</div>
<h1 class="lesson-header__title"><em>Tidligere</em> eksempelspørsmål</h1>
<div class="lesson-header__meta">
<span>Drøftingsspørsmål</span>
<span>Veiledede svar</span>
<span>Case-oppgaver</span>
</div>
</header>
<div id="examQuestions"></div>
</div>
</template>
<template id="t-tema">
<div class="page">
<header class="lesson-header reveal" id="temaHeader"></header>
<article class="lesson" id="temaBody"></article>
</div>
</template>
<template id="t-tldr">
<div class="page page--narrow tldr-page">
<header class="tldr-hero reveal">
<div class="tldr-hero__stamp">!</div>
<div class="tldr-hero__num">tl;dr</div>
<h1 class="tldr-hero__title">Eksamen <em>i morgen?</em><br>Dette må du kunne.</h1>
<div class="tldr-hero__sub">Det aller viktigste destillert til ett dokument. Skroll, scan, gå.</div>
</header>
<article class="lesson tldr-body" id="tldrBody">
<div class="is-loading" style="height: 400px;"></div>
</article>
</div>
</template>
<script src="js/data.js"></script>
<script src="js/render.js"></script>
<script src="js/search.js"></script>
<script src="js/flashcards.js"></script>
<script src="js/quiz.js"></script>
<script src="js/eksamen.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink