html css first commit
This commit is contained in:
leomartine
parent
2d1aedce5c
commit
de90b1e06e
73
app.css
Normal file
73
app.css
Normal file
@ -0,0 +1,73 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'PT Mono', monospace;
|
||||
/* font-family: 'Special Elite', cursive !important */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 30px;
|
||||
line-height: 30px; /* Vertically center the text there */
|
||||
background-color: #f5f5f5;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
/* removing footer on mobile */
|
||||
@media screen and (max-width: 400px) {
|
||||
.footer {
|
||||
display:none
|
||||
}
|
||||
}
|
||||
|
||||
/* big modal */
|
||||
.modal-lg {
|
||||
max-width:1140px !important;
|
||||
}
|
||||
|
||||
.mapboxgl-map{
|
||||
font-family: 'PT Mono', monospace;
|
||||
/* font-family: 'Special Elite', cursive !important */
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-logo{
|
||||
display: none !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 */
|
||||
}
|
||||
|
||||
/* qill text editor */
|
||||
#messageTextArea {
|
||||
min-height: 200px;
|
||||
border-radius: 0px 0px .25em .25em !important;
|
||||
border-color: #ced4da !important
|
||||
}
|
||||
|
||||
.ql-toolbar{
|
||||
border-radius: .25em .25em 0px 0px !important;
|
||||
border-color: #ced4da !important
|
||||
}
|
||||
|
||||
187
index.html
Normal file
187
index.html
Normal file
@ -0,0 +1,187 @@
|
||||
<!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 -->
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet">
|
||||
<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">
|
||||
<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" />
|
||||
<!-- 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">
|
||||
|
||||
<link href="src/app.css" rel="stylesheet">
|
||||
<!-- JS -->
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></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>
|
||||
<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://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></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>
|
||||
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js" 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> -->
|
||||
|
||||
<!-- Core build with no theme, formatting, non-essential modules -->
|
||||
<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">
|
||||
|
||||
|
||||
</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="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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"></div>
|
||||
<!-- Paper Plane animation -->
|
||||
<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>
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="selectTime">Temps de vol</label>
|
||||
<select class="form-control" id="selectTime">
|
||||
<option>Aléatoire</option>
|
||||
<option>3,14 jours</option>
|
||||
<option>7 jours</option>
|
||||
<option>30 jours</option>
|
||||
<option>365 jours</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="messageTextArea">Message</label>
|
||||
<div class="form-control rounded-0" id="messageTextArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="expeMail">Expediteur</label>
|
||||
<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 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>
|
||||
<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>
|
||||
</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">Envoyer</button>
|
||||
</div>
|
||||
</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/config.js"></script>
|
||||
<script src="src/map.js"></script>
|
||||
<script src="src/geocoder.js"></script>
|
||||
<script src="src/paperPlane.js"></script>
|
||||
<script src="src/newPlaneAnimation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user