Sjekk din bedrift

by SvennMats

HTML

<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen bg-[#fcfaf9] p-4 md:p-8 font-sans text-[#241D2D]">
  <main id="main-content" class="max-w-6xl mx-auto grid lg:grid-cols-[360px_1fr] gap-6 lg:gap-8 mt-6">
    
    <aside class="space-y-6">
      <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-5">
        <div class="mb-6">
          <h2 class="font-bold text-xl text-[#241D2D]">Svenn Bransjesjekk</h2>
          <p class="text-xs text-gray-500 uppercase tracking-widest mt-1">Bygg & Anlegg</p>
        </div>

        <div class="space-y-4">
          <div class="relative">
            <label class="text-[10px] text-gray-400 block mb-1 uppercase font-bold tracking-wider">Finn din bedrift</label>
            <input type="text" id="company-search" placeholder="Søk på bedriftsnavn..." class="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-[#F96529] outline-none">
            <div id="search-results" class="hidden absolute z-50 bg-white border shadow-xl rounded-md mt-1 w-full left-0 overflow-hidden"></div>
          </div>

          <div id="source-info" class="hidden">
            <p class="text-[10px] text-[#2d866e] font-medium mb-2 flex items-center gap-1">
              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg>
              Selskapsdata hentet fra Brønnøysundregistrene (regnskap <span id="data-year">2024</span>)
            </p>
          </div>

          <div id="company-info-box" class="bg-orange-50 border border-orange-100 rounded-lg p-3 hidden mb-4">
            <p id="selected-company-name" class="font-bold text-sm text-[#241D2D]"></p>
            <p id="selected-company-org" class="text-xs text-gray-500 italic"></p>
          </div>

          <div class="space-y-3">
      ...

CSS

:root {
  --svenn-orange: #F96529;
  --svenn-dark: #241D2D;
}

body { color: var(--svenn-dark); background-color: #fcfaf9; }

/* Styling for redigerbare bokser */
.editable-container {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.2s ease;
}

.editable-container:hover {
  border-color: var(--svenn-orange);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.editable-input {
  width: 100%;
  background: transparent;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--svenn-dark);
  outline: none;
  border-bottom: 2px solid #f3f4f6;
  margin-top: 4px;
}

.editable-input:focus {
  border-bottom-color: var(--svenn-orange);
}

/* Switches */
.switch-input {
  appearance: none; width: 44px; height: 22px;
  background-color: #e5e7eb; border-radius: 999px;
  position: relative; transition: all 0.3s ease; cursor: pointer;
}
.switch-input:checked { background-color: var(--svenn-orange); }
.switch-input::before {
  content: ""; position: absolute; width: 18px; height: 18px;
  background-color: white; border-radius: 50%; top: 2px; left: 2px;
  transition: all 0.2s ease;
}
.switch-input:checked::before { left: 24px; }

/* Accordions */
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; opacity: 0; }
.accordion-item.active .accordion-content { max-height: 1000px; opacity: 1; padding: 1rem 0; }
.accordion-item.active .chevron-icon { transform: rotate(180deg); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn 0.4s ease-out forwards; }

JavaScript

const CONSTRUCTION_REQUIREMENTS = {
    hms: {
        name: "HMS & Mannskapslister",
        items: ["HMS-kort", "Elektroniske mannskapslister", "Lovpålagt BHT", "SJA-system", "Verneombud"]
    },
    prosjekt: {
        name: "Prosjektdokumentasjon",
        items: ["SHA-plan", "FDV-dokumentasjon", "Kvalitetssikring (KS)", "Rigg- og driftsplan"]
    }
};

// Funksjon for å oppdatere resultater (Kolonne 2)
function updateResults() {
    const emp = parseInt(document.getElementById('inp-employees').value) || 0;
    const rev = parseFloat(document.getElementById('inp-revenue').value) || 0;
    const isMain = document.getElementById('check-main-contractor').checked;

    if (emp > 0 || rev > 0) {
        document.getElementById('placeholder-view').classList.add('hidden');
        document.getElementById('results-view').classList.remove('hidden');
    }

    let found = 5; 
    if (emp > 0) found += 4;
    if (emp > 10) found += 2;
    if (isMain) found += 3;
    if (rev > 7) found += 1;

    document.getElementById('total-requirements').innerText = found;
    document.getElementById('count-found').innerText = found;
    document.getElementById('count-consider').innerText = "2";
    document.getElementById('count-na').innerText = "4";

    renderCategories(emp);
}

function renderCategories(emp) {
    const list = document.getElementById('category-list');
    list.innerHTML = '';
    Object.keys(CONSTRUCTION_REQUIREMENTS).forEach(key => {
        const cat = CONSTRUCTION_REQUIREMENTS[key];
        list.insertAdjacentHTML('beforeend', `
            <div class="rounded-xl border bg-white accordion-item overflow-hidden shadow-sm mb-3" id="item-${key}">
                <button onclick="document.getElementById('item-${key}').classList.toggle('active')" class="w-full p-5 flex items-center justify-between text-left outline-none">
                    <span class="font-black text-[#241D2D]">${cat.name}</span>
                   ...