diff --git a/classes/blocks.js b/classes/blocks.js new file mode 100644 index 0000000..e69de29 diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..32fafb2 Binary files /dev/null and b/favicon.ico differ diff --git a/img/autumn.jpg b/img/autumn.jpg new file mode 100644 index 0000000..88bfbc7 Binary files /dev/null and b/img/autumn.jpg differ diff --git a/img/golden_autumn.jpg b/img/golden_autumn.jpg new file mode 100644 index 0000000..682f9eb Binary files /dev/null and b/img/golden_autumn.jpg differ diff --git a/package.json b/package.json index e175298..804f1d1 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "license": "ISC", "devDependencies": { "css-loader": "^5.0.0", + "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "webpack": "^5.3.2", diff --git a/src/index.html b/src/index.html index 39c1e58..01c12d5 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,40 @@ -
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/src/index.js b/src/index.js index feae848..6b2abe3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,68 +1,13 @@ import './styles/main.css' import { model } from './model.js' - -console.log(model) +import * as Templates from './templates.js' let generateHTML = (model) => { - let htmlBlock - return model - .map((block) => { - switch (block.type) { - case 'title': - htmlBlock = convertModelToTitle(block.value) - break - case 'text': - htmlBlock = convertModelToText(block.value) - break - case 'textColumns': - htmlBlock = convertModelToColumns(block.value) - break - default: - htmlBlock = `
` - break - } - return htmlBlock - }) - .join('') -} - -let convertModelToTitle = (value) => { - return ` -
-
-

${value}

-
-
` -} - -let convertModelToText = (value) => { - return ` -
-
-

- ${value} -

-
-
` -} - -let convertModelToColumns = (value) => { - let columns = value - .map((item) => { - return ` -
-

- ${item} -

-
` - }) - .join('') - return ` -
- ${columns} -
` + return model.map((block) => { + if (Templates[block.type]) return Templates[block.type](block) + }) } document .querySelector('#site') - .insertAdjacentHTML('beforeend', generateHTML(model)) + .insertAdjacentHTML('afterbegin', generateHTML(model).join('')) diff --git a/src/model.js b/src/model.js index 9d54bf3..04c4a8b 100644 --- a/src/model.js +++ b/src/model.js @@ -1,30 +1,57 @@ export const model = [ { type: 'title', - value: 'Test title', - options: {} + value: 'Алексей Плещеев', + options: { + styles: `color: #fff; text-align: center; font-family: Georgia, serif; + font-size: 25px; letter-spacing: 2px; word-spacing: 2px; + font-variant: small-caps; padding-top: 50px`, + tag: 'h2' + } }, { type: 'text', - value: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.', - options: {} + value: 'Осень наступила, высохли цветы', + options: { + styles: `text-align: center; font-family: Arial, Helvetica, sans-serif; + font-size: 20px; font-weight: 700; padding-top: 20px` + } + }, + { + type: 'image', + value: 'golden_autumn.jpg', + options: { + styles: `text-align: center; padding-top: 20px`, + description: 'Иван Иванович Шишкин – Ранняя осень 1889' + } }, { type: 'textColumns', value: [ - `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt - consectetur reprehenderit ex blanditiis assumenda quaerat ea atque - fugit eaque asperiores eligendi accusantium ratione exercitationem - delectus eveniet unde rerum, possimus voluptate!`, - `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt - consectetur reprehenderit ex blanditiis assumenda quaerat ea atque - fugit eaque asperiores eligendi accusantium ratione exercitationem - delectus eveniet unde rerum, possimus voluptate!`, - `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt - consectetur reprehenderit ex blanditiis assumenda quaerat ea atque - fugit eaque asperiores eligendi accusantium ratione exercitationem - delectus eveniet unde rerum, possimus voluptate!` + ` Осень наступила, + Высохли цветы, + И глядят уныло + Голые кусты.`, + + ` Вянет и желтеет + Травка на лугах, + Только зеленеет + Озимь на полях.`, + + ` Туча небо кроет, + Солнце не блестит, + Ветер в поле воет, + Дождик моросит..`, + + ` Зашумели воды + Быстрого ручья, + Птички улетели + В теплые края.` ], - options: {} + options: { + styles: `white-space: pre-wrap; text-align: justify; padding-top: 50px; + font-family: Verdana; font-size: 16px; font-weight: 700; + padding-bottom: 200px; padding-left: 150px; padding-right: 100px` + } } ] diff --git a/src/styles/main.css b/src/styles/main.css index 6c4a502..fb1a2bc 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -7,6 +7,9 @@ top: 0; right: 0; left: 200px; + background: linear-gradient(17deg, #d3d3d3, #696969), + linear-gradient(127deg, #d3d3d3, #bdbdbd), + linear-gradient(336deg, #9e9e9e, #7d7d7d); } .sidebar { @@ -21,6 +24,217 @@ overflow-y: auto; } -div { - padding: 10px; +#leaves { + position: absolute; + top: -50px; + width: 100%; + text-align: right; + z-index: 4000; +} + +#leaves i { + display: inline-block; + width: 200px; + height: 150px; + background: linear-gradient(to bottom right, #309900, #005600); + transform: skew(20deg); + border-radius: 5% 40% 70%; + box-shadow: inset 0px 0px 1px #222; + border: 1px solid #333; + z-index: 1; + animation: falling 5s 0s infinite; +} + +#leaves i:nth-of-type(2n) { + animation: falling2 5s 0s infinite; +} +#leaves i:nth-of-type(3n) { + animation: falling3 5s 0s infinite; +} + +#leaves i:before { + position: absolute; + content: ''; + top: 117px; + right: 9px; + height: 27px; + width: 32px; + transform: rotate(49deg); + border-radius: 0% 15% 15% 0%; + border-top: 1px solid #222; + border-bottom: 1px solid #222; + border-left: 0px solid #222; + border-right: 1px solid #222; + background: linear-gradient(to right, rgba(0, 100, 0, 1), #005600); + z-index: 1; +} + +#leaves i:after { + content: ''; + height: 125px; + width: 10px; + background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); + display: block; + transform: rotate(125deg); + position: absolute; + left: 85px; + border-radius: 50%; +} + +#leaves i:nth-of-type(n) { + height: 23px; + width: 30px; +} +#leaves i:nth-of-type(n):before { + width: 7px; + height: 5px; + top: 17px; + right: 1px; +} +#leaves i:nth-of-type(n):after { + width: 2px; + height: 17px; + left: 12px; + top: 0px; +} + +#leaves i:nth-of-type(2n + 1) { + height: 11px; + width: 16px; +} +#leaves i:nth-of-type(2n + 1):before { + width: 4px; + height: 3px; + top: 7px; + right: 0px; +} +#leaves i:nth-of-type(2n + 1):after { + width: 2px; + height: 6px; + left: 5px; + top: 1px; +} + +#leaves i:nth-of-type(3n + 2) { + height: 17px; + width: 23px; +} +#leaves i:nth-of-type(3n + 2):before { + height: 4px; + width: 4px; + top: 12px; + right: 1px; +} +#leaves i:nth-of-type(3n + 2):after { + height: 10px; + width: 2px; + top: 1px; + left: 8px; +} + +#leaves i:nth-of-type(n) { + animation-delay: 1.9s; +} +#leaves i:nth-of-type(2n) { + animation-delay: 3.9s; +} +#leaves i:nth-of-type(3n) { + animation-delay: 2.3s; +} +#leaves i:nth-of-type(4n) { + animation-delay: 4.4s; +} +#leaves i:nth-of-type(5n) { + animation-delay: 5s; +} +#leaves i:nth-of-type(6n) { + animation-delay: 3.5s; +} +#leaves i:nth-of-type(7n) { + animation-delay: 2.8s; +} +#leaves i:nth-of-type(8n) { + animation-delay: 1.5s; +} +#leaves i:nth-of-type(9n) { + animation-delay: 3.3s; +} +#leaves i:nth-of-type(10n) { + animation-delay: 2.5s; +} +#leaves i:nth-of-type(11n) { + animation-delay: 1.2s; +} +#leaves i:nth-of-type(12n) { + animation-delay: 4.1s; +} +#leaves i:nth-of-type(13n) { + animation-delay: 1s; +} +#leaves i:nth-of-type(14n) { + animation-delay: 4.7s; +} +#leaves i:nth-of-type(15n) { + animation-delay: 3s; +} + +#leaves i:nth-of-type(n) { + background: linear-gradient(to bottom right, #309900, #005600); +} +#leaves i:nth-of-type(2n + 2) { + background: linear-gradient(to bottom right, #5e9900, #2b5600); +} +#leaves i:nth-of-type(4n + 1) { + background: linear-gradient(to bottom right, #990, #564500); +} + +#leaves i:nth-of-type(n) { + opacity: 0.7; +} +#leaves i:nth-of-type(3n + 1) { + opacity: 0.5; +} +#leaves i:nth-of-type(3n + 2) { + opacity: 0.3; +} + +#leaves i:nth-of-type(n) { + transform: rotate(180deg); +} + +#leaves i:nth-of-type(n) { + animation-timing-function: ease-in-out; +} + +@keyframes falling { + 0% { + transform: translate3d(300, 0, 0) rotate(0deg); + } + + 100% { + transform: translate3d(-350px, 700px, 0) rotate(90deg); + opacity: 0; + } +} + +@keyframes falling3 { + 0% { + transform: translate3d(0, 0, 0) rotate(-20deg); + } + + 100% { + transform: translate3d(-230px, 640px, 0) rotate(-70deg); + opacity: 0; + } +} + +@keyframes falling2 { + 0% { + transform: translate3d(0, 0, 0) rotate(90deg); + } + + 100% { + transform: translate3d(-400px, 680px, 0) rotate(0deg); + opacity: 0; + } } diff --git a/src/templates.js b/src/templates.js new file mode 100644 index 0000000..b24fdd5 --- /dev/null +++ b/src/templates.js @@ -0,0 +1,24 @@ +import { col, row } from './utils.js' + +export const title = (block) => { + const { options, value } = block + return row(col(`<${options.tag}>${value}`), options.styles) +} + +export const text = (block) => { + const { options, value } = block + return row(col(`

${value}

`), options.styles) +} + +export const textColumns = (block) => { + const { options, value } = block + return row(value.map((item) => col(item)).join(''), options.styles) +} + +export const image = (block) => { + const { description, styles } = block.options + return row( + col(`${description}`), + styles + ) +} diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..8cc410c --- /dev/null +++ b/src/utils.js @@ -0,0 +1,7 @@ +export const row = (content, styles = '') => { + return `
${content}
` +} + +export const col = (content) => { + return `
${content}
` +} diff --git a/webpack.config.js b/webpack.config.js index f0761c4..6a1b3c4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,14 @@ module.exports = { // 'handlebars-loader', // handlebars loader expects raw resource string // 'extract-loader' ] + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [ + { + loader: 'file-loader' + } + ] } ] }