Spaces:
Running
Running
| <html lang="no"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MoniTore V2 - R2 (160 plasser)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tile { | |
| background-color: white; | |
| border-radius: 12px; | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); | |
| padding: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .tile-header { | |
| font-family: sans-serif; | |
| font-size: 18px; | |
| color: #111827; | |
| font-weight: bold; | |
| margin-bottom: 12px; | |
| } | |
| .section-title { | |
| font-family: sans-serif; | |
| font-size: 14px; | |
| color: #6B7280; | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| } | |
| .status-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| } | |
| .status-online { | |
| background-color: #34D399; | |
| } | |
| .status-alert { | |
| background-color: #FBBF24; | |
| } | |
| .status-offline { | |
| background-color: #F87171; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 100; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.8); | |
| } | |
| .modal-content { | |
| margin: auto; | |
| display: block; | |
| max-width: 90%; | |
| max-height: 90%; | |
| margin-top: 5%; | |
| } | |
| .close { | |
| position: absolute; | |
| top: 20px; | |
| right: 35px; | |
| color: white; | |
| font-size: 40px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .nav-item.active { | |
| background-color: #EFF6FF; | |
| } | |
| .nav-item.active .nav-dot { | |
| background-color: #2563EB; | |
| } | |
| .nav-item .nav-dot { | |
| background-color: #9CA3AF; | |
| } | |
| .role-btn.active { | |
| background-color: #2563EB; | |
| color: white; | |
| } | |
| .tile { | |
| opacity: 1; | |
| transition: opacity 0.3s ease; | |
| } | |
| body.role-av .tile:not([data-role~="av"]) { | |
| opacity: 0; | |
| pointer-events: none; | |
| height: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| border: none; | |
| } | |
| body.role-integrator .tile:not([data-role~="integrator"]) { | |
| opacity: 0; | |
| pointer-events: none; | |
| height: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| border: none; | |
| } | |
| body.role-teacher .tile:not([data-role~="teacher"]) { | |
| opacity: 0; | |
| pointer-events: none; | |
| height: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| border: none; | |
| } | |
| body.role-analytics .tile:not([data-role~="analytics"]) { | |
| opacity: 0; | |
| pointer-events: none; | |
| height: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| border: none; | |
| } | |
| .progress-bar { | |
| background-color: #E5E7EB; | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| background-color: #3B82F6; | |
| height: 100%; | |
| } | |
| .satisfaction-box { | |
| border-radius: 8px; | |
| padding: 12px; | |
| text-align: center; | |
| flex: 1; | |
| margin: 0 4px; | |
| } | |
| .satisfaction-box.happy { | |
| background-color: #ECFDF5; | |
| color: #15803D; | |
| } | |
| .satisfaction-box.neutral { | |
| background-color: #FFFBEB; | |
| color: #92400E; | |
| } | |
| .satisfaction-box.unhappy { | |
| background-color: #FEF2F2; | |
| color: #B91C1C; | |
| } | |
| .system-mode-section { | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .system-mode-section.av { | |
| background-color: #ECFDF5; | |
| color: #16A34A; | |
| } | |
| .system-mode-section.lighting { | |
| background-color: #EFF6FF; | |
| color: #2563EB; | |
| } | |
| .system-mode-section.recording { | |
| background-color: #F5F3FF; | |
| color: #9333EA; | |
| } | |
| .note-item { | |
| background-color: #F1F5FB; | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| margin-bottom: 8px; | |
| } | |
| .error-item.critical { | |
| background-color: #FEF2F2; | |
| } | |
| .error-item.warning { | |
| background-color: #FFFBEB; | |
| } | |
| .eol-indicator.green { | |
| background-color: #ECFDF5; | |
| color: #15803D; | |
| } | |
| .eol-indicator.yellow { | |
| background-color: #FFFBEB; | |
| color: #92400E; | |
| } | |
| .eol-indicator.red { | |
| background-color: #FEF2F2; | |
| color: #B91C1C; | |
| } | |
| .password-field { | |
| background-color: #F3F4F6; | |
| border-radius: 4px; | |
| padding: 4px 8px; | |
| font-family: monospace; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .password-field.revealed { | |
| background-color: transparent; | |
| } | |
| @media (max-width: 640px) { | |
| .tiles-container { | |
| grid-template-columns: 1fr ; | |
| } | |
| .role-buttons { | |
| flex-direction: column; | |
| } | |
| .role-btn { | |
| margin-bottom: 4px; | |
| margin-right: 0; | |
| } | |
| .satisfaction-container { | |
| flex-direction: column; | |
| } | |
| .satisfaction-box { | |
| margin-bottom: 8px; | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="role-teacher"> | |
| <div class="flex h-screen bg-gray-100"> | |
| <!-- Navigation Sidebar --> | |
| <div class="hidden md:flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-gray-800">MoniTore</h1> | |
| <div class="mt-4 relative"> | |
| <input type="text" placeholder="Søk etter rom..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="overflow-y-auto flex-1"> | |
| <ul class="p-2"> | |
| <li class="px-4 py-2 font-medium text-gray-700">Trondheim</li> | |
| <li class="px-4 py-2 pl-8 font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-chevron-down text-xs mr-2"></i> | |
| Gløshaugen | |
| </li> | |
| <li class="px-4 py-2 pl-12 font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-chevron-down text-xs mr-2"></i> | |
| Realfagbygget | |
| </li> | |
| <li class="px-4 py-2 pl-16 font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-chevron-down text-xs mr-2"></i> | |
| Auditorier | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R1 (478 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item active flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R2 (160 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R5 (165 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R7 (342 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R8 (120 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-20"> | |
| <div class="nav-item flex items-center"> | |
| <span class="nav-dot w-2 h-2 rounded-full mr-2"></span> | |
| <span>R9 (90 plasser)</span> | |
| </div> | |
| </li> | |
| <li class="px-4 py-2 pl-16 font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-chevron-right text-xs mr-2"></i> | |
| Undervisningsrom | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Status Bar --> | |
| <div class="bg-white border-b border-gray-200 p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800">R2 (160 plasser) - Realfagbygget</h2> | |
| <p class="text-gray-600">Sist oppdatert: <span id="last-updated">20.02.2024 14:32</span></p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-gray-700">Normal status</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View Controls --> | |
| <div class="bg-gray-50 p-4 border-b border-gray-200"> | |
| <div class="flex flex-wrap role-buttons"> | |
| <button onclick="setRole('av')" class="role-btn mr-2 mb-2 px-4 py-2 border border-gray-300 rounded-lg">AV-støttevisning</button> | |
| <button onclick="setRole('integrator')" class="role-btn mr-2 mb-2 px-4 py-2 border border-gray-300 rounded-lg">Integratorvisning</button> | |
| <button onclick="setRole('teacher')" class="role-btn active mr-2 mb-2 px-4 py-2 border border-gray-300 rounded-lg">Lærervisning</button> | |
| <button onclick="setRole('analytics')" class="role-btn mr-2 mb-2 px-4 py-2 border border-gray-300 rounded-lg">Analytikkvisning</button> | |
| </div> | |
| </div> | |
| <!-- Tiles Container --> | |
| <div class="flex-1 overflow-y-auto p-4"> | |
| <div class="tiles-container grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> | |
| <!-- Tile 01: AV Systemstatus --> | |
| <div class="tile col-span-1 md:col-span-2" data-tile-id="01" data-role="av integrator"> | |
| <div class="tile-header">AV Systemstatus</div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <div class="section-title">CONTROL SYSTEM</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Crestron CP4N - Online</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Crestron TSW-1070 - Online</div> | |
| <div class="flex items-center"><span class="status-indicator status-alert"></span>Aruba 2930M - High load</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Biamp Tesira Server-IO</div> | |
| </div> | |
| <div> | |
| <div class="section-title">VIDEO SYSTEM</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Wolfvision VZ-3NEO+</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Sony VPL-PHZ60 01 (Left)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Sony VPL-PHZ60 02 (Right)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Sony SRG X400 Camera</div> | |
| </div> | |
| <div> | |
| <div class="section-title">AV OVER IP</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Encoder 01 (Laptop)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Encoder 02 (AudPC)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Encoder 03 (DocCam)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Encoder 04 (Solstice)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Decoder 01 (Projector01)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Decoder 02 (Projector02)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Decoder 03 (Panopto_mon)</div> | |
| <div class="flex items-center"><span class="status-indicator status-online"></span>Decoder 04 (Wacom)</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Ta meg til Domotz</button> | |
| </div> | |
| </div> | |
| <!-- Tile 02: Rombilder --> | |
| <div class="tile" data-tile-id="02" data-role="av integrator teacher analytics"> | |
| <div class="tile-header">Rombilder</div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/R2/R2_lectern.png" alt="Lectern" class="rounded cursor-pointer" onclick="openModal(this.src)"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/R2/R2_lerer.jpg" alt="Teacher station" class="rounded cursor-pointer" onclick="openModal(this.src)"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/R2/R2_panel.jpg" alt="Touch panel interface" class="rounded cursor-pointer" onclick="openModal(this.src)"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/R2/R2_plan.jpg" alt="Room floor plan" class="rounded cursor-pointer" onclick="openModal(this.src)"> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-2">Klikk for å forstørre bilder</p> | |
| </div> | |
| <!-- Tile 03: Dagens timeplan --> | |
| <div class="tile" data-tile-id="03" data-role="av integrator teacher analytics"> | |
| <div class="tile-header">Dagens timeplan</div> | |
| <div class="space-y-3"> | |
| <div class="relative border-b pb-2"> | |
| <div class="font-bold">08:15–10:00</div> | |
| <div>TMA4105 – Matematikk 1</div> | |
| <div>Underviser: Professor Dr. Hansen (45 studenter)</div> | |
| <div class="absolute top-0 right-0 bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Opptak</div> | |
| </div> | |
| <div class="border-b pb-2"> | |
| <div class="font-bold">10:15–12:00</div> | |
| <div>TMA4105 – Matematikk 1</div> | |
| <div>Underviser: Professor Dr. Hansen</div> | |
| </div> | |
| <div class="relative border-b pb-2"> | |
| <div class="font-bold">12:15–14:00</div> | |
| <div>TMA4105 – Problemøving</div> | |
| <div>Underviser: Markus Olsen</div> | |
| <div class="absolute top-0 right-0 bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Opptak</div> | |
| </div> | |
| <div class="border-b pb-2"> | |
| <div class="font-bold">14:15–16:00</div> | |
| <div>TFE4172 – Kretsdesign</div> | |
| <div>Underviser: Professor Dr. Zhang</div> | |
| </div> | |
| <div class="relative"> | |
| <div class="font-bold">16:15–18:00</div> | |
| <div>TMA4121 – Matematikk 2</div> | |
| <div>Underviser: Professor Dr. Johansen</div> | |
| <div class="absolute top-0 right-0 bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Opptak</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tile 04: Systemmodus --> | |
| <div class="tile" data-tile-id="04" data-role="av integrator teacher"> | |
| <div class="tile-header">Systemmodus</div> | |
| <div class="system-mode-section av"> | |
| <div class="text-xs">AV SYSTEM</div> | |
| <div class="font-bold text-lg">FORELESNINGSMODUS</div> | |
| </div> | |
| <div class="system-mode-section lighting"> | |
| <div class="text-xs">LYSSYSTEM</div> | |
| <div class="font-bold text-lg">PRESENTASJON</div> | |
| </div> | |
| <div class="system-mode-section recording"> | |
| <div class="text-xs">OPPTAK</div> | |
| <div class="font-bold text-lg">PANOPTO AKTIV</div> | |
| </div> | |
| </div> | |
| <!-- Tile 05: Romkart --> | |
| <div class="tile" data-tile-id="05" data-role="av integrator teacher analytics"> | |
| <div class="tile-header">Romkart</div> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center"> | |
| <p class="text-gray-700 mb-2">Interaktivt kart fra MazeMap</p> | |
| <iframe src="https://use.mazemap.com/#v=1¢er=10.407109,63.415983&zoom=20.7&campusid=1&zlevel=-1" style="border:none; width:100%; height:200px;"></iframe> | |
| <a href="https://use.mazemap.com/#v=1¢er=10.407109,63.415983&zoom=20.7&campusid=1&zlevel=-1" target="_blank" class="text-blue-600 hover:underline">Åpne i nytt vindu</a> | |
| </div> | |
| </div> | |
| <!-- Tile 06: Romutstyr --> | |
| <div class="tile" data-tile-id="06" data-role="av integrator teacher"> | |
| <div class="tile-header">Romutstyr</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="section-title">VIDEOKILDER</div> | |
| <ul class="list-disc list-inside"> | |
| <li>Dokumentkamera</li> | |
| <li>Auditorium-PC</li> | |
| <li>Laptop-tilkobling (HDMI)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="section-title">LYD</div> | |
| <ul class="list-disc list-inside"> | |
| <li>Lydanlegg</li> | |
| <li>Mikrofonanlegg</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="section-title">ONLINEUNDERVISNING</div> | |
| <ul class="list-disc list-inside"> | |
| <li>USB-grensesnitt for video/lyd (Teams/Zoom)</li> | |
| <li>Automatisert opptak (Panopto)</li> | |
| <li>Direktesending (Panopto)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="section-title">SKRIVEFLATER</div> | |
| <ul class="list-disc list-inside"> | |
| <li>Skrivbar skjerm</li> | |
| <li>Whiteboard / Tavle</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-4">Dette rommet er designet for studentaktiv læring. Når tilgjengelig, kan det brukes som studentarbeidsrom.</p> | |
| <a href="https://i.ntnu.no/wiki/-/wiki/Norsk/teknisk+og+pedagogisk+oppl%c3%a6ring+i+sandkassa+smia+og+r2" target="_blank" class="text-blue-600 hover:underline mt-2 inline-block">Mer informasjon</a> | |
| </div> | |
| <!-- Tile 07: 360° romvisning --> | |
| <div class="tile" data-tile-id="07" data-role="av integrator teacher analytics"> | |
| <div class="tile-header">360° romvisning</div> | |
| <div class="bg-gray-100 rounded-lg p-8 text-center"> | |
| <a href="https://ntnu.h5p.com/content/1290845701499011347" target="_blank" class="text-blue-600 font-medium hover:underline">Åpne 360° visning</a> | |
| <p class="text-gray-500 text-sm mt-2">Interaktivt panorama av rommet</p> | |
| </div> | |
| </div> | |
| <!-- Tile 08: Lærertilfredshet --> | |
| <div class="tile" data-tile-id="08" data-role="av integrator teacher analytics"> | |
| <div class="tile-header">Lærertilfredshet</div> | |
| <p class="text-gray-600 text-sm mb-4">Tilbakemelding fra forrige semester:</p> | |
| <div class="flex satisfaction-container"> | |
| <div class="satisfaction-box happy"> | |
| <i class="far fa-smile text-2xl mb-1"></i> | |
| <div class="font-bold">Fornøyd</div> | |
| <div class="font-bold text-xl">42</div> | |
| </div> | |
| <div class="satisfaction-box neutral"> | |
| <i class="far fa-meh text-2xl mb-1"></i> | |
| <div class="font-bold">Nøytral</div> | |
| <div class="font-bold text-xl">8</div> | |
| </div> | |
| <div class="satisfaction-box unhappy"> | |
| <i class="far fa-frown text-2xl mb-1"></i> | |
| <div class="font-bold">Misfornøyd</div> | |
| <div class="font-bold text-xl">3</div> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-2">Basert på 53 tilbakemeldinger</p> | |
| </div> | |
| <!-- Tile 09: Hurtiglenker --> | |
| <div class="tile" data-tile-id="09" data-role="av integrator"> | |
| <div class="tile-header">Hurtiglenker</div> | |
| <div class="space-y-2"> | |
| <a href="https://studntnu.sharepoint.com/:f:/s/NTNUAV/Ens_9m_k_C5Cl3-fJvRfzfQBEbfCqyGlj4sk36AL-nCYuQ?e=VbQ9TU" target="_blank" class="text-blue-600 hover:underline block">SharePoint Dokumenter</a> | |
| <a href="https://video.matrox.com/en/apps/drivers/graphics/download/maevex6020-remote-recorder" target="_blank" class="text-blue-600 hover:underline block">Matrox Maevex Programvare</a> | |
| <a href="#" class="text-blue-600 hover:underline block">Crestron XPanel Kontroll</a> | |
| <a href="http://10.180.109.119/" target="_blank" class="text-blue-600 hover:underline block">Kamera PTZ Kontroll</a> | |
| <a href="https://ntnu.cloud.panopto.eu/Panopto/Pages/Admin/RemoteRecorders" target="_blank" class="text-blue-600 hover:underline block">Panopto Opptak</a> | |
| <a href="https://ntnu-sls.monday.com/boards/545558948/views/190150073" target="_blank" class="text-blue-600 hover:underline block">Monday IP Oversikt</a> | |
| <a href="https://go.epiphan.cloud/68aa66ad-4cfa-4a62-a195-0811e50fed66#/devices" target="_blank" class="text-blue-600 hover:underline block">Epiphan Edge</a> | |
| <a href="https://fuglane.it.ntnu.no/pages/viewpage.action?spaceKey=fuglane&title=SDA+-+AV" target="_blank" class="text-blue-600 hover:underline block">Fuglane Dokumentasjon</a> | |
| <a href="https://nav.ntnu.no/machinetracker/mac/" target="_blank" class="text-blue-600 hover:underline block">NAV Mac Søk</a> | |
| <a href="https://teams.microsoft.com/l/team/19%3ArEw7ZmYwNauGZiK-CB-rxfAjtaykuH7fRttyn5hGV401%40thread.tacv2" target="_blank" class="text-blue-600 hover:underline block">Teams med Caverion</a> | |
| </div> | |
| </div> | |
| <!-- Tile 10: Utstyrsbruk --> | |
| <div class="tile" data-tile-id="10" data-role="av integrator analytics"> | |
| <div class="tile-header">Utstyrsbruk (7 dager)</div> | |
| <p class="text-gray-500 text-sm mb-2">* Aktiveringer telles per økt</p> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Crestron System</span> | |
| <span>28</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Doble prosjektorer</span> | |
| <span>19</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Dokumentkamera</span> | |
| <span>12</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 43%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Auditorium-PC</span> | |
| <span>15</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 54%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Laptop-tilkoblinger</span> | |
| <span>22</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tile 11: Romutnyttelse --> | |
| <div class="tile" data-tile-id="11" data-role="av integrator analytics"> | |
| <div class="tile-header">Romutnyttelse</div> | |
| <div class="flex justify-between mb-4"> | |
| <div> | |
| <div class="text-gray-600">Nåværende belegg</div> | |
| <div class="text-blue-600 font-bold text-2xl">14 personer</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Utnyttelse</div> | |
| <div class="font-bold text-2xl">14%</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="section-title">UKENTLIG TREND</div> | |
| <div class="bg-gray-100 rounded-lg p-2 h-20 flex items-end"> | |
| <div class="flex-1 flex justify-around"> | |
| <div class="bg-blue-500 w-4" style="height: 20%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 30%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 45%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 25%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 55%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 35%;"></div> | |
| <div class="bg-blue-500 w-4" style="height: 45%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tile 12: Tekniske notater og saker --> | |
| <div class="tile" data-tile-id="12" data-role="av integrator"> | |
| <div class="tile-header">Tekniske notater og saker</div> | |
| <div class="space-y-2 mb-4"> | |
| <div class="note-item"> | |
| <div class="font-bold">#T2024-0215</div> | |
| <div>Prosjektorlampebytte</div> | |
| <div class="text-gray-500 italic">Erik T. (Caverion)</div> | |
| </div> | |
| <div class="note-item"> | |
| <div class="font-bold">#T2024-0108</div> | |
| <div>Oppdatert Crestron firmware</div> | |
| <div class="text-gray-500 italic">Maria S. (AV-tekniker)</div> | |
| </div> | |
| </div> | |
| <input type="text" placeholder="Legg til nytt notat..." class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-2"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 w-full">Lagre notat</button> | |
| </div> | |
| <!-- Tile 13: Feillogg --> | |
| <div class="tile" data-tile-id="13" data-role="av integrator"> | |
| <div class="tile-header">Feillogg</div> | |
| <div class="space-y-2"> | |
| <div class="error-item critical p-2 rounded-lg"> | |
| <div class="font-bold">2024-02-20 09:15</div> | |
| <div>Prosjektor 1 lampeadvarsel (1987 timer)</div> | |
| </div> | |
| <div class="error-item warning p-2 rounded-lg"> | |
| <div class="font-bold">2024-02-19 14:30</div> | |
| <div>Mikrofonfeedback oppdaget (kanal 2)</div> | |
| </div> | |
| <div class="error-item p-2 rounded-lg"> | |
| <div class="font-bold">2024-02-18 11:20</div> | |
| <div>(noe tidligere hendelse uten beskrivelse)</div> | |
| </div> | |
| </div> | |
| <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 w-full mt-4">Vis full logg</button> | |
| </div> | |
| <!-- Tile 14: Rapporter AV-problem --> | |
| <div class="tile" data-tile-id="14" data-role="av integrator teacher"> | |
| <div class="tile-header">Rapporter AV-problem</div> | |
| <p class="text-gray-600 mb-4">Bruk dette for å rapportere tekniske problemer med romutstyret</p> | |
| <button class="bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 w-full font-bold">Meld inn ny sak</button> | |
| </div> | |
| <!-- Tile 15: Strømforbruk --> | |
| <div class="tile" data-tile-id="15" data-role="av integrator analytics"> | |
| <div class="tile-header">Strømforbruk</div> | |
| <div class="mb-4"> | |
| <div class="text-gray-600">Nåværende belastning</div> | |
| <div class="font-bold text-2xl">1.24 kW</div> | |
| <div class="progress-bar mt-1"> | |
| <div class="progress-fill" style="width: 62%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <div class="text-gray-600">PDU-uttak</div> | |
| <div class="font-bold">8/10 i bruk</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Effektivitet</div> | |
| <div class="font-bold">92%</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Ukentlig forbruk</div> | |
| <div class="font-bold">58.3 kWh</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Spenning</div> | |
| <div class="font-bold">230V ±2%</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-500 text-sm mt-4">Sist målt: 14:32 i dag</div> | |
| </div> | |
| <!-- Tile 16: EOL-sporing – Rom --> | |
| <div class="tile" data-tile-id="16" data-role="av integrator analytics"> | |
| <div class="tile-header">EOL-sporing – Rom</div> | |
| <div class="eol-indicator green p-3 rounded-lg mb-2"> | |
| <div class="font-bold">Fullt system</div> | |
| <div class="text-right">Installert: 2017</div> | |
| </div> | |
| <p class="text-gray-600">Neste større oppgradering planlagt: Q3 2025</p> | |
| </div> | |
| <!-- Tile 17: EOL-sporing – Komponenter --> | |
| <div class="tile" data-tile-id="17" data-role="av integrator"> | |
| <div class="tile-header">EOL-sporing – Komponenter</div> | |
| <div class="space-y-2"> | |
| <div class="eol-indicator red p-2 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <span>Prosjektor 01, SN: PJR1987X</span> | |
| <span>Installert: 2015</span> | |
| </div> | |
| </div> | |
| <div class="eol-indicator yellow p-2 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <span>Crestron CP4N, SN: CRS2020Y</span> | |
| <span>Installert: 2020</span> | |
| </div> | |
| </div> | |
| <div class="eol-indicator green p-2 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <span>Wolfvision VZ-3NEO+, SN: WVZ2022Z</span> | |
| <span>Installert: 2022</span> | |
| </div> | |
| </div> | |
| <div class="eol-indicator yellow p-2 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <span>Biamp Tesira, SN: BIA2019T</span> | |
| <span>Installert: 2019</span> | |
| </div> | |
| </div> | |
| <div class="eol-indicator red p-2 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <span>Sony VPL-PHZ60 01, SN: SONY2015P</span> | |
| <span>Installert: 2015</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tile 18: Panopto-status --> | |
| <div class="tile" data-tile-id="18" data-role="av integrator"> | |
| <div class="tile-header">Panopto-status</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="text-gray-600">Rekorder:</div> | |
| <div class="font-bold">Glos_Realfagbygget_R2</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">ID:</div> | |
| <div class="font-bold">360CU1-100</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Status:</div> | |
| <div class="font-bold">Opptak</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Strømmetype:</div> | |
| <div class="font-bold">Live + På forespørsel</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mt-4"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/Panopto/cam.jpg" alt="Kamera" class="rounded"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/Panopto/slide.jpg" alt="Slides" class="rounded"> | |
| <img src="http://readymedia.no/ntnu_monitore/Bilder/Panopto/lyd.png" alt="Lyd" class="rounded"> | |
| </div> | |
| <a href="https://ntnu.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=658205cc-0cfe-4166-9ceb-b2ac00b2c799" target="_blank" class="text-blue-600 hover:underline mt-4 inline-block">Se strøm</a> | |
| </div> | |
| <!-- Tile 19: Kateter-PC --> | |
| <div class="tile" data-tile-id="19" data-role="av integrator"> | |
| <div class="tile-header">Kateter-PC</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="text-gray-600">PC-navn:</div> | |
| <div class="font-bold">NTNU00864</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Modell:</div> | |
| <div class="font-bold">DELL OptiPlex SFF 7080</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Tilkoblinger:</div> | |
| <div class="font-bold">Skjerm: Wacom DTK-2241 via DVI-I USB</div> | |
| <div class="font-bold">Lyd: Ja via Inogeni 4xkusb3 USB</div> | |
| <div class="font-bold">Video: Ja via Inogeni 4xkusb3 HDMI</div> | |
| <div class="font-bold">Utgang: Ett signal til AVoIP</div> | |
| </div> | |
| </div> | |
| <a href="https://support.it.ntnu.no/" target="_blank" class="text-blue-600 hover:underline mt-4 inline-block">ConnectWise Fjernkontroll</a> | |
| </div> | |
| <!-- Tile 20: Passord (AV-enheter) --> | |
| <div class="tile" data-tile-id="20" data-role="av integrator"> | |
| <div class="tile-header">Passord (AV-enheter)</div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="text-gray-600">Crestron</div> | |
| <div class="password-field" onclick="togglePassword(this)">••••••••</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Prosjektor 01</div> | |
| <div class="password-field" onclick="togglePassword(this)">••••••••</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Biamp</div> | |
| <div class="password-field" onclick="togglePassword(this)">••••••••</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Panopto</div> | |
| <div class="password-field" onclick="togglePassword(this)">••••••••</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">PC</div> | |
| <div class="password-field" onclick="togglePassword(this)">••••••••</div> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-4">Klikk for å avsløre passord</p> | |
| </div> | |
| <!-- Tile 21: Signal tapping --> | |
| <div class="tile" data-tile-id="21" data-role="av integrator"> | |
| <div class="tile-header">Signal tapping</div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="section-title">BAK I ROMMET</div> | |
| <ul class="list-disc list-inside"> | |
| <li>1 × XLR inngang</li> | |
| <li>1 × XLR utgang (SUM)</li> | |
| <li>2 × HDMI (Prosjektor 01 & 02)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="section-title">FORAN I ROMMET</div> | |
| <ul class="list-disc list-inside text-gray-500"> | |
| <li>Alle tilkoblinger i bruk av Panopto</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-4">Sist verifisert: 15.01.2024 av Erik T.</p> | |
| </div> | |
| <!-- Tile 22: Dokumenter --> | |
| <div class="tile" data-tile-id="22" data-role="av integrator"> | |
| <div class="tile-header">Dokumenter</div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <div> | |
| <div>Rom_Diagram.pdf</div> | |
| <div class="text-gray-500 text-sm">Oppdatert: 2023-10-15</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-word text-blue-500 mr-2"></i> | |
| <div> | |
| <div>AV_Brukerveiledning.docx</div> | |
| <div class="text-gray-500 text-sm">Oppdatert: 2023-09-28</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-alt text-gray-500 mr-2"></i> | |
| <div> | |
| <div>Tekniske_Spesifikasjoner.txt</div> | |
| <div class="text-gray-500 text-sm">Oppdatert: 2023-11-01</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="flex items-center text-blue-600 mt-4"> | |
| <i class="fas fa-upload mr-2"></i> | |
| <span>Last opp dokument</span> | |
| </button> | |
| </div> | |
| <!-- Tile 23: Utstyrshåndbøker --> | |
| <div class="tile" data-tile-id="23" data-role="av integrator teacher"> | |
| <div class="tile-header">Utstyrshåndbøker</div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <div> | |
| <div class="font-bold">Crestron CP4N Brukermanual</div> | |
| <div class="text-gray-500 text-sm">Versjon 2.3, 2023</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <div> | |
| <div class="font-bold">Sony VPL-PHZ60 Prosjektor Manual</div> | |
| <div class="text-gray-500 text-sm">Versjon 1.5, 2022</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <div> | |
| <div class="font-bold">Biamp Tesira Server-IO Manual</div> | |
| <div class="text-gray-500 text-sm">Versjon 3.1.2, 2024</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <div> | |
| <div class="font-bold">Wolfvision VZ-3NEO+ Dokumentkamera Guide</div> | |
| <div class="text-gray-500 text-sm">Versjon 4.0, 2023</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tile 24: Crestron-program --> | |
| <div class="tile" data-tile-id="24" data-role="av integrator"> | |
| <div class="tile-header">Crestron-program</div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="text-gray-600">Siste versjon:</div> | |
| <div class="font-bold">3.5.1</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Dato:</div> | |
| <div class="font-bold">2024-02-18</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Integrator:</div> | |
| <div class="font-bold">Erik T. (AV-SYSTEMER AS)</div> | |
| </div> | |
| </div> | |
| <button class="flex items-center text-blue-600 mt-4"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| <span>Åpne programmappe på SharePoint</span> | |
| </button> | |
| </div> | |
| <!-- Tile 25: AV-teknikerinfo --> | |
| <div class="tile" data-tile-id="25" data-role="av integrator"> | |
| <div class="tile-header">AV-teknikerinfo</div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="text-gray-600">Nøkkel Rack:</div> | |
| <div class="font-bold">1SS1500</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Nøkkel kateter:</div> | |
| <div class="font-bold">HAEFELE nøkkel</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-600">Vaktmester:</div> | |
| <div class="font-bold">918 97 378</div> | |
| </div> | |
| </div> | |
| <a href="#" class="text-blue-600 hover:underline mt-4 inline-block">Parkering Gløshaugen</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Modal --> | |
| <div id="imageModal" class="modal"> | |
| <span class="close" onclick="closeModal()">×</span> | |
| <img class="modal-content" id="modalImage"> | |
| </div> | |
| <script> | |
| // Set last updated time to current time | |
| document.getElementById('last-updated').textContent = new Date().toLocaleString('no-NO', { | |
| day: '2-digit', | |
| month: '2-digit', | |
| year: 'numeric', | |
| hour: '2-digit', | |
| minute: '2-digit' | |
| }); | |
| // Role switching | |
| function setRole(role) { | |
| document.body.className = 'role-' + role; | |
| // Update active button | |
| document.querySelectorAll('.role-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| } | |
| // Image modal functions | |
| function openModal(src) { | |
| const modal = document.getElementById('imageModal'); | |
| const modalImg = document.getElementById('modalImage'); | |
| modal.style.display = 'block'; | |
| modalImg.src = src; | |
| } | |
| function closeModal() { | |
| document.getElementById('imageModal').style.display = 'none'; | |
| } | |
| // Password reveal toggle | |
| const passwordValues = { | |
| 'Crestron': 'admin123', | |
| 'Prosjektor 01': 'sonyproj1', | |
| 'Biamp': 'ntnu2025', | |
| 'Panopto': 'p@n0pt0', | |
| 'PC': 'R2-Adm!n' | |
| }; | |
| function togglePassword(element) { | |
| const passwordText = element.textContent; | |
| const passwordLabel = element.parentElement.querySelector('.text-gray-600').textContent.trim(); | |
| if (passwordText === '••••••••') { | |
| element.textContent = passwordValues[passwordLabel] || 'password'; | |
| element.classList.add('revealed'); | |
| } else { | |
| element.textContent = '••••••••'; | |
| element.classList.remove('revealed'); | |
| } | |
| } | |
| // Close modal when clicking outside image | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('imageModal'); | |
| if (event.target == modal) { | |
| modal.style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ReadyMedia/monitore-v45" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |