247 lines
13 KiB
HTML
247 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>app</title>
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
<!-- CSS -->
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
<!-- 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" />
|
|
<!-- 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 -->
|
|
<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">
|
|
<!-- App -->
|
|
<link href="src/app.css" rel="stylesheet">
|
|
|
|
<!-- JS -->
|
|
<!-- jquery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 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>
|
|
<!-- typehead -->
|
|
<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>
|
|
<!-- 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>
|
|
<!-- swal -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.min.js" integrity="sha512-+uGHdpCaEymD6EqvUR4H/PBuwqm3JTZmRh3gT0Lq52VGDAlywdXPBEiLiZUg6D1ViLonuNSUFdbL2tH9djAP8g==" crossorigin="anonymous"></script>
|
|
<!-- quill -->
|
|
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
|
|
<!-- 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>
|
|
<body>
|
|
<!-- The core Firebase JS SDK is always required and must be listed first -->
|
|
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>
|
|
|
|
<!-- TODO: Add SDKs for Firebase products that you want to use -->
|
|
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>
|
|
|
|
<script>
|
|
// Your web app's Firebase configuration
|
|
var firebaseConfig = {
|
|
apiKey: "AIzaSyD82Nx-gXXaPZq2Pl_JqvE0tQjABFNqdZA",
|
|
authDomain: "avions-poemes.firebaseapp.com",
|
|
databaseURL: "https://avions-poemes-default-rtdb.europe-west1.firebasedatabase.app",
|
|
projectId: "avions-poemes",
|
|
storageBucket: "avions-poemes.appspot.com",
|
|
messagingSenderId: "355611894383",
|
|
appId: "1:355611894383:web:c258c73f76581fac7fa39a"
|
|
};
|
|
// Initialize Firebase
|
|
firebase.initializeApp(firebaseConfig);
|
|
var db = firebase.firestore();
|
|
</script>
|
|
<!-- navbar -->
|
|
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
|
|
<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">
|
|
<span class="fa fa-paper-plane"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<ul class="navbar-nav mr-auto">
|
|
<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>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="modal" data-target="#aboutModal" >À propos</a>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline mt-2 mt-md-0">
|
|
<input type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Envoyer un avion'>
|
|
</input>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
<!-- map -->
|
|
<div id="map" style="display:block"></div>
|
|
<!-- Paper Plane animation -->
|
|
<canvas id="canvas3d"></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="back" src="src/img/back.jpg"/>
|
|
<script id="planeFoldScript.txt" type="not-javascript">
|
|
d -200 200 -200 -200 200 -200 200 200
|
|
c 0 1 c 0 3 c 0 2 c 1 3
|
|
c 0 8 c 8 3 c 0 4 c 4 1
|
|
c 6 0 c 6 1 c 6 2 c 6 3
|
|
iad t 1200 ty 6 tx -3)
|
|
t 750 r 48 -179.99 21 0 10 r 55 -179.99 17 3 19 )
|
|
t 750 r 43 160 1 4 0 21 24 12 11 13 9 10)
|
|
t 700 ty -80 tx -60)
|
|
t 500 r 27 -80 3 19 5 22 2 a 3 )
|
|
t 500 r 23 -80 0 21 4 24 1 a 0)
|
|
t 1000 tx -35 z 0 0 0 il 100 100)
|
|
</script>
|
|
|
|
<!-- Modal new plane-->
|
|
<div class="modal fade" id="newPlaneModal" tabindex="-1" role="dialog" aria-labelledby="newPlaneModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Envoyer un avion</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
|
|
<div class="form-group">
|
|
<label class="bold" for="selectTime">Temps de vol</label>
|
|
<select class="form-control" id="selectTime">
|
|
<option value="random">Aléatoire</option>
|
|
<option value="3days">3,14 jours</option>
|
|
<option value="7days">7 jours</option>
|
|
<option value="30days">30 jours</option>
|
|
<option value="365days">365 jours</option>
|
|
</select>
|
|
</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">
|
|
<label class="bold" for="messageTextArea">Message</label>
|
|
<div class="form-control rounded-0" id="messageTextArea"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<b class="bold">Expediteur</b>
|
|
<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">
|
|
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
|
|
</div>
|
|
<input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Localisation" data-provide="typeahead">
|
|
<br>
|
|
<div class="form-group">
|
|
<label class="bold" for="destMail">Destinataire</label>
|
|
<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> -->
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Localisation" data-provide="typeahead">
|
|
</div>
|
|
<div class="form-group form-inline">
|
|
<label for="selectDestLang">Langue parlée par le destinataire: </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 class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-dismiss="modal">Annuler</button>
|
|
<button type="button" class="btn btn-warning" id="sendNewPlane" disabled>Envoyer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal About -->
|
|
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModal" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">À propos</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-dismiss="modal">Retour</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<!-- <footer class="footer"> -->
|
|
<!-- <div class="container-fluid"> -->
|
|
<!-- Site open source dédié à l'envoi d'avions-poèmes. -->
|
|
<!-- </div> -->
|
|
<!-- </footer> -->
|
|
<script src="src/translation.js"></script>
|
|
<script src="src/map.js"></script>
|
|
<script src="src/geocoder.js"></script>
|
|
<script src="src/paperPlaneAnimation.js"></script>
|
|
<script src="src/formValidation.js"></script>
|
|
<script src="src/newPlane.js"></script>
|
|
</body>
|
|
</html> |