PAYDAY/PayDayCSharpFrontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Форма третья секция

Browse Source
This commit is contained in:
Vsevo;od 2023-07-29 23:07:15 +03:00
parent 202ba42bb5
commit 1afcb17845
12 changed files with 492 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
PaydayFrontend/Views/Home/Index.cshtml
View File

@ -1,16 +1,23 @@
@model List<University>
@model List<University>
@{
ViewData["Title"] = "Home Page";
}
@{
ViewData["Title"] = "Home Page";
}
<section class="universe">
<div class="container container_flex">
<<<<<<< Updated upstream
<div class="row">
<form class="universe_input_block col-md-12">
<input type="text" class="universe_input" name="searchString" placeholder="Введите название вуза или суза...">
<input type="image" src="/img/logo/search.svg" alt="search" class="universe_search">
</form>
=======
<div class="row row_flex">
<div class="universe_input_block col-md-12">
<input type="text" class="universe_input" placeholder="Введите название вуза или суза..."><img src="/img/logo/search.svg" alt="search" class="universe_search">
</div>
>>>>>>> Stashed changes
@{
foreach (var university in Model)
{

7
PaydayFrontend/Views/Home/SecondPage.cshtml
View File

@ -1,11 +1,10 @@
@{
@{
ViewData["Title"] = "Выбор направления";
}
<section class="navigation">
<section class="navigation">
<div class="container container_flex">
<div class="row">
<div class="navigation_input_block col-md-12"><input type="text" class="navigation_input" placeholder="Введите код или название направления"><img src="img/logo/search.svg" alt="search" class="navigation_search"></div>
<div class="navigation_input_block col-md-12"><input type="text" class="navigation_input" placeholder="Введите код или название направления"><img src="/img/logo/search.svg" alt="search" class="navigation_search"></div>
</div>
<div class="row row-cols-lg-1 g-5 g-lg-3">
<div class="col-md-12">

56
PaydayFrontend/Views/Home/ThirdPage.cshtml
View File

@ -1,8 +1,7 @@
@{
@{
ViewData["Title"] = "Home Page";
}
<div class="fixed"></div>
<div class="fixed"></div>
<section class="navigation">
<div class="container container_flex">
@ -18,7 +17,7 @@
</div>
</div>
<div class="row row-cols-lg-10 g-5 g-lg-3">
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -28,7 +27,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -38,7 +37,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -48,7 +47,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -58,7 +57,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -68,7 +67,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -78,7 +77,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -88,7 +87,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -98,7 +97,7 @@
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div data-modal class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
@ -120,6 +119,35 @@
<span class="navigation_slid_disable"></span>
</div>
</div>
<div class="back"><img src="img/icons/arrow.svg" alt="back" class="back_img"></div>
</section>
<div class="my_modal">
<div class="my_modal__dialog">
<div class="my_modal__content">
<form action="#">
<div data-close class="my_modal__close">&times;</div>
<div class="bank_information">
<div class="bank_block_img"><img class="bank_img" src="/src/img/icons/alpha.png" alt="bank">
<div class="bank_procent">10%</div></div>
<div class="bank_name">Альфа Банк</div>
<div class="bank_form">
<span>Вам необходимы следующие документы:</span>
<span>Наш процент:</span>
<span>Ваше направление:</span>
<span>Плата в месяц:</span>
<span>Общая стоимость образования:</span>
</div>
</div>
<div class="form_btn_block">
<div class="form_btn">Продолжить<img src="/src/img/logo/esia.png" alt="esia" class="form_btn_img"></div>
</section>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/script.js"></script>

2
PaydayFrontend/wwwroot/css/style.css
View File

File diff suppressed because one or more lines are too long

2
PaydayFrontend/wwwroot/css/style.css.map
View File

File diff suppressed because one or more lines are too long

52
PaydayFrontend/wwwroot/img/form/spinner.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="38px" height="38px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#337ab7">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

5
PaydayFrontend/wwwroot/img/icons/arrow.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="maki:arrow">
<path id="Vector" d="M21.9096 41.5095C21.297 42.1219 20.4662 42.466 19.6 42.466C18.7338 42.466 17.9031 42.1219 17.2905 41.5095L2.5905 26.8095C1.9781 26.197 1.63407 25.3662 1.63407 24.5C1.63407 23.6338 1.9781 22.8031 2.5905 22.1905L17.2905 7.49047C17.9066 6.89542 18.7318 6.56616 19.5883 6.57361C20.4448 6.58105 21.2641 6.9246 21.8698 7.53026C22.4754 8.13593 22.819 8.95526 22.8264 9.81176C22.8339 10.6683 22.5046 11.4934 21.9096 12.1095L13.0667 21.2333L44.1 21.2333C44.9664 21.2333 45.7973 21.5775 46.4099 22.1901C47.0225 22.8027 47.3667 23.6336 47.3667 24.5C47.3667 25.3664 47.0225 26.1973 46.4099 26.8099C45.7973 27.4225 44.9664 27.7667 44.1 27.7667L13.0667 27.7667L21.9096 36.8905C22.522 37.5031 22.866 38.3338 22.866 39.2C22.866 40.0662 22.522 40.8969 21.9096 41.5095Z" fill="black"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 917 B

BIN
PaydayFrontend/wwwroot/img/logo/esia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

9
PaydayFrontend/wwwroot/js/dist/script.dev.js vendored Normal file
View File

@ -0,0 +1,9 @@
"use strict";
var menuActive = document.querySelector('.menu');
var hamburgerActive = document.querySelector('.hamburger');
console.log(menuActive);
hamburgerActive.addEventListener('click', function (el) {
el.currentTarget.classList.toggle('hamburger_active');
menuActive.classList.toggle('menu_active');
});

116
PaydayFrontend/wwwroot/js/modules/forms.js Normal file
View File

@ -0,0 +1,116 @@
import {eventModalClose, eventModalOpen} from './modal';
function forms(formSelector) {
// Forms
const forms = document.querySelectorAll(formSelector);
const message = {
loading: 'img/form/spinner.svg',
success: 'Спасибо! Сокро мы с вами свяжемся',
failure: 'Что-то пошло не так...'
};
forms.forEach(form => {
console.log(form);
bindpostData(form);
});
// const getResurses = async (url) => {
// const res = await fetch(url);
// if (!res.ok) {
// new Error(`Could not fetch ${url}, status: ${res.status}`);
// }
// return await res.json();
// };
function bindpostData(form) {
form.addEventListener('submit', (el) => {
el.preventDefault();
const statusMessage = document.createElement('img');
statusMessage.src = message.loading;
// const request = new XMLHttpRequest();
// request.open('POST', 'server.php');
// request.setRequestHeader('Content-type', 'application/json');
const formData = new FormData(form);
// request.send(json);
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`
form.insertAdjacentElement('afterend', statusMessage);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('http://localhost:3000/requests', json)
.then(data => {
console.log(data);
showTanksModal(message.success);
form.reset();
statusMessage.remove();
}).catch(() => {
showTanksModal(message.failure);
}).finally(() => {
form.reset();
});
// request.addEventListener('load', () => {
// if (request.status === 200) {
// console.log(request.response);
// showTanksModal(message.success);
// form.reset();
// statusMessage.remove();
// }
// else {
// showTanksModal(message.failure);
// }
// });
});
function showTanksModal(message) {
const previosModalDialog = document.querySelector('.modal__dialog');
previosModalDialog.classList.add('hide');
eventModalOpen('.modal');
const thanksModal = document.createElement('div');
thanksModal.classList.add('modal__dialog');
thanksModal.innerHTML = `
<div class="modal__content">
<div class="modal__close" data-close>×</div>
<div class="modal__title">${message}</div>
</div>
`;
document.querySelector('.modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
previosModalDialog.classList.add('show');
previosModalDialog.classList.remove('hide');
modalClose();
}, 4000);
}
}
}
export default forms;

63
PaydayFrontend/wwwroot/js/modules/modal.js Normal file
View File

@ -0,0 +1,63 @@
function eventModalOpen (modalSelector) {
const modal = document.querySelector(modalSelector);
modal.classList.add('show');
modal.classList.remove('hide');
document.body.style.overflow = 'hidden';
}
function eventModalClose(modalSelector) {
const modal = document.querySelector(modalSelector);
modal.classList.add('hide');
modal.classList.remove('show');
document.body.style.overflow = '';
}
function modal(triggerSelector, modalSelector) {
//Modal
const modalOpenForm = document.querySelectorAll(triggerSelector),
modal = document.querySelector(modalSelector);
console.log(modal, modalOpenForm);
function modalOpen(event) {
event.forEach(elem => {
elem.addEventListener('click', () => {
eventModalOpen(modalSelector);
});
})
}
function modalClose() {
modal.addEventListener('click', (e) => {
if (e.target === modal || e.target.getAttribute('data-close') == '') {
eventModalClose(modalSelector);
}
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Escape' && modal.classList.contains('show')) {
eventModalClose(modalSelector);
}
});
}
function showModalByScroll() {
if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight - 1) {
console.log('da');
eventModalOpen(modalSelector);
window.removeEventListener('scroll', showModalByScroll);
}
}
console.log(window.scrollY);
window.addEventListener('scroll', showModalByScroll);
modalOpen(modalOpenForm);
modalClose();
}

189
PaydayFrontend/wwwroot/js/script.js Normal file
View File

@ -0,0 +1,189 @@
const menuActive = document.querySelector('.menu');
const hamburgerActive = document.querySelector('.menu_hamburger');
console.log(menuActive);
hamburgerActive.addEventListener('click', el => {
el.currentTarget.classList.toggle('hamburger_active');
menuActive.classList.toggle('menu_active');
})
window.addEventListener('DOMContentLoaded', () => {
function eventModalOpen () {
const modal = document.querySelector('.my_modal');
modal.classList.add('show');
modal.classList.remove('hide');
document.body.style.overflow = 'hidden';
}
function eventModalClose() {
const modal = document.querySelector('.my_modal');
modal.classList.add('hide');
modal.classList.remove('show');
document.body.style.overflow = '';
}
function modal() {
//Modal
const modalOpenForm = document.querySelectorAll('[data-modal]'),
modal = document.querySelector(['.my_modal']);
console.log(modal, modalOpenForm);
function modalOpen(event) {
event.forEach(elem => {
elem.addEventListener('click', () => {
eventModalOpen('.my_modal');
});
})
}
function modalClose() {
modal.addEventListener('click', (e) => {
if (e.target === modal || e.target.getAttribute('data-close') == '') {
eventModalClose('.my_modal');
}
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Escape' && modal.classList.contains('show')) {
eventModalClose('.my_modal');
}
});
}
function showModalByScroll() {
if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight - 1) {
console.log('da');
eventModalOpen('.my_modal');
window.removeEventListener('scroll', showModalByScroll);
}
}
console.log(window.scrollY);
window.addEventListener('scroll', showModalByScroll);
modalOpen(modalOpenForm);
modalClose();
}
function forms() {
// Forms
const forms = document.querySelectorAll("form");
const message = {
loading: 'img/form/spinner.svg',
success: 'Спасибо! Сокро мы с вами свяжемся',
failure: 'Что-то пошло не так...'
};
forms.forEach(form => {
console.log(form);
bindpostData(form);
});
// const getResurses = async (url) => {
// const res = await fetch(url);
// if (!res.ok) {
// new Error(`Could not fetch ${url}, status: ${res.status}`);
// }
// return await res.json();
// };
function bindpostData(form) {
form.addEventListener('submit', (el) => {
el.preventDefault();
const statusMessage = document.createElement('img');
statusMessage.src = message.loading;
// const request = new XMLHttpRequest();
// request.open('POST', 'server.php');
// request.setRequestHeader('Content-type', 'application/json');
const formData = new FormData(form);
// request.send(json);
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`
form.insertAdjacentElement('afterend', statusMessage);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('http://localhost:3000/requests', json)
.then(data => {
console.log(data);
showTanksModal(message.success);
form.reset();
statusMessage.remove();
}).catch(() => {
showTanksModal(message.failure);
}).finally(() => {
form.reset();
});
// request.addEventListener('load', () => {
// if (request.status === 200) {
// console.log(request.response);
// showTanksModal(message.success);
// form.reset();
// statusMessage.remove();
// }
// else {
// showTanksModal(message.failure);
// }
// });
});
function showTanksModal(message) {
const previosModalDialog = document.querySelector('.my_modal__dialog');
previosModalDialog.classList.add('hide');
eventModalOpen('.my_modal');
const thanksModal = document.createElement('div');
thanksModal.classList.add('my_modal__dialog');
thanksModal.innerHTML = `
<div class="my_modal__content">
<div class="my_modal__close" data-close>×</div>
<div class="my_modal__title">${message}</div>
</div>
`;
document.querySelector('.my_modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
previosModalDialog.classList.add('show');
previosModalDialog.classList.remove('hide');
modalClose();
}, 4000);
}
}
}
forms();
modal();
});