птички улетели в тёплые края

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",

src/index.html

@@ -16,7 +16,40 @@
       <div id="panel" class="bg-light sidebar">
         <p>Sidebar text</p>
       </div>
-      <div id="site" class="content"></div>
+      <div id="site" class="content">
+        <div id="leaves">
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+          <i></i>
+        </div>
+      </div>
     </div>
   </body>
 </html>

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 = `<br>`
-          break
-      }
-      return htmlBlock
+  return model.map((block) => {
+    if (Templates[block.type]) return Templates[block.type](block)
   })
-    .join('')
-}
-
-let convertModelToTitle = (value) => {
-  return `
-    <div class="row">
-      <div class="col-sm">
-        <h1>${value}</h1>
-      </div>
-    </div>`
-}
-
-let convertModelToText = (value) => {
-  return `
-    <div class="row">
-      <div class="col-sm">
-        <p>
-          ${value}
-        </p>
-      </div>
-    </div>`
-}
-
-let convertModelToColumns = (value) => {
-  let columns = value
-    .map((item) => {
-      return `
-      <div class="col-sm">
-        <p>
-          ${item}
-        </p>
-      </div>`
-    })
-    .join('')
-  return `
-    <div class="row">
-      ${columns}
-    </div>`
 }
 
 document
   .querySelector('#site')
-  .insertAdjacentHTML('beforeend', generateHTML(model))
+  .insertAdjacentHTML('afterbegin', generateHTML(model).join(''))

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`
+    }
   }
 ]

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;
+  }
 }

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.tag}>`), options.styles)
+}
+
+export const text = (block) => {
+  const { options, value } = block
+  return row(col(`<p style="margin-bottom: 0;">${value}</p>`), 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(`<img src="./img/${block.value}" alt="${description}" height="250" />`),
+    styles
+  )
+}

src/utils.js

@@ -0,0 +1,7 @@
+export const row = (content, styles = '') => {
+  return `<div class="row" style="margin: 0; ${styles}">${content}</div>`
+}
+
+export const col = (content) => {
+  return `<div class="col-sm">${content}</div>`
+}

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'
+          }
+        ]
       }
     ]
   }