-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (104 loc) · 7.91 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
<!--
Subnetting-Bootstrap v1.0.0 (https://github.com/vittorioPiotti/Subnetting-Bootstrap/releases/tag/1.0.0)
Copyright 2024 Vittorio Piotti
Licensed under GPL-3.0 (https://github.com/vittorioPiotti/Subnetting-Bootstrap/blob/main/LICENSE.md)
-->
<!--
Bootstrap v4.0.0 (https://getbootstrap.com)
Copyright 2011-2018 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Subnetting</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-globe' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7.5' fill='white'/><path d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z'/></svg>">
<meta property="og:title" content="Subnetting Solver">
<meta property="og:description" content="Sito web per la risoluzione degli esercizi sulle reti. Identifica il tipo di IP, verifica se due IP sono della stessa rete, effettua la FLSM e la VLSM.">
<meta property="og:url" content="https://vittoriopiotti.altervista.org/Subnetting/index.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://github.com/vittorioPiotti/Subnetting-Bootstrap/blob/main/screenshots/flsm.png?raw=true">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
</head>
<body class="bg-light m-lg-5 m-md-4 m-3" onload="init()">
<div class="container">
<div class="row">
<div class="col-lg-5 col-12 mb-3" id="inputForm">
<div class="container m-auto bg-white p-4 border border-opacity-10 rounded-4 shadow ">
<p class="fw-bold fs-3">
Input
</p>
<label class="form-label fs-6 fw-light" ><small>Esercizio:</small></label>
<select class="form-select mb-4" id="choice" onchange="initInput()">
</select>
<div id="input">
</div>
<button class="btn btn-primary pe-4 ps-4 p-2 fw-light" onclick="load()">
Risolvi
</button>
</div>
</div>
<div class="col-lg-7 col-12 mb-3" id="outputForm">
<div class="container m-auto bg-white p-4 border border-opacity-10 rounded-4 shadow">
<div class="row">
<div class="col">
<p class="fw-bold fs-3">
Output
</p>
</div>
<div class="col d-flex justify-content-end align-items-center text-center" id="select"></div>
</div>
<div id="output">
<p class="fs-6">
<small>Visualizza qui la soluzione dell'esercizio</small>
</p>
</div>
</div>
</div>
</div>
<div class="hstack gap-3 float-start mt-3 mb-4">
<div>
<a id="linkGitHub"href="https://github.com/DamnedFR34K/Subnetting">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a>
</div>
<div class="vr"></div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
</svg>
Subnetting Solver
</div>
</div>
</div>
<div class="modal fade" id="errore" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center m-1 pt-4">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-x-circle text-danger" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
<p class="fw-bold fs-3 mt-4">
Invalid input
</p>
<p class="fs-6 text-muted">
Please enter only integers
</p>
<button class="btn btn-info text-white pe-3 ps-3 p-1 fw-ligh float-end" data-bs-target="#errore" data-bs-toggle="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>