add forgeted files

add webpack, decompose, add template for popups
22 changed files with 5865 additions and 91 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+/node_modules
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/craft_site.iml
+++ b/.idea/craft_site.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/craft_site.iml" filepath="$PROJECT_DIR$/.idea/craft_site.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/index.html
+++ b/index.html
@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<title>FumoCraft</title>
-	<link rel="stylesheet" href="style.css">
-</head>
-
-<body translate="no">
-	<div id="header">
-	 <div class="logo1">
-	   <img src="p/logo1.png" width="702" height="84" />
-	 </div>
-	</div>
-<!--//- Menu-->
-	<div class="mc-menu">
-		<div class="mc-button full">
-			<div class="title">Singleplayer</div>
-		</div>
-		<div class="mc-button full">
-			<div class="title">Multiplayer</div>
-		</div>
-		<div class="mc-button full">
-			<div class="title">Minecraft Realms</div>
-		</div>
-		<div class="double">
-			<div class="mc-button full">
-				<div class="title">Options</div>
-			</div>
-			<div class="mc-button full">
-				<div class="title">Quit Game</div>
-			</div>
-		</div>
-		<div class="mc-button full lang">
-			<a href="https://craft.cirnovarenie.com/map/">
-			<div class="title"><img src="p/lang.png" alt=" Lang"></div>
-			<!--	<div class="title"><img src="https://i.ibb.co/99187Lk/lang.png" alt=" Lang"></div> -->
-			</a>
-		</div>
-	</div>
-</body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "craft_site",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.10.0",
+    "html-loader": "^5.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.8.1",
+    "style-loader": "^3.3.4",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  }
+}
--- a/src/blocks/buttons.css
+++ b/src/blocks/buttons.css
--- a/src/blocks/normalize.css
+++ b/src/blocks/normalize.css
@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on img inside links in IE 10.
+ */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+    display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+    display: none;
+}
--- a/src/blocks/root.css
+++ b/src/blocks/root.css
--- a/src/blocks/styleComposer.css
+++ b/src/blocks/styleComposer.css
@ -0,0 +1 @@
+@import url(normalize.css);
--- a/src/img/background.gif
+++ b/src/img/background.gif
--- a/src/img/background__dirt.jpg
+++ b/src/img/background__dirt.jpg
--- a/src/img/button.png
+++ b/src/img/button.png
--- a/src/img/lang.png
+++ b/src/img/lang.png
--- a/src/img/logo.png
+++ b/src/img/logo.png
--- a/src/img/popup__button_close.png
+++ b/src/img/popup__button_close.png
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>FumoCraft</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+</head>
+
+<body translate="no">
+<div class="page">
+    <header class="header" id="header">
+        <div class="logo">
+            <img class="logo__img" src="img/logo.png"/>
+        </div>
+    </header>
+    <nav class="menu">
+        <a class="button full">
+            <button id="menuSinglePlayer" datatype="popupSinglePlayer" class="title">Singleplayer</button>
+        </a>
+        <a class="button full">
+            <button class="title">Multiplayer</button>
+        </a>
+        <a class="button full">
+            <button class="title">Minecraft Realms</button>
+        </a>
+        <div class="menu__wrapper">
+            <a class="button full lang" href="https://craft.cirnovarenie.com/map/">
+                <div class=" title"><img src="img/lang.png" alt=" Lang"></div>
+            </a>
+            <a class="button full">
+                <button class="title">Options</button>
+            </a>
+            <a class="button full">
+                <button class="title">Quit Game</button>
+            </a>
+        </div>
+    </nav>
+    <div class="overlay hidden">
+            <div class="popup hidden" id="popupSinglePlayer">
+                <div class="popup-inner">
+                    <div class="popup__content">
+                        <div class="popup__background_dirt"></div>
+                        <div class = "popup__text">singleplayersingleplayersingleplay ersingleplayers ingleplayersingleplayersingleplayersing leplayersingleplayersi ngleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersin gleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayersingleplayer</div>
+                    </div>
+                </div>
+                <button class="popup__close"></button>
+            </div>
+        <!--    <div class="popup" id="multiplayer">-->
+        <!--        multiplayer-->
+        <!--    </div>-->
+        <!--    <div class="popup" id="realms">-->
+        <!--        realms-->
+        <!--    </div>-->
+        <!--    <div class="popup" id="options">-->
+        <!--        options-->
+        <!--    </div>-->
+    </div>
+</div>
+</body>
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,55 @@
+import './style.css';
+import './blocks/normalize.css';
+
+const closePopupButtonSelector = '.popup__close';
+const overlayPopupSelector = '.overlay';
+
+const popupIDs = {
+  singleplayer: '#popupSinglePlayer',
+  multiplayer: '#multiplayer',
+  realms: '#realms',
+  options: '#options'
+}
+
+const buttonsIDs = {
+  singleplayer: '#menuSinglePlayer',
+  multiplayer: '#multiplayer',
+  realms: '#realms',
+  options: '#options'
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  setCloseClickListiner(popupIDs, clickCloseHandler)
+  setClickListiner(buttonsIDs, clickShowHandler)
+});
+
+function setClickListiner(ids, func) {
+  for (const id in ids) {
+    document.querySelector(ids[id])?.addEventListener('click', func)
+  }
+}
+
+function setCloseClickListiner(ids, func) {
+  for (const id in ids) {
+    document.querySelector(`${ids[id]} ${closePopupButtonSelector}`)?.addEventListener('click', func)
+  }
+}
+
+function clickCloseHandler(event) {
+  const {target} = event
+  const popupContainer = target.parentElement
+  const overlay = document.querySelector(overlayPopupSelector)
+
+  popupContainer.classList.toggle('hidden')
+  overlay.classList.toggle('hidden')
+}
+
+function clickShowHandler(event) {
+  const {target} = event
+  const popupId = target.attributes.datatype.value
+  const popupContainer = document.querySelector(`#${popupId}`)
+  const overlay = document.querySelector(overlayPopupSelector)
+
+  popupContainer.classList.toggle('hidden')
+  overlay.classList.toggle('hidden')
+}
--- a/src/style.css
+++ b/src/style.css
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,50 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin') // Импортируем плагин
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const {CleanWebpackPlugin} = require('clean-webpack-plugin')
+
+module.exports = {
+  mode: 'development', // Режим сборки ('development' или 'production')
+  entry: './src/index.js', // Точка входа (исходный файл)
+  output: {
+    path: path.resolve(__dirname, 'dist'), // Папка для собранных файлов
+    filename: 'bundle.js', // Имя собранного файла,
+    clean: true
+  },
+  devServer: {
+    compress: true,
+    port: 8081,
+    open: true
+  },
+  module: {
+    rules: [
+      {
+        // регулярное выражение, которое ищет все файлы с такими расширениями
+        test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
+        type: 'asset/resource'
+      },
+      {
+        // применять это правило только к CSS-файлам
+        test: /\.css$/,
+        // при обработке этих файлов нужно использовать
+        // MiniCssExtractPlugin.loader и css-loader
+        use: [MiniCssExtractPlugin.loader, {
+          loader: 'css-loader'
+        }]
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader'
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html' // Путь к шаблону HTML
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css' // Настройка имени выходного файла CSS
+    }),
+    new CleanWebpackPlugin()
+  ]
+}
Author	SHA1	Message	Date
Oleg Mildzikhov	5996ff2086	add forgeted files	7 months ago
Oleg Mildzikhov	5ebfedf9b9	add webpack, decompose, add template for popups	7 months ago