-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (122 loc) · 5.96 KB
/
index.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>TEI Barberino generator</title>
</head>
<body>
<!-- First page: Welcome! -->
<div class="container page">
<div class="row justify-content-md-center">
<h1>Benvenuto e benvenuta!</h1>
</div>
<div class="row justify-content-md-center">
<p>Questa pagina ti guiderà nella generazione un documento XML/TEI valido per la mappatura di una area dell'immagine del manoscritto Barb. Lat. 4076 dei Documenti D'Amore di Francesco da Barberino.
Con questo documento potrai completare la codifica tramite il tuo editor XML preferito - oXygen o altro ancora.</p>
<p>Il tuo documento XML, assieme al lavoro di altri filologi e codificatori permetterà la mappatura completa dell'opera.</p>
</div>
<div class="row justify-content-md-center">
<button type="button" class="btn btn-primary disabled"
id="startingButton" data-ready="Inizia" onclick="nextPage('choosePage');">Attendi</button>
</div>
<div class="row justify-content-md-center">
<p>Potrai sempre ricominciare la generazione aggiornando la pagina.</p>
</div>
</div>
<!-- Second page: choose the page -->
<div class="container page hidden" id="choosePage">
<div class="row justify-content-md-center">
<h1>Seleziona la carta su cui vuoi lavorare.</h1>
</div>
</div>
<!-- Third page: choose the zone -->
<div class="container page hidden" id="zonePage">
<div class="row justify-content-md-center">
<h1>Seleziona la zona su cui vuoi lavorare.</h1>
</div>
<div class="row justify-content-md-center">
<p>Clicca sull'immagine per aggiungere punti. Poi, premi su "Unisci" per definire una zona. Ogni volta che vuoi rincominciare la selezione, premi "Cancella". Quando sei soddisffatto, premi "Continua".</p>
</div>
<div class="row justify-content-md-center card">
<canvas class="card-img-top" id="bigImage" height="800" width="800"
onclick="zoneClick(event)"></canvas>
</div>
<div class="row justify-content-md-center">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning"
id="startingButton" onclick="zoneReset()">Cancella</button>
<button type="button" class="btn btn-success"
id="startingButton" onclick="zoneUnify()">Unisci</button>
<button type="button" class="btn btn-primary"
id="startingButton" onclick="zoneDone()">Continua</button>
</div>
</div>
</div>
<!-- 4th page: the form -->
<div class="container page hidden" id="formPage">
<div class="row justify-content-md-center">
<h1>Dammi qualche informazione in più!</h1>
</div>
<div class="row justify-content-md-center">
<p>Per sapere come generare correttamente il documento TEI, mi serve sapere che tipologia di testo stai andando a codificare.</p>
</div>
<div class="row justify-content-md-center">
<form>
<div class="form-group">
<label for="formType">Tipologia di testo</label>
<select class="form-control" id="formType">
<option>Apparatus_destra</option>
<option>Apparatus_sinistra</option>
<option>Didascalia</option>
<option>Iconografia</option>
<option>Lirica</option>
<option>Lirica_destra</option>
<option>Lirica_sinistra</option>
<option>Rubrica</option>
<option>Translatio_destra</option>
<option>Translatio_sinistra</option>
</select>
</div>
<div class="form-group">
<label for="formFolio">Folio</label>
<select class="form-control" id="formFolio">
<option>Recto</option>
<option>Verso</option>
</select>
</div>
<div class="form-group">
<label for="formName">Nome</label>
<input class="form-control" id="formName" />
</div>
<div class="form-group">
<label for="formSurname">Cognome</label>
<input class="form-control" id="formSurname" />
</div>
</div>
<div class="row justify-content-md-center">
<button type="button" class="btn btn-primary"
onclick="teiGenerator()">Procedi</button>
</div>
</div>
<!-- 5th page: TEI -->
<div class="container page hidden" id="teiPage">
<div class="row justify-content-md-center">
<h1>Grazie!</h1>
</div>
<div class="row justify-content-md-center">
<p>Il download the documento TEI dovrebbe partire a momenti. Salvalo senza rinominarlo.</p>
</div>
<div class="row justify-content-md-center">
<h3>Buon lavoro!</h3>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>