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">
<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>
@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">
@context.User.Identity?.Name!.Split("@")[0]
<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">
<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>
<img class="p-3" src="img/exit.svg" alt=""/>
</div>
</a>
</Authorized>

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

@@ -4,7 +4,7 @@
@layout OtchislenieLayout
<style>
.button-cover, .knobs, .layer
.knobs, .layer
{
position: absolute;
top: 0;
@@ -17,17 +17,13 @@
{
position: relative;
top: 50%;
width: 74px;
height: 36px;
width: 5rem;
height: 2.6rem;
margin: -20px auto 0 auto;
overflow: hidden;
margin-top: 4px;
}
.button-custom.r, .button-custom.r .layer
{
border-radius: 100px;
}
.checkbox-custom
{
position: relative;
@@ -45,22 +41,19 @@
z-index: 2;
}
/* button-custom 1 */
#button-custom-1 .knobs:before
{
content: 'D';
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 10px;
width: 2.1rem;
height: 2.1rem;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 14px 14px;
background-color: #03A9F4;
font-size: 22px;
padding: 1px 12px 12px 11px;
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
border-radius: 50%;
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
@@ -74,6 +67,31 @@
</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="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">
@@ -81,66 +99,89 @@
<h2 class="card-title text-center text-3xl justify-center my-4">Кто ты воин?</h2>
<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="Спец" 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="Маг"/>
</div>
<div class="flex flex-col space-y-4 mt-1">
<button class="btn h-16 btn-primary rounded-full text-2xl relative">
Понизить курс
<div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
<svg class="p-2" fill="none" viewBox="0 0 24 24" id="down-trend-round" xmlns="http://www.w3.org/2000/svg">
<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>
</svg>
</div>
<i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i>
</button>
<button class="btn h-16 btn-primary p-0 rounded-full text-2xl relative">
Уйти в академ
<div class="absolute bg-base-200 rounded-full right-1 w-14 h-14">
<img class="p-2" src="img/akadem.svg" alt=""/>
</div>
<i class="absolute text-sm bottom-0 text-base-200 font-medium">временно не доступно</i>
</button>
<div class="divider"></div>
<h2 class="text-center text-2xl justify-center my-4">Курс?</h2>
<div class="join rounded-full justify-center">
<input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="1"/>
<input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="2"/>
<input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="3"/>
<input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="4"/>
<input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="5"/>
</div>
<h2 class="text-center text-2xl justify-center my-4">Платник?</h2>
<div class="button-custom r" id="button-custom-1">
<input type="checkbox" class="checkbox-custom"/>
<div class="knobs"></div>
<div class="layer rounded-full" style="background-color: white;"></div>
</div>
<h2 class="text-center text-2xl justify-center my-4">Номер</h2>
<div class="relative rounded-full justify-center mx-auto">
<div class="absolute top-2 left-0 flex items-center pl-3">
<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 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 class="relative"> *@
@* <div class="text-center font-bold text-4xl md:text-5xl w-max absolute -top-1/3 italic">Небольшая анкета</div> *@
@* *@
@* <div class="relative"> *@
@*
@* <div class="mb-4"> *@
@* <h2 class="text-xl font-semibold mb-2">Курс?</h2> *@
@* <div class="join"> *@
@* <input class="join-item btn" type="radio" name="kurs" aria-label="1" checked="checked"/> *@
@* <input class="join-item btn" type="radio" name="kurs" aria-label="2"/> *@
@* <input class="join-item btn" type="radio" name="kurs" aria-label="3"/> *@
@* <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> *@
@* </div> *@
@* <div class="mb-4"> *@
@* <h2 class="text-xl font-semibold mb-2">Платник?</h2> *@
@* <div class="button-custom r" id="button-custom-1"> *@
@* <input type="checkbox" class="checkbox-custom"> *@
@* <div class="knobs"></div> *@
@* <div class="layer" style="background-color: white;"></div> *@
@* </div> *@
@* <div class="btn-group btn-group-horizontal"> *@
@* <button class="btn btn-outline btn-primary">+</button> *@
@* <button class="btn btn-outline">7</button> *@
@* <button class="btn btn-outline">9</button> *@
@* <button class="btn btn-outline">9</button> *@
@* <button class="btn btn-outline">9</button> *@
@* <button class="btn btn-outline">6</button> *@
@* <button class="btn btn-outline">6</button> *@
@* <button class="btn btn-outline">6</button> *@
@* <button class="btn btn-outline">3</button> *@
@* <button class="btn btn-outline">3</button> *@
@* </div> *@
@* </div> *@
@* </div></div> *@
@* TODO: Баг, если вернуться обратно через Nav то скрипты не грузятся *@
<script defer>
document.getElementById('phoneNumberInput').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/\D/g, '').slice(0, 10); // Limit to 10 digits
let num = e.target.value;
if (num.length > 3 && num.length <= 6) {
e.target.value = num.substring(0,3) + ' ' + num.substring(3,6);
} else if (num.length > 6 && num.length <= 8) {
e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,8);
} else if (num.length > 8) {
e.target.value = num.substring(0,3) + ' ' + num.substring(3,6) + ' ' + num.substring(6,10);
}
});
</script>
<script>
const continueButton = document.querySelector('a[href="otchislenie/statement"]');
const options = document.querySelectorAll('input[name="options"]');
const kurs = document.querySelectorAll('input[name="kurs"]');
const phoneNumberInput = document.getElementById('phoneNumberInput');
function validateForm() {
const isOptionSelected = Array.from(options).some(option => option.checked);
const isKursSelected = Array.from(kurs).some(k => k.checked);
const isPhoneNumberValid = phoneNumberInput.value.length === 12;
// log
console.log(isOptionSelected, isKursSelected, isPhoneNumberValid);
if (isOptionSelected && isKursSelected && isPhoneNumberValid) {
continueButton.classList.remove('btn-disabled');
} else {
continueButton.classList.add('btn-disabled');
}
}
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",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "http://0.0.0.0:5211",
"applicationUrl": "http://localhost:5211",
"environmentVariables": {
"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