first commit
This commit is contained in:
maher
112
templates/authentication/confirm-mail.html.twig
Normal file
112
templates/authentication/confirm-mail.html.twig
Normal file
@@ -0,0 +1,112 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Sofbox - Responsive Bootstrap 4 Admin Dashboard Template</title>
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}" />
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
|
||||
<!-- Typography CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/typography.css') }}">
|
||||
<!-- Style CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
|
||||
<!-- Responsive CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- loader Start -->
|
||||
<div id="loading">
|
||||
<div id="loading-center">
|
||||
<div class="loader">
|
||||
<div class="cube">
|
||||
<div class="sides">
|
||||
<div class="top"></div>
|
||||
<div class="right"></div>
|
||||
<div class="bottom"></div>
|
||||
<div class="left"></div>
|
||||
<div class="front"></div>
|
||||
<div class="back"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- loader END -->
|
||||
<!-- Sign in Start -->
|
||||
<section class="sign-in-page bg-white">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-sm-6 align-self-center">
|
||||
<div class="sign-in-from">
|
||||
<img src="{{ asset('assets/images/login/mail.png') }}" width="80" alt="">
|
||||
<h1 class="mt-3 mb-0">Success !</h1>
|
||||
<p>A email has been send to youremail@domain.com. Please check for an email from company and click on the included link to reset your password.</p>
|
||||
<div class="d-inline-block w-100">
|
||||
|
||||
<button type="submit" class="btn btn-primary mt-3">Back to Home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 text-center">
|
||||
<div class="sign-in-detail text-white" style="background: url({{ asset('assets/images/login/2.jpg') }}) no-repeat 0 0; background-size: cover;">
|
||||
<a class="sign-in-logo mb-5" href="#"><img src="{{ asset('assets/images/logo-white.png') }}" class="img-fluid" alt="logo"></a>
|
||||
<div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Sign in END -->
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/popper.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
|
||||
<!-- Appear JavaScript -->
|
||||
<script src="{{ asset('assets/js/jquery.appear.js') }}"></script>
|
||||
<!-- Countdown JavaScript -->
|
||||
<script src="{{ asset('assets/js/countdown.min.js') }}"></script>
|
||||
<!-- Counterup JavaScript -->
|
||||
<script src="{{ asset('assets/js/waypoints.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/jquery.counterup.min.js') }}"></script>
|
||||
<!-- Wow JavaScript -->
|
||||
<script src="{{ asset('assets/js/wow.min.js') }}"></script>
|
||||
<!-- Apexcharts JavaScript -->
|
||||
<script src="{{ asset('assets/js/apexcharts.js') }}"></script>
|
||||
<!-- Slick JavaScript -->
|
||||
<script src="{{ asset('assets/js/slick.min.js') }}"></script>
|
||||
<!-- Select2 JavaScript -->
|
||||
<script src="{{ asset('assets/js/select2.min.js') }}"></script>
|
||||
<!-- Owl Carousel JavaScript -->
|
||||
<script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
|
||||
<!-- Magnific Popup JavaScript -->
|
||||
<script src="{{ asset('assets/js/jquery.magnific-popup.min.js') }}"></script>
|
||||
<!-- Smooth Scrollbar JavaScript -->
|
||||
<script src="{{ asset('assets/js/smooth-scrollbar.js') }}"></script>
|
||||
<!-- lottie JavaScript -->
|
||||
<script src="{{ asset('assets/js/lottie.js') }}"></script>
|
||||
<!-- Chart Custom JavaScript -->
|
||||
<script src="{{ asset('assets/js/chart-custom.js') }}"></script>
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="{{ asset('assets/js/custom.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
templates/authentication/recoverpw.html.twig
Normal file
120
templates/authentication/recoverpw.html.twig
Normal file
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Sofbox - Responsive Bootstrap 4 Admin Dashboard Template</title>
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}" />
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
|
||||
<!-- Typography CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/typography.css') }}">
|
||||
<!-- Style CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
|
||||
<!-- Responsive CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- loader Start -->
|
||||
<div id="loading">
|
||||
<div id="loading-center">
|
||||
<div class="loader">
|
||||
<div class="cube">
|
||||
<div class="sides">
|
||||
<div class="top"></div>
|
||||
<div class="right"></div>
|
||||
<div class="bottom"></div>
|
||||
<div class="left"></div>
|
||||
<div class="front"></div>
|
||||
<div class="back"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- loader END -->
|
||||
<!-- Sign in Start -->
|
||||
<section class="sign-in-page bg-white">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-sm-6 align-self-center">
|
||||
<div class="sign-in-from">
|
||||
<h1 class="mb-0">Reset Password</h1>
|
||||
<p>Enter your email address and we'll send you an email with instructions to reset your password.</p>
|
||||
<form class="mt-4">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control mb-0" id="exampleInputEmail1" placeholder="Enter email">
|
||||
</div>
|
||||
|
||||
<div class="d-inline-block w-100">
|
||||
|
||||
<button type="submit" class="btn btn-primary float-right">Reset Password</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 text-center">
|
||||
<div class="sign-in-detail text-white" style="background: url({{ asset('assets/images/login/2.jpg') }}) no-repeat 0 0; background-size: cover;">
|
||||
<a class="sign-in-logo mb-5" href="#"><img src="images/logo-white.png') }}" class="img-fluid" alt="logo"></a>
|
||||
<div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ asset('assets/images/login/1.png') }}" class="img-fluid mb-4" alt="logo">
|
||||
<h4 class="mb-1 text-white">Manage your orders</h4>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Sign in END -->
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/popper.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
|
||||
<!-- Appear JavaScript -->
|
||||
<script src="{{ asset('assets/js/jquery.appear.js') }}"></script>
|
||||
<!-- Countdown JavaScript -->
|
||||
<script src="{{ asset('assets/js/countdown.min.js') }}"></script>
|
||||
<!-- Counterup JavaScript -->
|
||||
<script src="{{ asset('assets/js/waypoints.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/jquery.counterup.min.js') }}"></script>
|
||||
<!-- Wow JavaScript -->
|
||||
<script src="{{ asset('assets/js/wow.min.js') }}"></script>
|
||||
<!-- Apexcharts JavaScript -->
|
||||
<script src="{{ asset('assets/js/apexcharts.js') }}"></script>
|
||||
<!-- Slick JavaScript -->
|
||||
<script src="{{ asset('assets/js/slick.min.js') }}"></script>
|
||||
<!-- Select2 JavaScript -->
|
||||
<script src="{{ asset('assets/js/select2.min.js') }}"></script>
|
||||
<!-- Owl Carousel JavaScript -->
|
||||
<script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
|
||||
<!-- Magnific Popup JavaScript -->
|
||||
<script src="{{ asset('assets/js/jquery.magnific-popup.min.js') }}"></script>
|
||||
<!-- Smooth Scrollbar JavaScript -->
|
||||
<script src="{{ asset('assets/js/smooth-scrollbar.js') }}"></script>
|
||||
<!-- lottie JavaScript -->
|
||||
<script src="{{ asset('assets/js/lottie.js') }}"></script>
|
||||
<!-- Chart Custom JavaScript -->
|
||||
<script src="{{ asset('assets/js/chart-custom.js') }}"></script>
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="{{ asset('assets/js/custom.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
64
templates/authentication/sign-in.html.twig
Normal file
64
templates/authentication/sign-in.html.twig
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
{% trans_default_domain 'authentications' %}
|
||||
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body class="az-body">
|
||||
<div class="az-signin-wrapper">
|
||||
<div class="az-card-signin">
|
||||
<h1 class="az-logo">az<span>i</span>a</h1>
|
||||
<div class="az-signin-header">
|
||||
<h2>{{ 'sign_in'|trans }}</h2>
|
||||
<h4>{{ 'sign_in_message'|trans }}</h4>
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
<form action="{{ path('app_sign_in') }}" method="post">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">{{ 'label_email'|trans }}</label>
|
||||
<input type="email" name="email" class="form-control mb-0" id="exampleInputEmail1" placeholder="{{ 'placeholder_email'|trans }}">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">{{ 'password'|trans }}</label>
|
||||
<input type="password" name="password" class="form-control mb-0" id="exampleInputPassword1" placeholder="{{ 'password'|trans }}">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<button type="submit" class="btn btn-az-primary btn-block">{{ 'sign_in'|trans }}</button>
|
||||
<input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">
|
||||
</form>
|
||||
</div>
|
||||
<!-- az-signin-header -->
|
||||
<div class="az-signin-footer">
|
||||
<p><a href="">{{ 'forgot_password'|trans }}</a></p>
|
||||
<p>{{ 'account'|trans }} <a href="{{ path('app_sign_up') }}">{{ 'sign_up'|trans }}</a></p>
|
||||
</div>
|
||||
<!-- az-signin-footer -->
|
||||
</div>
|
||||
<!-- az-card-signin -->
|
||||
</div>
|
||||
<!-- az-signin-wrapper -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
124
templates/authentication/sign-up.html.twig
Normal file
124
templates/authentication/sign-up.html.twig
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
{% trans_default_domain 'authentications' %}
|
||||
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body class="az-body">
|
||||
<div class="az-signup-wrapper">
|
||||
<div class="az-column-signup-left">
|
||||
<div>
|
||||
<i class="typcn typcn-chart-bar-outline"></i>
|
||||
<h1 class="az-logo">az<span>i</span>a</h1>
|
||||
<h5>Responsive Modern Dashboard & Admin Template</h5>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<a href="{{ path('change_language', {'lang':'fr'}) }}">🇫🇷 Français</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<a href="{{ path('change_language', {'lang':'en'}) }}">🇬🇧 English (UK)</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<a href="{{ path('change_language', {'lang':'ar'}) }}"> 🇸🇦 العربية</a>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p>Browse our site and see for yourself why you need Azia.</p>
|
||||
<a href="{{ path('app_demo_index') }}" class="btn btn-outline-indigo">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-column-signup-left -->
|
||||
<div class="az-column-signup">
|
||||
|
||||
<div class="az-signup-header">
|
||||
|
||||
<h2>{{ 'sign_up'|trans }}</h2>
|
||||
|
||||
{{ form_start(form) }}
|
||||
|
||||
{% set formErrors = form.vars.errors.form.getErrors(true) %}
|
||||
{% if formErrors|length %}
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
{% for key,error in formErrors %}
|
||||
<li><strong>{{ error.message }}</strong></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="d-block">{{ form_label(form.TypeUser) }}</label>
|
||||
|
||||
{% for key,child in form.TypeUser %}
|
||||
<div class="custom-control-inline">
|
||||
{{ form_widget(child) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="Inputpseudo">{{ form_label(form.pseudo) }}</label>
|
||||
{{ form_widget(form.pseudo, {'attr': {'class': 'form-control mb-0', 'id':'Inputpseudo' }}) }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputEmail">{{ form_label(form.email) }}</label>
|
||||
{{ form_widget(form.email, {'attr': {'class': 'form-control mb-0', 'id':'InputEmail' }}) }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputPassword">{{ form_label(form.password) }}</label>
|
||||
{{ form_widget(form.password, {'attr': {'class': 'form-control mb-0', 'id':'InputPassword' }}) }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-inline-block w-100">
|
||||
|
||||
{{ form_widget(form.cgu) }}
|
||||
<a href="#">{{ 'terms_conditions'|trans }}</a>
|
||||
|
||||
<button type="submit" class="btn btn-primary float-right">{{ 'sign_up'|trans }}</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- row -->
|
||||
{{ form_widget(form._token) }}
|
||||
{{ form_end(form) }}
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- az-signup-header -->
|
||||
<div class="az-signup-footer">
|
||||
<p>{{ 'already_have_account'|trans }} <a href="{{ path('app_sign_in') }}">{{ 'log_in'|trans }}</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- az-column-signup -->
|
||||
</div>
|
||||
<!-- az-signup-wrapper -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
39
templates/base.html.twig
Executable file
39
templates/base.html.twig
Executable file
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}" />
|
||||
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/flag-icon-css/css/flag-icon.min.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
|
||||
<!-- az-footer -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.resize.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/peity/jquery.peity.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
|
||||
</head>
|
||||
{% block body %}
|
||||
<body>
|
||||
|
||||
{% include 'basic/menu.html.twig' %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
</body>
|
||||
{% endblock %}
|
||||
</html>
|
||||
90
templates/basic/menu.html.twig
Normal file
90
templates/basic/menu.html.twig
Normal file
@@ -0,0 +1,90 @@
|
||||
{% trans_default_domain 'menus' %}
|
||||
|
||||
{% set activeHome = '' %}
|
||||
{% set activeInvestigation = '' %}
|
||||
{% set activeBroadcast = '' %}
|
||||
{% set activeRapport = '' %}
|
||||
|
||||
{% if app.request.attributes.get('_route') == 'app_home' %}
|
||||
{% set activeHome = 'active show' %}
|
||||
{% endif %}
|
||||
|
||||
{% if app.request.attributes.get('_route') in ['app_investigation_index', 'app_investigation_add', 'app_investigation_show', 'app_investigation_edit', 'app_investigation_admin_active'] %}
|
||||
{% set activeInvestigation = 'active show' %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if app.request.attributes.get('_route') == 'app_broadcast_index' %}
|
||||
{% set activeBroadcast = 'active show' %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% if app.request.attributes.get('_route') == 'app_rapport_index' %}
|
||||
{% set activeRapport = 'active show' %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_home') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_home') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item {{ activeHome }}">
|
||||
<a href="{{ path('app_home') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> {{ 'home'|trans }}</a>
|
||||
</li>
|
||||
<li class="nav-item {{ activeInvestigation }}">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> {{ 'investigation'|trans }}</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_investigation_add') }}" class="nav-link">{{ 'investigation_create'|trans }}</a>
|
||||
<a href="{{ path('app_investigation_index') }}" class="nav-link">{{ 'investigation_liste'|trans }}</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item {{ activeBroadcast }}">
|
||||
<a href="{{ path('app_broadcast_index') }}" class="nav-link"><i class="typcn typcn-tabs-outline"></i> {{ 'broadcast'|trans }}</a>
|
||||
</li>
|
||||
<li class="nav-item {{ activeRapport }}">
|
||||
<a href="{{ path('app_rapport_index') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> {{ 'rapport'|trans }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="{{ path('change_language', {'lang':'fr'}) }}" class="az-header-search-link az-header-flag"><i class="flag-icon flag-icon-fr"></i></a>
|
||||
<a href="{{ path('change_language', {'lang':'en'}) }}" class="az-header-search-link az-header-flag"><i class="flag-icon flag-icon-gb"></i></a>
|
||||
<a href="{{ path('change_language', {'lang':'ar'}) }}" class="az-header-search-link az-header-flag"><i class="flag-icon flag-icon-sa"></i></a>
|
||||
|
||||
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>{{ app.user.pseudo }}</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> {{ 'profile_edit'|trans }}</a></a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> {{ 'account_settings'|trans }}</a>
|
||||
<a href="{{ path('app_sign_out') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> {{ 'sign_out'|trans }}</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
72
templates/broadcast/add.html.twig
Normal file
72
templates/broadcast/add.html.twig
Normal file
@@ -0,0 +1,72 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Broadcast{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Broadcast</span>
|
||||
<span>Nouvelle de diffusion</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Nouvelle de diffusion</h2>
|
||||
<p class="mg-b-20">{{ investigation.getNameEn() }}</p>
|
||||
|
||||
<hr>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{{ form_start(form) }}
|
||||
|
||||
<h3 >Cost: 150 DT</h3>
|
||||
|
||||
<br>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-3 align-self-center mb-0" for="{{ form.date_start.vars.id }}">{{ form_label(form.date_start) }}:</label>
|
||||
<div class="col-sm-5">
|
||||
{{ form_widget(form.date_start, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-3 align-self-center mb-0" for="{{ form.date_end.vars.id }}">{{ form_label(form.date_end) }}:</label>
|
||||
<div class="col-sm-5">
|
||||
{{ form_widget(form.date_end, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-check">
|
||||
{{ form_widget(form.notification_email) }}
|
||||
</div>
|
||||
|
||||
<div class="form-group form-check mb-5">
|
||||
{{ form_widget(form.notification_sms) }}
|
||||
</div>
|
||||
|
||||
{{ form_row(form.save, {'attr': {'class': 'btn btn-success btn-lg rounded-pill save-question' }}) }}
|
||||
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
102
templates/broadcast/index.html.twig
Normal file
102
templates/broadcast/index.html.twig
Normal file
@@ -0,0 +1,102 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Broadcast{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
|
||||
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Broadcast</span>
|
||||
<span>Liste</span>
|
||||
</div>
|
||||
<h2 class="az-content-title"><span>Broadcast</span></h2>
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
|
||||
|
||||
|
||||
<div class="az-content-label mg-b-5">Près a divuser</div>
|
||||
<p class="mg-b-20">Liste des enquêtes près a divuser</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Créer les paramètres du divisions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for investigation in investigations %}
|
||||
<tr>
|
||||
<td>{{ investigation.getId() }}</td>
|
||||
<td>{{ investigation.getNameEn() }}</td>
|
||||
<td>
|
||||
<a href="{{ path('app_broadcast_add', {id:investigation.getId()}) }}" class="btn mb-3 btn-success">
|
||||
<i class="ri-bill-fill"></i>Créer
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="az-content-label mg-t-15">en cours de divusion</div>
|
||||
<p class="mg-b-20">Liste des enquêtes en cours de divusion</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Date début</th>
|
||||
<th>Date fin</th>
|
||||
<th>E-mail</th>
|
||||
<th>SMS</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for broadcast in broadcasts %}
|
||||
<tr>
|
||||
<td>{{ broadcast.getId() }}</td>
|
||||
<td>{{ broadcast.getInvestigation().getNameEn() }}</td>
|
||||
<td>{{ broadcast.getDateCreate()|date("d/m/Y") }}</td>
|
||||
<td>{{ broadcast.getDateEnd()|date("d/m/Y") }}</td>
|
||||
<td>{% if broadcast.isNotificationEmail() %} <i class="fa fa-chevron-circle-down" aria-hidden="true"></i> {% else %} <i class="fa fa-times fa-1x" aria-hidden="true"></i> {% endif %}</td>
|
||||
<td> {% if broadcast.isNotificationSms() %} <i class="fa fa-chevron-circle-down" aria-hidden="true"></i> {% else %} <i class="fa fa-times fa-1x" aria-hidden="true"></i> {% endif %}</td>
|
||||
<td>
|
||||
{% if broadcast.getLastState() == 30 %}
|
||||
<span class="badge badge-pill badge-primary">Terminer</span>
|
||||
{% elseif broadcast.getLastState() == 31 %}
|
||||
<span class="badge badge-pill badge-success">En attente</span>
|
||||
{% elseif broadcast.getLastState() == 32 %}
|
||||
<span class="badge badge-pill badge-warning">En cours</span>
|
||||
{% else %}
|
||||
<span class="badge badge-pill badge-danger">Erreur</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex align-items-center list-user-action">
|
||||
<a class="btn btn-info btn-icon" title="" href=""><i class="ion ion-md-eye"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
401
templates/demo/buttons.html.twig
Normal file
401
templates/demo/buttons.html.twig
Normal file
@@ -0,0 +1,401 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link active">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>UI Elements</span>
|
||||
<span>Buttons</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Buttons</h2>
|
||||
<div class="az-content-label mg-b-5">Theme Buttons</div>
|
||||
<p class="mg-b-20">Predefined button styles, each serving its own semantic purpose.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3"><button class="btn btn-az-primary btn-block">Primary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0"><button class="btn btn-az-secondary btn-block">Secondary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-gray-500 btn-block">Light</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-gray-700 btn-block">Dark</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<table class="table az-table-reference">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-40p">Class Reference</th>
|
||||
<th class="wd-60p">Values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="pd-0 bg-transparent">class="btn btn-az-[value]"</code></td>
|
||||
<td>primary | secondary | light | dark</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Bootstrap Buttons</div>
|
||||
<p class="mg-b-20">Predefined button styles, each serving its own semantic purpose.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3"><button class="btn btn-primary btn-block">Primary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0"><button class="btn btn-secondary btn-block">Secondary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-success btn-block">Success</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-warning btn-block">Warning</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10"><button class="btn btn-danger btn-block">Danger</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10"><button class="btn btn-info btn-block">Info</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10"><button class="btn btn-light btn-block">Light</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10"><button class="btn btn-dark btn-block">Dark</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<table class="table az-table-reference">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-40p">Class Reference</th>
|
||||
<th class="wd-60p">Values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="pd-0 bg-transparent">class="btn btn-[value]"</code></td>
|
||||
<td>primary | secondary | success | warning | danger | info | light | dark</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Outline Buttons</div>
|
||||
<p class="mg-b-20">Predefined button styles, each serving its own semantic purpose.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3"><button class="btn btn-outline-indigo btn-block">Primary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0"><button class="btn btn-outline-primary btn-block">Secondary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-outline-light btn-block">Light</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-outline-dark btn-block">Dark</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<table class="table az-table-reference">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-40p">Class Reference</th>
|
||||
<th class="wd-60p">Values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="pd-0 bg-transparent">class="btn btn-outline-[value]"</code></td>
|
||||
<td>indigo | primary | secondary | success | warning | danger | info | light | dark</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Rounded Buttons</div>
|
||||
<p class="mg-b-20">Predefined button styles, each serving its own semantic purpose.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3"><button class="btn btn-indigo btn-rounded btn-block">Primary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0"><button class="btn btn-outline-indigo btn-rounded btn-block">Primary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-primary btn-rounded btn-block">Secondary</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-outline-primary btn-rounded btn-block">Secondary</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Button with Icons</div>
|
||||
<p class="mg-b-20">A basic button with added icons.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3"><button class="btn btn-indigo btn-with-icon btn-block"><i class="typcn typcn-folder"></i> Folder</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0"><button class="btn btn-primary btn-with-icon btn-block"><i class="typcn typcn-mail"></i> Mail</button></div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-md-t-0"><button class="btn btn-success btn-with-icon btn-block"><i class="typcn typcn-edit"></i> Edit</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Icon Buttons</div>
|
||||
<p class="mg-b-20">A button variant for using only icons.</p>
|
||||
<div class="btn-icon-list">
|
||||
<button class="btn btn-indigo btn-icon"><i class="typcn typcn-folder"></i></button>
|
||||
<button class="btn btn-primary btn-icon"><i class="typcn typcn-calendar-outline"></i></button>
|
||||
<button class="btn btn-success btn-icon"><i class="typcn typcn-document-add"></i></button>
|
||||
<button class="btn btn-info btn-icon"><i class="typcn typcn-arrow-back-outline"></i></button>
|
||||
</div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Dropdown Buttons</div>
|
||||
<p class="mg-b-20">A button variant for using only icons.</p>
|
||||
<div class="row row-xs wd-xl-80p">
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<button data-toggle="dropdown" class="btn btn-indigo btn-block">Dropdown <i class="icon ion-ios-arrow-down tx-11 mg-l-3"></i></button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="" class="dropdown-item">Profile</a>
|
||||
<a href="" class="dropdown-item">Activity Logs</a>
|
||||
<a href="" class="dropdown-item">Account Settings</a>
|
||||
<a href="" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-block">Dropdown <i class="icon ion-ios-arrow-down tx-11 mg-l-3"></i></button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="" class="dropdown-item">Profile</a>
|
||||
<a href="" class="dropdown-item">Activity Logs</a>
|
||||
<a href="" class="dropdown-item">Account Settings</a>
|
||||
<a href="" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Button Groups</div>
|
||||
<p class="mg-b-20">Group a series of buttons together on a single line with the button group.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-4">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary pd-x-25 active">Left</button>
|
||||
<button type="button" class="btn btn-secondary pd-x-25">Center</button>
|
||||
<button type="button" class="btn btn-secondary pd-x-25">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-2 mg-t-20 mg-lg-t-0">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary btn-icon active"><i class="typcn typcn-media-play-outline"></i></button>
|
||||
<button type="button" class="btn btn-secondary btn-icon"><i class="typcn typcn-media-pause-outline"></i></button>
|
||||
<button type="button" class="btn btn-secondary btn-icon"><i class="typcn typcn-media-stop-outline"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col-2 -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-indigo btn-icon active"><i class="typcn typcn-media-play-outline"></i></button>
|
||||
<button type="button" class="btn btn-primary btn-icon"><i class="typcn typcn-media-pause-outline"></i></button>
|
||||
<button type="button" class="btn btn-primary btn-icon"><i class="typcn typcn-media-stop-outline"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="mg-lg-b-30"></div>
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
299
templates/demo/chart.html.twig
Normal file
299
templates/demo/chart.html.twig
Normal file
@@ -0,0 +1,299 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js') }}) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div><!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div><!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div><!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div><!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img {{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img {{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img {{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img {{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div><!-- media-body -->
|
||||
</div><!-- media -->
|
||||
</div><!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div><!-- dropdown-menu -->
|
||||
</div><!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img {{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img {{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div><!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div><!-- az-header-profile -->
|
||||
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div><!-- dropdown-menu -->
|
||||
</div>
|
||||
</div><!-- az-header-right -->
|
||||
</div><!-- container -->
|
||||
</div><!-- az-header -->
|
||||
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link active">ChartJS</a>
|
||||
</nav>
|
||||
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div><!-- component-item -->
|
||||
|
||||
</div><!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>Charts</span>
|
||||
<span>ChartJS Charts</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">ChartJS Charts</h2>
|
||||
|
||||
<div class="az-content-label mg-b-5">Bar Chart</div>
|
||||
<p class="mg-b-20">Below is the basic bar chart example.</p>
|
||||
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-8 col-md-6 col-xl-4">
|
||||
<div class="az-content-label az-content-label-sm mg-b-15">Solid Color</div>
|
||||
<div class="ht-200 ht-lg-250"><canvas id="chartBar1"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
<div class="col-sm-8 col-md-6 col-xl-4 mg-t-20 mg-md-t-0">
|
||||
<div class="az-content-label az-content-label-sm mg-b-15">With Transparency</div>
|
||||
<div class="ht-200 ht-lg-250"><canvas id="chartBar2"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
<div class="col-sm-8 col-md-6 col-xl-4 mg-t-20 mg-xl-t-0">
|
||||
<div class="az-content-label az-content-label-sm mg-b-15">Using Gradient Color</div>
|
||||
<div class="ht-200 ht-lg-250"><canvas id="chartBar3"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
</div><!-- row -->
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="az-content-label mg-b-5">Horizontal Bar Chart</div>
|
||||
<p class="mg-b-20">Below is the horizontal bar chart example.</p>
|
||||
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-8 col-md-6">
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartBar4"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
<div class="col-sm-8 col-md-6 mg-t-20 mg-md-t-0">
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartBar5"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
</div><!-- row -->
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="az-content-label mg-b-5">Stacked Bar Chart</div>
|
||||
<p class="mg-b-20">Below are the vertical and horizontal bar chart example.</p>
|
||||
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-8 col-md-6">
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartStacked1"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
<div class="col-sm-8 col-md-6 mg-t-20 mg-md-t-0">
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartStacked2"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
</div><!-- row -->
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-8 col-md-6">
|
||||
<div class="az-content-label mg-b-5">Line Chart</div>
|
||||
<p class="mg-b-20">Below is the basic line chart example.</p>
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartLine1"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
<div class="col-sm-8 col-md-6 mg-t-20 mg-md-t-0">
|
||||
<div class="az-content-label mg-b-5">Area Chart</div>
|
||||
<p class="mg-b-20">Below is the basic area chart example.</p>
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartArea1"></canvas></div>
|
||||
</div><!-- col-6 -->
|
||||
</div><!-- row -->
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="az-content-label mg-b-5">Pie & Donut Chart</div>
|
||||
<p class="mg-b-20">Below are an example of data in a pie and donut chart.</p>
|
||||
|
||||
<div class="d-md-flex">
|
||||
<div class="chartjs-wrapper-demo mg-b-20 mg-md-b-0 mg-md-r-30 mg-xl-r-40"><canvas id="chartPie"></canvas></div>
|
||||
<div class="chartjs-wrapper-demo"><canvas id="chartDonut"></canvas></div>
|
||||
</div>
|
||||
|
||||
<div class="ht-40"></div>
|
||||
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div><!-- container -->
|
||||
</div><!-- az-footer -->
|
||||
</div><!-- az-content-body -->
|
||||
</div><!-- container -->
|
||||
</div><!-- az-content -->
|
||||
|
||||
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
|
||||
|
||||
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/chart.chartjs.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
349
templates/demo/dropdown.html.twig
Normal file
349
templates/demo/dropdown.html.twig
Normal file
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link active">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>UI Elements</span>
|
||||
<span>Dropdown</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Dropdown</h2>
|
||||
<div class="az-content-label mg-b-5">Basic Example</div>
|
||||
<p class="mg-b-20">Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position relative. Dropdowns can be triggered from link or button elements to better fit your potential needs.</p>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Dropup</div>
|
||||
<p class="mg-b-20">Trigger dropdown menus above elements by adding dropup class to the parent element.</p>
|
||||
<div class="dropdown dropup">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Dropright</div>
|
||||
<p class="mg-b-20">Trigger dropdown menus above elements by adding dropright class to the parent element.</p>
|
||||
<div class="dropdown dropright">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="droprightMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13" aria-labelledby="droprightMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Dropleft</div>
|
||||
<p class="mg-b-20">Trigger dropdown menus above elements by adding dropleft class to the parent element.</p>
|
||||
<div class="dropdown dropleft">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13" aria-labelledby="dropleftMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Active Menu Item</div>
|
||||
<p class="mg-b-20">Add active class to items in the dropdown to style them as active.</p>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item active" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Disabled Menu Item</div>
|
||||
<p class="mg-b-20">Add disabled class to items in the dropdown to style them as disabled.</p>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item disabled" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Dropdown Header</div>
|
||||
<p class="mg-b-20">Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13">
|
||||
<h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-40">
|
||||
<div class="az-content-label mg-b-5">Dropdown Divider</div>
|
||||
<p class="mg-b-20">Separate groups of related menu items with a divider.</p>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu
|
||||
</button>
|
||||
<div class="dropdown-menu tx-13">
|
||||
<h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ht-40"></div>
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
901
templates/demo/elements.html.twig
Normal file
901
templates/demo/elements.html.twig
Normal file
@@ -0,0 +1,901 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/select2/css/select2.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ion-rangeslider/css/ion.rangeSlider.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ion-rangeslider/css/ion.rangeSlider.skinFlat.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/amazeui-datetimepicker/css/amazeui.datetimepicker.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/jquery-simple-datetimepicker/jquery.simple-dtpicker.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/pickerjs/picker.min.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>Forms</span>
|
||||
<span>Form Elements</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Form Elements</h2>
|
||||
<div class="az-content-label mg-b-5">Form Input & Textarea</div>
|
||||
<p class="mg-b-20">A basic form control input and textarea with disabled and readonly mode.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg">
|
||||
<input class="form-control" placeholder="Input box" type="text">
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<input class="form-control" placeholder="Input box (readonly)" readonly="" type="text">
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<input class="form-control" placeholder="Input box (disabled)" disabled="" type="text">
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-t-20">
|
||||
<div class="col-lg">
|
||||
<textarea rows="3" class="form-control" placeholder="Textarea"></textarea>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<textarea rows="3" class="form-control" placeholder="Textarea (readonly)" readonly></textarea>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg mg-t-10 mg-lg-t-0">
|
||||
<textarea rows="3" class="form-control" placeholder="Texarea (disabled)" disabled></textarea>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Valid State Input</div>
|
||||
<p class="mg-b-20">A form control with success, warning and error state.</p>
|
||||
<form class="needs-validation was-validated">
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-4">
|
||||
<div class="form-group has-success mg-b-0">
|
||||
<input class="form-control" placeholder="Input box (success state)" value="This is input" required type="text">
|
||||
<textarea rows="3" class="form-control mg-t-20" placeholder="Textarea (success state)" required>This is textarea</textarea>
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<div class="form-group has-danger mg-b-0">
|
||||
<input class="form-control" placeholder="Input box (invalid state)" type="text" required>
|
||||
<textarea rows="3" class="form-control mg-t-20" placeholder="Textarea (invalid state)" required></textarea>
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
</form>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Custom Checkboxes & Radios</div>
|
||||
<p class="mg-b-20">A custom styled checkboxes and radios.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<label class="ckbox">
|
||||
<input type="checkbox"><span>Checkbox Unchecked</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
<div class="col-lg-3 mg-t-20 mg-lg-t-0">
|
||||
<label class="ckbox">
|
||||
<input type="checkbox" checked><span>Checkbox Checked</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
<div class="col-lg-3 mg-t-20 mg-lg-t-0">
|
||||
<label class="ckbox">
|
||||
<input type="checkbox" disabled><span>Checkbox Disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row mg-t-10">
|
||||
<div class="col-lg-3">
|
||||
<label class="rdiobox">
|
||||
<input name="rdio" type="radio">
|
||||
<span>Radio Unchecked</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
<div class="col-lg-3 mg-t-20 mg-lg-t-0">
|
||||
<label class="rdiobox">
|
||||
<input name="rdio" type="radio" checked>
|
||||
<span>Radio Checked</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
<div class="col-lg-3 mg-t-20 mg-lg-t-0">
|
||||
<label class="rdiobox">
|
||||
<input name="rdio" type="radio" disabled>
|
||||
<span>Radio Disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- col-3 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">File Browser</div>
|
||||
<p class="mg-b-20">A custom styled file browser.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-7 col-md-6 col-lg-4">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile">
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Toggle Switches</div>
|
||||
<p class="mg-b-20">A custom made toggles with jquery support.</p>
|
||||
<div class="az-toggle-group-demo">
|
||||
<div class="az-toggle"><span></span></div>
|
||||
<div class="az-toggle az-toggle-secondary"><span></span></div>
|
||||
<div class="az-toggle az-toggle-success"><span></span></div>
|
||||
<div class="az-toggle az-toggle-dark"><span></span></div>
|
||||
</div>
|
||||
<div class="az-toggle-group-demo mg-t-10">
|
||||
<div class="az-toggle on"><span></span></div>
|
||||
<div class="az-toggle az-toggle-secondary on"><span></span></div>
|
||||
<div class="az-toggle az-toggle-success on"><span></span></div>
|
||||
<div class="az-toggle az-toggle-dark on"><span></span></div>
|
||||
</div>
|
||||
<table class="table az-table-reference">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-40p">Class Reference</th>
|
||||
<th class="wd-60p">Values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="pd-0 bg-transparent">class="az-toggle az-toggle-[value]"</code></td>
|
||||
<td>secondary | success | dark</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Input Groups</div>
|
||||
<p class="mg-b-20">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<label class="ckbox wd-16 mg-b-0">
|
||||
<input type="checkbox" class="mg-0"><span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Text input with checkbox">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<label class="rdiobox wd-16 mg-b-0">
|
||||
<input type="radio"><span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Text input with radiobox">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Input Mask</div>
|
||||
<p class="mg-b-20">Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
Date:
|
||||
</div>
|
||||
</div>
|
||||
<input id="dateMask" type="text" class="form-control" placeholder="MM/DD/YYYY">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-3 mg-t-20 mg-lg-t-0">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
Phone:
|
||||
</div>
|
||||
</div>
|
||||
<!-- input-group-prepend -->
|
||||
<input id="phoneMask" type="text" class="form-control" placeholder="(000) 000-0000">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
Phone + Ext.:
|
||||
</div>
|
||||
</div>
|
||||
<!-- input-group-prepend -->
|
||||
<input id="phoneExtMask" type="text" class="form-control" placeholder="(000) 000-0000 ext 0000">
|
||||
</div>
|
||||
<!-- input-group -->
|
||||
</div>
|
||||
<div class="col-lg-2 mg-t-20 mg-lg-t-0">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
SSN:
|
||||
</div>
|
||||
<!-- input-group-text -->
|
||||
</div>
|
||||
<!-- input-group-prepend -->
|
||||
<input id="ssnMask" type="text" class="form-control" placeholder="000-00-0000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Color Picker</div>
|
||||
<p class="mg-b-20">A simple component to select color in the same way you select color in Adobe Photoshop.</p>
|
||||
<div><input type="text" id="colorpicker"></div>
|
||||
<p class="mg-t-40 mg-b-10">You can allow alpha transparency selection. Check out these example.</p>
|
||||
<div><input type="text" id="showAlpha"></div>
|
||||
<p class="mg-t-40 mg-b-10">Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.</p>
|
||||
<div><input type="text" id="showPaletteOnly"></div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">jQuery UI Date Picker</div>
|
||||
<p class="mg-b-20">The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.</p>
|
||||
<div class="wd-200 mg-b-20">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY">
|
||||
</div>
|
||||
</div>
|
||||
<!-- wd-200 -->
|
||||
<p>Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.</p>
|
||||
<div class="wd-200 mg-b-20">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="datepickerNoOfMonths" type="text" class="form-control" placeholder="MM/DD/YYYY">
|
||||
</div>
|
||||
</div>
|
||||
<!-- wd-200 -->
|
||||
<p>Display the datepicker embedded in the page instead of in an overlay.</p>
|
||||
<div class="fc-datepicker"></div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Datetimepicker</div>
|
||||
<p class="mg-b-20">Datetimepicker style variant on top of AmazeUI Datetimepicker.</p>
|
||||
<div class="wd-250 mg-b-20">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" value="2018-12-20 21:05" id="datetimepicker" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Datetimepicker Style 2</div>
|
||||
<p class="mg-b-20">Datetimepicker style variant 2 by jquery-simple-datetimepicker</p>
|
||||
<div class="wd-250 mg-b-20">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" value="2018-12-20 21:05" id="datetimepicker2" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Datetimepicker Style 3</div>
|
||||
<p class="mg-b-20">Datetimepicker style variant 3 by picker.js</p>
|
||||
<div class="wd-250 mg-b-20">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" value="January 20, 2019 09:00" id="datetimepicker3" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Select<span class="tx-sserif">2</span> Box</div>
|
||||
<p class="mg-b-20">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</p>
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-4">
|
||||
<p class="mg-b-10">Single Select</p>
|
||||
<select class="form-control select2-no-search">
|
||||
<option label="Choose one"></option>
|
||||
<option value="Firefox">Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<p class="mg-b-10">Single Select with Search</p>
|
||||
<select class="form-control select2">
|
||||
<option label="Choose one"></option>
|
||||
<option value="Firefox">Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
<div class="col-lg-4 mg-t-20 mg-lg-t-0">
|
||||
<p class="mg-b-10">Single Select (Disabled)</p>
|
||||
<select class="form-control select2" disabled>
|
||||
<option label="Choose one"></option>
|
||||
<option value="Firefox">Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col-4 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-4">
|
||||
<p class="mg-b-10">Multiple Select</p>
|
||||
<select class="form-control select2" multiple="multiple">
|
||||
<option value="Firefox">Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-4">
|
||||
<p class="mg-b-10">Multiple Select with Pre-Filled Input</p>
|
||||
<select class="form-control select2" multiple="multiple">
|
||||
<option value="Firefox" selected>Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-4">
|
||||
<p class="mg-b-10">Multiple Select (Disabled)</p>
|
||||
<select class="form-control select2-no-search" multiple="multiple" disabled>
|
||||
<option value="Firefox" selected>Firefox</option>
|
||||
<option value="Chrome">Chrome</option>
|
||||
<option value="Safari">Safari</option>
|
||||
<option value="Opera">Opera</option>
|
||||
<option value="Internet Explorer">Internet Explorer</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Range Slider</div>
|
||||
<p class="mg-b-20">Easy, flexible and responsive range slider with skin support.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider1" name="example_name" value="">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider2" name="example_name" value="">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-t-40">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider3" name="example_name" value="">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider4" name="example_name" value="">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Range Slider (Modern Skin)</div>
|
||||
<p class="mg-b-20">Below is the modern skin slider default.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider1" name="example_name" data-extra-classes="irs-modern">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider2" name="example_name" data-extra-classes="irs-modern">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-t-40">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider3" name="example_name" data-extra-classes="irs-modern">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider4" name="example_name" data-extra-classes="irs-modern">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Range Slider (Outline Skin)</div>
|
||||
<p class="mg-b-20">Below is the outline skin slider default.</p>
|
||||
<div class="row row-sm">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider1" name="example_name" data-extra-classes="irs-outline">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider2" name="example_name" data-extra-classes="irs-outline">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-t-40">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" class="rangeslider3" name="example_name" data-extra-classes="irs-outline">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
<div class="col-lg-6 mg-t-20 mg-lg-t-0">
|
||||
<input type="text" class="rangeslider4" name="example_name" data-extra-classes="irs-outline">
|
||||
</div>
|
||||
<!-- col-6 -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="ht-40"></div>
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery-ui/ui/widgets/datepicker.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/spectrum-colorpicker/spectrum.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/select2/js/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ion-rangeslider/js/ion.rangeSlider.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery-simple-datetimepicker/jquery.simple-dtpicker.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/pickerjs/picker.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
// Additional code for adding placeholder in search box of select2
|
||||
(function($) {
|
||||
var Defaults = $.fn.select2.amd.require('select2/defaults');
|
||||
|
||||
$.extend(Defaults.defaults, {
|
||||
searchInputPlaceholder: ''
|
||||
});
|
||||
|
||||
var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search');
|
||||
|
||||
var _renderSearchDropdown = SearchDropdown.prototype.render;
|
||||
|
||||
SearchDropdown.prototype.render = function(decorated) {
|
||||
|
||||
// invoke parent method
|
||||
var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments));
|
||||
|
||||
this.$search.attr('placeholder', this.options.get('searchInputPlaceholder'));
|
||||
|
||||
return $rendered;
|
||||
};
|
||||
|
||||
})(window.jQuery);
|
||||
</script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
// Toggle Switches
|
||||
$('.az-toggle').on('click', function(){
|
||||
$(this).toggleClass('on');
|
||||
})
|
||||
|
||||
// Input Masks
|
||||
$('#dateMask').mask('99/99/9999');
|
||||
$('#phoneMask').mask('(999) 999-9999');
|
||||
$('#phoneExtMask').mask('(999) 999-9999? ext 99999');
|
||||
$('#ssnMask').mask('999-99-9999');
|
||||
|
||||
// Color picker
|
||||
$('#colorpicker').spectrum({
|
||||
color: '#17A2B8'
|
||||
});
|
||||
|
||||
$('#showAlpha').spectrum({
|
||||
color: 'rgba(23,162,184,0.5)',
|
||||
showAlpha: true
|
||||
});
|
||||
|
||||
$('#showPaletteOnly').spectrum({
|
||||
showPaletteOnly: true,
|
||||
showPalette:true,
|
||||
color: '#DC3545',
|
||||
palette: [
|
||||
['#1D2939', '#fff', '#0866C6','#23BF08', '#F49917'],
|
||||
['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
|
||||
]
|
||||
});
|
||||
|
||||
// Datepicker
|
||||
$('.fc-datepicker').datepicker({
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true
|
||||
});
|
||||
|
||||
$('#datepickerNoOfMonths').datepicker({
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true,
|
||||
numberOfMonths: 2
|
||||
});
|
||||
|
||||
// AmazeUI Datetimepicker
|
||||
$('#datetimepicker').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
// jQuery Simple DateTimePicker
|
||||
$('#datetimepicker2').appendDtpicker({
|
||||
closeOnSelected: true,
|
||||
onInit: function(handler) {
|
||||
var picker = handler.getPicker();
|
||||
$(picker).addClass('az-datetimepicker');
|
||||
}
|
||||
});
|
||||
|
||||
new Picker(document.querySelector('#datetimepicker3'), {
|
||||
headers: true,
|
||||
format: 'MMMM DD, YYYY HH:mm',
|
||||
text: {
|
||||
title: 'Pick a Date and Time',
|
||||
year: 'Year',
|
||||
month: 'Month',
|
||||
day: 'Day',
|
||||
hour: 'Hour',
|
||||
minute: 'Minute'
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.select2').select2({
|
||||
placeholder: 'Choose one',
|
||||
searchInputPlaceholder: 'Search'
|
||||
});
|
||||
|
||||
$('.select2-no-search').select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
placeholder: 'Choose one'
|
||||
});
|
||||
});
|
||||
|
||||
$('.rangeslider1').ionRangeSlider();
|
||||
|
||||
$('.rangeslider2').ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$('.rangeslider3').ionRangeSlider({
|
||||
type: 'double',
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: '$'
|
||||
});
|
||||
|
||||
$('.rangeslider4').ionRangeSlider({
|
||||
type: 'double',
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
34
templates/demo/empty.html.twig
Normal file
34
templates/demo/empty.html.twig
Normal file
@@ -0,0 +1,34 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}------{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
|
||||
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>-----</span>
|
||||
<span>-----</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Enquête</h2>
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Liste des -----</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
395
templates/demo/icons.html.twig
Normal file
395
templates/demo/icons.html.twig
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/line-awesome/css/line-awesome.min.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link active">Icons</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>UI Elements</span>
|
||||
<span>Icons</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Icons</h2>
|
||||
<div class="az-content-label mg-b-5">FontAwesome Icons</div>
|
||||
<p class="mg-b-20">The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More options.</p>
|
||||
<div class="az-icon-group bg-gray-200">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="far fa-address-book"></i></div>
|
||||
<div class="col"><i class="far fa-address-card"></i></div>
|
||||
<div class="col"><i class="far fa-arrow-alt-circle-down"></i></div>
|
||||
<div class="col"><i class="far fa-arrow-alt-circle-left"></i></div>
|
||||
<div class="col"><i class="far fa-arrow-alt-circle-up"></i></div>
|
||||
<div class="col"><i class="far fa-arrow-alt-circle-right"></i></div>
|
||||
<div class="col"><i class="fas fa-ban"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-bell"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-bell-slash"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-bookmark"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-calendar"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-calendar-check"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<div class="az-icon-group bg-gray-800 tx-white">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="far fa-check-circle"></i></div>
|
||||
<div class="col"><i class="far fa-clipboard"></i></div>
|
||||
<div class="col"><i class="far fa-clock"></i></div>
|
||||
<div class="col"><i class="far fa-clone"></i></div>
|
||||
<div class="col"><i class="far fa-comment"></i></div>
|
||||
<div class="col"><i class="far fa-compass"></i></div>
|
||||
<div class="col"><i class="fas fa-desktop"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-envelope"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="fas fa-envelope-open-text"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-eye"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-eye-slash"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="far fa-file-alt"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<p class="mg-t-15 mg-b-0">See more FontAwesome icons at <a href="https://fontawesome.com/icons" target="_blank">FontAwesome Icons</a></p>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Ionicons Icons</div>
|
||||
<p class="mg-b-20">Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font.</p>
|
||||
<div class="az-icon-group bg-gray-200">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="icon ion-md-alarm"></i></div>
|
||||
<div class="col"><i class="icon ion-md-chatboxes"></i></div>
|
||||
<div class="col"><i class="icon ion-md-copy"></i></div>
|
||||
<div class="col"><i class="icon ion-md-cube"></i></div>
|
||||
<div class="col"><i class="icon ion-md-filing"></i></div>
|
||||
<div class="col"><i class="icon ion-md-eye"></i></div>
|
||||
<div class="col"><i class="icon ion-md-globe"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-md-images"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-md-laptop"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-md-paper"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-md-paper-plane"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-md-pricetags"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<div class="az-icon-group bg-gray-800 tx-white">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="icon ion-ios-settings"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-stats"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-share-alt"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-rocket"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-rainy"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-print"></i></div>
|
||||
<div class="col"><i class="icon ion-ios-pie"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-ios-person"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-ios-mic"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-ios-locate"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-ios-list-box"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="icon ion-ios-home"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<p class="mg-t-15 mg-b-0">See more Ionicons icons at <a href="https://ionicons.com" target="_blank">Ionicons</a></p>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Line Awesome</div>
|
||||
<p class="mg-b-20">Replace Font Awesome with modern line icons with a single line of code. </p>
|
||||
<div class="az-icon-group bg-gray-200">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="la la-archive"></i></div>
|
||||
<div class="col"><i class="la la-bar-chart"></i></div>
|
||||
<div class="col"><i class="la la-bell"></i></div>
|
||||
<div class="col"><i class="la la-bug"></i></div>
|
||||
<div class="col"><i class="la la-calendar"></i></div>
|
||||
<div class="col"><i class="la la-camera"></i></div>
|
||||
<div class="col"><i class="la la-cog"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-cube"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-envelope"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-film"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-folder"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-gift"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<div class="az-icon-group bg-gray-800 tx-white">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="la la-home"></i></div>
|
||||
<div class="col"><i class="la la-inbox"></i></div>
|
||||
<div class="col"><i class="la la-image"></i></div>
|
||||
<div class="col"><i class="la la-life-buoy"></i></div>
|
||||
<div class="col"><i class="la la-lock"></i></div>
|
||||
<div class="col"><i class="la la-microphone"></i></div>
|
||||
<div class="col"><i class="la la-phone"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-pie-chart"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-rocket"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-ship"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-sticky-note"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="la la-tags"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<p class="mg-t-15 mg-b-0">See more Line Awesome icons at <a href="https://icons8.com/line-awesome" target="_blank">Line Awesome</a></p>
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Typicons Icons</div>
|
||||
<p class="mg-b-20">Typicons are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app.</p>
|
||||
<div class="az-icon-group bg-gray-200">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="typcn typcn-archive"></i></div>
|
||||
<div class="col"><i class="typcn typcn-arrow-back-outline"></i></div>
|
||||
<div class="col"><i class="typcn typcn-arrow-right-outline"></i></div>
|
||||
<div class="col"><i class="typcn typcn-attachment-outline"></i></div>
|
||||
<div class="col"><i class="typcn typcn-bell"></i></div>
|
||||
<div class="col"><i class="typcn typcn-book"></i></div>
|
||||
<div class="col"><i class="typcn typcn-bookmark"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-briefcase"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-calendar-outline"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-camera-outline"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-chart-pie-outline"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-coffee"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<div class="az-icon-group bg-gray-800 tx-white">
|
||||
<div class="row row-xs">
|
||||
<div class="col"><i class="typcn typcn-document-add"></i></div>
|
||||
<div class="col"><i class="typcn typcn-document-delete"></i></div>
|
||||
<div class="col"><i class="typcn typcn-document-text"></i></div>
|
||||
<div class="col"><i class="typcn typcn-edit"></i></div>
|
||||
<div class="col"><i class="typcn typcn-export-outline"></i></div>
|
||||
<div class="col"><i class="typcn typcn-flash-outline"></i></div>
|
||||
<div class="col"><i class="typcn typcn-folder-open"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-folder"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-group-outline"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-mail"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-message"></i></div>
|
||||
<div class="col d-none d-sm-block"><i class="typcn typcn-shopping-cart"></i></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<p class="mg-t-15 mg-b-0">See more Typicons icons at <a href="https://www.s-ings.com/typicons/" target="_blank">Typicons Icons</a></p>
|
||||
<div class="mg-lg-b-30"></div>
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="../js/jquery.cookie.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
841
templates/demo/index.html.twig
Executable file
841
templates/demo/index.html.twig
Executable file
@@ -0,0 +1,841 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/flag-icon-css/css/flag-icon.min.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item active show">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content az-content-dashboard">
|
||||
<div class="container">
|
||||
<div class="az-content-body">
|
||||
<div class="az-dashboard-one-title">
|
||||
<div>
|
||||
<h2 class="az-dashboard-title">Hi, welcome back!</h2>
|
||||
<p class="az-dashboard-text">Your web analytics dashboard template.</p>
|
||||
</div>
|
||||
<div class="az-content-header-right">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Start Date</label>
|
||||
<h6>Oct 10, 2018</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>End Date</label>
|
||||
<h6>Oct 23, 2018</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Event Category</label>
|
||||
<h6>All Categories</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<a href="" class="btn btn-purple">Export</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-dashboard-one-title -->
|
||||
<div class="az-dashboard-nav">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" data-toggle="tab" href="#">Overview</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">Audiences</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">Demographics</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">More</a>
|
||||
</nav>
|
||||
<nav class="nav">
|
||||
<a class="nav-link" href="#"><i class="far fa-save"></i> Save Report</a>
|
||||
<a class="nav-link" href="#"><i class="far fa-file-pdf"></i> Export to PDF</a>
|
||||
<a class="nav-link" href="#"><i class="far fa-envelope"></i>Send to Email</a>
|
||||
<a class="nav-link" href="#"><i class="fas fa-ellipsis-h"></i></a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-7 ht-lg-100p">
|
||||
<div class="card card-dashboard-one">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h6 class="card-title">Website Audience Metrics</h6>
|
||||
<p class="card-text">Audience to which the users belonged while on the current date range.</p>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn active">Day</button>
|
||||
<button class="btn">Week</button>
|
||||
<button class="btn">Month</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="card-body-top">
|
||||
<div>
|
||||
<label class="mg-b-0">Users</label>
|
||||
<h2>13,956</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Bounce Rate</label>
|
||||
<h2>33.50%</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Page Views</label>
|
||||
<h2>83,123</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Sessions</label>
|
||||
<h2>16,869</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card-body-top -->
|
||||
<div class="flot-chart-wrapper">
|
||||
<div id="flotChart" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- flot-chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-5 mg-t-20 mg-lg-t-0">
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>33.50% <i class="icon ion-md-trending-up tx-success"></i> <small>18.02%</small></h6>
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<div id="flotChart1" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-sm-6 mg-t-20 mg-sm-t-0">
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>86k <i class="icon ion-md-trending-down tx-danger"></i> <small>0.86%</small></h6>
|
||||
<p>Total Users</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<div id="flotChart2" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-sm-12 mg-t-20">
|
||||
<div class="card card-dashboard-three">
|
||||
<div class="card-header">
|
||||
<p>All Sessions</p>
|
||||
<h6>16,869 <small class="tx-success"><i class="icon ion-md-arrow-up"></i> 2.87%</small></h6>
|
||||
<small>The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc.</small>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart">
|
||||
<canvas id="chartBar5"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!--col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-dashboard-pageviews">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Page Views by Page Title</h6>
|
||||
<p class="card-text">This report is based on 100% of sessions.</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Admin Home</h6>
|
||||
<span>/demo/admin/{{ path('app_demo_index') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">7,755</h6>
|
||||
<span>31.74% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Elements</h6>
|
||||
<span>/demo/admin/forms.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">5,215</h6>
|
||||
<span>28.53% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Utilities</h6>
|
||||
<span>/demo/admin/util.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">4,848</h6>
|
||||
<span>25.35% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Validation</h6>
|
||||
<span>/demo/admin/validation.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,275</h6>
|
||||
<span>23.17% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Modals</h6>
|
||||
<span>/demo/admin/modals.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,003</h6>
|
||||
<span>22.21% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-dashboard-four">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Sessions by Channel</h6>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row">
|
||||
<div class="col-md-6 d-flex align-items-center">
|
||||
<div class="chart">
|
||||
<canvas id="chartDonut"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-md-6 col-lg-5 mg-lg-l-auto mg-t-20 mg-md-t-0">
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Organic Search</span>
|
||||
<span>1,320 <span>(25%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Email</span>
|
||||
<span>987 <span>(20%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Referral</span>
|
||||
<span>2,010 <span>(30%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Social</span>
|
||||
<span>654 <span>(15%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-teal wd-15p" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Other</span>
|
||||
<span>400 <span>(10%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-four -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-b-20 mg-lg-b-0">
|
||||
<div class="col-lg-5 col-xl-4">
|
||||
<div class="row row-sm">
|
||||
<div class="col-md-6 col-lg-12 mg-b-20 mg-md-b-0 mg-lg-b-20">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Acquisition</h6>
|
||||
<span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-primary">
|
||||
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 20, "height": 20 }'>6,4,7,5,7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Bounce Rate</label>
|
||||
<h4>33.50%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-purple">
|
||||
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 21, "height": 20 }'>7,4,5,7,2</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sessions</label>
|
||||
<h4>9,065</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-five -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-md-6 col-lg-12">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Sessions</h6>
|
||||
<span class="card-text"> A session is the period time a user is actively engaged with your website, app, etc.</span>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
||||
<span class="peity-donut" data-peity='{ "fill": ["#007bff", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>4/7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>% New Sessions</label>
|
||||
<h4>26.80%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
||||
<span class="peity-donut" data-peity='{ "fill": ["#00cccc", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>2/7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Pages/Session</label>
|
||||
<h4>1,005</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-five -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!-- col-lg-3 -->
|
||||
<div class="col-lg-7 col-xl-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-table-one">
|
||||
<h6 class="card-title">What pages do your users visit</h6>
|
||||
<p class="az-content-text mg-b-20">Part of this date range occurs before the new users metric had been calculated, so the old users metric is displayed.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-5p"> </th>
|
||||
<th class="wd-45p">Country</th>
|
||||
<th>Entrances</th>
|
||||
<th>Bounce Rate</th>
|
||||
<th>Exits</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-us flag-icon-squared"></i></td>
|
||||
<td><strong>United States</strong></td>
|
||||
<td><strong>134</strong> (1.51%)</td>
|
||||
<td>33.58%</td>
|
||||
<td>15.47%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-gb flag-icon-squared"></i></td>
|
||||
<td><strong>United Kingdom</strong></td>
|
||||
<td><strong>290</strong> (3.30%)</td>
|
||||
<td>9.22%</td>
|
||||
<td>7.99%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-in flag-icon-squared"></i></td>
|
||||
<td><strong>India</strong></td>
|
||||
<td><strong>250</strong> (3.00%)</td>
|
||||
<td>20.75%</td>
|
||||
<td>2.40%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-ca flag-icon-squared"></i></td>
|
||||
<td><strong>Canada</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-fr flag-icon-squared"></i></td>
|
||||
<td><strong>France</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-ph flag-icon-squared"></i></td>
|
||||
<td><strong>Philippines</strong></td>
|
||||
<td><strong>197</strong> (2.12%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table-responsive -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col-lg -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<div class="az-footer ht-40">
|
||||
<div class="container ht-100p pd-t-0-f">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.resize.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/peity/jquery.peity.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/chart.flot.sampledata.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dashboard.sampledata.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
var plot = $.plot('#flotChart', [{
|
||||
data: flotSampleData3,
|
||||
color: '#007bff',
|
||||
lines: {
|
||||
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
||||
}
|
||||
},{
|
||||
data: flotSampleData4,
|
||||
color: '#560bd0',
|
||||
lines: {
|
||||
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
||||
}
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 8
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
ticks: [[0,''],[20,'20K'],[40,'40K'],[60,'60K'],[80,'80K']],
|
||||
tickColor: '#eee'
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
ticks: [[25,'OCT 21'],[75,'OCT 22'],[100,'OCT 23'],[125,'OCT 24']],
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotChart1', [{
|
||||
data: dashData2,
|
||||
color: '#00cccc'
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true,
|
||||
fillColor: { colors: [ { opacity: 0.2 }, { opacity: 0.2 } ] }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 0
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 35
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
max: 50
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotChart2', [{
|
||||
data: dashData2,
|
||||
color: '#007bff'
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fill: 1,
|
||||
barWidth: .5
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 0
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 35
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
max: 20
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//-------------------------------------------------------------//
|
||||
|
||||
|
||||
// Line chart
|
||||
$('.peity-line').peity('line');
|
||||
|
||||
// Bar charts
|
||||
$('.peity-bar').peity('bar');
|
||||
|
||||
// Bar charts
|
||||
$('.peity-donut').peity('donut');
|
||||
|
||||
var ctx5 = document.getElementById('chartBar5').getContext('2d');
|
||||
new Chart(ctx5, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [0,1,2,3,4,5,6,7],
|
||||
datasets: [{
|
||||
data: [2, 4, 10, 20, 45, 40, 35, 18],
|
||||
backgroundColor: '#560bd0'
|
||||
}, {
|
||||
data: [3, 6, 15, 35, 50, 45, 35, 25],
|
||||
backgroundColor: '#cad0e8'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
labels: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
max: 80
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.08)'
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Donut Chart
|
||||
var datapie = {
|
||||
labels: ['Search', 'Email', 'Referral', 'Social', 'Other'],
|
||||
datasets: [{
|
||||
data: [25,20,30,15,10],
|
||||
backgroundColor: ['#6f42c1', '#007bff','#17a2b8','#00cccc','#adb2bd']
|
||||
}]
|
||||
};
|
||||
|
||||
var optionpie = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
};
|
||||
|
||||
// For a doughnut chart
|
||||
var ctxpie= document.getElementById('chartDonut');
|
||||
var myPieChart6 = new Chart(ctxpie, {
|
||||
type: 'doughnut',
|
||||
data: datapie,
|
||||
options: optionpie
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
87
templates/demo/signin.html.twig
Normal file
87
templates/demo/signin.html.twig
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body class="az-body">
|
||||
<div class="az-signin-wrapper">
|
||||
<div class="az-card-signin">
|
||||
<h1 class="az-logo">az<span>i</span>a</h1>
|
||||
<div class="az-signin-header">
|
||||
<h2>Welcome back!</h2>
|
||||
<h4>Please sign in to continue</h4>
|
||||
<form action="{{ path('app_demo_index') }}">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="text" class="form-control" placeholder="Enter your email" value="demo@bootstrapdash.com">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" placeholder="Enter your password" value="thisisademo">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<button class="btn btn-az-primary btn-block">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- az-signin-header -->
|
||||
<div class="az-signin-footer">
|
||||
<p><a href="">Forgot password?</a></p>
|
||||
<p>Don't have an account? <a href="{{ path('app_demo_signup') }}">Create an Account</a></p>
|
||||
</div>
|
||||
<!-- az-signin-footer -->
|
||||
</div>
|
||||
<!-- az-card-signin -->
|
||||
</div>
|
||||
<!-- az-signin-wrapper -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
107
templates/demo/signup.html.twig
Normal file
107
templates/demo/signup.html.twig
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body class="az-body">
|
||||
<div class="az-signup-wrapper">
|
||||
<div class="az-column-signup-left">
|
||||
<div>
|
||||
<i class="typcn typcn-chart-bar-outline"></i>
|
||||
<h1 class="az-logo">az<span>i</span>a</h1>
|
||||
<h5>Responsive Modern Dashboard & Admin Template</h5>
|
||||
<p>We are excited to launch our new company and product Azia. After being featured in too many magazines to mention and having created an online stir, we know that BootstrapDash is going to be big. We also hope to win Startup Fictional Business of the Year this year.</p>
|
||||
<p>Browse our site and see for yourself why you need Azia.</p>
|
||||
<a href="{{ path('app_demo_index') }}" class="btn btn-outline-indigo">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-column-signup-left -->
|
||||
<div class="az-column-signup">
|
||||
<h1 class="az-logo">az<span>i</span>a</h1>
|
||||
<div class="az-signup-header">
|
||||
<h2>Get Started</h2>
|
||||
<h4>It's free to signup and only takes a minute.</h4>
|
||||
<form action="page-profile.html">
|
||||
<div class="form-group">
|
||||
<label>Firstname & Lastname</label>
|
||||
<input type="text" class="form-control" placeholder="Enter your firstname and lastname">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="text" class="form-control" placeholder="Enter your email">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" placeholder="Enter your password">
|
||||
</div>
|
||||
<!-- form-group -->
|
||||
<button class="btn btn-az-primary btn-block">Create Account</button>
|
||||
<div class="row row-xs">
|
||||
<div class="col-sm-6"><button class="btn btn-block"><i class="fab fa-facebook-f"></i> Signup with Facebook</button></div>
|
||||
<div class="col-sm-6 mg-t-10 mg-sm-t-0"><button class="btn btn-primary btn-block"><i class="fab fa-twitter"></i> Signup with Twitter</button></div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- az-signup-header -->
|
||||
<div class="az-signup-footer">
|
||||
<p>Already have an account? <a href="{{ path('app_demo_signin') }}">Sign In</a></p>
|
||||
</div>
|
||||
<!-- az-signin-footer -->
|
||||
</div>
|
||||
<!-- az-column-signup -->
|
||||
</div>
|
||||
<!-- az-signup-wrapper -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
428
templates/demo/table.html.twig
Normal file
428
templates/demo/table.html.twig
Normal file
@@ -0,0 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link active">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>Tables</span>
|
||||
<span>Basic Tables</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Basic Tables</h2>
|
||||
<div class="az-content-label mg-b-5">Simple Table</div>
|
||||
<p class="mg-b-20">Using the most basic table markup.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table-responsive -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Striped Rows</div>
|
||||
<p class="mg-b-20">Add zebra-striping to any table row.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- bd -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Bordered Table</div>
|
||||
<p class="mg-b-20">Add borders on all sides of the table and cells.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table-responsive -->
|
||||
<hr class="mg-y-30">
|
||||
<div class="az-content-label mg-b-5">Hoverable Rows Table</div>
|
||||
<p class="mg-b-20">To enable a hover state on table rows.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table-responsive -->
|
||||
<div class="ht-40"></div>
|
||||
<div class="az-footer mg-t-auto">
|
||||
<div class="container">
|
||||
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
||||
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-footer -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="../js/jquery.cookie.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
654
templates/home/index.html.twig
Normal file
654
templates/home/index.html.twig
Normal file
@@ -0,0 +1,654 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Page d'accueil{% endblock %}
|
||||
|
||||
{% set navbarTitle = "Page d'accueil" %}
|
||||
{#
|
||||
{% set navbarPages = [{'page':"Page d'accueil", 'url':null }] %}
|
||||
#}
|
||||
{% block content %}
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content az-content-dashboard">
|
||||
<div class="container">
|
||||
<div class="az-content-body">
|
||||
<div class="az-dashboard-one-title">
|
||||
<div>
|
||||
<h2 class="az-dashboard-title">Hi, welcome back!</h2>
|
||||
<p class="az-dashboard-text">Your web analytics dashboard template.</p>
|
||||
</div>
|
||||
<div class="az-content-header-right">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Start Date</label>
|
||||
<h6>Oct 10, 2018</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>End Date</label>
|
||||
<h6>Oct 23, 2018</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<label>Event Category</label>
|
||||
<h6>All Categories</h6>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<a href="" class="btn btn-purple">Export</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-dashboard-one-title -->
|
||||
<div class="az-dashboard-nav">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" data-toggle="tab" href="#">Overview</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">Audiences</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">Demographics</a>
|
||||
<a class="nav-link" data-toggle="tab" href="#">More</a>
|
||||
</nav>
|
||||
<nav class="nav">
|
||||
<a class="nav-link" href="#"><i class="far fa-save"></i> Save Report</a>
|
||||
<a class="nav-link" href="#"><i class="far fa-file-pdf"></i> Export to PDF</a>
|
||||
<a class="nav-link" href="#"><i class="far fa-envelope"></i>Send to Email</a>
|
||||
<a class="nav-link" href="#"><i class="fas fa-ellipsis-h"></i></a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-7 ht-lg-100p">
|
||||
<div class="card card-dashboard-one">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h6 class="card-title">Website Audience Metrics</h6>
|
||||
<p class="card-text">Audience to which the users belonged while on the current date range.</p>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn active">Day</button>
|
||||
<button class="btn">Week</button>
|
||||
<button class="btn">Month</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="card-body-top">
|
||||
<div>
|
||||
<label class="mg-b-0">Users</label>
|
||||
<h2>13,956</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Bounce Rate</label>
|
||||
<h2>33.50%</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Page Views</label>
|
||||
<h2>83,123</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mg-b-0">Sessions</label>
|
||||
<h2>16,869</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card-body-top -->
|
||||
<div class="flot-chart-wrapper">
|
||||
<div id="flotChart" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- flot-chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-5 mg-t-20 mg-lg-t-0">
|
||||
<div class="row row-sm">
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>33.50% <i class="icon ion-md-trending-up tx-success"></i> <small>18.02%</small></h6>
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<div id="flotChart1" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-sm-6 mg-t-20 mg-sm-t-0">
|
||||
<div class="card card-dashboard-two">
|
||||
<div class="card-header">
|
||||
<h6>86k <i class="icon ion-md-trending-down tx-danger"></i> <small>0.86%</small></h6>
|
||||
<p>Total Users</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<div id="flotChart2" class="flot-chart"></div>
|
||||
</div>
|
||||
<!-- chart-wrapper -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-sm-12 mg-t-20">
|
||||
<div class="card card-dashboard-three">
|
||||
<div class="card-header">
|
||||
<p>All Sessions</p>
|
||||
<h6>16,869 <small class="tx-success"><i class="icon ion-md-arrow-up"></i> 2.87%</small></h6>
|
||||
<small>The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc.</small>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="chart">
|
||||
<canvas id="chartBar5"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!--col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-b-20">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-dashboard-pageviews">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Page Views by Page Title</h6>
|
||||
<p class="card-text">This report is based on 100% of sessions.</p>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body">
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Admin Home</h6>
|
||||
<span>/demo/admin/{{ path('app_demo_index') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">7,755</h6>
|
||||
<span>31.74% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Elements</h6>
|
||||
<span>/demo/admin/forms.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">5,215</h6>
|
||||
<span>28.53% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Utilities</h6>
|
||||
<span>/demo/admin/util.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">4,848</h6>
|
||||
<span>25.35% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Form Validation</h6>
|
||||
<span>/demo/admin/validation.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,275</h6>
|
||||
<span>23.17% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
<div class="az-list-item">
|
||||
<div>
|
||||
<h6>Modals</h6>
|
||||
<span>/demo/admin/modals.html</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="tx-primary">3,003</h6>
|
||||
<span>22.21% (-100.00%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list-group-item -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-lg-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-dashboard-four">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Sessions by Channel</h6>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row">
|
||||
<div class="col-md-6 d-flex align-items-center">
|
||||
<div class="chart">
|
||||
<canvas id="chartDonut"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-md-6 col-lg-5 mg-lg-l-auto mg-t-20 mg-md-t-0">
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Organic Search</span>
|
||||
<span>1,320 <span>(25%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Email</span>
|
||||
<span>987 <span>(20%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Referral</span>
|
||||
<span>2,010 <span>(30%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Social</span>
|
||||
<span>654 <span>(15%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-teal wd-15p" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
<div class="az-traffic-detail-item">
|
||||
<div>
|
||||
<span>Other</span>
|
||||
<span>400 <span>(10%)</span></span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- progress -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-four -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<div class="row row-sm mg-b-20 mg-lg-b-0">
|
||||
<div class="col-lg-5 col-xl-4">
|
||||
<div class="row row-sm">
|
||||
<div class="col-md-6 col-lg-12 mg-b-20 mg-md-b-0 mg-lg-b-20">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Acquisition</h6>
|
||||
<span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-primary">
|
||||
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 20, "height": 20 }'>6,4,7,5,7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Bounce Rate</label>
|
||||
<h4>33.50%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="card-chart bg-purple">
|
||||
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 21, "height": 20 }'>7,4,5,7,2</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sessions</label>
|
||||
<h4>9,065</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-five -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-md-6 col-lg-12">
|
||||
<div class="card card-dashboard-five">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title">Sessions</h6>
|
||||
<span class="card-text"> A session is the period time a user is actively engaged with your website, app, etc.</span>
|
||||
</div>
|
||||
<!-- card-header -->
|
||||
<div class="card-body row row-sm">
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
||||
<span class="peity-donut" data-peity='{ "fill": ["#007bff", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>4/7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>% New Sessions</label>
|
||||
<h4>26.80%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
<div class="col-6 d-sm-flex align-items-center">
|
||||
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
||||
<span class="peity-donut" data-peity='{ "fill": ["#00cccc", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>2/7</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Pages/Session</label>
|
||||
<h4>1,005</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- card-body -->
|
||||
</div>
|
||||
<!-- card-dashboard-five -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!-- col-lg-3 -->
|
||||
<div class="col-lg-7 col-xl-8 mg-t-20 mg-lg-t-0">
|
||||
<div class="card card-table-one">
|
||||
<h6 class="card-title">What pages do your users visit</h6>
|
||||
<p class="az-content-text mg-b-20">Part of this date range occurs before the new users metric had been calculated, so the old users metric is displayed.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wd-5p"> </th>
|
||||
<th class="wd-45p">Country</th>
|
||||
<th>Entrances</th>
|
||||
<th>Bounce Rate</th>
|
||||
<th>Exits</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-us flag-icon-squared"></i></td>
|
||||
<td><strong>United States</strong></td>
|
||||
<td><strong>134</strong> (1.51%)</td>
|
||||
<td>33.58%</td>
|
||||
<td>15.47%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-gb flag-icon-squared"></i></td>
|
||||
<td><strong>United Kingdom</strong></td>
|
||||
<td><strong>290</strong> (3.30%)</td>
|
||||
<td>9.22%</td>
|
||||
<td>7.99%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-in flag-icon-squared"></i></td>
|
||||
<td><strong>India</strong></td>
|
||||
<td><strong>250</strong> (3.00%)</td>
|
||||
<td>20.75%</td>
|
||||
<td>2.40%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-ca flag-icon-squared"></i></td>
|
||||
<td><strong>Canada</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-fr flag-icon-squared"></i></td>
|
||||
<td><strong>France</strong></td>
|
||||
<td><strong>216</strong> (2.79%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="flag-icon flag-icon-ph flag-icon-squared"></i></td>
|
||||
<td><strong>Philippines</strong></td>
|
||||
<td><strong>197</strong> (2.12%)</td>
|
||||
<td>32.07%</td>
|
||||
<td>15.09%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table-responsive -->
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- col-lg -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
</div>
|
||||
{% block javascripts %}
|
||||
<script src="{{ asset('assets/js/chart.flot.sampledata.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dashboard.sampledata.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
var plot = $.plot('#flotChart', [{
|
||||
data: flotSampleData3,
|
||||
color: '#007bff',
|
||||
lines: {
|
||||
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
||||
}
|
||||
},{
|
||||
data: flotSampleData4,
|
||||
color: '#560bd0',
|
||||
lines: {
|
||||
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
||||
}
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 8
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
ticks: [[0,''],[20,'20K'],[40,'40K'],[60,'60K'],[80,'80K']],
|
||||
tickColor: '#eee'
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
ticks: [[25,'OCT 21'],[75,'OCT 22'],[100,'OCT 23'],[125,'OCT 24']],
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotChart1', [{
|
||||
data: dashData2,
|
||||
color: '#00cccc'
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true,
|
||||
fillColor: { colors: [ { opacity: 0.2 }, { opacity: 0.2 } ] }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 0
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 35
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
max: 50
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotChart2', [{
|
||||
data: dashData2,
|
||||
color: '#007bff'
|
||||
}], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fill: 1,
|
||||
barWidth: .5
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
labelMargin: 0
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 35
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
max: 20
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//-------------------------------------------------------------//
|
||||
|
||||
|
||||
// Line chart
|
||||
$('.peity-line').peity('line');
|
||||
|
||||
// Bar charts
|
||||
$('.peity-bar').peity('bar');
|
||||
|
||||
// Bar charts
|
||||
$('.peity-donut').peity('donut');
|
||||
|
||||
var ctx5 = document.getElementById('chartBar5').getContext('2d');
|
||||
new Chart(ctx5, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [0,1,2,3,4,5,6,7],
|
||||
datasets: [{
|
||||
data: [2, 4, 10, 20, 45, 40, 35, 18],
|
||||
backgroundColor: '#560bd0'
|
||||
}, {
|
||||
data: [3, 6, 15, 35, 50, 45, 35, 25],
|
||||
backgroundColor: '#cad0e8'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
labels: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
max: 80
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.08)'
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
fontSize: 11,
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Donut Chart
|
||||
var datapie = {
|
||||
labels: ['Search', 'Email', 'Referral', 'Social', 'Other'],
|
||||
datasets: [{
|
||||
data: [25,20,30,15,10],
|
||||
backgroundColor: ['#6f42c1', '#007bff','#17a2b8','#00cccc','#adb2bd']
|
||||
}]
|
||||
};
|
||||
|
||||
var optionpie = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
};
|
||||
|
||||
// For a doughnut chart
|
||||
var ctxpie= document.getElementById('chartDonut');
|
||||
var myPieChart6 = new Chart(ctxpie, {
|
||||
type: 'doughnut',
|
||||
data: datapie,
|
||||
options: optionpie
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
260
templates/investigation/add-index.html.twig
Normal file
260
templates/investigation/add-index.html.twig
Normal file
@@ -0,0 +1,260 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Enquête{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% set prototypeHtml %}
|
||||
{% include 'investigation/form-question.html.twig' with { formQtn: form.questions.vars.prototype } %}
|
||||
{% endset %}
|
||||
|
||||
<style>
|
||||
|
||||
.save-question {
|
||||
position: fixed; right: 80px; top: 65%; width:215px;
|
||||
}
|
||||
|
||||
.add-question {
|
||||
position: fixed; right: 80px; top: 73%;
|
||||
}
|
||||
|
||||
.investigation-ready {
|
||||
position: fixed; right: 80px; top: 81%; width:215px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Enquête</span>
|
||||
<span>Création</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Enquête</h2>
|
||||
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Créer une nouvelle enquête</p>
|
||||
|
||||
|
||||
{{ form_start(form) }}
|
||||
<div class="tab-vertical mb-3" id="investigation-information">
|
||||
<ul class="nav nav-tabs" id="myTab3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="en-vertical-tab" data-toggle="tab" href="#en-vertical" role="tab" aria-controls="home" aria-selected="true">🇬🇧 English (UK)</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="fr-vertical-tab" data-toggle="tab" href="#fr-vertical" role="tab" aria-controls="profile" aria-selected="false">🇫🇷 Français</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="ar-vertical-tab" data-toggle="tab" href="#ar-vertical" role="tab" aria-controls="contact" aria-selected="false">🇸🇦 العربية</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent3">
|
||||
<div class="tab-pane fade show active" id="en-vertical" role="tabpanel" aria-labelledby="en-vertical-tab">
|
||||
<div class="form-group col-sm-12">
|
||||
<label for="{{ form.name_en.vars.id }}">{{ form_label(form.name_en) }}</label>
|
||||
{{ form_widget(form.name_en, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
<div class="form-group col-sm-12">
|
||||
<label for="{{ form.source_en.vars.id }}">{{ form_label(form.source_en) }}</label>
|
||||
{{ form_widget(form.source_en, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="fr-vertical" role="tabpanel" aria-labelledby="fr-vertical-tab">
|
||||
<div class="form-group col-sm-12">
|
||||
<label for="{{ form.name_fr.vars.id }}">{{ form_label(form.name_fr) }}</label>
|
||||
{{ form_widget(form.name_fr, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
<div class="form-group col-sm-12">
|
||||
<label for="{{ form.source_fr.vars.id }}">{{ form_label(form.source_fr) }}</label>
|
||||
{{ form_widget(form.source_fr, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="ar-vertical" role="tabpanel" aria-labelledby="ar-vertical-tab">
|
||||
<div class="form-group">
|
||||
<label for="{{ form.name_ar.vars.id }}">{{ form_label(form.name_ar) }}</label>
|
||||
{{ form_widget(form.name_ar, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="{{ form.source_ar.vars.id }}">{{ form_label(form.source_ar) }}</label>
|
||||
{{ form_widget(form.source_ar, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="questions-collection" data-prototype="{{ prototypeHtml|e('html_attr') }}" data-index="{{ form|length }}">
|
||||
{% for formQuestion in form.questions %}
|
||||
<div class="question-item">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card border-left border-primary">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-5 question-number">Question N: {{ loop.index }}</h5>
|
||||
</div>
|
||||
<div class="col-md-3 offset-2">
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
|
||||
<i class="fa fa-eye"></i>Afficher
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-2 offset-2">
|
||||
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQuestion.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_en.vars.id }}">{{ form_label(formQuestion.name_en) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQuestion.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_fr.vars.id }}">{{ form_label(formQuestion.name_fr) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQuestion.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_ar.vars.id }}">{{ form_label(formQuestion.name_ar) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
<label for="{{ formQuestion.amount.vars.id }}">{{ form_label(formQuestion.amount) }}</label>
|
||||
{{ form_widget(formQuestion.amount, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
<label for="{{ formQuestion.max_participant.vars.id }}">{{ form_label(formQuestion.max_participant) }}</label>
|
||||
{{ form_widget(formQuestion.max_participant, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="card-title mt-4">Modalité</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group ">
|
||||
<label>{{ form_label(formQuestion.type_modality) }}</label>
|
||||
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-4">
|
||||
<div class="form-group">
|
||||
{% for key,child in formQuestion.choice %}
|
||||
<div class="custom-control-inline">
|
||||
{{ form_widget(child) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-info rounded-pill add-question">
|
||||
<i class="typcn typcn-folder"></i>
|
||||
Ajouter un autre question
|
||||
</button>
|
||||
{{ form_row(form.save, {'attr': {'class': 'btn btn-success rounded-pill save-question' }}) }}
|
||||
|
||||
{{ form_end(form) }}
|
||||
|
||||
{% if app.request.attributes.get('_route') == 'app_investigation_edit' %}
|
||||
<a href="{{ path('app_investigation_ready', {id: investigation.id}) }}" class="btn btn-secondary rounded-pill investigation-ready">
|
||||
Enquête Prête
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% block javascripts %}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
console.log("ddddd");
|
||||
var $collection = $('#questions-collection');
|
||||
var $addButton = $('.add-question');
|
||||
|
||||
// Compter les questions existantes
|
||||
$collection.data('index', $collection.find('.question-item').length);
|
||||
|
||||
|
||||
$addButton.on('click', function() {
|
||||
var index = $collection.data('index');
|
||||
|
||||
var prototype = $collection.data('prototype');
|
||||
|
||||
var newForm = prototype.replace(/__name__/g, index);
|
||||
|
||||
var $newElement = $('<div class="row question-item"></div>');
|
||||
|
||||
$newElement.append(newForm);
|
||||
$collection.append($newElement);
|
||||
|
||||
// Mettre à jour l'index
|
||||
$collection.data('index', index + 1);
|
||||
|
||||
// Afficher les boutons supprimer
|
||||
$('.remove-question').show();
|
||||
|
||||
updateIndexes();
|
||||
|
||||
$("html, body").animate({
|
||||
scrollTop: $(window).scrollTop() + 700
|
||||
}, 400);
|
||||
|
||||
});
|
||||
|
||||
// Suppression des questions
|
||||
$collection.on('click', '.remove-question', function() {
|
||||
console.log($('.question-item').length);
|
||||
if ($('.question-item').length > 1) {
|
||||
$(this).closest('.question-item').remove();
|
||||
console.log($(this).closest('.question-item').remove());
|
||||
updateIndexes();
|
||||
|
||||
// Cacher le bouton supprimer s'il ne reste qu'une question
|
||||
if ($('.question-item').length === 1) {
|
||||
$('.remove-question').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateIndexes() {
|
||||
$('.question-item').each(function(index) {
|
||||
$(this).find('h5').text('Question N: ' + (index + 1));
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
75
templates/investigation/admin-active.html.twig
Normal file
75
templates/investigation/admin-active.html.twig
Normal file
@@ -0,0 +1,75 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Enquête{% endblock %}
|
||||
|
||||
{% set navbarTitle = "Enquête" %}
|
||||
{% set navbarPages = [{'page':"Gestion", 'url':null }] %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Page Content -->
|
||||
<div id="content-page" class="content-page">
|
||||
<div class="container-fluid">
|
||||
<div class="iq-card">
|
||||
<div class="iq-card-header d-flex justify-content-between">
|
||||
<div class="iq-header-title">
|
||||
<h4 class="card-title">Liste des enquêtes à activer</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iq-card-body">
|
||||
<div class="table-responsive">
|
||||
<table id="user-list-table" class="table table-striped table-bordered" role="grid" aria-describedby="user-list-page-info">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Date Create</th>
|
||||
<th>Questions</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for investigation in investigations %}
|
||||
<tr>
|
||||
<td>{{ investigation.getId() }}</td>
|
||||
<td>{{ investigation.getNameEn() }}</td>
|
||||
<td>{{ investigation.getDateCreate()|date("d/m/Y H:i") }}</td>
|
||||
<td>{{ investigation.getNbrQuestions() }}</td>
|
||||
<td>
|
||||
{% if investigation.getLastState() == 10 %}
|
||||
<div class="badge badge-info">Création Terminer </div>
|
||||
{% elseif investigation.getLastState() == 11 %}
|
||||
<div class="badge badge-light">Encour de Création</div>
|
||||
{% elseif investigation.getLastState() == 12 %}
|
||||
<div class="badge badge-dark">Dupliquer</div>
|
||||
{% elseif investigation.getLastState() == 20 %}
|
||||
<div class="badge badge-success">Demande Valider</div>
|
||||
{% elseif investigation.getLastState() == 21 %}
|
||||
<div class="badge badge-warning text-white">Demande Envoyer</div>
|
||||
{% elseif investigation.getLastState() == 22 %}
|
||||
<div class="badge badge-danger text-white">Demande Rejeter</div>
|
||||
{% else %}
|
||||
--
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ path('app_investigation_admin_active', {id:investigation.getId()}) }}" class="">activer</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrapper END -->
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
81
templates/investigation/form-question.html.twig
Normal file
81
templates/investigation/form-question.html.twig
Normal file
@@ -0,0 +1,81 @@
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card border-left border-primary">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-5 question-number">Question N: </h5>
|
||||
</div>
|
||||
<div class="col-md-3 offset-2">
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
|
||||
<i class="fa fa-eye"></i>Afficher
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-2 offset-2">
|
||||
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.title.vars.id }}">{{ form_label(formQtn.title) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_en.vars.id }}">{{ form_label(formQtn.name_en) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_fr.vars.id }}">{{ form_label(formQtn.name_fr) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_ar.vars.id }}">{{ form_label(formQtn.name_ar) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
<label for="{{ formQtn.amount.vars.id }}">{{ form_label(formQtn.amount) }}</label>
|
||||
{{ form_widget(formQtn.amount, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
<label for="{{ formQtn.max_participant.vars.id }}">{{ form_label(formQtn.max_participant) }}</label>
|
||||
{{ form_widget(formQtn.max_participant, {'attr': {'class': 'form-control' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="card-title mt-4">Modalité</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group ">
|
||||
<label>{{ form_label(formQtn.type_modality) }}</label>
|
||||
{{ form_widget(formQtn.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-4">
|
||||
<div class="iq-card-body">
|
||||
{% for child in formQtn.choice %}
|
||||
<div class="custom-control custom-radio custom-radio-color-checked custom-control-inline">
|
||||
{{ form_widget(child, {'attr': {'class': 'custom-control-input bg-success' }}) }}
|
||||
<label class="custom-control-label" for="{{ child.vars.id }}"> {{ form_label(child) }} </label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
105
templates/investigation/index.html.twig
Normal file
105
templates/investigation/index.html.twig
Normal file
@@ -0,0 +1,105 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Enquête{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Enquête</span>
|
||||
<span>Gestion</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Enquête</h2>
|
||||
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Liste des enquêtes prêt a envoyer à l’administration pour valider</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Demande de validation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for invest in invesAdmins %}
|
||||
<tr>
|
||||
<td>{{ invest.getId() }}</td>
|
||||
<td>{{ invest.getNameEn() }}</td>
|
||||
<td><a href="{{ path('app_investigation_send_validation', {id:invest.getId()}) }}" class="btn btn-success btn-sm">Envoyer</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- table-responsive -->
|
||||
|
||||
|
||||
<hr class="mg-y-30">
|
||||
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Liste des enquêtes prêt a envoyer à l’administration pour valider</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mg-b-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Date Create</th>
|
||||
<th>Questions</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for investigation in investigations %}
|
||||
<tr>
|
||||
<td>{{ investigation.getId() }}</td>
|
||||
<td>{{ investigation.getNameEn() }}</td>
|
||||
<td>{{ investigation.getDateCreate()|date("d/m/Y H:i") }}</td>
|
||||
<td>{{ investigation.getNbrQuestions() }}</td>
|
||||
<td>
|
||||
{% if investigation.getLastState() == 10 %}
|
||||
<div class="badge badge-info">Création Terminer </div>
|
||||
{% elseif investigation.getLastState() == 11 %}
|
||||
<div class="badge badge-light">Encour de Création</div>
|
||||
{% elseif investigation.getLastState() == 12 %}
|
||||
<div class="badge badge-dark">Dupliquer</div>
|
||||
{% elseif investigation.getLastState() == 20 %}
|
||||
<div class="badge badge-success">Demande Valider</div>
|
||||
{% elseif investigation.getLastState() == 21 %}
|
||||
<div class="badge badge-warning text-white">Demande Envoyer</div>
|
||||
{% elseif investigation.getLastState() == 22 %}
|
||||
<div class="badge badge-danger text-white">Demande Rejeter</div>
|
||||
{% else %}
|
||||
--
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-icon-list">
|
||||
<a class="btn btn-indigo btn-icon" title="duplicate" href="{{ path('app_investigation_duplicate', {id:investigation.getId()}) }}"><i class="ion ion-ios-git-branch"></i></a>
|
||||
<a class="btn btn-indigo btn-icon" title="Edit" href="{{ path('app_investigation_edit', {id:investigation.getId()}) }}"><i class="typcn typcn-edit"></i></a>
|
||||
<a class="btn btn-indigo btn-icon" title="Afficher" href="{{ path('app_investigation_show', {id:investigation.getId()}) }}"><i class="ion ion-ios-tv"></i></a>
|
||||
<a class="btn btn-danger btn-icon" title="Delete" href="{{ path('app_investigation_delete', {id:investigation.getId()}) }}"><i class="ion ion-md-trash"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- table-responsive -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
114
templates/investigation/show.html.twig
Normal file
114
templates/investigation/show.html.twig
Normal file
@@ -0,0 +1,114 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Enquête{% endblock %}
|
||||
|
||||
{% set state = investigation. getState() %}
|
||||
|
||||
{% if state != null %}
|
||||
{% set step1 = "" %}
|
||||
{% set step2 = "" %}
|
||||
{% set step3 = "" %}
|
||||
{% set step4 = "" %}
|
||||
{% set active1 = "" %}
|
||||
{% set active2 = "" %}
|
||||
{% set active3 = "" %}
|
||||
{% set active4 = "" %}
|
||||
{% set width = "0%" %}
|
||||
|
||||
{% if state.getStep() == 1 %}
|
||||
{% set step1 = "completed" %}
|
||||
{% set active1 = "active" %}
|
||||
{% set width = "10%" %}
|
||||
{% elseif state.getStep() == 2 %}
|
||||
{% set step1 = "completed" %}
|
||||
{% set step2 = "completed" %}
|
||||
{% set active2 = "active" %}
|
||||
{% set width = "50%" %}
|
||||
{% elseif state.getStep() == 3 %}
|
||||
{% set step1 = "completed" %}
|
||||
{% set step2 = "completed" %}
|
||||
{% set step3 = "completed" %}
|
||||
{% set active3 = "active" %}
|
||||
{% set width = "75%" %}
|
||||
{% elseif state.getStep() == 4 %}
|
||||
{% set step1 = "completed" %}
|
||||
{% set step2 = "completed" %}
|
||||
{% set step3 = "completed" %}
|
||||
{% set step4 = "completed" %}
|
||||
{% set active4 = "active" %}
|
||||
{% set width = "100%" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Enquête</span>
|
||||
<span>Affichage</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Enquête</h2>
|
||||
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20"></p>
|
||||
|
||||
|
||||
<div class="card bd-0">
|
||||
<div class="card-header tx-medium bd-0">
|
||||
🇬🇧 English (UK) : {{ investigation.getNameEn() }}
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="mg-b-0">{{ investigation.getSourceEn() }}</p>
|
||||
</div><!-- card-body -->
|
||||
</div>
|
||||
|
||||
<div class="card bd-0">
|
||||
<div class="card-header tx-medium bd-0">
|
||||
🇫🇷 Français : {{ investigation.getNameFr() }}
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="mg-b-0">{{ investigation.getSourceFr() }}</p>
|
||||
</div><!-- card-body -->
|
||||
</div>
|
||||
|
||||
<div class="card bd-0">
|
||||
<div class="card-header tx-medium bd-0">
|
||||
العربية 🇸🇦 : {{ investigation.getNameAr() }}
|
||||
</div><!-- card-header -->
|
||||
<div class="card-body bd bd-t-0">
|
||||
<p class="mg-b-0">{{ investigation.getSourceAr() }}</p>
|
||||
</div><!-- card-body -->
|
||||
</div>
|
||||
|
||||
|
||||
{% for question in investigation.getQuestions() %}
|
||||
<div class="card border-left border-primary">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-2 question-number">Question N: {{ loop.index }}</h5>
|
||||
</div>
|
||||
<div class="col-md-3 offset-1">
|
||||
Amount: {{ question.getAmount() }}
|
||||
</div>
|
||||
<div class="col-md-2 offset-1">
|
||||
Max participant: {{ question.getMaxParticipant() }}
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Title:</strong> {{ question.getTitle() }}<p>
|
||||
<p><strong>🇬🇧 Name:</strong> {{ question.getNameEn() }}<p>
|
||||
<p><strong>🇫🇷 Nom:</strong> {{ question.getNameFr() }}<p>
|
||||
<p><strong>🇸🇦 العربية:</strong> {{ question.getNameAr() }}<p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
34
templates/rapport/index.html.twig
Normal file
34
templates/rapport/index.html.twig
Normal file
@@ -0,0 +1,34 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Rapport{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
|
||||
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Rapport</span>
|
||||
<span>List</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Enquête</h2>
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Liste des enquêtes près a divuser</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user