ЛР4 фронт без таблиц

This commit is contained in:
ityurner02@mail.ru 2023-04-24 22:35:59 +04:00
parent 8b69f68e7a
commit da683c642b
14 changed files with 740 additions and 94 deletions

View File

@ -1,13 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<title>VIDEO | FILMS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@ -8,8 +8,14 @@
"name": "vue-project",
"version": "0.0.0",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.1",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
"vue-router": "^4.1.6",
"vuelidate": "^0.7.7"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
@ -815,6 +821,15 @@
"node": ">=12"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
"integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@ -881,6 +896,16 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
"integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@types/node": {
"version": "18.16.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
@ -1050,6 +1075,90 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"node_modules/@vuelidate/core": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.2.tgz",
"integrity": "sha512-aG1OZWv6xVws3ljyKy/pyxq1rdZZ2ryj+FEREcC9d4GP4qOvNHHZUl/NQxa0Bck3Ooc0RfXU8vwCA9piRoWy6w==",
"dependencies": {
"vue-demi": "^0.13.11"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.2.tgz",
"integrity": "sha512-6y6QLoK567XVmaLP3Paf1vkg6K2zO6xax3yTyczy1RnJ4PsLDLLGzP1PFzSpwb16aw4CKduBgI63HvIuctJhQg==",
"dependencies": {
"vue-demi": "^0.13.11"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/acorn": {
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@ -1076,6 +1185,39 @@
"node": ">=4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
"integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
}
},
"node_modules/browserslist": {
"version": "4.21.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@ -1173,6 +1315,17 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@ -1209,6 +1362,14 @@
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.369",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz",
@ -1275,6 +1436,38 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -1375,6 +1568,25 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -1436,6 +1648,11 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/rollup": {
"version": "3.21.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
@ -1646,6 +1863,15 @@
"vue": "^3.2.0"
}
},
"node_modules/vuelidate": {
"version": "0.7.7",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
"integrity": "sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==",
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@ -2136,6 +2362,11 @@
"dev": true,
"optional": true
},
"@fortawesome/fontawesome-free": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
"integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ=="
},
"@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@ -2195,6 +2426,12 @@
}
}
},
"@popperjs/core": {
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
"integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
"peer": true
},
"@types/node": {
"version": "18.16.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
@ -2348,6 +2585,38 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"@vuelidate/core": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.2.tgz",
"integrity": "sha512-aG1OZWv6xVws3ljyKy/pyxq1rdZZ2ryj+FEREcC9d4GP4qOvNHHZUl/NQxa0Bck3Ooc0RfXU8vwCA9piRoWy6w==",
"requires": {
"vue-demi": "^0.13.11"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"@vuelidate/validators": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.2.tgz",
"integrity": "sha512-6y6QLoK567XVmaLP3Paf1vkg6K2zO6xax3yTyczy1RnJ4PsLDLLGzP1PFzSpwb16aw4CKduBgI63HvIuctJhQg==",
"requires": {
"vue-demi": "^0.13.11"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"acorn": {
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@ -2365,6 +2634,27 @@
"color-convert": "^1.9.0"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
"integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"requires": {}
},
"browserslist": {
"version": "4.21.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@ -2423,6 +2713,14 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@ -2451,6 +2749,11 @@
"ms": "2.1.2"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"electron-to-chromium": {
"version": "1.4.369",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz",
@ -2504,6 +2807,21 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -2570,6 +2888,19 @@
"sourcemap-codec": "^1.4.8"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -2602,6 +2933,11 @@
"source-map-js": "^1.0.2"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"rollup": {
"version": "3.21.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
@ -2721,6 +3057,11 @@
"@vue/devtools-api": "^6.4.5"
}
},
"vuelidate": {
"version": "0.7.7",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
"integrity": "sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA=="
},
"yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

View File

@ -9,8 +9,14 @@
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.1",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
"vue-router": "^4.1.6",
"vuelidate": "^0.7.7"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",

View File

@ -1,85 +1,34 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
<script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
export default {
components: {
Header,
Footer
}
}
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
<Header></Header>
<div class="container-fluid">
<router-view></router-view>
</div>
<Footer></Footer>
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
<style>
body {
background: fixed;
background-color: blue !important;
min-height: 100vh;
position: relative;
}
.logo {
margin: 0 2rem 0 0;
.last_info, .block_films{
font-size: 2rem !important;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
.mock {
width: 100%;
height: 120px;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>

View File

@ -0,0 +1,13 @@
<template>
<h1 class="text-white text-center mt-3 mb-3 fw-bold">О нас</h1>
<div class="text-white text-left mx-auto" style="max-width: 1200px">
<div class="last_info">
<span class="text-danger">V</span>IDEO | <span class="text-danger">F</span>ILMS - это онлайн кинотеатр, в котором есть лучшие фильмы разных жанров в хорошем качестве.<br>
Мы предлагаем:<br>
1. Каталог фильмов, которые можно смотреть в хорошем качестве.<br>
2. Грамотно продуманный поиск фильмов позволит быстро и легко подобрать кино.<br>
3. Возможность насладиться просмотром любимого фильма в удобное время.
</div>
</div>
<div class="mock"></div>
</template>

View File

@ -0,0 +1,53 @@
<template>
<div class="row gx-0">
<div class="block_films col my-5 text-left text-success bg-white mx-5 overflow-auto">
<div class="text-center fw-bold">Фантастика</div>
<ul>
<li>Начало</li>
<li>Интерстеллар</li>
<li>Доктор Стрэндж</li>
<li>Железный человек</li>
<li>Гиперболоид инженера Гарина</li>
</ul>
</div>
<div class="block_films col my-5 text-left text-success bg-white mx-5 overflow-auto">
<div class="text-center fw-bold">Драма</div>
<ul>
<li>Учитель на замену</li>
<li>Бесприданница</li>
<li>Зеленая миля</li>
<li>Джокер</li>
<li>Великий Гэтсби</li>
</ul>
</div>
<div class="block_films col my-5 text-left text-success bg-white mx-5 overflow-auto">
<div class="text-center fw-bold">Ужасы</div>
<ul>
<li>Оно</li>
<li>Пункт назначения</li>
<li>Звонок</li>
<li>Нечто</li>
<li>Кошмар на улице Вязов</li>
</ul>
</div>
<div class="block_films col my-5 text-left text-success bg-white mx-5 overflow-auto">
<div class="text-center fw-bold">Комедия</div>
<ul>
<li>Один дома</li>
<li>Бриллиантовая рука</li>
<li>Джентельмены удачи</li>
<li>Иван Васильевич меняет профессию</li>
<li>Маска</li>
</ul>
</div>
</div>
<div class="mock"></div>
</template>
<style scoped>
.block_films{
height: 65vh;
max-width: 450px;
min-width: 250px;
}
</style>

View File

@ -0,0 +1,20 @@
<template>
<footer class="d-flex justify-content-center justify-content-lg-around p-3 bg-success">
<span class="logo text-danger bg-white">VF</span>
<span class="text-white mt-4">более 10 лет только лучшие фильмы</span>
<span class="text-white mt-4">Почта для отзывов и предложений: videofilms@mail.ru</span>
</footer>
</template>
<style scoped>
.logo{
font-size: 64px;
line-height: 76px;
}
footer{
width: 100%;
position: absolute;
bottom: 0;
margin: 0 !important;
}
</style>

View File

@ -0,0 +1,94 @@
<template>
<h1 class="text-danger text-center">Связь</h1>
<form class="row m-2 gx-0" @submit.prevent="onSubmit">
<div class="form-group col-md-4 m-1" :class="{ error: v$.form.name.$errors.length }">
<label for="" class="form-label text-white">Имя</label>
<input class="form-control" type="text" v-model="v$.form.name.$model">
<!-- error message -->
<div class="input-errors" v-for="(error, index) of v$.form.name.$errors" :key="index">
<div class="error-msg text-danger">{{ error.$message }}</div>
</div>
</div>
<div class="form-group col-md-4 m-1" :class="{ error: v$.form.surname.$errors.length }">
<label for="" class="form-label text-white">Фамилия</label>
<input class="form-control" type="text" v-model="v$.form.surname.$model">
<!-- error message -->
<div class="input-errors" v-for="(error, index) of v$.form.surname.$errors" :key="index">
<div class="error-msg text-danger">{{ error.$message }}</div>
</div>
</div>
<div class="form-group col-md-4 m-1" :class="{ error: v$.form.email.$errors.length }">
<label for="" class="form-label text-white">Почта</label>
<input class="form-control" type="email" v-model="v$.form.email.$model">
<!-- error message -->
<div class="input-errors" v-for="(error, index) of v$.form.email.$errors" :key="index">
<div class="error-msg text-danger">{{ error.$message }}</div>
</div>
</div>
<div class="col-md-4 m-1">
<label for="" class="form-label text-white">Страна проживания</label>
<select class="form-control" v-model="form.selectedCountry">
<option v-for="country in form.countries" v-bind:value="country.name">{{country.name}}</option>
</select>
</div>
<div class="col-md-8 m-1">
<label for="" class="form-label text-white">Пожелания или замечания</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="col-12 m-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="notification" v-model="form.agree">
<label class="form-check-label text-white" for="notification">
Примите условия и соглашения
</label>
</div>
</div>
<div class="buttons-w">
<button :disabled="v$.form.$invalid" class="btn btn-success">Отправить</button>
</div>
</form>
<div class="mock"></div>
</template>
<script>
import useVuelidate from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'
export default{
setup () {
return { v$: useVuelidate() }
},
data(){
return{
form:{
name: '',
surname: '',
email: '',
countries: [
{name: 'Россия'},
{name: 'Белоруссия'},
{name: 'Казахстан'}
],
selectedCountry: 'Россия',
agree: false
}
}
},
validations () {
return {
form:{
name: { required, min: minLength(2) },
surname: { required, min: minLength(4) },
email: { required, email },
agree: { checked (val) { return val } }
}
}
}
}
</script>

View File

@ -0,0 +1,37 @@
<template>
<header>
<nav class="navbar navbar-dark navbar-expand-xl bg-black">
<div class="container-fluid">
<router-link to="/index" class="navbar-brand"><img src="/src/images/name.png" alt="name"></router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/index" class="nav-link">Главная</router-link>
</li>
<li class="nav-item">
<router-link to="/player" class="nav-link">Проигрыватель</router-link>
</li>
<li class="nav-item">
<router-link to="/films" class="nav-link">Фильмы</router-link>
</li>
<li class="nav-item">
<router-link to="/about_us" class="nav-link">О нас</router-link>
</li>
<li class="nav-item">
<router-link to="/form" class="nav-link">Связь</router-link>
</li>
</ul>
</div>
</div>
</nav>
</header>
</template>
<style scoped>
header{
font-size: 28px;
}
</style>

View File

@ -0,0 +1,57 @@
<script>
export default{
data(){
return{
images: [
{image: "/src/images/banner1.jpg"},
{image: "/src/images/banner2.jpg"},
{image: "/src/images/banner3.jpg"}
],
count: 0,
banner: "/src/images/banner1.jpg"
}
},
methods: {
change(){
this.banner = this.images[this.count].image;
if(this.count == this.images.length-1) this.count = 0;
else this.count++;
setTimeout(this.change, 3000);
}
},
mounted(){
this.change();
}
}
</script>
<template>
<section class="first_page">
<div id="banner">
<img :src = banner />
</div>
<div class="mock"></div>
</section>
</template>
<style scoped>
.first_page{
background-image: url(/src/images/Фон1.jpg);
min-height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
}
#banner {
margin: 15px;
display: flex;
align-items: center;
flex-direction: column;
min-height: 700px;
}
#banner img {
border-radius: 5px;
height: 700px;
min-width: 300px;
}
</style>

View File

@ -0,0 +1,59 @@
<template>
<section class="title_player">
<h1 class="text-danger text-center">Проигрыватель</h1>
<div class="player">
<div class="player_menu">
<button class="player_button"><img class="player_button_img" src="/src/images/play.png" alt="play"></button>
<div class="player_progress"></div>
</div>
</div>
</section>
<div class="mock"></div>
</template>
<style scoped>
.player{
position: relative;
width: 80%;
height: 600px;
background: black;
margin: 10px auto;
}
.player:hover .player_menu{
opacity: 1;
}
.player_menu{
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background: gray;
display: flex;
align-items: center;
justify-content: space-around;
transition: 0.6s all ease;
opacity: 0;
}
.player_button{
width: 30px;
height: 30px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.player_button:focus{
outline: none;
}
.player_button_img{
width: 100%;
}
.player_progress{
width: 85%;
height: 7px;
background: black;
}
.player:hover .player__menu{
opacity: 1;
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -1,11 +1,26 @@
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import router from './router'
import Index from './components/Index.vue'
import Player from './components/Player.vue'
import Films from './components/Films.vue'
import About_us from './components/About_us.vue'
import Form from './components/Form.vue'
import './assets/main.css'
const app = createApp(App)
const routes = [
{ path: '/', redirect: '/index' },
{ path: '/index', component: Index },
{ path: '/player', component: Player},
{ path: '/films', component: Films},
{ path: '/about_us', component: About_us},
{ path: '/form', component: Form}
]
app.use(router)
const router = createRouter({
history: createWebHistory(),
linkActiveClass: 'active',
routes
})
app.mount('#app')
createApp(App).use(router).mount('#app')

Binary file not shown.