Страница с фильтром #2

lup- · 2018-07-31T19:27:31Z

Нужно сделать страницу для сбора дополнительных данных и предпочтений пользователя:
https://circles.humanistic.tech/filter.html

circles/public/filter.html

Lines 1 to 167 in f7e7a7a

    
           <!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>

Переход на страницу осуществляется сразу после регистрации. После того, как пользователь определяет свои перпочтения, данные передаются на бэкенд и сохраняются в БД (POST /api/user/update, #3 ), после чего пользователь переходит к странице ожидания в очереди (https://circles.humanistic.tech/wait.html)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Страница с фильтром #2

Страница с фильтром #2

lup- commented Jul 31, 2018 •

edited

Loading

Страница с фильтром #2

Страница с фильтром #2

Comments

lup- commented Jul 31, 2018 • edited Loading

lup- commented Jul 31, 2018 •

edited

Loading