403 lines
16 KiB
JavaScript
403 lines
16 KiB
JavaScript
import React, { Component } from "react";
|
||
import Head from "next/head";
|
||
import Image from "next/image";
|
||
|
||
import Header from "./components/Header";
|
||
import Footer from "./components/Footer";
|
||
import CalendarCellModal from "./components/Modal/calendar";
|
||
|
||
class CalendarPage extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
cellModalOpen: false
|
||
};
|
||
}
|
||
|
||
handle_cell_click = () => {
|
||
this.setState({
|
||
cellModalOpen: !this.state.cellModalOpen
|
||
});
|
||
};
|
||
|
||
close_cell_modal = () => {
|
||
this.setState({
|
||
cellModalOpen: false
|
||
});
|
||
}
|
||
|
||
|
||
render() {
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header />
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left">
|
||
<h1 className="section_title">Календарь оплат</h1>
|
||
</div>
|
||
<div className="right">
|
||
<p align="right">
|
||
<b>ООО “Друзья и КО”</b>
|
||
<br />
|
||
ИНН: 12345678765 КПП: 13432-02
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="aside_container about">
|
||
<aside>
|
||
<ul className="aside_nav">
|
||
<li>
|
||
<a href="#" className="active">
|
||
Календарь оплат
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">Акты сверок</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">Закрывающие документы</a>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
<article>
|
||
<div className="calendar_wrapper">
|
||
<div className="form_field">
|
||
<select id="calendar_month">
|
||
<option selected="">Июнь</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="calendar_nav">
|
||
<button>Предыдущая неделя</button>
|
||
<button>Следующая неделя</button>
|
||
</div>
|
||
|
||
<div className="calendar_grid">
|
||
<div className="grid_header">
|
||
<div className="grid_cell">Пн</div>
|
||
<div className="grid_cell">Вт</div>
|
||
<div className="grid_cell">Ср</div>
|
||
<div className="grid_cell">Чт</div>
|
||
<div className="grid_cell">Пт</div>
|
||
<div className="grid_cell">Сб</div>
|
||
<div className="grid_cell">Вс</div>
|
||
</div>
|
||
<div className="grid_body">
|
||
<div className="grid_week active">
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>30</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body">
|
||
<p>
|
||
Общий платеж
|
||
<span>239 400,00 р.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>02</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell current" onClick={() => this.handle_cell_click()}>
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>02</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>02</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>02</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell current">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>03</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>04</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>05</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>30</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body">
|
||
<p>
|
||
Общий платеж
|
||
<span>239 400,00 р.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>01</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>02</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>03</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>04</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>05</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>30</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>01</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>30</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>01</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
<div className="grid_week">
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>30</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>31</span> мая
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p>
|
||
<span>01</span> июня
|
||
</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<CalendarCellModal open = {this.state.cellModalOpen} close = {this.close_cell_modal} />
|
||
|
||
<section id="order">
|
||
<div className="container wide">
|
||
<h2 className="section_title">Купить в лизинг?</h2>
|
||
<div className="order_form">
|
||
<div className="order_email">
|
||
<p>
|
||
Напишите на <a href="mailto:">buy@domain.ru</a> или
|
||
заполните форму
|
||
</p>
|
||
</div>
|
||
<form>
|
||
<div className="form_field">
|
||
<input type="text" value="" placeholder="Имя" />
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="tel" value="" placeholder="Телефон" />
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="email" value="" placeholder="E-mail" />
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="text" value="" placeholder="Организация" />
|
||
</div>
|
||
<div className="policy">
|
||
<input
|
||
type="checkbox"
|
||
name="policy"
|
||
id="policy"
|
||
hidden
|
||
checked
|
||
/>
|
||
<label for="policy">
|
||
Даю свое согласие на обработку моих персональных данных
|
||
</label>
|
||
</div>
|
||
<button className="button">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default CalendarPage;
|