DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

fix: conflicts

Browse Source
This commit is contained in:
mberard 2021-10-25 23:54:27 +02:00
parent 849a8f3629
commit d628afbc68
10 changed files with 405 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.htaccess
View File

@ -1 +0,0 @@
Options -Indexes

25
anthologie.php Normal file
View File

@ -0,0 +1,25 @@
<?php require_once './parts/head.php'; ?>
<body>
<?php require_once './parts/header.php'; ?>
<!-- Anthology -->
<div id="anthology">
<h3 id="anthologyTitle" style="text-align:center">Anthologie</h3>
<br><br>
<small><em id="anthologyDisclaimer">Si vous souhaitez supprimer un message/poème public, merci de le faire savoir à <a href="mailto:contact@avion-poe.me">contact@avion-poe.me</a></em></small>
<br><br><br><br>
<div id="anthologyItems">
</div>
</div>
<div id="backToMap">
<p style="text-align:center"><a id="closeAnthologyAbout" href="/">Retour à la carte</a></p>
</div>
<div id="map" style="display:none"></div>
<script src="src/anthology.js"></script>
<script src="src/translation.js"></script>
</body>
</html>

26
apropos.php Normal file
View File

@ -0,0 +1,26 @@
<?php require_once './parts/head.php'; ?>
<body>
<?php require_once './parts/header.php'; ?>
<!-- About -->
<div id="about">
<h3 id="aboutTitle" style="text-align:center">A propos</h3><br><br>
<p id="aboutText">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>
<p><b id="librairies">Librairies utilisées</b></p>
<p><small><a href="https://getbootstrap.com/">Bootstrap</a> | <a href="https://jquery.com/">jQuery</a> | <a href="https://leafletjs.com/">Leaflet</a> | <a href="https://github.com/Leaflet/Leaflet.fullscreen">Leaflet.fullscreen</a> | <a href="https://github.com/domoritz/leaflet-locatecontrol">Leaflet-locatecontrol</a> | <a href="https://github.com/manubb/Leaflet.PixiOverlay">Leaflet.PixiOverlay</a> | <a href="https://github.com/joergdietrich/Leaflet.Terminator">Leaflet.Terminator</a> | <a href="https://momentjs.com/">Moment.js</a> | <a href="https://www.pixijs.com/">PixiJS</a> | <a href="https://popper.js.org/">Popper</a> | <a href="https://quilljs.com/">Quill</a> | <a href="https://cburgmer.github.io/rasterizeHTML.js/">RasterizeHTML.js</a> | <a href="https://turfjs.org/">Turf.js</a> | <a href="https://github.com/RemiKoutcherawy/OriSim3D-JS">OriSim3D-JS</a> | <a href="https://www.geonames.org/export/web-services.html">Geonames</a></small></p>
<p><b id="mapSources">Sources de la carte</b></p>
<ul>
<li><span id="mapBackground">Fond de carte </span>:<small> <a href="https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9">World Imagery</a> Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community.</small></li>
<li><span id="clouds">Nuages </span>:<small> Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.</small></li>
</ul>
<br>
<br>
</div>
<div id="backToMap">
<p style="text-align:center"><a id="closeAnthologyAbout" href="/">Retour à la carte</a></p>
</div>
<script src="src/anthology.js"></script>
<script src="src/translation.js"></script>
</body>

195
index.html
View File

