Spaces:
Running
Running
| <html lang="no"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NTNU Crestron Touchpanel</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --ntnu-blue: #00509e; | |
| --ntnu-light-blue: #6096d0; | |
| --ntnu-orange: #ef8114; | |
| --ntnu-green: #bcd025; | |
| --ntnu-red: #e63946; | |
| --ntnu-gray: #f1f1f1; | |
| } | |
| body { | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| touch-action: manipulation; | |
| background-color: #f8f9fa; | |
| } | |
| .drag-source { | |
| touch-action: none; | |
| user-select: none; | |
| } | |
| .drop-target.active { | |
| border: 3px dashed var(--ntnu-blue); | |
| background-color: rgba(0, 80, 158, 0.1); | |
| } | |
| .volume-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: var(--ntnu-blue); | |
| cursor: pointer; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @media (max-width: 1024px) { | |
| .responsive-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col bg-gray-50"> | |
| <!-- Top Bar --> | |
| <header class="bg-[#00509e] text-white p-4 flex justify-between items-center shadow-md"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="language-toggle" class="flex items-center px-3 py-1 rounded bg-white bg-opacity-10 hover:bg-opacity-20 transition"> | |
| <span class="font-semibold">NO</span> | |
| <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://innsida.ntnu.no/documents/10157/139764446/NTNU+logo+horisontal+white.png/9d4e4d6e-5b7b-4b4b-8e8e-5e5e5e5e5e5e?t=1580389280000" | |
| alt="NTNU Logo" class="h-10"> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="help-button" class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition"> | |
| <i data-feather="help-circle" class="w-6 h-6"></i> | |
| </button> | |
| <div id="recording-indicator" class="w-3 h-3 rounded-full bg-red-500"></div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Volume Control --> | |
| <aside class="w-20 bg-gray-100 flex flex-col items-center py-6 space-y-8 border-r border-gray-200"> | |
| <div class="text-center"> | |
| <p class="text-xs font-semibold text-gray-600 mb-1">PROGRAM</p> | |
| <div class="relative h-40 w-10 mx-auto"> | |
| <input type="range" min="0" max="100" value="70" | |
| class="volume-slider absolute top-0 left-1/2 transform -translate-x-1/2 w-24 h-2 -rotate-90" | |
| orient="vertical"> | |
| </div> | |
| <div class="flex flex-col items-center mt-2 space-y-1"> | |
| <button class="p-1 text-gray-700 hover:text-[#00509e]"> | |
| <i data-feather="plus" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-1 text-gray-700 hover:text-[#00509e]"> | |
| <i data-feather="minus" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button id="mute-button" class="p-3 rounded-full bg-green-500 text-white shadow-md"> | |
| <i data-feather="volume-2" class="w-6 h-6"></i> | |
| </button> | |
| <p class="text-xs font-semibold text-gray-600 mt-1">LYD AV</p> | |
| </div> | |
| </aside> | |
| <!-- Main Panel Content --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <!-- Start Screen (shown by default) --> | |
| <div id="start-screen" class="h-full flex flex-col items-center justify-center"> | |
| <div class="max-w-md text-center"> | |
| <h1 class="text-3xl font-bold text-[#00509e] mb-6">NTNU AV-KONTROLL</h1> | |
| <button id="start-room-btn" class="px-8 py-4 bg-[#00509e] text-white rounded-lg shadow-lg hover:bg-[#003d7a] transition text-xl font-semibold"> | |
| Start rom | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Menu Content (hidden by default) --> | |
| <div id="main-content" class="hidden"> | |
| <!-- Tab Navigation --> | |
| <div class="hidden md:flex justify-center space-x-2 mb-6"> | |
| <button data-tab="home" class="tab-btn px-4 py-2 rounded-t-lg bg-[#00509e] text-white font-semibold"> | |
| <i data-feather="home" class="inline mr-2"></i> Hjem | |
| </button> | |
| <button data-tab="video" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="monitor" class="inline mr-2"></i> Bilde | |
| </button> | |
| <button data-tab="audio" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="speaker" class="inline mr-2"></i> Lyd | |
| </button> | |
| <button data-tab="lighting" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="sun" class="inline mr-2"></i> Lys | |
| </button> | |
| <button data-tab="shades" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="layers" class="inline mr-2"></i> Gardin/Lerret | |
| </button> | |
| <button data-tab="camera" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="video" class="inline mr-2"></i> Kamera | |
| </button> | |
| <button data-tab="technician" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold hidden" id="tech-tab-btn"> | |
| <i data-feather="settings" class="inline mr-2"></i> Tekniker | |
| </button> | |
| <button data-tab="power" class="tab-btn px-4 py-2 rounded-t-lg bg-gray-200 text-gray-700 hover:bg-gray-300 font-semibold"> | |
| <i data-feather="power" class="inline mr-2"></i> Avslutt | |
| </button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <!-- Home Tab --> | |
| <div id="home-tab" class="tab-content active"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Velkommen</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <h3 class="font-semibold text-lg mb-3">Hurtigstart</h3> | |
| <ul class="space-y-2"> | |
| <li><button class="text-[#00509e] hover:underline flex items-center"><i data-feather="monitor" class="mr-2 w-5 h-5"></i> Bildeinnstillinger</button></li> | |
| <li><button class="text-[#00509e] hover:underline flex items-center"><i data-feather="speaker" class="mr-2 w-5 h-5"></i> Lydinnstillinger</button></li> | |
| <li><button class="text-[#00509e] hover:underline flex items-center"><i data-feather="sun" class="mr-2 w-5 h-5"></i> Lysinnstillinger</button></li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <h3 class="font-semibold text-lg mb-3">Hjelp</h3> | |
| <p class="mb-3">Trenger du hjelp med å bruke systemet?</p> | |
| <button class="bg-[#00509e] text-white px-4 py-2 rounded-lg hover:bg-[#003d7a] transition flex items-center"> | |
| <i data-feather="help-circle" class="mr-2"></i> Vis hjelp | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Tab --> | |
| <div id="video-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Bilde</h2> | |
| <div class="mb-8"> | |
| <h3 class="font-semibold text-lg mb-3">Kilder</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <div class="drag-source bg-gray-100 p-3 rounded-lg cursor-move flex flex-col items-center w-24" draggable="true" data-source="ntnu-pc"> | |
| <i data-feather="monitor" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">NTNU-PC</span> | |
| </div> | |
| <div class="drag-source bg-gray-100 p-3 rounded-lg cursor-move flex flex-col items-center w-24" draggable="true" data-source="laptop"> | |
| <i data-feather="laptop" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">Laptop</span> | |
| </div> | |
| <div class="drag-source bg-gray-100 p-3 rounded-lg cursor-move flex flex-col items-center w-24" draggable="true" data-source="doc-cam"> | |
| <i data-feather="camera" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">Dok.kamera</span> | |
| </div> | |
| <div class="drag-source bg-gray-100 p-3 rounded-lg cursor-move flex flex-col items-center w-24" draggable="true" data-source="off"> | |
| <i data-feather="x" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">Bilde Av</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Destinasjoner</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="drop-target bg-gray-50 p-4 rounded-lg border-2 border-gray-200 min-h-32 flex flex-col items-center justify-center" data-destination="projector1"> | |
| <div class="source-display hidden flex-col items-center"> | |
| <i data-feather="monitor" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">NTNU-PC</span> | |
| </div> | |
| <p class="text-gray-500 text-sm">Projektor 01</p> | |
| <div class="audio-indicator mt-2 hidden"> | |
| <i data-feather="speaker" class="w-6 h-6 text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="drop-target bg-gray-50 p-4 rounded-lg border-2 border-gray-200 min-h-32 flex flex-col items-center justify-center" data-destination="projector2"> | |
| <div class="source-display hidden flex-col items-center"> | |
| <i data-feather="monitor" class="w-8 h-8 text-[#00509e]"></i> | |
| <span class="text-sm mt-1">NTNU-PC</span> | |
| </div> | |
| <p class="text-gray-500 text-sm">Projektor 02</p> | |
| <div class="audio-indicator mt-2 hidden"> | |
| <i data-feather="speaker" class="w-6 h-6 text-green-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Tab --> | |
| <div id="audio-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Lyd</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Mikrofon</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Mikrofonvolum</label> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="volume-x" class="w-5 h-5 text-gray-500"></i> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <i data-feather="volume-2" class="w-5 h-5 text-gray-500"></i> | |
| </div> | |
| </div> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i data-feather="mic-off" class="inline mr-2"></i> Mute mikrofon | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Programlyd</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <p class="mb-3">Velg lydkilde:</p> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="audio-source" class="text-[#00509e]" checked> | |
| <span>Automatisk (siste kilde)</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="audio-source" class="text-[#00509e]"> | |
| <span>NTNU-PC</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="audio-source" class="text-[#00509e]"> | |
| <span>Laptop</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="radio" name="audio-source" class="text-[#00509e]"> | |
| <span>Dokumentkamera</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lighting Tab --> | |
| <div id="lighting-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Lys</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Forhåndsinnstillinger</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="moon" class="w-6 h-6 mb-1"></i> | |
| <span>Alt lys Av</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="sun" class="w-6 h-6 mb-1"></i> | |
| <span>Alt lys På</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="user" class="w-6 h-6 mb-1"></i> | |
| <span>Podielys</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="edit-3" class="w-6 h-6 mb-1"></i> | |
| <span>Tavlelys</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Manuell styring</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Lys i sal</label> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="sun" class="w-5 h-5 text-gray-500"></i> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm w-8 text-center">75%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Lys på podie</label> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="sun" class="w-5 h-5 text-gray-500"></i> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm w-8 text-center">50%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shades Tab --> | |
| <div id="shades-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Gardin og lerret</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Lerret</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-up" class="w-6 h-6 mb-1"></i> | |
| <span>Lerret 1 opp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="square" class="w-6 h-6 mb-1"></i> | |
| <span>Stopp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-down" class="w-6 h-6 mb-1"></i> | |
| <span>Lerret 1 ned</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3 mt-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-up" class="w-6 h-6 mb-1"></i> | |
| <span>Lerret 2 opp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="square" class="w-6 h-6 mb-1"></i> | |
| <span>Stopp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-down" class="w-6 h-6 mb-1"></i> | |
| <span>Lerret 2 ned</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Gardiner</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-up" class="w-6 h-6 mb-1"></i> | |
| <span>Gardiner opp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="square" class="w-6 h-6 mb-1"></i> | |
| <span>Stopp</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="arrow-down" class="w-6 h-6 mb-1"></i> | |
| <span>Gardiner ned</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Camera Tab --> | |
| <div id="camera-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Kamera</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Forhåndsinnstillinger</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="edit-3" class="w-6 h-6 mb-1"></i> | |
| <span>Tavle</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="user" class="w-6 h-6 mb-1"></i> | |
| <span>Kateter</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="users" class="w-6 h-6 mb-1"></i> | |
| <span>Podium</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="edit-3" class="w-6 h-6 mb-1"></i> | |
| <span>Tavle venstre</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="edit-3" class="w-6 h-6 mb-1"></i> | |
| <span>Tavle midt</span> | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-3 rounded-lg hover:bg-gray-300 transition flex flex-col items-center"> | |
| <i data-feather="edit-3" class="w-6 h-6 mb-1"></i> | |
| <span>Tavle høyre</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-3">Kamerainnstillinger</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-sm font-medium">Kamera tracking:</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00509e]"></div> | |
| <span class="ml-3 text-sm font-medium">På</span> | |
| </label> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <p class="text-sm mb-2">Zoom:</p> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="zoom-out" class="w-5 h-5 text-gray-500"></i> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <i data-feather="zoom-in" class="w-5 h-5 text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technician Tab --> | |
| <div id="technician-tab" class="tab-content"> | |
| <div id="tech-login" class="text-center py-8"> | |
| <h3 class="text-xl font-semibold mb-4">Teknikermeny</h3> | |
| <p class="mb-6">Skriv inn PIN-kode for å få tilgang til teknikermenyen</p> | |
| <div class="max-w-xs mx-auto"> | |
| <input type="password" id="tech-pin" class="w-full px-4 py-2 border border-gray-300 rounded-lg text-center" placeholder="PIN-kode"> | |
| <button id="tech-login-btn" class="mt-4 bg-[#00509e] text-white px-6 py-2 rounded-lg hover:bg-[#003d7a] transition"> | |
| Logg inn | |
| </button> | |
| </div> | |
| </div> | |
| <div id="tech-content" class="hidden"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Teknikermeny</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="settings" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Systeminnstillinger</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="volume-2" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Lydmikser</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="video" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Videomikser</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="mic" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Pare mikrofon</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="camera" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Kamera (PTZ)</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="smile" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Tilbakemeldinger</span> | |
| </button> | |
| <button class="tech-menu-btn bg-gray-100 p-4 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex flex-col items-center"> | |
| <i data-feather="alert-triangle" class="w-8 h-8 text-[#00509e] mb-2"></i> | |
| <span class="font-semibold">Feilsøking</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Power Tab --> | |
| <div id="power-tab" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-[#00509e] mb-6">Avslutt</h2> | |
| <div class="max-w-md mx-auto bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <p class="mb-6 text-center">Hva vil du gjøre?</p> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-gray-200 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-300 transition font-semibold"> | |
| Avslutt system | |
| </button> | |
| <button class="w-full bg-gray-200 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-300 transition font-semibold"> | |
| Tilbake til hovedmeny | |
| </button> | |
| <button class="w-full bg-[#00509e] text-white px-6 py-3 rounded-lg hover:bg-[#003d7a] transition font-semibold"> | |
| Avbryt | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <p class="text-center mb-4">Hvordan fungerte rommet i dag?</p> | |
| <div class="flex justify-center space-x-6"> | |
| <button class="feedback-btn p-3 bg-green-100 rounded-full hover:bg-green-200 transition"> | |
| <i data-feather="smile" class="w-8 h-8 text-green-600"></i> | |
| </button> | |
| <button class="feedback-btn p-3 bg-yellow-100 rounded-full hover:bg-yellow-200 transition"> | |
| <i data-feather="meh" class="w-8 h-8 text-yellow-600"></i> | |
| </button> | |
| <button class="feedback-btn p-3 bg-red-100 rounded-full hover:bg-red-200 transition"> | |
| <i data-feather="frown" class="w-8 h-8 text-red-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Bottom Navigation (Mobile) --> | |
| <nav id="mobile-nav" class="md:hidden bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-10"> | |
| <div class="flex justify-around"> | |
| <button data-tab="home" class="tab-btn py-3 px-4 flex flex-col items-center text-[#00509e]"> | |
| <i data-feather="home" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Hjem</span> | |
| </button> | |
| <button data-tab="video" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="monitor" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Bilde</span> | |
| </button> | |
| <button data-tab="audio" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="speaker" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Lyd</span> | |
| </button> | |
| <button data-tab="lighting" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="sun" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Lys</span> | |
| </button> | |
| <button data-tab="shades" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="layers" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Gardin</span> | |
| </button> | |
| <button data-tab="camera" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="video" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Kamera</span> | |
| </button> | |
| <button data-tab="power" class="tab-btn py-3 px-4 flex flex-col items-center text-gray-500"> | |
| <i data-feather="power" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Avslutt</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Help Modal --> | |
| <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-[#00509e]">Hjelp</h3> | |
| <button id="close-help" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="prose"> | |
| <h4 class="font-semibold">Bruk av systemet</h4> | |
| <p>Dette panelet styrer alt AV-utstyr i rommet. For å starte systemet, trykk på "Start rom".</p> | |
| <h4 class="font-semibold mt-4">Bilde</h4> | |
| <p>Dra og slipp kilder til ønsket prosjektor for å vise innhold.</p> | |
| <h4 class="font-semibold mt-4">Lyd</h4> | |
| <p>Justér volum for programlyd og mikrofon her.</p> | |
| <h4 class="font-semibold mt-4">Kontakt</h4> | |
| <p>Ved problemer, kontakt IT-support på tlf: 123 45 678</p> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://ntnu.no/av-support" | |
| alt="QR-kode til hjelpeside" class="inline-block"> | |
| <p class="text-sm mt-2">Skann for mer informasjon</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // DOM Elements | |
| const startRoomBtn = document.getElementById('start-room-btn'); | |
| const startScreen = document.getElementById('start-screen'); | |
| const mainContent = document.getElementById('main-content'); | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| const helpButton = document.getElementById('help-button'); | |
| const helpModal = document.getElementById('help-modal'); | |
| const closeHelp = document.getElementById('close-help'); | |
| const muteButton = document.getElementById('mute-button'); | |
| const feedbackButtons = document.querySelectorAll('.feedback-btn'); | |
| const techLoginBtn = document.getElementById('tech-login-btn'); | |
| const techLogin = document.getElementById('tech-login'); | |
| const techContent = document.getElementById('tech-content'); | |
| const techTabBtn = document.getElementById('tech-tab-btn'); | |
| const languageToggle = document.getElementById('language-toggle'); | |
| const mobileNav = document.getElementById('mobile-nav'); | |
| // Drag and Drop Elements | |
| const dragSources = document.querySelectorAll('.drag-source'); | |
| const dropTargets = document.querySelectorAll('.drop-target'); | |
| // Start Room Button Click | |
| startRoomBtn.addEventListener('click', () => { | |
| startScreen.classList.add('hidden'); | |
| mainContent.classList.remove('hidden'); | |
| mobileNav.classList.remove('hidden'); | |
| }); | |
| // Tab Switching | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| if (btn === button) { | |
| btn.classList.remove('bg-gray-200', 'text-gray-700'); | |
| btn.classList.add('bg-[#00509e]', 'text-white'); | |
| // Mobile nav styling | |
| if (window.innerWidth < 768) { | |
| btn.classList.remove('text-gray-500'); | |
| btn.classList.add('text-[#00509e]'); | |
| } | |
| } else { | |
| btn.classList.remove('bg-[#00509e]', 'text-white'); | |
| btn.classList.add('bg-gray-200', 'text-gray-700'); | |
| // Mobile nav styling | |
| if (window.innerWidth < 768) { | |
| btn.classList.remove('text-[#00509e]'); | |
| btn.classList.add('text-gray-500'); | |
| } | |
| } | |
| }); | |
| // Update active tab content | |
| tabContents.forEach(content => { | |
| if (content.id === `${tabId}-tab`) { | |
| content.classList.add('active'); | |
| } else { | |
| content.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Help Modal | |
| helpButton.addEventListener('click', () => { | |
| helpModal.classList.remove('hidden'); | |
| }); | |
| closeHelp.addEventListener('click', () => { | |
| helpModal.classList.add('hidden'); | |
| }); | |
| // Mute Button Toggle | |
| muteButton.addEventListener('click', () => { | |
| const isMuted = muteButton.classList.contains('bg-green-500'); | |
| if (isMuted) { | |
| muteButton.classList.remove('bg-green-500'); | |
| muteButton.classList.add('bg-red-500'); | |
| muteButton.querySelector('i').setAttribute('data-feather', 'volume-x'); | |
| muteButton.nextElementSibling.textContent = 'LYD PÅ'; | |
| } else { | |
| muteButton.classList.remove('bg-red-500'); | |
| muteButton.classList.add('bg-green-500'); | |
| muteButton.querySelector('i').setAttribute('data-feather', 'volume-2'); | |
| muteButton.nextElementSibling.textContent = 'LYD AV'; | |
| } | |
| feather.replace(); | |
| }); | |
| // Feedback Buttons | |
| feedbackButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // In a real app, this would send feedback to the server | |
| alert('Takk for tilbakemeldingen!'); | |
| }); | |
| }); | |
| // Technician Login | |
| techLoginBtn.addEventListener('click', () => { | |
| const pin = document.getElementById('tech-pin').value; | |
| if (pin === '00000') { | |
| techLogin.classList.add('hidden'); | |
| techContent.classList.remove('hidden'); | |
| techTabBtn.classList.remove('hidden'); | |
| } else { | |
| alert('Feil PIN-kode. Prøv igjen.'); | |
| } | |
| }); | |
| // Language Toggle | |
| languageToggle.addEventListener('click', () => { | |
| const currentLang = languageToggle.querySelector('span').textContent; | |
| if (currentLang === 'NO') { | |
| languageToggle.querySelector('span').textContent = 'EN'; | |
| // In a real app, this would trigger language change | |
| } else { | |
| languageToggle.querySelector('span').textContent = 'NO'; | |
| } | |
| }); | |
| // Drag and Drop Functionality | |
| let draggedItem = null; | |
| dragSources.forEach(source => { | |
| source.addEventListener('dragstart', () => { | |
| draggedItem = source; | |
| setTimeout(() => { | |
| source.style.opacity = '0.4'; | |
| }, 0); | |
| }); | |
| source.addEventListener('dragend', () => { | |
| source.style.opacity = '1'; | |
| }); | |
| }); | |
| dropTargets.forEach(target => { | |
| target.addEventListener('dragover', e => { | |
| e.preventDefault(); | |
| target.classList.add('active'); | |
| }); | |
| target.addEventListener('dragleave', () => { | |
| target.classList.remove('active'); | |
| }); | |
| target.addEventListener('drop', e => { | |
| e.preventDefault(); | |
| target.classList.remove('active'); | |
| if (draggedItem) { | |
| const sourceType = draggedItem.getAttribute('data-source'); | |
| const destination = target.getAttribute('data-destination'); | |
| // Update the display in the drop target | |
| const display = target.querySelector('.source-display'); | |
| const icon = display.querySelector('i'); | |
| const text = display.querySelector('span'); | |
| const audioIndicator = target.querySelector('.audio-indicator'); | |
| // Set the icon based on source type | |
| switch(sourceType) { | |
| case 'ntnu-pc': | |
| icon.setAttribute('data-feather', 'monitor'); | |
| text.textContent = 'NTNU-PC'; | |
| break; | |
| case 'laptop': | |
| icon.setAttribute('data-feather', 'laptop'); | |
| text.textContent = 'Laptop'; | |
| break; | |
| case 'doc-cam': | |
| icon.setAttribute('data-feather', 'camera'); | |
| text.textContent = 'Dok.kamera'; | |
| break; | |
| case 'off': | |
| icon.setAttribute('data-feather', 'x'); | |
| text.textContent = 'Bilde Av'; | |
| break; | |
| } | |
| // Show the display and update audio indicator | |
| display.classList.remove('hidden'); | |
| // Set audio indicator for the last dragged item | |
| dropTargets.forEach(t => { | |
| t.querySelector('.audio-indicator').classList.add('hidden'); | |
| }); | |
| audioIndicator.classList.remove('hidden'); | |
| feather.replace(); | |
| // In a real app, this would send the routing command to the Crestron system | |
| console.log(`Routing ${sourceType} to ${destination}`); | |
| } | |
| }); | |
| }); | |
| // Hide mobile nav when keyboard appears (for PIN input) | |
| window.addEventListener('resize', () => { | |
| if (window.innerHeight < 500) { | |
| mobileNav.classList.add('hidden'); | |
| } else { | |
| mobileNav.classList.remove('hidden'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |