<div id="header" class="main clearfix">
<nav class="navbar navbar-expand-xl navbar-light d-flex align-items-start">
<button class="navbar-toggler js-toggleMenu" type="button" aria-controls="navbarToggleMobileMenu" aria-label="Toggle navigation">
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="22" height="2" rx="1" fill="black" />
<rect y="6" width="22" height="2" rx="1" fill="black" />
<rect y="12" width="22" height="2" rx="1" fill="black" />
</svg>
</button>
<a href="index.html" class="navbar-brand"><img src="../../img/logos/logo-portaal.svg" alt="logo"></a>
<div class="component navigation navigation-title navbar-nav flex-column js-navigation">
<div class="component-content">
<nav>
<ul class="clearfix">
<li class="level1 item0 odd first rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="-active" title="Overzicht" href="/">Overzicht</a>
</div>
</li>
<li class="level1 item1 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bestellingen" href="/">Bestellingen</a>
</div>
</li>
<li class="level1 item2 odd rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Woningen" href="/">Woningen</a>
</div>
</li>
<li class="level1 item3 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bewoners" href="/">Bewoners</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</nav>
</div>
<div id="content" class="main clearfix">
<div class="component contentHeader o-contentHeader -splitOnMobile d-flex align-items-center">
<div class="component-content">
<div class="row no-gutters w-100 h-100">
<div class="o-contentHeader__left col col-md-6 d-flex align-items-center position-static">
<div class="d-flex align-items-center">
<a href="index.html" class="o-contentHeader__logoAction mr-2 mr-md-3 -action">
<img src="../../img/logos/logo-portaal.svg" alt="logo">
<div class="a-circle -button -hover -border"><i class="icon-arrow-round-left"></i></div>
</a>
<div class="d-flex flex-column justify-content-center">
<h1 class="o-contentHeader__title d-flex align-items-center">
<span class="o-contentHeader__titleText">Elkien B.V.</span>
<span class="ml-2 mb-1 ml-lg-3 d-flex align-items-center"><span class="badge rounded-pill bg-orange user-select cursor-pointer -right" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_order_menu" data-custom-class="-menu">Open<i class="icon-arrow-down"></i></span>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item active'>Open</div>
<div class='dropdown-item'>Gesloten</div>
</div>
</div>
</span>
</h1>
<small class="text-muted">De Klamp Leeuwarden</small>
</div>
</div>
</div>
<div class="o-contentHeader__right col col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
<div class="m-taskMonitor d-flex justify-content-start justify-content-md-end align-items-center">
<div class="m-taskMonitor__tasks d-flex align-items-center">
<div class="progress-wrap">
<div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Bestelling</div>" data-placement="bottom">
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="25, 100" stroke-linecap="round" />
</svg>
</div>
<span class="d-flex align-items-center justify-content-center">16/64</span>
</div>
</div>
<div class="ml-2 ml-md-3">
<div class="progress-wrap">
<div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Slagingskans</div>" data-placement="bottom">
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="80, 100" stroke-linecap="round" />
</svg>
</div>
<span class="d-flex align-items-center justify-content-center">80%</span>
</div>
</div>
</div>
</div>
</div>
<div class="ml-2 ml-md-4 d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-outline-dark -icon -iconLeft" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Voorontwerp Elkien V1</div>" data-placement="bottom">
<i class="icon-edit-alt"></i>
Configuratie wijzigen
</button>
</div>
</div>
</div>
</div>
</div>
<div class="content js-content -paddingBottom">
<div class="component utilityBar o-utilityBar">
<div class="o-utilityBar__parts d-flex flex-column flex-lg-row h-100 justify-content-xl-between align-items-lg-center">
<div class="o-utilityBar__first pr-xl-3">
<ul class="nav nav-tabs m-tabs position-relative">
<li class="nav-item active" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Overzicht</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Taken</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Woningen</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Planning</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Agenda</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Facturen</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Contracten</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Documenten</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Team</a>
</li>
<div class="nav-line"></div>
</ul>
</div>
</div>
</div>
<div class="absolute d-flex flex-column align-items-center justify-content-center">
<div class="a-loader -wave">
<svg class="a-loader__animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: rgba(255, 255, 255, 0);" width="75px" viewBox="12.5 38 75 22" preserveAspectRatio="xMidYMid">
<circle cx="70" cy="50" r="10" fill="#69d2c2">
<animate attributeName="r" repeatCount="indefinite" dur="0.5319148936170213s" calcMode="spline" keyTimes="0;1" values="5;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="fill" repeatCount="indefinite" dur="2.127659574468085s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#69d2c2;#0f8d38;#ff85bb;#e3000f;#69d2c2" begin="0s"></animate>
</circle>
<circle cx="30" cy="50" r="5" fill="#69d2c2">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
</circle>
<circle cx="50" cy="50" r="5" fill="#e3000f">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5319148936170213s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5319148936170213s"></animate>
</circle>
<circle cx="70" cy="50" r="5" fill="#ff85bb">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.0638297872340425s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.0638297872340425s"></animate>
</circle>
<circle cx="30" cy="50" r="5" fill="#0f8d38">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.5957446808510638s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.5957446808510638s"></animate>
</circle>
</svg>
</div>
<div class="text-muted mt-1">Taken laden...</div>
</div>
</div>
</div>
<div id="footer" class="main clearfix">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="click" data-html="true" title="" data-custom-class="-menu" ">
MV
</div>
<div class=" popover-content">
<div class='dropdown-item'>Account instellingen</div>
<div class='dropdown-item'>Uitloggen</div>
</div>
<ul class="m-iconMenu text-secondary mb-0 d-flex flex-xl-column align-items-center list-unstyled">
<li><i class="icon-chat1"></i></li>
<li><i class="icon-bell"></i></li>
<li><i class="icon-question-mark"></i></li>
</ul>
</div>
{% extends '@layout' %}
{% block content %}
{% render '@utility-bar', utilitybar, true %}
<div class="absolute d-flex flex-column align-items-center justify-content-center">
{% render '@loader--rotate' %}
<div class="text-muted mt-1">Taken laden...</div>
</div>
{% endblock %}
{
"content_header": {
"title": "Elkien B.V.",
"subtitle": "De Klamp Leeuwarden",
"badge": true,
"tasks": true,
"split_on_mobile": true
},
"utilitybar": {
"handle1": "tabs",
"items": [
{
"title": "Overzicht",
"class": "active"
},
{
"title": "Taken"
},
{
"title": "Woningen"
},
{
"title": "Planning"
},
{
"title": "Agenda"
},
{
"title": "Facturen"
},
{
"title": "Contracten"
},
{
"title": "Documenten"
},
{
"title": "Team"
}
]
},
"modal": false
}
No notes defined.