-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
139 lines (127 loc) · 4.48 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
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<title>ЕГН Генератор</title>
<link rel="icon" href="favicon.png" type="image/png">
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="js/libs/noUiSlider.8.5.1/nouislider.min.css">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
* {
font-size: large;
font-family: roboto;
}
input#egn {
background: white;
}
table#egns {
margin: 1em 0em;
width: 100%;
}
form.pure-form {
display: inline-block;
margin-top: 1em;
}
tbody * {
font-family: 'roboto mono', monospace;
}
.tbody-scroll {
max-height: 62vh;
display: block;
overflow: auto;
}
#age {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
#age-slider {
width: 100%;
margin: 4px 1px 19px 0;
}
#age-slider .noUi-connect {
background: #0078e7;
}
#btn:active {
background: #1cb841;
}
@media only screen and (max-device-width: 768px),
only screen and (max-width: 768px) {
.pure-form {
margin: 4px 46px 4px 26px;
}
.pure-form > * {
width: 100%;
margin: 4px 0px;
}
}
</style>
</head>
<body>
<script src="js/libs/underscore-min.js"></script>
<script src="js/libs/moment.min.js"></script>
<script src="js/libs/noUiSlider.8.5.1/nouislider.min.js"></script>
<script src="js/checker.js"></script>
<script src="js/cs.js"></script>
<center>
<form class="pure-form">
<input id="egn" type="text" pattern="[0-9?\[\-,\](|)*]*" placeholder="ЕГН" autofocus>
<select id="gender">
<option value="?">Пол</option>
<option value="M">Мъж</option>
<option value="F">Жена</option>
</select>
<select id="region">
<option value="?">Област</option>
<option value="Благоевград">Благоевград</option>
<option value="Бургас">Бургас</option>
<option value="Варна">Варна</option>
<option value="Велико Търново">Велико Търново</option>
<option value="Видин">Видин</option>
<option value="Враца">Враца</option>
<option value="Габрово">Габрово</option>
<option value="Добрич (Толбухин)">Добрич (Толбухин)</option>
<option value="Кърджали">Кърджали</option>
<option value="Кюстендил">Кюстендил</option>
<option value="Ловеч">Ловеч</option>
<option value="Монтана">Монтана</option>
<option value="Пазарджик">Пазарджик</option>
<option value="Перник">Перник</option>
<option value="Плевен">Плевен</option>
<option value="Пловдив">Пловдив</option>
<option value="Разград">Разград</option>
<option value="Русе">Русе</option>
<option value="Силистра">Силистра</option>
<option value="Сливен">Сливен</option>
<option value="Смолян">Смолян</option>
<option value="София - град">София - град</option>
<option value="София - окръг">София - окръг</option>
<option value="Стара Загора">Стара Загора</option>
<option value="Търговище">Търговище</option>
<option value="Хасково">Хасково</option>
<option value="Шумен">Шумен</option>
<option value="Ямбол">Ямбол</option>
<option value="Друг/Неизвестен">Друг/Неизвестен</option>
</select>
<button id="btn" class="pure-button pure-button-primary">Намери!</button>
<div id="age">
<label>Възраст</label>
<div id="age-slider"></div>
</div>
<table id="egns" class="pure-table">
<thead></thead>
<tbody></tbody>
</table>
</form>
</center>
</body>
</html>