-
Notifications
You must be signed in to change notification settings - Fork 4
/
formulaire.html
113 lines (96 loc) · 4.2 KB
/
formulaire.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html>
<head>
<meta charset="utf-8">
<title>Création d'une Story Map</title>
<link rel="stylesheet" href="formulaire/form_style.css">
</head>
<body>
<form class="storymap-form" action="formulaire/create_storymap.php" method="POST" enctype="multipart/form-data" target=_blank>
<!-- form header -->
<div class="form-header">
<h1>Création d'une nouvelle Story Map</h1>
</div>
<!-- form body -->
<div class="form-body">
<div class="form-group left">
<label class="label-title">Choix de l'apparence :</label><br><br>
<div class="input-group">
<label for="template1">
<input type="radio" name="choix" value="template1" id="template1" checked>
<img src="formulaire/img/storymap.PNG" alt="Option 1">
</label><br><br>
<label for="template2">
<input type="radio" name="choix" value="template2" id="template2">
<img src="formulaire/img/storymap2.PNG" alt="Option 2">
</label>
</div><br><br>
<!-- Titre et sous-titre -->
<div class="horizontal-group">
<div class="form-group left">
<label for="titre" class="label-title">Titre de la Story Map *</label>
<input type="text" name="titre" class="form-input" value="titre" id="titre" required="required" />
</div>
<div class="form-group right">
<label for="description" class="label-title">Sous-titre de la Story Map</label>
<input type="text" name="sous-titre" class="form-input" value="" id="sous-titre" />
</div>
</div>
<!-- Chemin du dossier -->
<div class="form-group">
<label for="titre" class="label-title">Nom du nouveau dossier *</label>
<input type="text" name="dossier" class="form-input" value="nomdudossier" id="dossier" required="required"/>
</div>
<!-- Fond de carte -->
<div class="form-group left" >
<label class="label-title">Fond de carte</label>
<select class="form-input" name="level" id="level">
<option value="https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png">Voyager</option>
<option value="http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png">Carto Light (Positron)</option>
<option value="http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png">Carto Dark (Dark Matter)</option>
</select>
</div>
<!-- Zoom des éléments -->
<div class="form-group right">
<label for="zoom" class="label-title">Zoom appliqué aux éléments </label>
<input type="range" min="8" max="15" step="1" value="12" id="zoom" name="zoom" class="form-input" onChange="change();" style="height:28px;width:78%;padding:0;">
<span id="range-label">12</span>
</div>
<!-- Script for range input label -->
<script>
var rangeLabel = document.getElementById("range-label");
var experience = document.getElementById("zoom");
function change() {
rangeLabel.innerText = experience.value;
}
</script>
<!-- Geojson -->
<div class="form-group">
<label for="fichier_geojson" class="label-title">Fichier geojson *</label>
<input type="file" name="geojson" id="geojson" accept=".geojson" required="required"/>
</div>
<div class="accueil">
<h2>Page d'accueil de la Story Map</h2>
</div>
<!-- Page accueil -->
<div class="form-group">
<label for="choose-file" class="label-title">Texte introductif</label>
<textarea class="form-input" rows="2" cols="50" name="texte" style="height:auto"></textarea>
</div>
<!-- Lien url -->
<div class="form-group">
<label for="titre" class="label-title">URL page web pour en savoir plus</label>
<input type="text" name="url" class="form-input" value="url" id="url"/>
</div>
<!-- Image page d'accueil -->
<div class="form-group">
<label for="description" class="label-title">Image de la page d'accueil *</label>
<input type="file" name="img" id="img" accept=".png,.jpg,.jpeg" required="required"/>
</div>
</div>
</div>
<div class="form-footer">
<span>* obligatoire</span>
<button type="submit" class="btn">Créer</button>
</div>
</body>
</html>