<div class="amui-l-app-layout">
<nav class="amui-o-top-bar navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-bar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="amui-o-top-bar__logo amui-m-navbar-logo navbar-brand" href="index.html">
<h1 class="amui-a-brand-logo is--light">Bienvenue Aix-Marseille université</h1>
<span class="amui-m-navbar-logo__heading-title">Si AMU</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-bar-collapse">
<ul class="amui-o-top-bar__nav navbar-nav navbar-right">
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon is--inner-text-inline-block" href="#">
<i class="material-icons md-24">account_circle</i>
<span class="amui-m-nav-icon__inner-text">Utilisateur</span>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="http://ent.univ-amu.fr">
<span class="amui-m-nav-icon__inner-text">ENT</span>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="info.html">
<i class="material-icons md-24">help</i>
</a>
</li>
<li class="amui-o-top-bar__nav-list-item amui-m-btn-dropdown dropdown dropdown--parent">
<a class="amui-m-nav-icon is--inner-text-inline-block dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-24">settings</i>
<span class="amui-m-nav-icon__inner-text">Admin</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Visites</a>
</li>
<li>
<a href="#">Paramétrages</a>
</li>
<li>
<a href="#">Listes</a>
</li>
<li>
<a href="#">Historique</a>
</li>
</ul>
</li>
<li class="amui-o-top-bar__nav-list-item">
<a class="amui-m-nav-icon" href="#">
<i class="material-icons md-24">exit_to_app</i>
</a>
</li>
</ul>
</div>
</div> <!-- Container fluid -->
</nav> <!-- Organism top bar -->
<div id="navbar-collapse" class="amui-l-app-layout__wrapper">
<ul class="amui-o-sidebar-nav">
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">home</i>
<span class="amui-m-nav-icon__inner-text">Accueil</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">announcement</i>
<span class="amui-m-nav-icon__inner-text">Evènements</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--active is--inner-text" href="#">
<i class="material-icons md-24">apps</i>
<span class="amui-m-nav-icon__inner-text">Applications</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">storage</i>
<span class="amui-m-nav-icon__inner-text">Serveurs</span>
</a>
</li>
<li class="amui-o-sidebar-nav__list-item">
<a class="amui-m-nav-icon is--inner-text" href="#">
<i class="material-icons md-24">account_balance</i>
<span class="amui-m-nav-icon__inner-text">Habilitation</span>
</a>
</li>
</ul>
<main role="main" class="amui-l-app-layout__main">
<div class="container-fluid">
<div class="amui-l-page-header amui-g-grid row is--middle">
<div class="amui-l-page-header__primary amui-g-grid__item col-xs-12 col-md-6">
<h2 class="amui-l-page-header__title">Création d'une applications</h2>
</div>
<div class="amui-l-page-header__secondary amui-g-grid__item is--push col-xs-12 col-md-6">
<ul>
<li>
<button id="exp" type="button" class="amui-a-btn is--default is--hollow btn is--icon-left" onclick="expand()" style="display:none;"><i class="material-icons md-24">expand_more</i><span>Dérouler</span></button>
<button id="col" type="button" class="amui-a-btn is--default is--hollow btn is--icon-left" onclick="collapse()"><i class="material-icons md-24">expand_less</i><span>Fermer</span></button>
</li>
</ul>
</div>
</div>
<form class="amui-o-form-group clearfix">
<div class="amui-g-grid row amui-l-page">
<div class="amui-g-grid__item col-xs-12">
<div id="accordion" class="amui-m-accordion" role="tablist" aria-multiselectable="true">
<div class="amui-m-panel amui-m-accordion__content">
<div class="amui-m-panel__heading" role="tab" id="headingOne">
<a class="amui-m-panel__heading-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne" href="#collapseOne">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-11 is--pull">
<h3 class="panel-title">Informations générales</h3>
</div>
<div class="amui-g-grid__item col-xs-1 is--push">
<i class="material-icons md-24 amui-h-mt-xxs"></i>
</div>
</div>
</a>
</div>
<div id="collapseOne" class="amui-m-panel__body collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">
<div class="amui-m-panel">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName1">Nom de l'application</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="ex: AMUBox">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputDate1">Date de mise en service</label>
<span class="is--datepicker">
<input type="text" class="amui-a-form-control form-control" id="exampleInputDate1" placeholder="DD/MM/YYYY HH:MM" value="">
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName2">Nom ENT (Fname)</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName2" placeholder="ex: AMUBox">
</div>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect1">Zone</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect1">
<option>Choisir une zone</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect2">Quartier</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect2">
<option>Choisir une zone en premier</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect3">Etat</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect3">
<option>Choisir un état</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect4">Technologie</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect4">
<option>Choisir une technologie</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect5">Editeur</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect5">
<option>Choisir un éditeur</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect6">Authentification</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect6">
<option>Choisir un type d'authentification</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-6">
<div class="amui-m-input-addon form-group">
<label class="amui-a-form-label" for="exampleUrl">Accés (URL)</label>
<div class="input-group">
<div class="amui-m-input-addon__icon input-group-addon">https://</div>
<input type="text" class="amui-a-form-control form-control" id="exampleUrl" placeholder="ex: https://amubox.univ-amu.fr">
</div>
</div>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-6">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleTextarea">Description</label>
<textarea class="amui-a-form-control form-control" id="exampleTextarea" rows="4" placeholder="ex: Service de stockage en ligne de type cloud privé."></textarea>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Accordion #1 -->
<div class="amui-m-panel amui-m-accordion__content">
<div class="amui-m-panel__heading" role="tab" id="headingTwo">
<a class="amui-m-panel__heading-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseTwo" href="#collapseTwo">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-11 is--pull">
<h3 class="panel-title">Responsable</h3>
</div>
<div class="amui-g-grid__item col-xs-1 is--push">
<i class="material-icons md-24 amui-h-mt-xxs"></i>
</div>
</div>
</a>
</div>
<div id="collapseTwo" class="amui-m-panel__body collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false">
<div class="amui-m-panel">
<div class="amui-g-grid row">
<fieldset>
<legend class="sr-only">Informations responsable</legend>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect7">Type</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect7">
<option>Veuillez choisir un type de responsable</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName3">Nom</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName3" placeholder="Nom">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<button type="button" class="amui-a-btn is--danger is--sm is--icon-only amui-h-mt-md"><i class="material-icons md-24">close</i></button>
</div>
</fieldset>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-6">
<button type="button" class="amui-a-btn is--primary is--sm is--icon-left"><i class="material-icons md-18">add</i><span>Ajouter un responsable</span></button>
</div>
</div>
</div>
</div>
</div> <!-- Accordion #2 -->
<div class="amui-m-panel amui-m-accordion__content">
<div class="amui-m-panel__heading" role="tab" id="headingThree">
<a class="amui-m-panel__heading-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseThree" href="#collapseThree">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-11 is--pull">
<h3 class="panel-title">Lien avec serveur</h3>
</div>
<div class="amui-g-grid__item col-xs-1 is--push">
<i class="material-icons md-24 amui-h-mt-xxs"></i>
</div>
</div>
</a>
</div>
<div id="collapseThree" class="amui-m-panel__body collapse in" role="tabpanel" aria-labelledby="headingThree" aria-expanded="false">
<div class="amui-m-panel">
<div class="amui-g-grid row">
<fieldset>
<legend class="sr-only">Informations responsable</legend>
<div class="amui-g-grid__item col-xs-12 col-sm-3">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleSelect7">Type de serveur</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect7">
<option>Veuillez choisir un type de responsable</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-3">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName3">Serveur</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName3" placeholder="Nom">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-3">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName3">Ports</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName3" placeholder="Nom">
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-5">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label sr-only" for="exampleInputName3">Ports</label>
<input type="number" class="amui-a-form-control form-control" id="exampleInputName3" placeholder="Nom">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label sr-only" for="exampleSelect7">Type de port</label>
<span class="is--select-wrapper">
<select class="amui-a-form-control form-control" id="exampleSelect7">
<option>UDP</option>
<option>TCP</option>
</select>
</span>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-3 is--push">
<button type="button" class="amui-a-btn is--danger is--sm is--icon-only"><i class="material-icons md-24">close</i></button>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<button type="button" class="amui-a-btn is--primary is--sm is--icon-left"><i class="material-icons md-18">add</i><span>Ajouter</span></button>
</div>
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-3 is--push">
<button type="button" class="amui-a-btn is--danger is--sm is--icon-left amui-h-mt-md"><i class="material-icons md-24">close</i><span>Supprimer</span></button>
</div>
</fieldset>
<div class="amui-g-grid__item col-xs-12">
<hr class="amui-a-separator">
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-6">
<button type="button" class="amui-a-btn is--primary is--sm is--icon-left"><i class="material-icons md-18">add</i><span>Ajouter un responsable</span></button>
</div>
</div>
</div>
</div>
</div> <!-- Accordion #3 -->
</div> <!-- Accordions container -->
</div>
</div>
<div class="amui-g-grid row amui-l-page-bottom">
<div class="amui-g-grid__item col-xs-12">
<button type="button" class="amui-a-btn is--success btn">Valider</button>
</div>
</div>
</form>
</div>
</main>
</div> <!-- Main container -->
<footer role="contentinfo" class="amui-m-footer amui-l-app-layout__footer panel-default">
<small>Aix-Marseille Université - Dosi Pôle développement <a href="mailto:jp.floret@univ-amu.fr?subject=Siamu">jp.floret@univ-amu.fr</a> </small>
</footer> <!-- Footer -->
</div>
<script>
function expand() {
$(".amui-m-panel__body.collapse").collapse("show");
$("#exp").hide();
$("#col").show();
}
function collapse() {
$(".amui-m-panel__body.collapse").collapse("hide");
$("#col").hide();
$("#exp").show();
}
</script>