<header>
<div class="logo-bar">
<div class="login">
<span class="fa fa-user" aria-hidden="true"></span> Inloggen
</div>
<img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" /> </div>
<nav class="navbar navbar-default menu">
<form class="search">
<fieldset>
<legend class="sr-only">Zoekformulier</legend>
<div class="input-group default">
<input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default" >
<span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="fa fa-bars" aria-hidden="true"></span>
<span class="sr-only">Ga naar menu</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Actueel
</a>
</li>
<li>
<a href="#">
Raadplegen
</a>
</li>
<li>
<a href="#">
Checken
</a>
</li>
<li class="active">
<a href="#">
Aanvragen
</a>
</li>
<li>
<a href="#">
Over ons
<span class="badge">12</span>
</a>
</li>
<li>
<a href="#">
Wetgeving
</a>
</li>
</ul>
</div>
</nav>
<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Aanvragen</a>
</li>
<li>
<a href="#">Mijn project</a>
</li>
<li class="active">Aanvraag voorbereiden</li>
</ol>
</header>
<main>
<div class="row">
<div class="col-xs-12">
<h1>Project | Aanbouw Kerkstraat 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="accordion" id="accordion">
<div class="panel">
<div class="section-toggle">
<span class="toggle-icon fa fa-angle-right"></span>
<h2>
<a data-toggle="collapse" data-parent="#accordion" href="#panel1" aria-expanded="false" aria-controls="panel1">Omschrijving project</a>
</h2>
</div>
<div class="section-body collapse" id="panel1">
<form class="form-horizontal">
<fieldset class="form-fields">
<legend class="sr-only">Horizontal form</legend>
<fieldset>
<legend>Omschrijving project</legend>
<div class="form-group input text">
<label for="titel" class="control-label">Titel</label>
<div class="field-container">
<input type="text" id="titel" class="form-control" />
</div>
</div>
<div class="form-group static">
<label class="control-label">Nummer</label>
<p class="field-container">
</p>
</div>
<div class="form-group textarea">
<label for="projectomschrijving" class="control-label">Projectomschrijving</label>
<div class="field-container">
<textarea class="form-control" id="projectomschrijving"></textarea>
</div>
</div>
<fieldset class="form-group radios">
<legend class="control-label">Gefaseerde aanvraag</legend>
<div class="field-container">
<div class="radio">
<label>
<input type="radio" name="gefaseerdeAanvraag" value="nee"
/>
Nee
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gefaseerdeAanvraag" value="ja"
/>
Ja
</label>
</div>
</div>
</fieldset>
<div class="form-group static">
<label class="control-label">Procedure</label>
<p class="field-container">
</p>
</div>
<div class="form-group static">
<label class="control-label">Status</label>
<p class="field-container">
</p>
</div>
<div class="form-group static">
<label class="control-label">Formulierversie</label>
<p class="field-container">
</p>
</div>
</fieldset>
</fieldset>
<div class="form-buttons">
<button type="submit" class="btn btn-primary">
naar het volgende gedeelte: Aanvrager
</button>
</div>
</form>
</div>
</div>
<div class="panel">
<div class="section-toggle">
<span class="toggle-icon fa fa-angle-right"></span>
<h2>
<a data-toggle="collapse" data-parent="#accordion" href="#panel2" aria-expanded="false" aria-controls="panel2">Aanvrager</a>
</h2>
</div>
<div class="section-body collapse" id="panel2">
<form class="form-horizontal">
<fieldset class="form-fields">
<legend class="sr-only">Horizontal form</legend>
<fieldset>
<legend>Persoonsgegevens aanvrager</legend>
<div class="form-group input text">
<label for="achternaam" class="control-label">Achternaam</label>
<div class="field-container">
<input type="text" id="achternaam" class="form-control" />
</div>
</div>
<div class="form-group input text">
<label for="tussenvoegsels" class="control-label">Tussenvoegsels</label>
<div class="field-container">
<input type="text" id="tussenvoegsels" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="voorletters" class="control-label">Voorletter(s)</label>
<div class="field-container">
<input type="text" id="voorletters" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="bsn" class="control-label">BSN</label>
<div class="field-container">
<input type="text" id="bsn" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="geslacht" class="control-label">Geslacht</label>
<div class="field-container">
<input type="text" id="geslacht" class="form-control" size="8" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Contactgegevens aanvrager</legend>
<div class="form-group input text">
<label for="telefoonnummer" class="control-label">Telefoonnummer</label>
<div class="field-container">
<input type="text" id="telefoonnummer" class="form-control" size="12" />
</div>
</div>
<div class="form-group input text">
<label for="emailadres" class="control-label">Emailadres</label>
<div class="field-container">
<input type="text" id="emailadres" class="form-control" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Correspondentieadres</legend>
<div class="form-group input text">
<label for="capostcode" class="control-label">Postcode</label>
<div class="field-container">
<input type="text" id="capostcode" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="cahuisnummer" class="control-label">Huisnummer</label>
<div class="field-container">
<input type="text" id="cahuisnummer" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="catoevoeging" class="control-label">Huisnummer toevoeging</label>
<div class="field-container">
<input type="text" id="catoevoeging" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="castraatnaam" class="control-label">Straatnaam</label>
<div class="field-container">
<input type="text" id="castraatnaam" class="form-control" />
</div>
</div>
<div class="form-group input text">
<label for="cawoonplaats" class="control-label">Woonplaats</label>
<div class="field-container">
<input type="text" id="cawoonplaats" class="form-control" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Verblijfadres</legend>
<div class="form-group input text">
<label for="vapostcode" class="control-label">Postcode</label>
<div class="field-container">
<input type="text" id="vapostcode" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="vahuisnummer" class="control-label">Huisnummer</label>
<div class="field-container">
<input type="text" id="vahuisnummer" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="vatoevoeging" class="control-label">Huisnummer toevoeging</label>
<div class="field-container">
<input type="text" id="vatoevoeging" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="vastraatnaam" class="control-label">Straatnaam</label>
<div class="field-container">
<input type="text" id="vastraatnaam" class="form-control" />
</div>
</div>
<div class="form-group input text">
<label for="vawoonplaats" class="control-label">Woonplaats</label>
<div class="field-container">
<input type="text" id="vawoonplaats" class="form-control" />
</div>
</div>
</fieldset>
</fieldset>
<div class="form-buttons">
<button type="submit" class="btn btn-primary">
naar het volgende gedeelte: Locatie
</button>
</div>
</form>
</div>
</div>
<div class="panel">
<div class="section-toggle">
<span class="toggle-icon fa fa-angle-right"></span>
<h2>
<a data-toggle="collapse" data-parent="#accordion" href="#panel3" aria-expanded="false" aria-controls="panel3">Locatie</a>
</h2>
</div>
<div class="section-body collapse" id="panel3">
<form class="form-horizontal">
<fieldset class="form-fields">
<legend class="sr-only">Horizontal form</legend>
<fieldset>
<legend>Adres voor aanvraag omgevingsvergunning</legend>
<div class="form-group input text">
<label for="omgevingsvergunningPostcode" class="control-label">Postcode</label>
<div class="field-container">
<input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="omgevingsvergunningHuisnummer" class="control-label">Huisnummer</label>
<div class="field-container">
<input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="omgevingsvergunningToevoeging" class="control-label">Huisnummer toevoeging</label>
<div class="field-container">
<input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8" />
</div>
</div>
<div class="form-group input text">
<label for="omgevingsvergunningStraatnaam" class="control-label">Straatnaam</label>
<div class="field-container">
<input type="text" id="omgevingsvergunningStraatnaam" class="form-control" />
</div>
</div>
<div class="form-group input text">
<label for="omgevingsvergunningWoonplaats" class="control-label">Woonplaats</label>
<div class="field-container">
<input type="text" id="omgevingsvergunningWoonplaats" class="form-control" />
</div>
</div>
<fieldset class="form-group radios">
<legend class="control-label">Gelden de werkzaamheden in deze aanvraag/melding voor meerdere adressen of percelen?</legend>
<div class="field-container">
<div class="radio">
<label>
<input type="radio" name="omgevingsvergunningWerkzaamheden" value="nee"
/>
Nee
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="omgevingsvergunningWerkzaamheden" value="ja"
/>
Ja
</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Eigendomssituatie</legend>
<div class="form-group static">
<label class="control-label">Eigendomssituatie van het perceel</label>
<p class="field-container">
</p>
</div>
</fieldset>
</fieldset>
<div class="form-buttons">
<button type="submit" class="btn btn-primary">
naar het volgende gedeelte: Werkzaamheden
</button>
</div>
</form>
</div>
</div>
<div class="panel">
<div class="section-toggle">
<span class="toggle-icon fa fa-angle-right"></span>
<h2>
<a data-toggle="collapse" data-parent="#accordion" href="#panel4" aria-expanded="false" aria-controls="panel4">Werkzaamheden</a>
</h2>
</div>
<div class="section-body collapse" id="panel4">
<table class="table table-responsive">
<thead>
<tr>
<th>Werkzaamheid</th>
<th>Activiteit (vanuit de wet)</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakkapel plaatsen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Bouwen</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Specificeren
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
</td>
</tr>
<tr>
<td>Dakkapel plaatsen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Handelen in strijd met regels ruimtelijke ordening</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Specificeren
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
</td>
</tr>
<tr>
<td>Schuur bouwen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Bouwen</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Specificeren
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
</td>
</tr>
</tbody>
</table>
<div><button type="button" class="btn btn-primary">
Activiteiten toevoegen
</button>
</div>
<div><button type="button" class="btn btn-default">
naar het volgende gedeelte: Bijlagen
</button>
</div>
</div>
</div>
<div class="panel">
<div class="section-toggle">
<span class="toggle-icon fa fa-angle-right"></span>
<h2>
<a data-toggle="collapse" data-parent="#accordion" href="#panel5" aria-expanded="false" aria-controls="panel5">Bijlagen</a>
</h2>
</div>
<div class="section-body collapse" id="panel5">
<label>Overzicht werkzaamheden voor bijlage check <span class="fa fa-check" aria-hidden="true"></span>
</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Werkzaamheid</th>
<th>Activiteit (vanuit de wet)</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakkapel plaatsen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Bouwen</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Checken voor bijlagen
</button>
</td>
</tr>
<tr>
<td>Dakkapel plaatsen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Handelen in strijd met regels ruimtelijke ordening</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Checken voor bijlagen
</button>
</td>
</tr>
<tr>
<td>Schuur bouwen <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Bouwen</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>
Checken voor bijlagen
</button>
</td>
</tr>
</tbody>
</table>
<label>Dakkapel plaatsen [ Bouwen ] <span class="fa fa-exclamation-circle" aria-hidden="true"></span>
<span class="fa fa-check" aria-hidden="true"></span>
</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Welstand <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Aanzicht bouwwerk.pdf</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Plattegronden en doorsneden bouwen eenvoudige bouwwerken <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>
<div>Plattegrond woning.dwg</div>
<div>Dakkapel ontwerp v7.dwg</div>
<div>Vooraanzicht woning v3.dwg</div>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Bestemmingsplan, beheersverordening en bouwverordening eenvoudige bouwwerken</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Constructieve veiligheid eenvoudige bouwwerken</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Kwaliteitsverklaringen</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
<span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning. U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht. Hierdoor kan de besluitvorming
langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<label>Dakkapel plaatsen [ Handelen in strijd met regels ruimtelijke ordening ] <span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gegevens Handelen in strijd met regels ruimtelijke ordening</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
<span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning. U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht. Hierdoor kan de besluitvorming
langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<label>Schuur bouwen [ Bouwen ] <span class="fa fa-check" aria-hidden="true"></span>
</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Welstand <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>Afbeelding serre.jpg</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Plattegronden en doorsneden bouwen eenvoudige bouwwerken <span class="fa fa-check" aria-hidden="true"></span>
</td>
<td>
<div>Plattegrond woning met tuin.dwg</div>
<div>Serre doorsnede.dwg</div>
<div>Vooraanzicht woning v3.dwg</div>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-trash-o" aria-hidden="true"></span>
Verwijderen
</button>
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Bestemmingsplan, beheersverordening en bouwverordening eenvoudige bouwwerken</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Constructieve veiligheid eenvoudige bouwwerken</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Kwaliteitsverklaringen</td>
<td><span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
<button type="button" class="btn btn-link">
<span class="fa fa-plus-square-o" aria-hidden="true"></span>
Meer toevoegen
</button>
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
<span class="fa fa-exclamation-circle" aria-hidden="true"></span>
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning. U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht. Hierdoor kan de besluitvorming
langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<div><button type="button" class="btn btn-primary">
Naar Indienen van de aanvraag
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="well progress-block" data-spy="affix" data-offset-top="245" data-offset-bottom="444">
<h2>Aanvraag voorbereiden</h2>
<p>Omgevingsvergunning</p>
<ul class="list-unstyled">
<li class="active">
<span class="fa fa-angle-right" aria-hidden="true"></span> Omschrijving project <span class="fa fa-check" aria-hidden="true"></span>
</li>
<li class="active">
<span class="fa fa-angle-right" aria-hidden="true"></span> Aanvrager <span class="fa fa-check" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-angle-right" aria-hidden="true"></span> Locatie
</li>
<li>
<span class="fa fa-angle-right" aria-hidden="true"></span> Werkzaamheden
</li>
<li>
<span class="fa fa-angle-right" aria-hidden="true"></span> Bijlagen
</li>
</ul>
<button type="submit" class="btn btn-primary">
Aanvraag indienen
</button>
</div>
</div>
</div>
</main>
<footer>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<h2>Service</h2>
<ul>
<li>Contact</li>
<li>Sitemap</li>
<li>Help</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2>Over deze site</h2>
<ul>
<li>Copyright</li>
<li>Privacy</li>
<li>Cookies</li>
<li>Toegankelijkheid</li>
</ul>
<h2>Volg ons ook op</h2>
<ul>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
</div>
<div class="col-xs-12 col-md-6">
<h2>Wat is het Omgevingsloket</h2>
<p>In het Omgevingsloket kan iedere burger van Nederland omgevingsdocumenten opvragen en inzien, checken of men een vergunning nodig heeft voor de werkzaamheid die men van plan is, en deze vergunningaanvraag opstellen en indienen. Daarna kunnen
de ambtenaren van de overheden die hiervoor verantwoordelijk zijn, samen aan de behandeling van de aanvraag werken.</p>
<a href="#">Lees meer over het Omgevingsloket</a>
</div>
</div>
</footer>
{{> '@header' }}
<main>
<div class="row">
<div class="col-xs-12">
<h1>Project | Aanbouw Kerkstraat 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-9">
{{#accordion}}
{{#panel panel1.title panel1 }}
{{> '@form-horizontal' this }}
{{/panel}}
{{#panel panel2.title panel2 }}
{{> '@form-horizontal' this }}
{{/panel}}
{{#panel panel3.title panel3 }}
{{> '@form-horizontal' this }}
{{/panel}}
{{#panel panel4.title panel4 }}
<table class="table table-responsive">
<thead>
<tr>
<th>Werkzaamheid</th>
<th>Activiteit (vanuit de wet)</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakkapel plaatsen {{> '@icon' icon="fa fa-check"}}</td>
<td>Bouwen</td>
<td class="actions">
{{> '@button' editButton }}
{{> '@button' deleteButton }}
</td>
</tr>
<tr>
<td>Dakkapel plaatsen {{> '@icon' icon="fa fa-check"}}</td>
<td>Handelen in strijd met regels ruimtelijke ordening</td>
<td class="actions">
{{> '@button' editButton }}
{{> '@button' deleteButton }}
</td>
</tr>
<tr>
<td>Schuur bouwen {{> '@icon' icon="fa fa-check"}}</td>
<td>Bouwen</td>
<td class="actions">
{{> '@button' editButton }}
{{> '@button' deleteButton }}
</td>
</tr>
</tbody>
</table>
<div>{{> '@button' addActivityButton }}</div>
<div>{{> '@button' nextButton }}</div>
{{/panel}}
{{#panel panel5.title panel5 }}
<label>Overzicht werkzaamheden voor bijlage check {{> '@icon' icon="fa fa-check"}}</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Werkzaamheid</th>
<th>Activiteit (vanuit de wet)</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakkapel plaatsen {{> '@icon' icon="fa fa-check"}}</td>
<td>Bouwen</td>
<td class="actions">
{{> '@button' checkButton }}
</td>
</tr>
<tr>
<td>Dakkapel plaatsen {{> '@icon' icon="fa fa-check"}}</td>
<td>Handelen in strijd met regels ruimtelijke ordening</td>
<td class="actions">
{{> '@button' checkButton }}
</td>
</tr>
<tr>
<td>Schuur bouwen {{> '@icon' icon="fa fa-check"}}</td>
<td>Bouwen</td>
<td class="actions">
{{> '@button' checkButton }}
</td>
</tr>
</tbody>
</table>
<label>Dakkapel plaatsen [ Bouwen ] {{> '@icon' icon="fa fa-exclamation-circle"}} {{> '@icon' icon="fa fa-check"}}</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Welstand {{> '@icon' icon="fa fa-check"}}</td>
<td>Aanzicht bouwwerk.pdf</td>
<td class="actions">
{{> '@button' deleteButton }}
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Plattegronden en doorsneden bouwen eenvoudige bouwwerken {{> '@icon' icon="fa fa-check"}}</td>
<td>
<div>Plattegrond woning.dwg</div>
<div>Dakkapel ontwerp v7.dwg</div>
<div>Vooraanzicht woning v3.dwg</div>
</td>
<td class="actions">
{{> '@button' deleteButton }}
{{> '@button' deleteButton }}
{{> '@button' deleteButton }}
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Bestemmingsplan, beheersverordening en bouwverordening eenvoudige bouwwerken</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen"}}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Constructieve veiligheid eenvoudige bouwwerken</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen"}}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Kwaliteitsverklaringen</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen"}}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
{{> '@icon' icon="fa fa-exclamation-circle" title="" }}
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning. U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht. Hierdoor kan de besluitvorming langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<label>Dakkapel plaatsen [ Handelen in strijd met regels ruimtelijke ordening ] {{> '@icon' icon="fa fa-exclamation-circle"}}</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gegevens Handelen in strijd met regels ruimtelijke ordening</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen"}}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
{{> '@icon' icon="fa fa-exclamation-circle" title="" }}
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning. U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht. Hierdoor kan de besluitvorming langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<label>Schuur bouwen [ Bouwen ] {{> '@icon' icon="fa fa-check"}}</label>
<table class="table table-responsive">
<thead>
<tr>
<th>Gevraagde bijlagen voor aanvraag</th>
<th>Toegevoegde bestanden</th>
<th>Acties</th>
</tr>
</thead>
<tbody>
<tr>
<td>Welstand {{> '@icon' icon="fa fa-check"}}</td>
<td>Afbeelding serre.jpg</td>
<td class="actions">
{{> '@button' deleteButton }}
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Plattegronden en doorsneden bouwen eenvoudige bouwwerken {{> '@icon' icon="fa fa-check"}}</td>
<td>
<div>Plattegrond woning met tuin.dwg</div>
<div>Serre doorsnede.dwg</div>
<div>Vooraanzicht woning v3.dwg</div>
</td>
<td class="actions">
{{> '@button' deleteButton }}
{{> '@button' deleteButton }}
{{> '@button' deleteButton }}
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Bestemmingsplan, beheersverordening en bouwverordening eenvoudige bouwwerken</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen" }}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Constructieve veiligheid eenvoudige bouwwerken</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen" }}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Kwaliteitsverklaringen</td>
<td>{{> '@icon' icon="fa fa-exclamation-circle" title="Geen bijlagen" }}</td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
<tr>
<td>Overige</td>
<td></td>
<td class="actions">
{{> '@button' addButton }}
</td>
</tr>
</tbody>
</table>
<div class="well">
<div class="media">
<div class="media-left">
{{> '@icon' icon="fa fa-exclamation-circle" title="" }}
</div>
<div class="media-body">
<p>Het is mogelijk dat een aantal bijlagen ontbreekt bij deze aanvraag voor een Omgevingsvergunning.
U mag de aanvraag indienen. Het is mogelijk dat een aanvulling op de aanvraag wordt verzocht.
Hierdoor kan de besluitvorming langer duren.</p>
<p>Na Aanvraag indienen, kunt u nog naderhand Bijlagen toevoegen via "Aanvraag aanvullen"</p>
</div>
</div>
</div>
<div>{{> '@button' nextButton }}</div>
{{/panel}}
{{/accordion}}
</div>
<div class="col-md-3">
{{#progressBlock }}
<h2>Aanvraag voorbereiden</h2>
<p>Omgevingsvergunning</p>
<ul class="list-unstyled">
<li class="active">
{{> '@icon' icon="fa fa-angle-right"}} Omschrijving project {{> '@icon' icon="fa fa-check"}}
</li>
<li class="active">
{{> '@icon' icon="fa fa-angle-right"}} Aanvrager {{> '@icon' icon="fa fa-check"}}
</li>
<li>
{{> '@icon' icon="fa fa-angle-right"}} Locatie
</li>
<li>
{{> '@icon' icon="fa fa-angle-right"}} Werkzaamheden
</li>
<li>
{{> '@icon' icon="fa fa-angle-right"}} Bijlagen
</li>
</ul>
{{> '@button' applyRequest }}
{{/progressBlock}}
</div>
</div>
</main>
{{render '@footer' }}
menu:
menuItems:
- label: Home
- label: Actueel
- label: Raadplegen
- label: Checken
- label: Aanvragen
active: true
searchGroupInput:
id: button
ariaLabel: Zoeken
placeholder: Zoeken
type: submit
buttonRight: true
icon: fa fa-search
breadcrumbs:
crumbs:
- label: Home
url: '#'
- label: Aanvragen
url: '#'
- label: Mijn project
url: '#'
- label: Aanvraag voorbereiden
url: '#'
panel1:
id: panel1
title: Omschrijving project
fieldsets:
- legend: Omschrijving project
groups:
- id: titel
type: input
inputType: text
label: Titel
- id: nummer
type: static
inputType: static
label: Nummer
text: 24253729
- id: projectomschrijving
type: textarea
inputType: textarea
label: Projectomschrijving
- id: gefaseerdeAanvraag
type: radios
label: Gefaseerde aanvraag
options:
- value: nee
label: Nee
- value: ja
label: Ja
- id: procedure
type: static
inputType: static
label: Procedure
text: Reguliere procedure
- id: status
type: static
inputType: static
label: Status
text: In voorbereiding
- id: versie
type: static
inputType: static
label: Formulierversie
text: 2016.03
submitButton:
type: submit
modifier: primary
label: 'naar het volgende gedeelte: Aanvrager'
panel2:
id: panel2
title: Aanvrager
fieldsets:
- legend: Persoonsgegevens aanvrager
groups:
- id: achternaam
type: input
inputType: text
label: Achternaam
- id: tussenvoegsels
type: input
inputType: text
label: Tussenvoegsels
size: 8
- id: voorletters
type: input
inputType: text
label: Voorletter(s)
size: 8
- id: bsn
type: input
inputType: text
label: BSN
size: 8
- id: geslacht
type: input
inputType: text
label: Geslacht
size: 8
- legend: Contactgegevens aanvrager
groups:
- id: telefoonnummer
type: input
inputType: text
label: Telefoonnummer
size: 12
- id: emailadres
type: input
inputType: text
label: Emailadres
- legend: Correspondentieadres
groups:
- id: capostcode
type: input
inputType: text
label: Postcode
size: 8
- id: cahuisnummer
type: input
inputType: text
label: Huisnummer
size: 8
- id: catoevoeging
type: input
inputType: text
label: Huisnummer toevoeging
size: 8
- id: castraatnaam
type: input
inputType: text
label: Straatnaam
- id: cawoonplaats
type: input
inputType: text
label: Woonplaats
- legend: Verblijfadres
groups:
- id: vapostcode
type: input
inputType: text
label: Postcode
size: 8
- id: vahuisnummer
type: input
inputType: text
label: Huisnummer
size: 8
- id: vatoevoeging
type: input
inputType: text
label: Huisnummer toevoeging
size: 8
- id: vastraatnaam
type: input
inputType: text
label: Straatnaam
- id: vawoonplaats
type: input
inputType: text
label: Woonplaats
submitButton:
type: submit
modifier: primary
label: 'naar het volgende gedeelte: Locatie'
panel3:
id: panel3
title: Locatie
fieldsets:
- legend: Adres voor aanvraag omgevingsvergunning
groups:
- id: omgevingsvergunningPostcode
type: input
inputType: text
label: Postcode
size: 8
- id: omgevingsvergunningHuisnummer
type: input
inputType: text
label: Huisnummer
size: 8
- id: omgevingsvergunningToevoeging
type: input
inputType: text
label: Huisnummer toevoeging
size: 8
- id: omgevingsvergunningStraatnaam
type: input
inputType: text
label: Straatnaam
- id: omgevingsvergunningWoonplaats
type: input
inputType: text
label: Woonplaats
- id: omgevingsvergunningWerkzaamheden
type: radios
label: >-
Gelden de werkzaamheden in deze aanvraag/melding voor meerdere
adressen of percelen?
options:
- value: nee
label: Nee
- value: ja
label: Ja
- legend: Eigendomssituatie
groups:
- id: eigendomssituatie
type: static
inputType: static
label: Eigendomssituatie van het perceel
text: U bent huurder van het perceel
submitButton:
type: submit
modifier: primary
label: 'naar het volgende gedeelte: Werkzaamheden'
panel4:
id: panel4
title: Werkzaamheden
addActivityButton:
label: Activiteiten toevoegen
type: button
modifier: primary
nextButton:
label: |
naar het volgende gedeelte: Bijlagen
type: button
modifier: default
editButton:
label: Specificeren
type: button
modifier: link
icon: fa fa-pencil-square-o
deleteButton:
label: Verwijderen
type: button
modifier: link
icon: fa fa-trash-o
panel5:
id: panel5
title: Bijlagen
checkButton:
label: Checken voor bijlagen
type: button
modifier: link
icon: fa fa-pencil-square-o
nextButton:
label: Naar Indienen van de aanvraag
type: button
modifier: primary
deleteButton:
label: Verwijderen
type: button
modifier: link
icon: fa fa-trash-o
addButton:
label: Meer toevoegen
type: button
modifier: link
icon: fa fa-plus-square-o
applyRequest:
label: Aanvraag indienen
type: submit
modifier: primary
- Handle: @aanvragen
- Preview:
- Filesystem Path: components\06-examples\aanvragen.hbs
- References (5): @header, @form-horizontal, @icon, @button, @footer
De aside met de checklist schuift mee met het formulier, tot hij een punt bereikt waar hij niet verder MAG scrollen.
We gebruiken hiervoor Bootstrap Affix, en deze heeft twee values - data-offset-top en data-offset-bottom - die bepalen waar het kantelpunt zit.
Let op de uitlijning die te zien is in onderstaande instructie afbeelding.
Zie ook
- Bootstrap Affix
- Positioneren van de affix, links in het menu onder het kopje “Documentation”