DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

new index.html

Browse Source
This commit is contained in:
leomartine 2021-03-25 09:57:37 +00:00
parent 6dbf315f9f
commit 2430c093d3
1 changed files with 99 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
index.html
View File

@ -5,32 +5,66 @@
<title>app</title> <title>app</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- CSS --> <!-- CSS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"> <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css"> <!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- SWAL -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.css" integrity="sha512-WfDqlW1EF2lMNxzzSID+Tp1TTEHeZ2DK+IHFzbbCHqLJGf2RyIjNFgQCRNuIa8tzHka19sUJYBO+qyvX8YBYEg==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.css" integrity="sha512-WfDqlW1EF2lMNxzzSID+Tp1TTEHeZ2DK+IHFzbbCHqLJGf2RyIjNFgQCRNuIa8tzHka19sUJYBO+qyvX8YBYEg==" crossorigin="anonymous" />
<!-- quill -->
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!-- leaflet locate user -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.73.0/L.Control.Locate.min.css" integrity="sha512-61KpOy3DnpOq3pZlp54eyUdvq9ub53e2ETbksuRlQCMNiAkqyB2Iz8a6ggg61e9zlvPImPz+7A0tgvNGaoVLZg==" crossorigin="anonymous" />
<!-- leaflet fullscreen -->
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!-- leaflet pulse -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-pulse-icon@0.1.0/src/L.Icon.Pulse.css">
<!-- google fonts --> <!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Special+Elite&display=swap" rel="stylesheet">
<!-- App -->
<link href="src/app.css" rel="stylesheet"> <link href="src/app.css" rel="stylesheet">
<!-- JS --> <!-- JS -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script> <!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!-- leaflet -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- typehead -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<!-- turf -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.3.0/turf.min.js" integrity="sha512-UNb2hkE/KkMe2ZBw0CWxpenoO0uudaEkJ0PT4cfGxCdL3sRSwaW7XyveNc9ZO0PQEq28FduAv8VvHaAjPbboBw==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.3.0/turf.min.js" integrity="sha512-UNb2hkE/KkMe2ZBw0CWxpenoO0uudaEkJ0PT4cfGxCdL3sRSwaW7XyveNc9ZO0PQEq28FduAv8VvHaAjPbboBw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script> <!-- moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<!-- moment TZ -->
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js" crossorigin="anonymous"></script> <script src="https://momentjs.com/downloads/moment-timezone-with-data.js" crossorigin="anonymous"></script>
<!-- swal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.min.js" integrity="sha512-+uGHdpCaEymD6EqvUR4H/PBuwqm3JTZmRh3gT0Lq52VGDAlywdXPBEiLiZUg6D1ViLonuNSUFdbL2tH9djAP8g==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.min.js" integrity="sha512-+uGHdpCaEymD6EqvUR4H/PBuwqm3JTZmRh3gT0Lq52VGDAlywdXPBEiLiZUg6D1ViLonuNSUFdbL2tH9djAP8g==" crossorigin="anonymous"></script>
<!-- <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> --> <!-- quill -->
<!-- Core build with no theme, formatting, non-essential modules -->
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script> <script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet"> <!-- pixy -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.0/browser/pixi.min.js" integrity="sha512-shL+cXMf3XmoQtrHnCoyS7X/H/k5qKir6pQWj7Q12Lqj9SfuU6i13agrBxbKzDBg7qIEm6C17LVoFPzFSgyQ7Q==" crossorigin="anonymous"></script>
<!-- leaflet pixy overlay -->
<script src="https://cdn.jsdelivr.net/npm/leaflet-pixi-overlay@1.8.1/L.PixiOverlay.min.js"></script>
<!-- leaflet terminator -->
<script src="https://unpkg.com/@joergdietrich/leaflet.terminator"></script>
<!-- rasterize html -->
<script src="http://cburgmer.github.io/rasterizeHTML.js/rasterizeHTML.allinone.js"></script>
<!-- leaflet locate user -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.73.0/L.Control.Locate.min.js" integrity="sha512-taGzWgtN8FsSonl7SSrfPQBvTm/omZEf9p0s64IomW39xQZx8bSmP+aUyzeqig61ojVlMUwW5Moyo87HNQxliw==" crossorigin="anonymous"></script>
<!-- leaflet fullscreen -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<!-- leaflet pulse -->
<script src="https://cdn.jsdelivr.net/npm/leaflet-pulse-icon@0.1.0/src/L.Icon.Pulse.js"></script>
</head> </head>
<body> <body>
<!-- The core Firebase JS SDK is always required and must be listed first --> <!-- The core Firebase JS SDK is always required and must be listed first -->
@ -56,13 +90,16 @@
</script> </script>
<!-- navbar --> <!-- navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light"> <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Avions Poèmes</a> <a class="navbar-brand" href="#">Avions-Poèmes</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="fa fa-paper-plane"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#langModal" >Français</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Anthologie</a> <a class="nav-link" href="#">Anthologie</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@ -76,10 +113,11 @@
</div> </div>
</nav> </nav>
<!-- map --> <!-- map -->
<div id="map"></div> <div id="map" style="display:block"></div>
<!-- Paper Plane animation --> <!-- Paper Plane animation -->
<canvas id="canvas3d"></canvas> <canvas id="canvas3d"></canvas>
<canvas id="blankCanvas" width="400" height="400" style="border:1px solid #d3d3d3; display:none">Your browser does not support the HTML5 canvas tag.</canvas> <canvas id="blankCanvas1" width="400" height="400" style="border:1px solid #d3d3d3; display:none"></canvas>
<canvas id="blankCanvas2" width="400" height="400" style="border:1px solid #d3d3d3; display:none"></canvas>
<img style="display:none;" id="front" src="src/img/front.jpg"/> <img style="display:none;" id="front" src="src/img/front.jpg"/>
<img style="display:none;" id="back" src="src/img/back.jpg"/> <img style="display:none;" id="back" src="src/img/back.jpg"/>
<script id="planeFoldScript.txt" type="not-javascript"> <script id="planeFoldScript.txt" type="not-javascript">
@ -107,49 +145,70 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="selectTime">Temps de vol</label> <label class="bold" for="selectTime">Temps de vol</label>
<select class="form-control" id="selectTime"> <select class="form-control" id="selectTime">
<option>Aléatoire</option> <option value="random">Aléatoire</option>
<option>3,14 jours</option> <option value="3days">3,14 jours</option>
<option>7 jours</option> <option value="7days">7 jours</option>
<option>30 jours</option> <option value="30days">30 jours</option>
<option>365 jours</option> <option value="365days">365 jours</option>
</select> </select>
</div> </div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="publicMessage">
<label class="form-check-label" for="publicMessage">Message public</label>
</div>
<br>
<div class="form-group"> <div class="form-group">
<label for="messageTextArea">Message</label> <label class="bold" for="messageTextArea">Message</label>
<div class="form-control rounded-0" id="messageTextArea"></div> <div class="form-control rounded-0" id="messageTextArea"></div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="expeMail">Expediteur</label> <b class="bold">Expediteur</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" class="form-check-input" id="expeKnown">
<label class="form-check-label" for="expeKnown">Envoi anonyme</label>
</div>
<div class="form-group">
<input type="email" autocomplete="off" class="form-control" id="expeMail" aria-describedby="emailHelp" placeholder="Addresse mail"> <input type="email" autocomplete="off" class="form-control" id="expeMail" aria-describedby="emailHelp" placeholder="Addresse mail">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> --> <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
</div> </div>
<input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Localisation" data-provide="typeahead"> <input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Localisation" data-provide="typeahead">
<br> <br>
<div class="form-group"> <div class="form-group">
<label for="destMail">Destinataire</label> <label class="bold" for="destMail">Destinataire</label>
<input type="email" autocomplete="off" class="form-control" id="destMail" aria-describedby="emailHelp" placeholder="Addresse mail"> <input type="email" autocomplete="off" class="form-control" id="destMail" aria-describedby="emailHelp" placeholder="Addresse mail">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> --> <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
</div> </div>
<div class="form-group">
<input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Localisation" data-provide="typeahead"> <input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Localisation" data-provide="typeahead">
<br>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="publicMessage">
<label class="form-check-label" for="publicMessage">Message public</label>
</div> </div>
<div class="form-group form-inline">
<label for="selectDestLang">Langue parlée par le destinataire:&nbsp;</label>
<select class="form-control form-control-sm" id="selectDestLang">
<option value="fr">Français</option>
<option value="en">English</option>
<option value="de">Deutsch</option>
<option value="it">Italiano</option>
</select>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-light" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-warning" id="sendNewPlane">Envoyer</button> <button type="button" class="btn btn-warning" id="sendNewPlane" disabled>Envoyer</button>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -173,15 +232,16 @@
</div> </div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <!-- <footer class="footer"> -->
<div class="container-fluid"> <!-- <div class="container-fluid"> -->
Site open source dédié à l'envoi d'avions-poèmes. <!-- Site open source dédié à l'envoi d'avions-poèmes. -->
</div> <!-- </div> -->
</footer> <!-- </footer> -->
<script src="src/config.js"></script> <script src="src/translation.js"></script>
<script src="src/map.js"></script> <script src="src/map.js"></script>
<script src="src/geocoder.js"></script> <script src="src/geocoder.js"></script>
<script src="src/paperPlaneAnimation.js"></script> <script src="src/paperPlaneAnimation.js"></script>
<script src="src/formValidation.js"></script>
<script src="src/newPlane.js"></script> <script src="src/newPlane.js"></script>
</body> </body>
</html> </html>