@ -1,195 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avion-poème</title>
<link rel="icon" href="src/img/icon.png">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- CSS -->
<link rel="stylesheet" href="dist/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="dist/leaflet/leaflet.css"/>
<link rel="stylesheet" href="dist/quill/quill.snow.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="dist/leaflet-locatecontrol/L.Control.Locate.min.css"/>
<link rel='stylesheet' href="dist/leaflet-fullscreen/leaflet.fullscreen.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Special+Elite&display=swap">
<link href="src/app.css" rel="stylesheet">
<!-- JS -->
<script src="dist/jquery/jquery-3.6.0.min.js"></script>
<script src="dist/leaflet/leaflet.js"></script>
<script src="dist/leaflet/touch-fix.js"></script>
<script src="dist/popper/popper.min.js"></script>
<script src="dist/bootstrap/bootstrap.min.js"></script>
<script src="dist/bootstrap/bootstrap3-typeahead.js"></script>
<script src="dist/turf/turf.min.js"></script>
<script src="dist/moment/moment-with-locales.min.js"></script>
<script src="dist/moment/moment-timezone-with-data.js"></script>
<script src="dist/quill/quill.js"></script>
<script src="dist/pixi/pixi.min.js"></script>
<script src="dist/leaflet-pixi-overlay/L.PixiOverlay.min.js"></script>
<script src="dist/leaflet-terminator/L.Terminator.js"></script>
<script src="dist/rasterizeHTML/rasterizeHTML.allinone.js"></script>
<script src="dist/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
<script src='dist/leaflet-fullscreen/Leaflet.fullscreen.min.js'></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<a id="navTitle" class="navbar-brand" href="#">Avion-Poème</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="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav-menus navbar-nav mr-auto">
<li class="nav-item">
<a id="buttonAnthology" class="nav-link" href="#">Anthologie</a>
</li>
<li class="nav-item">
<a id="buttonAbout" class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="langIcon" src="src/img/lang.png" height="18px">
</a>
<div id="langChoices" class="dropdown-menu" aria-labelledby="navbarDropdownLang">
</div>
</li>
</ul>
<form class="nav-button form-inline mt-2 mt-md-0">
<input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Envoyer un avion'>
</input>&nbsp;
<i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i>
</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-FF5555.jpg"/>
<script id="planeFoldScript.txt" type="not-javascript"> <!-- From https://github.com/RemiKoutcherawy/OriSim3D-JS was fun to code -->
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>
<!-- Anthology -->
<div id="anthology">
<h3 id="anthologyTitle" style="text-align:center">Anthologie</h3>
<br><br>
<small><em id="anthologyDisclaimer" >Si vous souhaitez supprimer un message/poème public, merci de le faire savoir à <a href="mailto:contact@avion-poe.me">contact@avion-poe.me</a></em></small>
<br><br><br><br>
<div id="anthologyItems">
</div>
</div>
<!-- About -->
<div id="about">
<h3 id="aboutTitle" style="text-align:center">A propos</h3><br><br>
<p id="aboutText">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>
<p><b id="librairies">Librairies utilisées</b></p>
<p><small><a href="https://getbootstrap.com/">Bootstrap</a> | <a href="https://jquery.com/">jQuery</a> | <a href="https://leafletjs.com/">Leaflet</a> | <a href="https://github.com/Leaflet/Leaflet.fullscreen">Leaflet.fullscreen</a> | <a href="https://github.com/domoritz/leaflet-locatecontrol">Leaflet-locatecontrol</a> | <a href="https://github.com/manubb/Leaflet.PixiOverlay">Leaflet.PixiOverlay</a> | <a href="https://github.com/joergdietrich/Leaflet.Terminator">Leaflet.Terminator</a> | <a href="https://momentjs.com/">Moment.js</a> | <a href="https://www.pixijs.com/">PixiJS</a> | <a href="https://popper.js.org/">Popper</a> | <a href="https://quilljs.com/">Quill</a> | <a href="https://cburgmer.github.io/rasterizeHTML.js/">RasterizeHTML.js</a> | <a href="https://turfjs.org/">Turf.js</a> | <a href="https://github.com/RemiKoutcherawy/OriSim3D-JS">OriSim3D-JS</a> | <a href="https://www.geonames.org/export/web-services.html">Geonames</a></small></p>
<p><b id="mapSources">Sources de la carte</b></p>
<ul>
<li><span id="mapBackground">Fond de carte </span>:<small> <a href="https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9">World Imagery</a> Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community.</small></li>
<li><span id="clouds">Nuages </span>:<small> Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.</small></li>
</ul>
<br>
<br>
</div>
<div id="backToMap">
<p style="text-align:center"><a id="closeAnthologyAbout" href="#" >Retour à la carte</a></p>
</div>
<!-- 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" id="newPlaneModalTitle">Lancer un avion-poème</h5>
<button type="button" id="closeModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<b class="bold" id="newPlaneModalMessage">Message</b>&nbsp;&nbsp;
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="prive" value="prive" checked>
<label class="form-check-label" for="prive" id="newPlaneModalPrive">privé</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="public" value="public">
<label class="form-check-label" for="public" id="newPlaneModalPublic">public</label>&nbsp;&nbsp;<i id="publicTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Message publié dans l’Anthologie une fois l’avion-poème arrivé"></i>
</div>
<br>
<br>
<div class="form-control rounded-0" id="messageTextArea"></div>
</div>
<div class="form-group">
<label class="bold" for="selectTime" id="flightTime" >Temps de vol</label>
<select class="form-control" id="selectTime">
<option id="newPlaneModalRandom" value="random">Aléatoire</option>
<option id="newPlaneModal3j" value="3days">3,14 jours</option>
<option id="newPlaneModal7j" value="7days">7 jours</option>
<option id="newPlaneModal30j" value="30days">30 jours</option>
<option id="newPlaneModal365j" value="365days">365 jours</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<b class="bold" id="newPlaneModalExpediteur" >Expediteur</b>&nbsp;&nbsp;
<input type="checkbox" class="form-check-input" id="expeKnown">
<label class="form-check-label" for="expeKnown" id="newPlaneModalAnonyme">envoi anonyme</label>&nbsp;&nbsp;<i id="anonymeTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Votre adresse électronique ne sera communiquée au destinataire qu’à l’arrivée de l’avion-poème"></i>
</div>
<div class="form-group">
<input type="email" autocomplete="off" class="form-control" id="expeMail" aria-describedby="emailHelp" placeholder="Insérer votre adresse électronique">
</div>
<input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Choisissez un point de départ" data-provide="typeahead">
<br>
<div class="form-group">
<label class="bold" id="newPlaneModalDestinataire" for="destMail">Destinataire</label>
<input type="email" autocomplete="off" class="form-control" id="destMail" aria-describedby="emailHelp" placeholder="Insérer l'adresse électronique du destinataire">
</div>
<div class="form-group">
<input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Choisissez une destination" data-provide="typeahead">
</div>
<div class="form-group form-inline">
<label for="selectDestLang" id="destLang">Langue parlée par le destinataire:</label>&nbsp;
<select class="form-control form-control-sm" id="selectDestLang">
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" id="newPlaneModalCancel" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-warning" id="sendNewPlane" disabled>Lancer</button>
</div>
</form>
</div>
</div>
</div>
<script src="src/about.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>
<script src="src/translation.js"></script>
<script src="src/anthology.js"></script>
</body>
</html>

