Added index.pug and route index

This commit is contained in:
Sergey Yarkov 2019-11-12 21:19:33 +03:00
parent 6fa9cc1c49
commit 9ee5df2f70
13 changed files with 514 additions and 6 deletions

View File

@ -3,15 +3,15 @@ const app = express();
const path = require('path');
// Pug config
app.use(express.static('public'));
app.use(express.static(path.join(__dirname, '../dist/public')));
app.set('view engine', 'pug');
// Path to renred files
app.set('views', path.join(__dirname, '../dist/views'));
// Routes
require('./routes/routes')(app);
// 404 Redirect
app.use((req, res) => res.status(404).send('Error 404'));
app.listen(3000, () => console.log('Listen port 3000...'));

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50pt" height="50pt" viewBox="0 0 50 50" version="1.1">
<g id="surface3319984">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,49.411765%,13.333333%);fill-opacity:1;" d="M 23.5 0 C 11.09375 0 1 10.09375 1 22.5 C 1 34.90625 11.09375 45 23.5 45 C 26.09375 45 27.9375 44.703125 29.558594 44.441406 C 30.976562 44.214844 32.316406 44 34 44 C 42.164062 44 47.199219 49.601562 47.246094 49.660156 C 47.445312 49.882812 47.722656 50 48 50 C 48.1875 50 48.375 49.949219 48.539062 49.839844 C 48.953125 49.574219 49.113281 49.042969 48.910156 48.59375 C 48.800781 48.34375 46.085938 42.484375 35.191406 39.964844 L 34.894531 39.882812 C 32.203125 39.214844 30.03125 38.128906 28.4375 36.65625 C 26.378906 34.753906 25.988281 32.835938 25.984375 32.824219 C 25.890625 32.3125 25.417969 31.960938 24.910156 32.003906 C 24.394531 32.050781 24 32.480469 24 33 C 24 33.101562 24.007812 35.089844 24.355469 36.96875 C 24.054688 36.988281 23.773438 37 23.5 37 C 15.503906 37 9 30.496094 9 22.5 C 9 14.503906 15.503906 8 23.5 8 C 31.496094 8 38 14.503906 38 22.5 C 38 23.097656 37.960938 23.699219 37.886719 24.300781 C 36 24 34.125 24 34 24 C 33.417969 24 33 24.5 33 25.019531 C 33.011719 25.5625 33.453125 26 33.996094 26 C 34.019531 26 36.097656 26.019531 37.960938 27.21875 C 41.046875 29.199219 41.785156 32.195312 41.792969 32.222656 C 41.886719 32.632812 42.226562 32.941406 42.648438 32.992188 C 43.066406 33.035156 43.472656 32.824219 43.664062 32.445312 C 45.214844 29.308594 46 25.960938 46 22.5 C 46 10.09375 35.90625 0 23.5 0 Z M 38.636719 32.003906 C 38.390625 31.988281 38.199219 32.09375 38.09375 32.277344 C 37.882812 32.648438 38.039062 33.382812 38.464844 34.023438 C 38.898438 34.671875 39.265625 35 39.558594 35 C 39.828125 35 40.09375 34.664062 39.96875 33.855469 C 39.894531 33.371094 39.613281 32.316406 38.894531 32.058594 C 38.804688 32.023438 38.714844 32.007812 38.632812 32.003906 Z M 35.367188 35 C 34.917969 35 34.542969 35.117188 34.316406 35.339844 C 33.722656 35.917969 33.988281 36.933594 34.894531 37.5625 C 35.289062 37.835938 35.855469 38 36.414062 38 C 36.980469 38 37.453125 37.832031 37.746094 37.523438 C 38.269531 36.964844 37.96875 36.171875 36.976562 35.503906 C 36.484375 35.175781 35.914062 35 35.367188 35 Z M 35.367188 35 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><path fill="#FF6E40" d="M40,24.005c0-0.002,0-0.003,0-0.005c0,0,0-0.001,0-0.001c0-0.001,0-0.001,0-0.002c0-0.073-0.01-0.145-0.011-0.218C39.869,15.045,32.762,8,24,8c-0.648,0-1.284,0.05-1.912,0.125c0.165-2.189,1.866-4.541,1.866-4.541c0.188-0.379-0.24-0.739-0.608-0.521C20.439,4.773,8,10.083,8,23.997c0,0,0,0.001,0,0.002C8,23.999,8,24,8,24c0,8.836,7.163,16,16,16c0.648,0,1.283-0.05,1.911-0.125c-0.168,2.188-1.866,4.534-1.866,4.534c-0.188,0.379,0.24,0.739,0.608,0.521C27.557,43.222,40,38.083,40,24.005z M30,24c0,3.314-2.686,6-6,6c-3.314,0-6-2.686-6-6s2.686-6,6-6C27.314,18,30,20.686,30,24z"/></svg>

