forked from logo94/WikiPlayground
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (150 loc) · 9.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="it">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/8/82/Wikidata-logo-black-en.svg">
<!-- Descrizione pagina -->
<title>WikiPlayground</title>
<meta name="description" content="Gioco per la riconciliazione delle entità SBN con Wikidata">
<meta name="keywords" content="SBN, Wikidata, Wiki, Gaming">
<meta name="author" content="https://github.com/logo94">
<!-- Includi Librerie JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Includi Librerie CSS e stile -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
html, body {
height: 100%;
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
height: 93%;
}
.half-height {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<!-- Barra di navigazione -->
<nav class="navbar navbar-expand-lg w-100 navbar-light bg-light position-relative">
<ul class="navbar-nav d-flex justify-content-between w-100 mx-3">
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggler" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.wikidata.org/w/index.php?title=Special:UserLogin" target="_blank">Login</a>
<a class="dropdown-item" href="https://github.com/labaib/WikiPlayground/blob/main/README.md" target="_blank">Guida</a>
<a class="dropdown-item" href="https://labaib.github.io/WikiPlayground/stats.html" target="_blank">Statistiche</a>
<a class="dropdown-item" href="https://www.wikidata.org/wiki/Property_talk:P396" target="_blank">Proprietà P396</a>
<a class="dropdown-item" href="https://query.wikidata.org/" target="_blank">Query Service</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://github.com/labaib/WikiPlayground" target="_blank">Github</a>
</div>
</li>
<li class="position-absolute mt-2 start-50 translate-middle-x">
<a class="navbar-brand" href="/WikiPlayground/"><b><i>WikiPlayground</i></b></a>
</li>
<li class="nav-item my-auto">
<div id="login_status" class="alert alert-danger text-danger m-0 px-2 pt-1" role="alert" style="height: 2em;">Non connesso</div>
</li>
</ul>
</nav>
<div class="flex-container px-3">
<!-- Riga 1 -->
<div class="row half-height">
<div class="col-10" style="height: 90%;">
<!-- Wikidata Main iFrame -->
<div class="card mx-1 p-3 shadow" style="height: 100%;" id="iframe_wiki_card"></div>
</div>
<!-- Bottoni sulla colonna di destra -->
<div class="col-1 d-flex flex-column justify-content-center" style="height: 80%;">
<!-- Informazioni -->
<button type="button" id="info_btn" class="btn btn-outline-secondary menu-btn my-auto mx-auto shadow" style="width: 5em; height: 5em;" data-bs-toggle="tooltip" title="Informazioni">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-info-lg" viewBox="0 0 16 16">
<path d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0"/>
</svg>
</button>
<!-- Inserisci ID SBN -->
<button type="button" id="edit_btn" class="btn btn-outline-primary my-auto mx-auto shadow" style="width: 5em; height: 5em;" data-bs-toggle="tooltip" title="Importa">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
</svg>
</button>
<!-- Prossimo elemento -->
<button type="button" id="next_btn" class="btn btn-outline-warning menu-btn my-auto mx-auto shadow" style="width: 5em; height: 5em;" data-bs-toggle="tooltip" title="Prossimo elemento">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
</svg>
</button>
</div>
<div class="col-1 d-flex flex-column justify-content-center" style="height: 80%; padding-left: 0;">
<!-- Link GitHub -->
<a type="button" href="https://opac.sbn.it/voci-controllate-nomi" target="_blank" class="btn btn-outline-dark my-auto mx-auto shadow" style="width: 5em; height: 5em;" data-bs-toggle="tooltip" title="Ricerca avanzata OPAC SBN">
<img src="img/user.png" alt="Icona" width="33" height="33" style="margin-left: 0.6em; margin-top: 1.1em;" >
</a>
<!-- Segnala elemento -->
<button type="button" id="notice_btn" class="btn btn-outline-danger menu-btn my-auto mx-auto shadow" style="width: 5em; height: 5em;" data-bs-toggle="tooltip" title="Segnala problema">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cone-striped" viewBox="0 0 16 16">
<path d="m9.97 4.88.953 3.811C10.159 8.878 9.14 9 8 9s-2.158-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12m-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.275 3.9C6.8 3.965 7.382 4 8 4s1.2-.036 1.725-.098m4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257z"/>
</svg>
</button>
<!-- Status / Risultati -->
<button type="button" id="count_btn" class="btn btn-outline-secondary my-auto mx-auto shadow" style="width: 5em; height: 5em;">
<div class="spinner-border mt-1" role="status"></div>
</button>
</div>
</div>
<!-- Riga 2 -->
<div class="row half-height">
<div class="col" style="height: 100%;">
<div class="card border-0 bg-transparent" id="iframe_opac_card" style="height: 100%;">
<div class="row m-1" style="height: 100%;">
<!-- Lista risultati -->
<ul class="list-group list-group-horizontal overflow-x-auto justify-content-center bg-transparent align-items-center" id="opac_list" style="width: 100%; height: 100%;"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Info Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-outline-dark" href="/WikiPlayground/stats.html" target="_blank" role="button">Statistiche</a>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
</div>
<!-- Contenuto README.md -->
<div class="modal-body overflow-y-auto" id="info-body" style="height: 50em;"></div>
</div>
</div>
</div>
<!-- Status Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Esito operazione -->
<div id="status-body" class="modal-body text-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- Funzione principale -->
<script type="module" src="./index.js"></script>
</body>
</html>