111
index.php Normal file
View File

@ -0,0 +1,111 @@
<!-- Head -->
<?php require_once './parts/head.php'; ?>
<body>
<!-- Header -->
<?php require_once './parts/header.php'; ?>
<!-- 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-FF5555.jpg" />
<script id="planeFoldScript.txt" type="not-javascript"> <!-- From https://github.com/RemiKoutcherawy/OriSim3D-JS was fun to code -->
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" id="newPlaneModalTitle">Lancer un avion-poème</h5>
<button type="button" id="closeModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<b class="bold" id="newPlaneModalMessage">Message</b>&nbsp;&nbsp;
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="prive" value="prive" checked>
<label class="form-check-label" for="prive" id="newPlaneModalPrive">privé</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="public" value="public">
<label class="form-check-label" for="public" id="newPlaneModalPublic">public</label>&nbsp;&nbsp;<i id="publicTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Message publié dans l’Anthologie une fois l’avion-poème arrivé"></i>
</div>
<br>
<br>
<div class="form-control rounded-0" id="messageTextArea"></div>
</div>
<div class="form-group">
<label class="bold" for="selectTime" id="flightTime">Temps de vol</label>
<select class="form-control" id="selectTime">
<option id="newPlaneModalRandom" value="random">Aléatoire</option>
<option id="newPlaneModal3j" value="3days">3,14 jours</option>
<option id="newPlaneModal7j" value="7days">7 jours</option>
<option id="newPlaneModal30j" value="30days">30 jours</option>
<option id="newPlaneModal365j" value="365days">365 jours</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<b class="bold" id="newPlaneModalExpediteur">Expediteur</b>&nbsp;&nbsp;
<input type="checkbox" class="form-check-input" id="expeKnown">
<label class="form-check-label" for="expeKnown" id="newPlaneModalAnonyme">envoi anonyme</label>&nbsp;&nbsp;<i id="anonymeTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Votre adresse électronique ne sera communiquée au destinataire qu’à l’arrivée de l’avion-poème"></i>
</div>
<div class="form-group">
<input type="email" autocomplete="off" class="form-control" id="expeMail" aria-describedby="emailHelp" placeholder="Insérer votre adresse électronique">
</div>
<input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Choisissez un point de départ" data-provide="typeahead">
<br>
<div class="form-group">
<label class="bold" id="newPlaneModalDestinataire" for="destMail">Destinataire</label>
<input type="email" autocomplete="off" class="form-control" id="destMail" aria-describedby="emailHelp" placeholder="Insérer l'adresse électronique du destinataire">
</div>
<div class="form-group">
<input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Choisissez une destination" data-provide="typeahead">
</div>
<div class="form-group form-inline">
<label for="selectDestLang" id="destLang">Langue parlée par le destinataire:</label>&nbsp;
<select class="form-control form-control-sm" id="selectDestLang">
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" id="newPlaneModalCancel" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-warning" id="sendNewPlane" disabled>Lancer</button>
</div>
</form>
</div>
</div>
</div>
<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>
<script src="src/translation.js"></script>
<script src="src/anthology.js"></script>
</body>
</html>

