From e4cfc153856ad0564d2f0e72e078195b7c05df7e Mon Sep 17 00:00:00 2001 From: Deni Date: Sun, 11 Feb 2024 21:45:33 +0300 Subject: [PATCH 01/11] =?UTF-8?q?=D0=B8=D0=BD=D0=B8=D1=86=D0=B8=D0=B0?= =?UTF-8?q?=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D0=B5=D0=BA=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 24 ++ counter.js | 9 + index.html | 13 + javascript.svg | 1 + main.js | 24 ++ package-lock.json | 758 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 14 + public/vite.svg | 1 + style.css | 96 ++++++ 9 files changed, 940 insertions(+) create mode 100644 .gitignore create mode 100644 counter.js create mode 100644 index.html create mode 100644 javascript.svg create mode 100644 main.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/counter.js b/counter.js new file mode 100644 index 000000000..881e2d7ad --- /dev/null +++ b/counter.js @@ -0,0 +1,9 @@ +export function setupCounter(element) { + let counter = 0 + const setCounter = (count) => { + counter = count + element.innerHTML = `count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} diff --git a/index.html b/index.html new file mode 100644 index 000000000..3d0843819 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/javascript.svg b/javascript.svg new file mode 100644 index 000000000..f9abb2b72 --- /dev/null +++ b/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..b400b4e3d --- /dev/null +++ b/main.js @@ -0,0 +1,24 @@ +import './style.css' +import javascriptLogo from './javascript.svg' +import viteLogo from '/vite.svg' +import { setupCounter } from './counter.js' + +document.querySelector('#app').innerHTML = ` +
+ + + + + + +

Hello Vite!

+
+ +
+

+ Click on the Vite logo to learn more +

+
+` + +setupCounter(document.querySelector('#counter')) diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..d1f10e1d6 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,758 @@ +{ + "name": "middle.messenger.praktikum.yandex", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "middle.messenger.praktikum.yandex", + "version": "0.0.0", + "devDependencies": { + "vite": "^5.1.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", + "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz", + "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz", + "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz", + "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz", + "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz", + "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz", + "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz", + "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz", + "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz", + "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz", + "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz", + "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz", + "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz", + "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz", + "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz", + "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz", + "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz", + "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz", + "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz", + "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz", + "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz", + "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz", + "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.10.0.tgz", + "integrity": "sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.10.0.tgz", + "integrity": "sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.10.0.tgz", + "integrity": "sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.10.0.tgz", + "integrity": "sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.10.0.tgz", + "integrity": "sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.10.0.tgz", + "integrity": "sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.10.0.tgz", + "integrity": "sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.10.0.tgz", + "integrity": "sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.10.0.tgz", + "integrity": "sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.10.0.tgz", + "integrity": "sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.10.0.tgz", + "integrity": "sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.10.0.tgz", + "integrity": "sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.10.0.tgz", + "integrity": "sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/esbuild": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz", + "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.19.12", + "@esbuild/android-arm": "0.19.12", + "@esbuild/android-arm64": "0.19.12", + "@esbuild/android-x64": "0.19.12", + "@esbuild/darwin-arm64": "0.19.12", + "@esbuild/darwin-x64": "0.19.12", + "@esbuild/freebsd-arm64": "0.19.12", + "@esbuild/freebsd-x64": "0.19.12", + "@esbuild/linux-arm": "0.19.12", + "@esbuild/linux-arm64": "0.19.12", + "@esbuild/linux-ia32": "0.19.12", + "@esbuild/linux-loong64": "0.19.12", + "@esbuild/linux-mips64el": "0.19.12", + "@esbuild/linux-ppc64": "0.19.12", + "@esbuild/linux-riscv64": "0.19.12", + "@esbuild/linux-s390x": "0.19.12", + "@esbuild/linux-x64": "0.19.12", + "@esbuild/netbsd-x64": "0.19.12", + "@esbuild/openbsd-x64": "0.19.12", + "@esbuild/sunos-x64": "0.19.12", + "@esbuild/win32-arm64": "0.19.12", + "@esbuild/win32-ia32": "0.19.12", + "@esbuild/win32-x64": "0.19.12" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.10.0.tgz", + "integrity": "sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.10.0", + "@rollup/rollup-android-arm64": "4.10.0", + "@rollup/rollup-darwin-arm64": "4.10.0", + "@rollup/rollup-darwin-x64": "4.10.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.10.0", + "@rollup/rollup-linux-arm64-gnu": "4.10.0", + "@rollup/rollup-linux-arm64-musl": "4.10.0", + "@rollup/rollup-linux-riscv64-gnu": "4.10.0", + "@rollup/rollup-linux-x64-gnu": "4.10.0", + "@rollup/rollup-linux-x64-musl": "4.10.0", + "@rollup/rollup-win32-arm64-msvc": "4.10.0", + "@rollup/rollup-win32-ia32-msvc": "4.10.0", + "@rollup/rollup-win32-x64-msvc": "4.10.0", + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.1.tgz", + "integrity": "sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==", + "dev": true, + "dependencies": { + "esbuild": "^0.19.3", + "postcss": "^8.4.35", + "rollup": "^4.2.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..6accb0c2c --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "middle.messenger.praktikum.yandex", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^5.1.0" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..30aa81410 --- /dev/null +++ b/style.css @@ -0,0 +1,96 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.vanilla:hover { + filter: drop-shadow(0 0 2em #f7df1eaa); +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} From edb2bb495a32d43cc8542af7473d41a64697cf2d Mon Sep 17 00:00:00 2001 From: Deni Date: Mon, 12 Feb 2024 19:51:22 +0300 Subject: [PATCH 02/11] =?UTF-8?q?=D1=81=D0=B2=D0=B5=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=B0=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83?= =?UTF-8?q?=20Login?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- counter.js | 9 -- javascript.svg | 1 - main.js | 24 --- package-lock.json | 285 ++++++++++++++++++++++++++++++++++ package.json | 3 + index.html => src/index.html | 4 +- src/main.js | 4 + src/pages/Login/login.hbs | 24 +++ src/pages/Login/login.js | 7 + src/pages/Login/login.scss | 73 +++++++++ src/scss/_fonts.scss | 1 + src/scss/_variables.scss | 10 ++ src/scss/app.scss | 10 ++ src/scss/libs/_normilize.scss | 94 +++++++++++ style.css | 96 ------------ vite.config.ts | 10 ++ 16 files changed, 523 insertions(+), 132 deletions(-) delete mode 100644 counter.js delete mode 100644 javascript.svg delete mode 100644 main.js rename index.html => src/index.html (90%) create mode 100644 src/main.js create mode 100644 src/pages/Login/login.hbs create mode 100644 src/pages/Login/login.js create mode 100644 src/pages/Login/login.scss create mode 100644 src/scss/_fonts.scss create mode 100644 src/scss/_variables.scss create mode 100644 src/scss/app.scss create mode 100644 src/scss/libs/_normilize.scss delete mode 100644 style.css create mode 100644 vite.config.ts diff --git a/counter.js b/counter.js deleted file mode 100644 index 881e2d7ad..000000000 --- a/counter.js +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element) { - let counter = 0 - const setCounter = (count) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/javascript.svg b/javascript.svg deleted file mode 100644 index f9abb2b72..000000000 --- a/javascript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index b400b4e3d..000000000 --- a/main.js +++ /dev/null @@ -1,24 +0,0 @@ -import './style.css' -import javascriptLogo from './javascript.svg' -import viteLogo from '/vite.svg' -import { setupCounter } from './counter.js' - -document.querySelector('#app').innerHTML = ` -
- - - - - - -

Hello Vite!

-
- -
-

- Click on the Vite logo to learn more -

-
-` - -setupCounter(document.querySelector('#counter')) diff --git a/package-lock.json b/package-lock.json index d1f10e1d6..b16fac969 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "middle.messenger.praktikum.yandex", "version": "0.0.0", + "dependencies": { + "handlebars": "^4.7.8" + }, "devDependencies": { "vite": "^5.1.0" } @@ -554,6 +557,72 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/esbuild": { "version": "0.19.12", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz", @@ -592,6 +661,20 @@ "@esbuild/win32-x64": "0.19.12" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -606,6 +689,106 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "dev": true, + "optional": true, + "peer": true + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -624,12 +807,42 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", @@ -658,6 +871,20 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/rollup": { "version": "4.10.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.10.0.tgz", @@ -690,6 +917,33 @@ "fsevents": "~2.3.2" } }, + "node_modules/sass": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz", + "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -699,6 +953,32 @@ "node": ">=0.10.0" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/vite": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.1.tgz", @@ -753,6 +1033,11 @@ "optional": true } } + }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" } } } diff --git a/package.json b/package.json index 6accb0c2c..70b68294a 100644 --- a/package.json +++ b/package.json @@ -10,5 +10,8 @@ }, "devDependencies": { "vite": "^5.1.0" + }, + "dependencies": { + "handlebars": "^4.7.8" } } diff --git a/index.html b/src/index.html similarity index 90% rename from index.html rename to src/index.html index 3d0843819..18829b8b4 100644 --- a/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - - + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 000000000..b5cc57ea7 --- /dev/null +++ b/src/main.js @@ -0,0 +1,4 @@ +import { Login } from "./pages/Login/login"; +import "./scss/app.scss"; + +document.querySelector("#app").innerHTML = Login(); diff --git a/src/pages/Login/login.hbs b/src/pages/Login/login.hbs new file mode 100644 index 000000000..903628504 --- /dev/null +++ b/src/pages/Login/login.hbs @@ -0,0 +1,24 @@ + \ No newline at end of file diff --git a/src/pages/Login/login.js b/src/pages/Login/login.js new file mode 100644 index 000000000..dbd0d302c --- /dev/null +++ b/src/pages/Login/login.js @@ -0,0 +1,7 @@ +import Handlebars from "handlebars"; +import login from "./login.hbs?raw"; +import "./login.scss"; + +export const Login = (props = {}) => { + return Handlebars.compile(login)(props); +}; diff --git a/src/pages/Login/login.scss b/src/pages/Login/login.scss new file mode 100644 index 000000000..285487ede --- /dev/null +++ b/src/pages/Login/login.scss @@ -0,0 +1,73 @@ +@import "./../../scss/variables.scss"; +.login { + &__container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + &__form { + width: 100%; + max-width: 340px; + margin: auto; + border-radius: 12px; + background: $main_background; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14); + } + &__form-container { + padding: 50px 30px 30px; + } + &__title { + color: $primary_text_color; + font-size: 20px; + font-weight: 500; + line-height: 20px; /* 100% */ + margin-bottom: 57px; + text-align: center; + } + &__label { + color: $sub-primary_text_color; + font-size: 9px; + font-weight: 500; + line-height: 9px; /* 100% */ + display: block; + } + &__inputs { + margin-bottom: 169px; + } + &__input { + color: $primary_text_color; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + display: block; + padding: 8px 0; + border-bottom: 1px solid $blue; + margin-bottom: 16px; + width: 100%; + &:last-child { + margin-bottom: 0; + } + } + &__btn { + color: $main_background; + text-align: center; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + border-radius: 8px; + background: $blue; + width: 100%; + padding: 12px; + margin-bottom: 14px; + } + &__link-signIn { + color: $blue; + font-size: 11px; + font-weight: 500; + line-height: 11px; /* 100% */ + } + &__link { + text-align: center; + } +} diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss new file mode 100644 index 000000000..5df80d2cb --- /dev/null +++ b/src/scss/_fonts.scss @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500&display=swap"); diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 000000000..c10914e2a --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,10 @@ +$primary_text_color: #1e1e1e; +$sub-primary_text_color: #999; + +$primary-button_color: #fff; + +$blue: #3369f3; +$red: #ff2f2f; + +$main_background: #fff; +$primary-element_background: #efefef; diff --git a/src/scss/app.scss b/src/scss/app.scss new file mode 100644 index 000000000..aca50018e --- /dev/null +++ b/src/scss/app.scss @@ -0,0 +1,10 @@ +@import "./variables"; +@import "./libs/normilize"; +@import "./fonts.scss"; + +body { + font-family: "Inter"; +} +#app { + height: 100%; +} diff --git a/src/scss/libs/_normilize.scss b/src/scss/libs/_normilize.scss new file mode 100644 index 000000000..1c476cb14 --- /dev/null +++ b/src/scss/libs/_normilize.scss @@ -0,0 +1,94 @@ +* { + padding: 0; + margin: 0; + border: 0; + list-style: none; + outline: none; +} +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +:focus, +:active { + outline: none; +} +a:focus, +a:active { + outline: none; +} +nav, +footer, +header, +aside { + display: block; +} +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +input, +button, +textarea { + font-family: inherit; +} +input::-ms-clear { + display: none; +} +button { + cursor: pointer; +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} +a, +a:visited { + text-decoration: none; +} +a:hover { + text-decoration: none; +} +ul li { + list-style: none; +} +img { + vertical-align: top; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} + +@mixin noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome, Opera and Firefox */ +} diff --git a/style.css b/style.css deleted file mode 100644 index 30aa81410..000000000 --- a/style.css +++ /dev/null @@ -1,96 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.vanilla:hover { - filter: drop-shadow(0 0 2em #f7df1eaa); -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 000000000..fed25affc --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; + +export default defineConfig({ + plugins: [], + root: resolve(__dirname, "src"), + build: { + outDir: resolve(__dirname, "dist"), + }, +}); From 9deafaac98997a37935d88a81d07fd9ddcda269c Mon Sep 17 00:00:00 2001 From: Deni Date: Mon, 12 Feb 2024 20:38:13 +0300 Subject: [PATCH 03/11] =?UTF-8?q?=D0=B7=D0=B0=D0=B2=D0=B5=D1=80=D1=88?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83?= =?UTF-8?q?=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 34 ++++++++++++++++- src/pages/Login/login.hbs | 2 +- src/pages/Login/login.js | 2 +- src/pages/SignIn/signIn.hbs | 45 ++++++++++++++++++++++ src/pages/SignIn/signIn.js | 7 ++++ src/pages/SignIn/signIn.scss | 73 ++++++++++++++++++++++++++++++++++++ 6 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 src/pages/SignIn/signIn.hbs create mode 100644 src/pages/SignIn/signIn.js create mode 100644 src/pages/SignIn/signIn.scss diff --git a/src/main.js b/src/main.js index b5cc57ea7..8742d6f96 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,34 @@ -import { Login } from "./pages/Login/login"; +import { loginTemplate } from "./pages/Login/login"; +import { signInTemplate } from "./pages/SignIn/signIn"; import "./scss/app.scss"; -document.querySelector("#app").innerHTML = Login(); +const app = document.querySelector("#app"); + +window.addEventListener("DOMContentLoaded", () => { + const route = window.location.pathname.substring(1); + + window.addEventListener("click", (e) => { + if (e.target.tagName === "A") { + e.preventDefault(); + const href = e.target.getAttribute("href"); + window.history.pushState({}, "", href); + changeRoute(href.substring(1)); + } + }); + changeRoute(route); +}); + +function changeRoute(route) { + switch (route) { + case "login": + app.innerHTML = loginTemplate(); + break; + + case "signIn": + app.innerHTML = signInTemplate(); + break; + + default: + break; + } +} diff --git a/src/pages/Login/login.hbs b/src/pages/Login/login.hbs index 903628504..4fd29fc31 100644 --- a/src/pages/Login/login.hbs +++ b/src/pages/Login/login.hbs @@ -16,7 +16,7 @@ r diff --git a/src/pages/Login/login.js b/src/pages/Login/login.js index dbd0d302c..304cfbfca 100644 --- a/src/pages/Login/login.js +++ b/src/pages/Login/login.js @@ -2,6 +2,6 @@ import Handlebars from "handlebars"; import login from "./login.hbs?raw"; import "./login.scss"; -export const Login = (props = {}) => { +export const loginTemplate = (props = {}) => { return Handlebars.compile(login)(props); }; diff --git a/src/pages/SignIn/signIn.hbs b/src/pages/SignIn/signIn.hbs new file mode 100644 index 000000000..70bb8f703 --- /dev/null +++ b/src/pages/SignIn/signIn.hbs @@ -0,0 +1,45 @@ + \ No newline at end of file diff --git a/src/pages/SignIn/signIn.js b/src/pages/SignIn/signIn.js new file mode 100644 index 000000000..e44eaf3b9 --- /dev/null +++ b/src/pages/SignIn/signIn.js @@ -0,0 +1,7 @@ +import Handlebars from "handlebars"; +import signIn from "./signIn.hbs?raw"; +import "./signIn.scss"; + +export const signInTemplate = (props = {}) => { + return Handlebars.compile(signIn)(props); +}; diff --git a/src/pages/SignIn/signIn.scss b/src/pages/SignIn/signIn.scss new file mode 100644 index 000000000..dd0010bdd --- /dev/null +++ b/src/pages/SignIn/signIn.scss @@ -0,0 +1,73 @@ +@import "./../../scss/variables.scss"; +.login { + &__container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + &__form { + width: 100%; + max-width: 340px; + margin: auto; + border-radius: 12px; + background: $main_background; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14); + } + &__form-container { + padding: 50px 30px 30px; + } + &__title { + color: $primary_text_color; + font-size: 20px; + font-weight: 500; + line-height: 20px; /* 100% */ + margin-bottom: 57px; + text-align: center; + } + &__label { + color: $sub-primary_text_color; + font-size: 9px; + font-weight: 500; + line-height: 9px; /* 100% */ + display: block; + } + &__inputs { + margin-bottom: 62px; + } + &__input { + color: $primary_text_color; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + display: block; + padding: 8px 0; + border-bottom: 1px solid $blue; + margin-bottom: 16px; + width: 100%; + &:last-child { + margin-bottom: 0; + } + } + &__btn { + color: $main_background; + text-align: center; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + border-radius: 8px; + background: $blue; + width: 100%; + padding: 12px; + margin-bottom: 14px; + } + &__link-signIn { + color: $blue; + font-size: 11px; + font-weight: 500; + line-height: 11px; /* 100% */ + } + &__link { + text-align: center; + } +} From fd733b32f480454f6aa1c1efa2a608c630d72c1d Mon Sep 17 00:00:00 2001 From: Deni Date: Tue, 13 Feb 2024 15:23:23 +0300 Subject: [PATCH 04/11] =?UTF-8?q?=D0=B7=D0=B0=D0=B2=D0=B5=D1=80=D1=88?= =?UTF-8?q?=D0=B8=D0=BB=201=20=D1=81=D0=BF=D1=80=D0=B8=D0=BD=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/Avatar.svg | 3 + src/assets/svg/return-arrow.svg | 5 + src/main.js | 45 ++++- src/pages/Chats/chats.hbs | 8 + src/pages/Chats/chats.js | 7 + src/pages/Chats/chats.scss | 25 +++ src/pages/Login/login.hbs | 3 +- src/pages/Login/login.scss | 144 ++++++++-------- src/pages/Profile/profile.hbs | 105 ++++++++++++ src/pages/Profile/profile.js | 7 + src/pages/Profile/profile.scss | 162 ++++++++++++++++++ src/pages/ProfileEdit/profileEdit.hbs | 98 +++++++++++ src/pages/ProfileEdit/profileEdit.js | 6 + .../profileEditPassword.hbs | 64 +++++++ .../profileEditPassword.js | 6 + src/pages/SignIn/signIn.hbs | 55 +++--- src/pages/SignIn/signIn.scss | 146 ++++++++-------- src/scss/_variables.scss | 5 +- src/scss/app.scss | 2 +- .../libs/{_normilize.scss => _normalize.scss} | 0 20 files changed, 721 insertions(+), 175 deletions(-) create mode 100644 src/assets/svg/Avatar.svg create mode 100644 src/assets/svg/return-arrow.svg create mode 100644 src/pages/Chats/chats.hbs create mode 100644 src/pages/Chats/chats.js create mode 100644 src/pages/Chats/chats.scss create mode 100644 src/pages/Profile/profile.hbs create mode 100644 src/pages/Profile/profile.js create mode 100644 src/pages/Profile/profile.scss create mode 100644 src/pages/ProfileEdit/profileEdit.hbs create mode 100644 src/pages/ProfileEdit/profileEdit.js create mode 100644 src/pages/ProfileEditPassword/profileEditPassword.hbs create mode 100644 src/pages/ProfileEditPassword/profileEditPassword.js rename src/scss/libs/{_normilize.scss => _normalize.scss} (100%) diff --git a/src/assets/svg/Avatar.svg b/src/assets/svg/Avatar.svg new file mode 100644 index 000000000..43b222024 --- /dev/null +++ b/src/assets/svg/Avatar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/return-arrow.svg b/src/assets/svg/return-arrow.svg new file mode 100644 index 000000000..fbd9eb8c8 --- /dev/null +++ b/src/assets/svg/return-arrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/main.js b/src/main.js index 8742d6f96..721644da9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,9 @@ +import avatar from './assets/svg/Avatar.svg'; +import { chatsTemplate } from "./pages/Chats/chats"; import { loginTemplate } from "./pages/Login/login"; +import { profileTemplate } from "./pages/Profile/profile"; +import { profileEditTemplate } from './pages/ProfileEdit/profileEdit'; +import { profileEditPasswordTemplate } from './pages/ProfileEditPassword/profileEditPassword'; import { signInTemplate } from "./pages/SignIn/signIn"; import "./scss/app.scss"; @@ -6,20 +11,30 @@ const app = document.querySelector("#app"); window.addEventListener("DOMContentLoaded", () => { const route = window.location.pathname.substring(1); - - window.addEventListener("click", (e) => { - if (e.target.tagName === "A") { - e.preventDefault(); - const href = e.target.getAttribute("href"); - window.history.pushState({}, "", href); - changeRoute(href.substring(1)); - } - }); changeRoute(route); }); +window.addEventListener("click", (e) => { + const condition = + e.target.tagName === "A" && e.target.classList.contains("nav__link"); + + if (condition) { + e.preventDefault(); + + const href = e.target.getAttribute("href"); + const route = href.substring(1); + + window.history.pushState({}, "", href); + + changeRoute(route); + } +}); + function changeRoute(route) { switch (route) { + case "": + app.innerHTML = chatsTemplate(); + break; case "login": app.innerHTML = loginTemplate(); break; @@ -28,6 +43,18 @@ function changeRoute(route) { app.innerHTML = signInTemplate(); break; + case "profile": + app.innerHTML = profileTemplate({ avatar }) + break; + + case "profile/edit-user": + app.innerHTML = profileEditTemplate({ avatar }) + break; + + case "profile/edit-password": + app.innerHTML = profileEditPasswordTemplate({ avatar }) + break; + default: break; } diff --git a/src/pages/Chats/chats.hbs b/src/pages/Chats/chats.hbs new file mode 100644 index 000000000..22f798cbd --- /dev/null +++ b/src/pages/Chats/chats.hbs @@ -0,0 +1,8 @@ +
+

Данная страница находится в разработке/>

+
+ + Перейти в профиль > + +
+
\ No newline at end of file diff --git a/src/pages/Chats/chats.js b/src/pages/Chats/chats.js new file mode 100644 index 000000000..f5219caf0 --- /dev/null +++ b/src/pages/Chats/chats.js @@ -0,0 +1,7 @@ +import Handlebars from "handlebars"; +import chats from "./chats.hbs?raw"; +import "./chats.scss"; + +export const chatsTemplate = (props = {}) => { + return Handlebars.compile(chats)(props); +}; diff --git a/src/pages/Chats/chats.scss b/src/pages/Chats/chats.scss new file mode 100644 index 000000000..e5b079055 --- /dev/null +++ b/src/pages/Chats/chats.scss @@ -0,0 +1,25 @@ +@import "../../scss/variables"; + +.chats { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; + + h2 { + font-size: 48px; + margin-bottom: 20px; + color: $primary-text_color; + } + + &__link { + text-align: center; + color: $blue; + font-size: 11px; + font-style: normal; + font-weight: 500; + line-height: 11px; + /* 100% */ + } +} diff --git a/src/pages/Login/login.hbs b/src/pages/Login/login.hbs index 4fd29fc31..1b0c2beaa 100644 --- a/src/pages/Login/login.hbs +++ b/src/pages/Login/login.hbs @@ -14,7 +14,8 @@ class="login__input" /> - + diff --git a/src/pages/Login/login.scss b/src/pages/Login/login.scss index 285487ede..67258e0ac 100644 --- a/src/pages/Login/login.scss +++ b/src/pages/Login/login.scss @@ -1,73 +1,81 @@ @import "./../../scss/variables.scss"; .login { - &__container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + &__container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + &__form { + width: 100%; + max-width: 340px; + margin: auto; + border-radius: 12px; + background: $main_background; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14); + } + &__form-container { + padding: 50px 30px 30px; + } + &__title { + color: $primary-text_color; + font-size: 20px; + font-weight: 500; + line-height: 20px; /* 100% */ + margin-bottom: 57px; + text-align: center; + } + &__label { + color: $sub-primary-text_color; + font-size: 9px; + font-weight: 500; + line-height: 9px; /* 100% */ + display: block; + } + &__inputs { + margin-bottom: 169px; + } + &__input { + color: $primary-text_color; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + display: block; + padding: 8px 0; + border-bottom: 1px solid $blue; + margin-bottom: 16px; + width: 100%; + &:last-child { + margin-bottom: 0; } - &__form { - width: 100%; - max-width: 340px; - margin: auto; - border-radius: 12px; - background: $main_background; - box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14); - } - &__form-container { - padding: 50px 30px 30px; - } - &__title { - color: $primary_text_color; - font-size: 20px; - font-weight: 500; - line-height: 20px; /* 100% */ - margin-bottom: 57px; - text-align: center; - } - &__label { - color: $sub-primary_text_color; - font-size: 9px; - font-weight: 500; - line-height: 9px; /* 100% */ - display: block; - } - &__inputs { - margin-bottom: 169px; - } - &__input { - color: $primary_text_color; - font-size: 13px; - font-weight: 500; - line-height: 13px; /* 100% */ - display: block; - padding: 8px 0; - border-bottom: 1px solid $blue; - margin-bottom: 16px; - width: 100%; - &:last-child { - margin-bottom: 0; - } - } - &__btn { - color: $main_background; - text-align: center; - font-size: 13px; - font-weight: 500; - line-height: 13px; /* 100% */ - border-radius: 8px; - background: $blue; - width: 100%; - padding: 12px; - margin-bottom: 14px; - } - &__link-signIn { - color: $blue; - font-size: 11px; - font-weight: 500; - line-height: 11px; /* 100% */ - } - &__link { - text-align: center; + } + &__btn { + color: $main_background; + text-align: center; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + border-radius: 8px; + background: $blue; + width: 100%; + height: 37px; + margin-bottom: 14px; + a { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: inherit; } + } + &__link-signIn { + color: $blue; + font-size: 11px; + font-weight: 500; + line-height: 11px; /* 100% */ + } + &__link { + text-align: center; + } } diff --git a/src/pages/Profile/profile.hbs b/src/pages/Profile/profile.hbs new file mode 100644 index 000000000..ee6959901 --- /dev/null +++ b/src/pages/Profile/profile.hbs @@ -0,0 +1,105 @@ +
+
+
+ +
+
+
+
+
+
+ Аватар +
+
+ Иван +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Изменить данные +
+
+ Изменить пароль +
+
+ Выйти +
+
+
+
+
+
+ +
\ No newline at end of file diff --git a/src/pages/Profile/profile.js b/src/pages/Profile/profile.js new file mode 100644 index 000000000..43e92453c --- /dev/null +++ b/src/pages/Profile/profile.js @@ -0,0 +1,7 @@ +import Handlebars from 'handlebars'; +import profile from './profile.hbs?raw'; +import './profile.scss'; + +export const profileTemplate = ((props = {}) => { + return Handlebars.compile(profile)(props) +}) diff --git a/src/pages/Profile/profile.scss b/src/pages/Profile/profile.scss new file mode 100644 index 000000000..ca06c8469 --- /dev/null +++ b/src/pages/Profile/profile.scss @@ -0,0 +1,162 @@ +@import "./../../scss/variables"; +.profile { + height: 100%; + .mt-102 { + margin-top: 102px; + } + .pb-37 { + padding-bottom: 37px; + } + &__row { + display: flex; + width: 100%; + align-items: center; + height: 100%; + } + &__sidebar { + height: 100%; + width: 64px; + background: $sub-primary-element_background; + display: flex; + justify-content: center; + align-items: center; + } + &__btn { + width: 28px; + height: 28px; + background-color: transparent; + background-image: url("./../../assets/svg/return-arrow.svg"); + a { + width: 100%; + height: 100%; + display: block; + } + } + &__info { + flex: 1; + } + &__container { + width: 100%; + max-width: 510px; + margin: auto; + } + &__content { + display: flex; + flex-direction: column; + row-gap: 60px; + } + &__avatar-block { + display: flex; + align-items: center; + flex-direction: column; + row-gap: 21px; + } + &__avatar { + text-align: center; + width: 130px; + height: 130px; + padding: 45px; + background: $primary-element_background; + border-radius: 50%; + position: relative; + overflow: hidden; + cursor: pointer; + &:hover { + &::before { + background-color: #00000080; + color: $main_background; + } + } + &::before { + content: "Поменять аватар"; + transition: background-color 1s ease-in-out; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + padding: 51px 33px; + font-size: 13px; + font-weight: 500; + line-height: 14px; /* 107.692% */ + color: transparent; + } + img { + max-width: 100%; + } + } + &__name { + color: $primary-text_color; + text-align: center; + font-size: 16px; + font-weight: 600; + line-height: 16px; /* 100% */ + } + &__inputs { + display: flex; + flex-direction: column; + row-gap: 10px; + } + &__row { + display: flex; + justify-content: space-between; + padding-bottom: 10px; + border-bottom: 1px solid $primary-element_background; + &:last-child { + border-bottom: none; + } + } + &__label { + color: $primary-text_color; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + } + &__input { + color: $sub-primary-text_color; + text-align: right; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + } + &__links { + display: flex; + flex-direction: column; + row-gap: 10px; + align-items: center; + } + &__link-btn { + border-radius: 8px; + background: $blue; + width: 280px; + height: 37px; + a { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: $primary-button_color; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + } + } + &__link { + width: 100%; + border-bottom: 1px solid $primary-element_background; + padding-bottom: 10px; + &:last-child { + border-bottom: none; + a { + color: $red; + } + } + a { + color: #3369f3; + font-size: 13px; + font-weight: 500; + line-height: 13px; /* 100% */ + } + } +} diff --git a/src/pages/ProfileEdit/profileEdit.hbs b/src/pages/ProfileEdit/profileEdit.hbs new file mode 100644 index 000000000..b5f9b7015 --- /dev/null +++ b/src/pages/ProfileEdit/profileEdit.hbs @@ -0,0 +1,98 @@ +
+
+
+ +
+
+
+
+
+
+ Аватар +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+ +
\ No newline at end of file diff --git a/src/pages/ProfileEdit/profileEdit.js b/src/pages/ProfileEdit/profileEdit.js new file mode 100644 index 000000000..23bc2f6e1 --- /dev/null +++ b/src/pages/ProfileEdit/profileEdit.js @@ -0,0 +1,6 @@ +import Handlebars from 'handlebars'; +import profile from './profileEdit.hbs?raw'; + +export const profileEditTemplate = ((props = {}) => { + return Handlebars.compile(profile)(props) +}) diff --git a/src/pages/ProfileEditPassword/profileEditPassword.hbs b/src/pages/ProfileEditPassword/profileEditPassword.hbs new file mode 100644 index 000000000..10575e750 --- /dev/null +++ b/src/pages/ProfileEditPassword/profileEditPassword.hbs @@ -0,0 +1,64 @@ +
+
+
+ +
+
+
+
+
+
+ Аватар +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+ +
\ No newline at end of file diff --git a/src/pages/ProfileEditPassword/profileEditPassword.js b/src/pages/ProfileEditPassword/profileEditPassword.js new file mode 100644 index 000000000..bdaad5e5b --- /dev/null +++ b/src/pages/ProfileEditPassword/profileEditPassword.js @@ -0,0 +1,6 @@ +import Handlebars from 'handlebars'; +import profile from './profileEditPassword.hbs?raw'; + +export const profileEditPasswordTemplate = ((props = {}) => { + return Handlebars.compile(profile)(props) +}) diff --git a/src/pages/SignIn/signIn.hbs b/src/pages/SignIn/signIn.hbs index 70bb8f703..76fe38c25 100644 --- a/src/pages/SignIn/signIn.hbs +++ b/src/pages/SignIn/signIn.hbs @@ -1,43 +1,48 @@ -