|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" |
|
type="text/css"> |
|
<link rel="stylesheet" href="assets/theme.css" type="text/css"> |
|
<style> |
|
.btn-group.full-width { |
|
display: flex; |
|
} |
|
|
|
.btn-group.full-width .btn { |
|
flex: 1; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div class="py-5"> |
|
<div class="container"> |
|
<form class=""> |
|
<div class="row align-items-center justify-content-center pb-4"> |
|
<div class="col-md-6"> |
|
<h1 class="display-4 text-center">Дополнительные данные</h1> |
|
<div class="card"> |
|
<div class="card-body"> |
|
<div class="form-group"> |
|
<div class="row"> |
|
<label class="col">Статус</label> |
|
</div> |
|
<div class="btn-group btn-group-toggle full-width" data-toggle="buttons"> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="status" id="status-search" autocomplete="off"> В поиске |
|
</label> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="status" id="status-married" autocomplete="off"> В браке |
|
</label> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="status" id="status-complicated" autocomplete="off"> Все сложно |
|
</label> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<div class="row"> |
|
<label class="col">Цель</label> |
|
</div> |
|
<div class="btn-group btn-group-toggle full-width" data-toggle="buttons"> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="aim" id="aim-couple" autocomplete="off"> Найти пару |
|
</label> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="aim" id="aim-chat" autocomplete="off"> Поболтать |
|
</label> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<div class="row"> |
|
<label class="col">Образование</label> |
|
</div> |
|
<div class="btn-group btn-group-toggle full-width" data-toggle="buttons"> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="education" id="education-base" autocomplete="off"> Начальное |
|
</label> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="education" id="education-middle" autocomplete="off"> Среднее |
|
</label> |
|
<label class="btn btn-outline-primary"> |
|
<input type="radio" name="education" id="education-high" autocomplete="off"> Высшее |
|
</label> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="">Рост</label> |
|
<input type="number" class="form-control" placeholder="170"></div> |
|
<div class="form-group"> |
|
<label class="">Телефон для связи</label> |
|
<input type="text" class="form-control" |
|
placeholder="+7 (999) 123-45-67"> |
|
<small class="form-text"> Мы покажем этот телефон понравившимся |
|
людям с вашего согласия |
|
</small> |
|
</div> |
|
<div class="form-group"> |
|
<label class="">О себе</label> |
|
<textarea class="form-control" style="min-width: 100%"></textarea> |
|
<small class="form-text">Расскажите о себе в свободной форме. Что вам нравится? Как вы проводите свободное время?</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row align-items-center justify-content-center"> |
|
<div class="col-md-6"> |
|
<h1 class="display-4 text-center">Ваши предпочтения</h1> |
|
<div class="card"> |
|
<div class="card-body"> |
|
<div class="btn-group btn-group-toggle btn-group-lg pb-2 align-items-center justify-content-center" |
|
style="width: 100%" data-toggle="buttons"> |
|
<label class="btn btn-lg p-2 btn-outline-primary" |
|
style="background-image: url('assets/woman-with-dress.svg');background-repeat:no-repeat;background-position:center center;background-size:96px; width: 128px; height: 128px;"> |
|
<input type="radio" name="sex" id="sex-female" autocomplete="off"> |
|
</label> |
|
<label class="btn btn-outline-primary btn-lg" |
|
style="background-image: url('assets/man.svg');background-repeat:no-repeat;background-position:center center;background-size: 96px; width: 128px; height: 128px"> |
|
<input type="radio" name="sex" id="sex-male" autocomplete="off"> |
|
</label> |
|
</div> |
|
<div class="form-group"> |
|
<label class="">Статус</label> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck1"> |
|
<label class="form-check-label" for="exampleCheck1">В поиске</label> |
|
</div> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck2"> |
|
<label class="form-check-label" for="exampleCheck2">В браке</label> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="">Цель</label> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck3"> |
|
<label class="form-check-label" for="exampleCheck3">Знакомство</label> |
|
</div> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck4"> |
|
<label class="form-check-label" for="exampleCheck4">Брак</label> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="">Образование</label> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck5"> |
|
<label class="form-check-label" for="exampleCheck5">Начальное</label> |
|
</div> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck6"> |
|
<label class="form-check-label" for="exampleCheck6">Среднее</label> |
|
</div> |
|
<div class="form-check"> |
|
<input type="checkbox" class="form-check-input" id="exampleCheck7" value="on"> |
|
<label class="form-check-label" for="exampleCheck7">Высшее</label> |
|
</div> |
|
</div> |
|
<a href="wait.html" class="btn btn-primary btn-block btn-lg">Продолжить</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" |
|
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" |
|
crossorigin="anonymous"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" |
|
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" |
|
crossorigin="anonymous"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" |
|
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" |
|
crossorigin="anonymous"></script> |
|
</body> |
|
|
|
</html> |
Нужно сделать страницу для сбора дополнительных данных и предпочтений пользователя:
https://circles.humanistic.tech/filter.html
circles/public/filter.html
Lines 1 to 167 in f7e7a7a
Переход на страницу осуществляется сразу после регистрации. После того, как пользователь определяет свои перпочтения, данные передаются на бэкенд и сохраняются в БД (POST /api/user/update, #3 ), после чего пользователь переходит к странице ожидания в очереди (https://circles.humanistic.tech/wait.html)