36
parts/head.php Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avion-poème</title>
<link rel="icon" href="src/img/icon.png">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- CSS -->
<link rel="stylesheet" href="dist/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="dist/leaflet/leaflet.css" />
<link rel="stylesheet" href="dist/quill/quill.snow.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="dist/leaflet-locatecontrol/L.Control.Locate.min.css" />
<link rel='stylesheet' href="dist/leaflet-fullscreen/leaflet.fullscreen.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Special+Elite&display=swap">
<link href="src/app.css" rel="stylesheet">
<!-- JS -->
<script src="dist/jquery/jquery-3.6.0.min.js"></script>
<script src="dist/leaflet/leaflet.js"></script>
<script src="dist/leaflet/touch-fix.js"></script>
<script src="dist/popper/popper.min.js"></script>
<script src="dist/bootstrap/bootstrap.min.js"></script>
<script src="dist/bootstrap/bootstrap3-typeahead.js"></script>
<script src="dist/turf/turf.min.js"></script>
<script src="dist/moment/moment-with-locales.min.js"></script>
<script src="dist/moment/moment-timezone-with-data.js"></script>
<script src="dist/quill/quill.js"></script>
<script src="dist/pixi/pixi.min.js"></script>
<script src="dist/leaflet-pixi-overlay/L.PixiOverlay.min.js"></script>
<script src="dist/leaflet-terminator/L.Terminator.js"></script>
<script src="dist/rasterizeHTML/rasterizeHTML.allinone.js"></script>
<script src="dist/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
<script src='dist/leaflet-fullscreen/Leaflet.fullscreen.min.js'></script>
</head>

29
parts/header.php Normal file
View File

