serega404/Otchislator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Доверстал анкету

Browse Source
This commit is contained in:
Sergey Karmanov
2024-12-13 10:05:45 +03:00
parent 619a158d13
commit 4428052d78
5 changed files with 123 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Otchinslator/Components/Layout/NavMenu.razor
View File

@@ -34,9 +34,9 @@
} }
} }
<footer class="card fixed bottom-0 w-96 h-20 bg-base-200 rounded-badge p-4 mb-3"> <footer class="card fixed bottom-0 w-96 sm:w-[32rem] h-20 bg-base-200 rounded-badge p-4 mb-3">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<ul class="steps justify-center center"> <ul class="steps justify-center center w-full text-sm">
<a href="/" class="step step-primary text-gray-500">Выбор</a> <a href="/" class="step step-primary text-gray-500">Выбор</a>
@foreach (int i in Enumerable.Range(1, 4)) @foreach (int i in Enumerable.Range(1, 4))
{ {

5
src/Otchinslator/Components/Pages/Home.razor
View File

@@ -65,10 +65,7 @@
<a href="MicrosoftIdentity/Account/SignOut" class="btn btn-lg btn-primary rounded-full text-2xl relative"> <a href="MicrosoftIdentity/Account/SignOut" class="btn btn-lg btn-primary rounded-full text-2xl relative">
@context.User.Identity?.Name!.Split("@")[0] @context.User.Identity?.Name!.Split("@")[0]
<div class="absolute bg-base-200 rounded-full right-1 w-14 h-14"> <div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
<svg class="p-3" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <img class="p-3" src="img/exit.svg" alt=""/>
<path d="M16.5 15V19.5H5.5V5.5H16.5V10M10 12.5H22.5" stroke="#121923" stroke-width="1.2"/>
<path d="M20 10L22.5 12.5L20 15" stroke="#121923" stroke-width="1.2"/>
</svg>
</div> </div>
</a> </a>
</Authorized> </Authorized>

187
src/Otchinslator/Components/Pages/Questionnaire.razor
View File

@@ -4,7 +4,7 @@
@layout OtchislenieLayout @layout OtchislenieLayout
<style> <style>
.button-cover, .knobs, .layer .knobs, .layer
{ {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -17,15 +17,11 @@
{ {
position: relative; position: relative;
top: 50%; top: 50%;
width: 74px; width: 5rem;
height: 36px; height: 2.6rem;
margin: -20px auto 0 auto; margin: -20px auto 0 auto;
overflow: hidden; overflow: hidden;
} margin-top: 4px;
.button-custom.r, .button-custom.r .layer
{
border-radius: 100px;
} }
.checkbox-custom .checkbox-custom
@@ -45,22 +41,19 @@
z-index: 2; z-index: 2;
} }
/* button-custom 1 */
#button-custom-1 .knobs:before #button-custom-1 .knobs:before
{ {
content: 'D'; content: '';
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
width: 20px; width: 2.1rem;
height: 10px; height: 2.1rem;
color: #fff; color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center; text-align: center;
line-height: 1; font-size: 22px;
padding: 14px 14px; padding: 1px 12px 12px 11px;
background-color: #03A9F4; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
border-radius: 50%; border-radius: 50%;
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
} }
@@ -74,6 +67,31 @@
</style> </style>
<dialog id="exit_modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">Сервис отчислений</h3>
<p class="py-4">Вы уверены что хотите выйти? Прогресс не сохранится</p>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-error">На главную</button>
<button class="btn btn-primary">Закрыть</button>
</form>
</div>
</div>
</dialog>
<dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">Сервис отчислений</h3>
<p class="py-4">Вам нужно заполнить эти данные для шапки заявления</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Закрыть</button>
</form>
</div>
</div>
</dialog>
<div class="relative"> <div class="relative">
<div class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic"><br>Небольшая анкета</div> <div class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic"><br>Небольшая анкета</div>
<div class="flex flex-col space-y-4 w-96"> <div class="flex flex-col space-y-4 w-96">
@@ -81,66 +99,89 @@
<h2 class="card-title text-center text-3xl justify-center my-4">Кто ты воин?</h2> <h2 class="card-title text-center text-3xl justify-center my-4">Кто ты воин?</h2>
<div class="join rounded-full justify-center"> <div class="join rounded-full justify-center">
<input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Баклан"/> <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Баклан"/>
<input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Спец" checked="checked"/> <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Спец"/>
<input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Маг"/> <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Маг"/>
</div> </div>
<div class="flex flex-col space-y-4 mt-1"> <h2 class="text-center text-2xl justify-center my-4">Курс?</h2>
<button class="btn h-16 btn-primary rounded-full text-2xl relative"> <div class="join rounded-full justify-center">
Понизить курс <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="1"/>
<div class="absolute bg-base-200 rounded-full right-1 w-14 h-14"> <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="2"/>
<svg class="p-2" fill="none" viewBox="0 0 24 24" id="down-trend-round" xmlns="http://www.w3.org/2000/svg"> <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="3"/>
<path id="primary" d="M3,7l5.79,5.79a1,1,0,0,0,1.42,0l2.58-2.58a1,1,0,0,1,1.42,0L21,17" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5;"></path><polyline id="primary-2" data-name="primary" points="17 17 21 17 21 13" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5;"></polyline> <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="4"/>
</svg> <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="5"/>
</div> </div>
<i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i> <h2 class="text-center text-2xl justify-center my-4">Платник?</h2>
</button> <div class="button-custom r" id="button-custom-1">
<button class="btn h-16 btn-primary p-0 rounded-full text-2xl relative"> <input type="checkbox" class="checkbox-custom"/>
Уйти в академ <div class="knobs"></div>
<div class="absolute bg-base-200 rounded-full right-1 w-14 h-14"> <div class="layer rounded-full" style="background-color: white;"></div>
<img class="p-2" src="img/akadem.svg" alt=""/> </div>
</div> <h2 class="text-center text-2xl justify-center my-4">Номер</h2>
<i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i> <div class="relative rounded-full justify-center mx-auto">
</button> <div class="absolute top-2 left-0 flex items-center pl-3">
<div class="divider"></div> <span class="text-2xl">+7</span>
<div class="h-6 border-l-2 border-slate-200 ml-2"></div>
</div>
<input
type="tel"
class="h-12 w-[14rem] bg-white rounded-full placeholder:text-slate-400 text-slate-700 text-2xl pr-3 pl-14 py-2 transition duration-300 focus:outline-none focus:bg-primary"
placeholder="999 999 99 99"
pattern="[0-9]*"
inputmode="numeric"
maxlength="12"
id="phoneNumberInput"/>
</div> </div>
</div> </div>
</div> </div>
<div class="join w-full mt-4 flex gap-2">
<button onclick="exit_modal.showModal()" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
<img class="absolute p-3" src="img/exit.svg" alt=""/>
</button>
<a href="otchislenie/statement" class="btn rounded-full btn-primary flex-grow w-30">Продолжим</a>
<button onclick="info_modal.showModal()" class="btn btn-primary rounded-full flex-grow-0 w-[3rem]">?</button>
</div>
</div> </div>
@* <div class="relative"> *@ @* TODO: Баг, если вернуться обратно через Nav то скрипты не грузятся *@
@* <div class="text-center font-bold text-4xl md:text-5xl w-max absolute -top-1/3 italic">Небольшая анкета</div> *@ <script defer>
@* *@ document.getElementById('phoneNumberInput').addEventListener('input', function (e) {
@* <div class="relative"> *@ e.target.value = e.target.value.replace(/\D/g, '').slice(0, 10); // Limit to 10 digits
@* let num = e.target.value;
@* <div class="mb-4"> *@ if (num.length > 3 && num.length <= 6) {
@* <h2 class="text-xl font-semibold mb-2">Курс?</h2> *@ e.target.value = num.substring(0,3) + ' ' + num.substring(3,6);
@* <div class="join"> *@ } else if (num.length > 6 && num.length <= 8) {
@* <input class="join-item btn" type="radio" name="kurs" aria-label="1" checked="checked"/> *@ e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,8);
@* <input class="join-item btn" type="radio" name="kurs" aria-label="2"/> *@ } else if (num.length > 8) {
@* <input class="join-item btn" type="radio" name="kurs" aria-label="3"/> *@ e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,10);
@* <input class="join-item btn" type="radio" name="kurs" aria-label="4"/> *@ }
@* <input class="join-item btn" type="radio" name="kurs" aria-label="5"/> *@ });
@* </div> *@ </script>
@* </div> *@
@* <div class="mb-4"> *@ <script>
@* <h2 class="text-xl font-semibold mb-2">Платник?</h2> *@ const continueButton = document.querySelector('a[href="otchislenie/statement"]');
@* <div class="button-custom r" id="button-custom-1"> *@ const options = document.querySelectorAll('input[name="options"]');
@* <input type="checkbox" class="checkbox-custom"> *@ const kurs = document.querySelectorAll('input[name="kurs"]');
@* <div class="knobs"></div> *@ const phoneNumberInput = document.getElementById('phoneNumberInput');
@* <div class="layer" style="background-color: white;"></div> *@
@* </div> *@ function validateForm() {
@* <div class="btn-group btn-group-horizontal"> *@ const isOptionSelected = Array.from(options).some(option => option.checked);
@* <button class="btn btn-outline btn-primary">+</button> *@ const isKursSelected = Array.from(kurs).some(k => k.checked);
@* <button class="btn btn-outline">7</button> *@ const isPhoneNumberValid = phoneNumberInput.value.length === 12;
@* <button class="btn btn-outline">9</button> *@
@* <button class="btn btn-outline">9</button> *@ // log
@* <button class="btn btn-outline">9</button> *@ console.log(isOptionSelected, isKursSelected, isPhoneNumberValid);
@* <button class="btn btn-outline">6</button> *@
@* <button class="btn btn-outline">6</button> *@ if (isOptionSelected && isKursSelected && isPhoneNumberValid) {
@* <button class="btn btn-outline">6</button> *@ continueButton.classList.remove('btn-disabled');
@* <button class="btn btn-outline">3</button> *@ } else {
@* <button class="btn btn-outline">3</button> *@ continueButton.classList.add('btn-disabled');
@* </div> *@ }
@* </div> *@ }
@* </div></div> *@
options.forEach(option => option.addEventListener('change', validateForm));
kurs.forEach(k => k.addEventListener('change', validateForm));
phoneNumberInput.addEventListener('input', validateForm);
validateForm(); // Initial validation
</script>

2
src/Otchinslator/Properties/launchSettings.json
View File

@@ -25,7 +25,7 @@
"commandName": "Project", "commandName": "Project",
"dotnetRunMessages": true, "dotnetRunMessages": true,
"launchBrowser": true, "launchBrowser": true,
"applicationUrl": "http://0.0.0.0:5211", "applicationUrl": "http://localhost:5211",
"environmentVariables": { "environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development" "ASPNETCORE_ENVIRONMENT": "Development"
} }

4
src/Otchinslator/wwwroot/img/exit.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 15V19.5H5.5V5.5H16.5V10M10 12.5H22.5" stroke="#121923" stroke-width="1.2"/>
<path d="M20 10L22.5 12.5L20 15" stroke="#121923" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B