-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (119 loc) · 6.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./libs/noUiSlider/nouislider.css">
<link rel="stylesheet" href="./img/ico/favicon.ico" type="image/x-icon">
<title>Онлайн калькулятор ипотеки</title>
</head>
<body>
<div class="container">
<div class="title">Онлайн калькулятор ипотеки</div>
<div class="row">
<form id="form" class="col-left">
<div class="programms-wraper">
<input type="radio" name="program" value="zero" id="zero-value" class="radio-hidden">
<label for="zero-value" class="radio-label">Без первоначального взноса - <span id="zero-text"> </span>%</label>
<input type="radio" name="program" value="base" id="base-value" class="radio-hidden" checked >
<label for="base-value" class="radio-label">Базовая ставка - <span id="base-text">XX </span>%</label>
<input type="radio" name="program" value="it" id="it-value" class="radio-hidden">
<label for="it-value" class="radio-label">Ипотека для IT - <span id="it-text">XX </span>%</label>
<input type="radio" name="program" value="family" id="family-value" class="radio-hidden">
<label for="family-value" class="radio-label">Семейная - <span id="family-text">XX </span>%</label>
<input type="radio" name="program" value="gov" id="gov-value" class="radio-hidden">
<label for="gov-value" class="radio-label">Господдержка - <span id="gov-text">XX </span>%</label>
<input type="radio" name="program" value="cottage" id="cottage-value" class="radio-hidden">
<label for="cottage-value" class="radio-label">Ипотека на загородную недвижимость - <span id="cottage-text">XX </span>%</label>
<input type="radio" name="program" value="business" id="business-value" class="radio-hidden">
<label for="business-value" class="radio-label">Коммерческая недвижимость - <span id="business-text">XX </span>%</label>
<input type="radio" name="program" value="forigner" id="forigner-value" class="radio-hidden">
<label for="forigner-value" class="radio-label">Для иностранных граждан - <span id="forigner-text">XX </span>%</label>
</div>
<div class="params-wrapper">
<label class="param">
<div class="param__details">
<div class="param__title">Стоимость недвижимости</div>
<input type="text" class="param__value" value="" inputmode="decimal" id="input-cost">
</div>
<div class="param__range-slider" id="slider-cost"></div>
<div class="param__limits limit">
<div class="limit__from">375 тыс. Р</div>
<div class="limit__50">10 млн Р</div>
<div class="limit__to">100 млн Р</div>
</div>
</label>
<label class="param">
<div class="param__details">
<div class="param__title">Первоначальный взнос</div>
<input type="text" class="param__value" value="" id="input-downpayment">
</div>
<div class="param__range-slider" id="slider-downpayment"></div>
<div class="param__limits limit">
<div class="limit__from" id="percents-from">15%</div>
<div class="limit__to">90%</div>
</div>
</label>
<label class="param">
<div class="param__details">
<div class="param__title">Срок кредита</div>
<input type="text" class="param__value" value="" id="input-term">
</div>
<div class="param__range-slider" id="slider-term"></div>
<div class="param__limits limit">
<div class="limit__from">1 год</div>
<div class="limit__to">30 лет</div>
</div>
</label>
</div>
</form>
<div class="col-right">
<div class="summary">
<div class="summary__item summary-item">
<div class="summary-item__title">Ежемесячный платеж</div>
<div class="summary-item__value summary-item__value--bigger" id="total-month-payment">XXXX</div>
</div>
<div class="summary__item summary-item">
<div class="summary-item__title">Процентная ставка</div>
<div class="summary-item__value summary-item__value--bigger summary-item__value--percents" id="total-percent">XX</div>
</div>
<div class="summary__item summary-item">
<div class="summary-item__title">Сумма кредита</div>
<div class="summary-item__value" id="total-cost">XXXX</div>
</div>
<div class="summary__item summary-item">
<div class="summary-item__title">Переплата</div>
<div class="summary-item__value" id="total-overpayment">XXXX</div>
</div>
</div>
<div class="order-form-wrapper">
<button class="order-btn" id="openFormBtn" type="button">Оставить заявку</button>
<form class="order-form none" id="orderForm">
<input name="name" value="" type="text" class="order-input" placeholder="Имя, Фамилия" required>
<input name="email" value="" type="email" class="order-input" placeholder="Email" required>
<input name="phone" value="" type="text" class="order-input" placeholder="Телефон" data-tel-input required>
<button type="submit" class="order-btn order-btn--black" id="submitFormBtn">Оформить заявку</button>
</form>
<div id="success" class="alert alert--success none" role="alert">
<span class="alert__icon">😃 👍 </span>
<span class="alert__text">Заявка отправлена успешно!</span>
</div>
<div id="error" class="alert alert--danger none" role="alert">
<span class="alert__icon">🙄</span>
<span class="alert__text">Что-то пошло не так. <br>Попробуйте еще раз</span>
</div>
</div>
</div>
</div>
</div>
<!-- Libs -->
<script src="./libs/wNumb/wNumb.min.js"></script>
<script src="./libs/noUiSlider/nouislider.min.js"></script>
<script src="./libs/cleaveJS/cleave.min.js"></script>
<script src="./libs/phoneInput/phoneInput.js"></script>
<!-- Scripts -->
<script src="./js/controller.js" type="module" defer></script>
</body>
</html>