@ -0,0 +1,29 @@
<!-- navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<a id="navTitle" class="navbar-brand" href="/">Avion-Poème</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="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav-menus navbar-nav mr-auto">
<li class="nav-item">
<a id="buttonAnthology" class="nav-link" href="./anthologie.php">Anthologie</a>
</li>
<li class="nav-item">
<a id="buttonAbout" class="nav-link" href="./apropos.php">À propos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="langIcon" src="src/img/lang.png" height="18px">
</a>
<div id="langChoices" class="dropdown-menu" aria-labelledby="navbarDropdownLang">
</div>
</li>
</ul>
<form class="nav-button form-inline mt-2 mt-md-0">
<input id="buttonNewPlane" type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#newPlaneModal" value='Envoyer un avion'>
</input>&nbsp;
<i id="planeLimitTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="coucou"></i>
</form>
</div>
</nav>

51
src/anthology.js
View File

@ -1,54 +1,3 @@
//open / close
var anthologyOpen = 0
$('#buttonAnthology').on('click',function(){
//hiding navbar
$('.navbar-collapse').collapse('hide');
if (anthologyOpen > 0){
$('#anthology').css('visibility','hidden');
$('#anthology').css('opacity','0')
$('#backToMap').css('visibility','hidden');
$('#backToMap').css('opacity','0')
anthologyOpen = 0
}
else{
$('#anthology').css('visibility','visible')
$('#anthology').css('opacity','1')
$('#backToMap').css('visibility','visible');
$('#backToMap').css('opacity','1')
anthologyOpen = 1
displayAnthology()
}
//closing about
$('#about').css('visibility','hidden');
$('#about').css('opacity','0')
aboutOpen = 0
})
$('#closeAnthologyAbout').on('click',function(){
$('#anthology').css('opacity','0')
$('#anthology').css('visibility','hidden')
$('#backToMap').css('opacity','0')
$('#backToMap').css('visibility','hidden')
anthologyOpen = 0
})
$('#navTitle').on('click',function(){
$('#anthology').css('opacity','0')
$('#anthology').css('visibility','hidden')
$('#backToMap').css('opacity','0')
$('#backToMap').css('visibility','hidden')
$('#about').css('opacity','0')
$('#about').css('visibility','hidden')
aboutOpen = 0
anthologyOpen = 0
})
function flightTime(a,b){
var days = Math.round((b-a)/86400 * 100) / 100
var months = Math.round(days/30)

328
src/app.css
View File

@ -4,19 +4,19 @@ body {
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
font-family: 'PT Mono', monospace;
body {
position: relative;
margin: 0;
padding: 0;
font-family: "PT Mono", monospace;
}
#map {
position: fixed;
top: 0;
bottom: 0;
height:100%;
width: 100%;
#map {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.footer {
@ -27,238 +27,230 @@ body {
height: 30px;
line-height: 30px; /* Vertically center the text there */
background-color: #f5f5f5;
font-size: 12px
font-size: 12px;
}
/* big modal */
.modal-lg {
max-width:1140px !important;
max-width: 1140px !important;
}
/* paper plane animation */
#canvas3d{
display:none;
transition: all .3s;
position:fixed;
height:100vh;
width:100vw;
background-color: rgba(0,0,0,0);
z-index:9999;
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
margin-left: 50vw; /* poussé de la moitié de hauteur de viewport */
#canvas3d {
display: none;
transition: all 0.3s;
position: fixed;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0);
z-index: 9999;
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
margin-left: 50vw; /* poussé de la moitié de hauteur de viewport */
}
/* qill text editor */
#messageTextArea {
min-height: 200px;
border-radius: 0px 0px .25em .25em !important;
border-color: #ced4da !important
border-radius: 0px 0px 0.25em 0.25em !important;
border-color: #ced4da !important;
}
.ql-toolbar{
border-radius: .25em .25em 0px 0px !important;
border-color: #ced4da !important
.ql-toolbar {
border-radius: 0.25em 0.25em 0px 0px !important;
border-color: #ced4da !important;
}
/* make the pixi overlay on top of the arc lines */
.leaflet-pixi-overlay {
position: absolute !important;
z-index: 201 !important;
position: absolute !important;
z-index: 201 !important;
}
.bold{
font-weight:bold !important
.bold {
font-weight: bold !important;
}
/* Anthology */
#anthology{
visibility:hidden;
opacity:0;
transition:visibility 0.2s linear,opacity 0.2s linear;
position:absolute;
z-index:1029;
padding-top:66px;
padding-bottom:35px;
padding-left:30%;
padding-right:30%;
overflow-x:hidden;
height:100vh;
width:100vw;
background-color:rgba(255,255,255,0.9)
#anthology {
margin-top: 30px;
z-index: 1029;
padding-top: 66px;
padding-bottom: 35px;
padding-left: 30%;
padding-right: 30%;
overflow-x: hidden;
width: 100vw;
background-color: rgba(255, 255, 255, 0.9);
}
/* About */
#about{
visibility:hidden;
opacity:0;
transition:visibility 0.2s linear,opacity 0.2s linear;
position:absolute;
z-index:1029;
padding-top:66px;
padding-bottom:35px;
padding-left:30%;
padding-right:30%;
overflow-x:hidden;
height:100vh;
width:100vw;
background-color:rgba(255,255,255,0.9)
#about {
margin-top: 30px;
z-index: 1029;
padding-top: 66px;
padding-bottom: 35px;
padding-left: 30%;
padding-right: 30%;
overflow-x: hidden;
width: 100vw;
background-color: rgba(255, 255, 255, 0.9);
}
#backToMap{
visibility:hidden;
opacity:0;
transition:visibility 0.2s linear,opacity 0.2s linear;
position:fixed;
z-index:1035;
padding-left:10%;
padding-right:10%;
overflow-x:hidden;
width:100vw;
bottom:0px;
background-color:rgba(255,255,255,1);
border-top: 1px solid #ddd;
#backToMap {
transition: visibility 0.2s linear, opacity 0.2s linear;
position: fixed;
z-index: 1035;
padding-left: 10%;
padding-right: 10%;
overflow-x: hidden;
width: 100vw;
bottom: 0px;
background-color: rgba(255, 255, 255, 1);
border-top: 1px solid #ddd;
}
#backToMap a{
color:#070707
#backToMap a {
color: #070707;
}
#backToMap p{
margin-bottom:5px;
padding-top:3px;
#backToMap p {
margin-bottom: 5px;
padding-top: 3px;
}
#backToMap a:hover{
color:black
#backToMap a:hover {
color: black;
}
.leaflet-popup-content-wrapper{
font-family: 'PT Mono', monospace;
border-radius: 1px;
/* font-family: 'Special Elite', cursive !important */
.leaflet-popup-content-wrapper {
font-family: "PT Mono", monospace;
border-radius: 1px;
/* font-family: 'Special Elite', cursive !important */
}
.leaflet-popup-content{
/* min-width:280px; */
margin-left: 10px;
margin-right: 21px;
margin-top: 10px;
margin-bottom: 10px;
.leaflet-popup-content {
/* min-width:280px; */
margin-left: 10px;
margin-right: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
.leaflet-popup-content hr{
width: 267px;
margin-top: 10px;
margin-bottom: 10px;
.leaflet-popup-content hr {
width: 267px;
margin-top: 10px;
margin-bottom: 10px;
}
.leaflet-control-scale-line:not(:first-child) {
border-top: none;
border-bottom: 1px solid;
margin-top: 0px;
border-top: none;
border-bottom: 1px solid;
margin-top: 0px;
}
.leaflet-control-scale-line {
FONT-WEIGHT: 100;
font-family: 'PT Mono', monospace;
border: 1px solid #fff;
border-right: none;
border-top: none;
border-left: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
color: white;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* background: #fff; */
background: rgba(255, 255, 255, 0);
font-weight: 100;
font-family: "PT Mono", monospace;
border: 1px solid #fff;
border-right: none;
border-top: none;
border-left: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
color: white;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* background: #fff; */
background: rgba(255, 255, 255, 0);
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 1px !important;
border-bottom-right-radius: 1px !important;
border-bottom-left-radius: 1px !important;
border-bottom-right-radius: 1px !important;
}
.leaflet-bar a:first-child {
border-top-left-radius: 1px !important;
border-top-right-radius: 1px !important;
border-top-left-radius: 1px !important;
border-top-right-radius: 1px !important;
}
/* pulsating marker */
.pulse-icon-anim {
margin-top:2px;
margin-left:2px;
border: 3px solid;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
/*opacity: 0.0*/
margin-top: 2px;
margin-left: 2px;
border: 3px solid;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
/*opacity: 0.0*/
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
a#navbarDropdownLang.nav-link.dropdown-toggle::after{
margin-left:0px !important
a#navbarDropdownLang.nav-link.dropdown-toggle::after {
margin-left: 0px !important;
}
.nav-item{
margin-right:10px
.nav-item {
margin-right: 10px;
}
.dropdown-menu{
font-size:0.9em !important;
padding: 0px !important
.dropdown-menu {
font-size: 0.9em !important;
padding: 0px !important;
}
.ql-editor {
min-height:170px !important;
width: 100% !important
min-height: 170px !important;
width: 100% !important;
}
.ql-editor p {
font-size:1.25em !important;
font-size: 1.25em !important;
}
.ql-editor .ql-size-small {
font-size: 0.9em !important;
font-size: 0.9em !important;
}
@media screen and (max-width: 600px) {
.modal-body {
font-size:0.9rem
}
.modal-body .form-control{
font-size:0.8rem
}
.leaflet-popup-content {
margin: 10px 10px;
line-height: 1.4;
}
#anthologyItems{
font-size:0.8rem
}
#about{
padding-left:5% !important;
padding-right:5% !important;
}
#anthology{
padding-left:5% !important;
padding-right:5% !important;
}
.modal-body {
font-size: 0.9rem;
}
.modal-body .form-control {
font-size: 0.8rem;
}
.leaflet-popup-content {
margin: 10px 10px;
line-height: 1.4;
}
#anthologyItems {
font-size: 0.8rem;
}
#about {
padding-left: 5% !important;
padding-right: 5% !important;
}
#anthology {
padding-left: 5% !important;
padding-right: 5% !important;
}
}