After

Width:  |  Height:  |  Size: 675 B

50
dist/public/img/service-icons/steam.svg vendored Normal file
View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 13.082 13.082" style="enable-background:new 0 0 13.082 13.082;" xml:space="preserve">
<g>
<g>
<path style="fill:#030104;" d="M4.303,10.075L3.016,9.578c0.172,0.691,0.796,1.203,1.541,1.203c0.877,0,1.589-0.711,1.589-1.589
c0-0.876-0.712-1.588-1.589-1.588c-0.316,0-0.61,0.093-0.857,0.252l1.271,0.49c0.477,0.185,0.715,0.721,0.531,1.198
C5.317,10.022,4.781,10.261,4.303,10.075z"/>
<path style="fill:#030104;" d="M9.206,6.364c1.086,0,1.969-0.883,1.969-1.969s-0.883-1.969-1.969-1.969
c-1.085,0-1.969,0.883-1.969,1.969C7.237,5.48,8.121,6.364,9.206,6.364z M9.206,3.008c0.766,0,1.388,0.622,1.388,1.387
S9.972,5.782,9.206,5.782c-0.765,0-1.387-0.622-1.387-1.387S8.441,3.008,9.206,3.008z"/>
<path style="fill:#030104;" d="M11.367,0.001H1.715C0.767,0.001,0,0.769,0,1.716v4.709l2.495,0.964
C2.978,6.83,3.686,6.472,4.48,6.459l1.499-2c0-1.773,1.438-3.21,3.21-3.21c1.773,0,3.21,1.437,3.21,3.21
c0,0.973-0.434,1.845-1.118,2.434l0,0l0,0c-0.563,0.483-1.293,0.776-2.092,0.776c-0.084,0-0.167-0.004-0.249-0.011L7.198,8.971
c0.004,0.055,0.006,0.111,0.006,0.167c0,1.48-1.2,2.682-2.68,2.682s-2.68-1.201-2.68-2.682c0-0.004,0-0.01,0-0.015L0,8.411v2.955
c0,0.947,0.768,1.715,1.715,1.715h9.652c0.947,0,1.715-0.768,1.715-1.715V1.717C13.082,0.77,12.314,0.001,11.367,0.001z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -3560,7 +3560,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
/*! no static exports found */
/***/ (function(module, exports) {
eval("\n\n//# sourceURL=webpack:///./src/js/index.js?");
eval("console.log('Js working');\n\n//# sourceURL=webpack:///./src/js/index.js?");
/***/ }),

5
dist/public/js/materialize.config.js vendored Normal file
View File

@ -0,0 +1,5 @@
document.addEventListener('DOMContentLoaded', function () {
// Nav-mobile menu init
M.Sidenav.init(document.querySelectorAll('.sidenav'))
M.FormSelect.init(document.querySelectorAll('select'))
});

14
dist/views/assets/head.pug vendored Normal file
View File

@ -0,0 +1,14 @@
doctype
html(lang='ru')
head
meta(charset='utf-8')
title Digital Shop
// Materialize CSS
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
// Style CSS
link(rel="stylesheet", href="./css/style.css")
// Media CSS
link(rel="stylesheet", href="./css/media.css")
// Material Icons
link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
body

10
dist/views/assets/templates/footer.pug vendored Normal file
View File

@ -0,0 +1,10 @@
footer
span © 2019 Digital Store | Все права защищены.
.waves-effect.waves-light.pulse.cart-btn(id="cartBtn")
i.material-icons shopping_cart
span.counter 0
// Maretialize JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
// Script JS
script(src="./js/bundle.js")
script(src='./js/materialize.config.js')

47
dist/views/assets/templates/header.pug vendored Normal file
View File

@ -0,0 +1,47 @@
header
nav
// Menu-Mobile Button
a.sidenav-trigger(href='#' data-target='slide-out')
i.material-icons menu
.nav-wrapper.container
a.brand-logo.waves-effect.waves-light(href='#')
i.material-icons shop_two
span#header-title Digital Store
ul.right.hide-on-med-and-down
li.active
a(href='#') Главная
li
a(href='#') Как купить товар
li
a(href='#') Контакты
li
a(href='#') Отзывы
li
a(href='#') Мои покупки
// Menu-Mobile Content
ul#slide-out.sidenav
li
a.subheader Навигация
li
.divider
li
a(href='#')
i.material-icons home
| Главная
li
a(href='#')
i.material-icons info
| Как купить товар
li
a(href='#')
i.material-icons contact_support
| Контакты
li
a(href='#')
i.material-icons comment
| Отзывы
li
a(href='#')
i.material-icons shopping_cart
| Мои покупки
// Menu-Mobile Content END

View File

@ -0,0 +1,115 @@
// Cart Modal
#cart.cart-wrap.hide
.container
.row
.cart
.cart-content
.modal-content
.modal-content__header
h4.small-title Корзина
span#cartClose.cart-close
i.material-icons close
.modal-content__items
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__info
.modal-content__counter
span Всего товаров в корзине
span
b 1
.modal-content__pay
span
b Сумма к оплате
span#total-price
b 139.89 ₽
.modal-content__purchase
button.purchase-btn.waves-effect.btn Перейти к оплате
// Cart Modal END

View File

@ -0,0 +1,30 @@
// Pay Modal
#pay.pay-wrap.hide
.container
.row
.pay
.pay-content
.modal-content
.modal-content__header
h4.small-title Оплатить товар
span#payClose.cart-close
i.material-icons close
form(action='#')
.modal-content__fields
.title-field
label(for='title') Наименование
select#title(name='title')
option(value='js_title') Cs:go(prime) + открыта тп + инв. 901руб
.email-field
label(for='email') Ваш E-mail
input#email(required='' type='text' name='email')
.phone-field
label(for="phone") Номер QIWI
input#phone(required='' type='text' name='phone')
.payment-field
label(for='payment') Способ оплаты
select#payment(name='payment')
option(value='qiwi' data-icon='./img/payments-icons/qiwi.svg') QIWI
.modal-content__purchase
button.purchase-btn.waves-effect.btn(type='submit' href='#') Перейти к оплате
// Pay Modal END

231
dist/views/index.pug vendored
View File