21
src/translation.js
View File

@ -1,6 +1,14 @@
// Default lang
var lang = 'en'
// Lang by session
var langSession = sessionStorage.getItem('lang');
// Lang by navigator config
var userLang = navigator.userLanguage || navigator.language;
if (userLang){
if (langSession) {
lang = langSession.substring(0,2)
} else if (userLang) {
lang = userLang.substring(0,2)
}
@ -25,6 +33,7 @@ $(document).ready(function(){
}
$(".langSelect").on('click',function(e){
lang = e.currentTarget.attributes[1].value
sessionStorage.setItem('lang', lang);
translateUI(lang)
//$("#navbarDropdownLang").html($(this).html())
})
@ -90,7 +99,13 @@ function translateUI(l){
$("#navTitle").html(s.avionpoeme)
$("#buttonAnthology").html(s.anthologie)
$("#buttonAbout").html(s.apropos)
$("#buttonNewPlane").val(s.lancer_avion+" "+nbPlane+"/100")
if (typeof nbPlane !== 'undefined') {
$("#buttonNewPlane").val(s.lancer_avion+" "+nbPlane+"/100")
} else {
$("#buttonNewPlane").on('click', () => {
window.location.replace("/");
})
}
//new plane form
$("#newPlaneModalTitle").html(s.lancer_avion)
$("#newPlaneModalMessage").html(s.message)
@ -138,7 +153,7 @@ function translateUI(l){
})
//plane limit tooltip
if (nbPlane > 99){
if (nbPlane && nbPlane > 99){
$("#planeLimitTooltip").attr("title", s.AvionPoeme_epuise).tooltip("_fixTitle");
}
else{