@ -1 +1,230 @@
h2 Server is working
//- Head HTML
include ./assets/head.pug
//- Header Template
include ./assets/templates/header.pug
main.main-section
include ./assets/templates/modals/cart.pug
include ./assets/templates/modals/pay.pug
.container
.row
// Information Block
.col.s12
#information.information
.information-content.block-content
.information-title
h2.small-title Важная информация:
.information-text
p
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita laboriosam
| aliquid
| maiores similique accusamus est tempora sunt laudantium recusandae! Voluptate
| repellat
| exercitationem impedit, distinctio maiores dolore eius dicta accusamus amet,
| consequatur
| tempora, aspernatur vel provident commodi modi id. Quidem ipsa numquam sapiente
| eius
| adipisci modi nobis! Ipsum, exercitationem. Dolor, ad sit. Dicta corporis
| quisquam
| laboriosam quo id dolor minima et nulla molestias itaque quia explicabo sint,
| perspiciatis
| fuga nostrum consequatur odit dolore voluptatem commodi cumque natus? Accusamus
| fuga
| commodi
| molestiae tempore atque provident animi distinctio expedita, temporibus,
| voluptates
| quisquam
| unde. Ipsum numquam delectus repudiandae quasi veritatis omnis, corporis esse
| officia
| nobis
| veniam eos culpa corrupti sit voluptas est dolorem ratione consectetur nostrum
| eveniet
| dolor
| facilis distinctio. Voluptate amet repellendus nesciunt quam perspiciatis a
| culpa
| aspernatur
| repellat quos est ex maxime sequi, delectus ea accusantium molestias, aliquid
| velit
| dolores
| laudantium! Voluptate id officiis porro tenetur nihil dolores ratione ad
| suscipit!
| Minima.
.information-close
button.waves-effect.btn.red Закрыть
// Information Block END
// Category Block
.col.s12
#category.category
.category-content.block-content
.category-title.block-title
i.material-icons filter_list
h2.small-title Выберите катерорию:
.category-items
ul
li
a.active(href='#') Все товары:
li
a(href='#') Steam
li
a(href='#') VKontakte
li
a(href='#') Origin
li
a(href='#') Warface
li
a(href='#') Uplay
li
a(href='#') Fortnite
li
a(href='#') Instagram
// Category Block END
// Filter Block
.col.s12
#filter.filter
.filter-content.block-content
.filter-title.block-title
i.material-icons sort
h2.small-title Фильтровать товары:
.filter-options
form(action='#')
label
input#ascending.with-gap(type='radio' name='filter')
span Подешевле
label
input#descending.with-gap(type='radio' name='filter')
span Подороже
label
input#newer.with-gap(type='radio' name='filter')
span Поновее
label
input#older.with-gap(type='radio' name='filter')
span Постарее
// Filter Block END
// Items Block
.col.s12
#items.items
.items-content.block-content
.items-title.block-title
i.material-icons list
h2.small-title Список товаров:
.items-category
h2.small-title Steam
.items-list
.items-list__name
.list-icon
img(src='./img/service-icons/steam.svg' alt='#')
.list-title
a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
.items-list__info
.list-count
span 1 шт.
.list-one
span Цена за 1 шт.
.list-price
span 145.00₽
.list-buttons
button.btn-small.waves-effect.waves-light Купить
button.btn-small.waves-effect.waves-light
i.material-icons shopping_cart
.items-list
.items-list__name
.list-icon
img(src='./img/service-icons/steam.svg' alt='#')
.list-title
a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
.items-list__info
.list-count
span 1 шт.
.list-one
span Цена за 1 шт.
.list-price
span 145.00₽
.list-buttons
button.btn-small.waves-effect.waves-light Купить
button.btn-small.waves-effect.waves-light
i.material-icons shopping_cart
.items-category
h2.small-title Origin
.items-list
.items-list__name
.list-icon
img(src='./img/service-icons/origin.svg' alt='#')
.list-title
a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
.items-list__info
.list-count
span 1 шт.
.list-one
span Цена за 1 шт.
.list-price
span 145.00₽
.list-buttons
button.btn-small.waves-effect.waves-light Купить
button.btn-small.waves-effect.waves-light
i.material-icons shopping_cart
.items-list
.items-list__name
.list-icon
img(src='./img/service-icons/origin.svg' alt='#')
.list-title
a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
.items-list__info
.list-count
span 1 шт.
.list-one
span Цена за 1 шт.
.list-price
span 145.00₽
.list-buttons
button.btn-small.waves-effect.waves-light Купить
button.btn-small.waves-effect.waves-light
i.material-icons shopping_cart
#pagination.items-pagination
.divider
ul.pagination
li.disabled
a(href='#')
i.material-icons chevron_left
li.active
a(href='#') 1
li.waves-effect
a(href='#') 2
li.waves-effect
a(href='#') 3
li.waves-effect
a(href='#') 4
li.waves-effect
a(href='#') 5
li.waves-effect
a(href='#')
i.material-icons chevron_right
.items-footer
.divider
.items-footer__info
.items-info__title.block-title
i.material-icons info
h3.med-title Информация
p
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque quaerat
| voluptatem et dolores repudiandae nulla esse amet incidunt modi! Accusamus
| enim, quia magnam assumenda necessitatibus cupiditate, error facere nulla
| ipsam quos consectetur rerum unde doloremque nisi, ipsa consequuntur odit
| illo facilis ab. Impedit libero architecto suscipit eligendi obcaecati quam
| quis blanditiis sed, optio placeat nulla odio? Facere ipsam in, fugit
| perspiciatis error quaerat pariatur excepturi et cumque tenetur accusamus
| eligendi sed debitis recusandae? Ex voluptas in rerum harum? Nam possimus
| optio similique excepturi, fugit odit. Error voluptatum quidem numquam
| placeat voluptates voluptatem repellat enim dolor quod vitae vero, libero
| perspiciatis corporis sint omnis aspernatur, doloremque rem facilis. Ratione
| inventore, nostrum aliquid dolorum totam harum. Ratione, sapiente
| dignissimos quas quibusdam unde temporibus laudantium nam error, excepturi
| natus porro quo, deserunt aliquid eius numquam iusto a nemo nobis pariatur!
| Amet a porro, sunt quod ipsum atque provident modi ut distinctio at
| expedita.
// Items Block END
//- Footer Template
include ./assets/templates/footer.pug

View File

@ -0,0 +1 @@
console.log('Js working');