diff --git a/package-lock.json b/package-lock.json index 21c4369..23695ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "core-js": "^3.8.3", + "jquery": "^3.7.1", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" @@ -6858,6 +6859,11 @@ "@sideway/pinpoint": "^2.0.0" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" + }, "node_modules/js-message": { "version": "1.0.7", "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz", @@ -11542,7 +11548,8 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "dev": true + "dev": true, + "requires": {} }, "@babel/plugin-syntax-async-generators": { "version": "7.8.4", @@ -13125,7 +13132,8 @@ "version": "5.0.8", "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz", "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==", - "dev": true + "dev": true, + "requires": {} }, "@vue/cli-service": { "version": "5.0.8", @@ -13651,13 +13659,15 @@ "version": "1.9.0", "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "dev": true + "dev": true, + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "8.3.1", @@ -13716,7 +13726,8 @@ "version": "3.5.2", "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-colors": { "version": "4.1.3", @@ -14525,7 +14536,8 @@ "version": "6.4.1", "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==", - "dev": true + "dev": true, + "requires": {} }, "css-loader": { "version": "6.8.1", @@ -14711,7 +14723,8 @@ "version": "3.1.0", "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz", "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", - "dev": true + "dev": true, + "requires": {} }, "csso": { "version": "4.2.0", @@ -16245,7 +16258,8 @@ "version": "5.1.0", "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true + "dev": true, + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -16476,6 +16490,11 @@ "@sideway/pinpoint": "^2.0.0" } }, + "jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" + }, "js-message": { "version": "1.0.7", "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz", @@ -17632,25 +17651,29 @@ "version": "5.1.2", "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz", "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-empty": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz", "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-loader": { "version": "6.2.1", @@ -17755,7 +17778,8 @@ "version": "3.0.0", "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.3", @@ -17790,7 +17814,8 @@ "version": "5.1.0", "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", - "dev": true + "dev": true, + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -19588,7 +19613,8 @@ "version": "8.15.1", "resolved": "https://registry.npmmirror.com/ws/-/ws-8.15.1.tgz", "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -19710,7 +19736,8 @@ "version": "7.5.9", "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "dev": true + "dev": true, + "requires": {} }, "y18n": { "version": "5.0.8", diff --git a/package.json b/package.json index bbfb9a7..4f5f544 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "core-js": "^3.8.3", + "jquery": "^3.7.1", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" diff --git a/src/App.vue b/src/App.vue index 0a8642d..8417fc8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,9 @@ diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css new file mode 100644 index 0000000..ae764e6 --- /dev/null +++ b/src/assets/css/home-style.css @@ -0,0 +1,886 @@ +@import url("../../assets/css/css2.css"); +* { + outline: none; + box-sizing: border-box; +} + +:root { + --theme-bg-color: rgba(16 18 27 / 40%); + --border-color: rgba(113 119 144 / 25%); + --theme-color: #f9fafb; + --inactive-color: rgb(113 119 144 / 78%); + --body-font: "Poppins", sans-serif; + --hover-menu-bg: rgba(12 15 25 / 30%); + --content-title-color: #999ba5; + --content-bg: rgb(146 151 179 / 13%); + --button-inactive: rgb(249 250 251 / 55%); + --dropdown-bg: #21242d; + --dropdown-hover: rgb(42 46 60); + --popup-bg: rgb(22 25 37); + --search-bg: #14162b; + --overlay-bg: rgba(36, 39, 59, 0.3); + --scrollbar-bg: rgb(1 2 3 / 40%); +} + +.light-mode { + --theme-bg-color: rgb(255 255 255 / 31%); + --theme-color: #3c3a3a; + --inactive-color: #333333; + --button-inactive: #3c3a3a; + --search-bg: rgb(255 255 255 / 31%); + --dropdown-bg: #f7f7f7; + --overlay-bg: rgb(255 255 255 / 30%); + --dropdown-hover: rgb(236 236 236); + --border-color: rgb(255 255 255 / 35%); + --popup-bg: rgb(255 255 255); + --hover-menu-bg: rgba(255 255 255 / 35%); + --scrollbar-bg: rgb(255 253 253 / 57%); + --content-title-color: --theme-color; +} + +html { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; +} + +.body { + font-family: var(--body-font); + background-image: url(../../assets/img/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg); + background-size: cover; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2em; + width: 100%; + height: 100vh; +} +@media screen and (max-width: 480px) { + .body { + padding: 0.8em; + } +} + +.video-bg { + position: fixed; + right: 0; + top: 0; + width: 100%; + height: 100%; +} +.video-bg video { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +img { + max-width: 100%; +} + +.dark-light { + position: fixed; + width: 40px; + height: 40px; + bottom: 50px; + right: 30px; + background-color: var(--dropdown-bg); + box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2); + padding: 8px; + border-radius: 50%; + z-index: 3; + cursor: pointer; +} +.dark-light svg { + width: 24px; + flex-shrink: 0; + fill: #ffce45; + stroke: #ffce45; + transition: 0.5s; +} + +.light-mode .dark-light svg { + fill: transparent; + stroke: var(--theme-color); +} +.light-mode .profile-img { + border: 2px solid var(--theme-bg-color); +} +.light-mode .content-section ul { + background-color: var(--theme-bg-color); +} +.light-mode .pop-up__title { + border-color: var(--theme-color); +} +.light-mode .dropdown.is-active ul { + background-color: rgba(255, 255, 255, 0.94); +} + +.body.light-mode:before, +.body.light-mode .video-bg:before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%); + -webkit-backdrop-filter: saturate(3); + backdrop-filter: saturate(3); +} + +.app { + background-color: var(--theme-bg-color); + max-width: 1250px; + max-height: 860px; + height: 90vh; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + width: 100%; + border-radius: 14px; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + font-size: 15px; + font-weight: 500; +} + +.header { + display: flex; + align-items: center; + flex-shrink: 0; + height: 58px; + width: 100%; + border-bottom: 1px solid var(--border-color); + padding: 0 30px; + white-space: nowrap; +} +@media screen and (max-width: 480px) { + .header { + padding: 0 16px; + } +} +.header-menu { + display: flex; + align-items: center; +} +.header-menu a { + padding: 20px 30px; + text-decoration: none; + color: var(--inactive-color); + border-bottom: 2px solid transparent; + transition: 0.3s; +} +@media screen and (max-width: 610px) { + .header-menu a:not(.main-header-link) { + display: none; + } +} +.header-menu a.is-active, .header-menu a:hover { + color: var(--theme-color); + border-bottom: 2px solid var(--theme-color); +} + +.notify { + position: relative; +} +.notify:before { + content: ""; + position: absolute; + background-color: #3a6df0; + width: 6px; + height: 6px; + border-radius: 50%; + right: 20px; + top: 16px; +} +@media screen and (max-width: 1055px) { + .notify { + display: none; + } +} + +.menu-circle { + width: 15px; + height: 15px; + background-color: #f96057; + border-radius: 50%; + box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65; + margin-right: 195px; + flex-shrink: 0; +} +@media screen and (max-width: 945px) { + .menu-circle { + display: none; + } +} + +.search-bar { + height: 40px; + display: flex; + width: 100%; + max-width: 400px; + padding-left: 16px; + border-radius: 4px; +} +.search-bar input { + width: 100%; + height: 100%; + border: none; + background-color: var(--search-bg); + border-radius: 4px; + font-family: var(--body-font); + font-size: 15px; + font-weight: 500; + padding: 0 20px 0 40px; + box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02); + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e"); + background-size: 14px; + background-repeat: no-repeat; + background-position: 16px 48%; + color: var(--theme-color); +} +.search-bar input::-moz-placeholder { + font-family: var(--body-font); + color: var(--inactive-color); + font-size: 15px; + font-weight: 500; +} +.search-bar input:-ms-input-placeholder { + font-family: var(--body-font); + color: var(--inactive-color); + font-size: 15px; + font-weight: 500; +} +.search-bar input::placeholder { + font-family: var(--body-font); + color: var(--inactive-color); + font-size: 15px; + font-weight: 500; +} + +.header-profile { + display: flex; + align-items: center; + padding: 0 16px 0 40px; + margin-left: auto; + flex-shrink: 0; +} +.header-profile svg { + width: 22px; + color: #f9fafb; + flex-shrink: 0; +} + +.notification { + position: relative; +} +.notification-number { + position: absolute; + background-color: #3a6df0; + width: 16px; + height: 16px; + border-radius: 50%; + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + right: -6px; + top: -6px; +} +.notification + svg { + margin-left: 22px; +} +@media screen and (max-width: 945px) { + .notification + svg { + display: none; + } +} + +.profile-img { + width: 32px; + height: 32px; + border-radius: 50%; + -o-object-fit: cover; + object-fit: cover; + border: 2px solid var(--theme-color); + margin-left: 22px; +} + +.wide .header-menu, +.wide .header-profile { + display: none; +} +.wide .search-bar { + max-width: 600px; + margin: auto; + transition: 0.4s; + box-shadow: 0 0 0 1px var(--border-color); + padding-left: 0; +} +.wide .menu-circle { + margin-right: 0; +} + +.wrapper { + display: flex; + flex-grow: 1; + overflow: hidden; +} + +.left-side { + flex-basis: 240px; + border-right: 1px solid var(--border-color); + padding: 26px; + overflow: auto; + flex-shrink: 0; +} +@media screen and (max-width: 945px) { + .left-side { + display: none; + } +} + +.side-wrapper + .side-wrapper { + margin-top: 20px; +} + +.side-title { + color: var(--inactive-color); + margin-bottom: 14px; +} + +.side-menu { + display: flex; + flex-direction: column; + white-space: nowrap; +} +.side-menu a { + text-decoration: none; + color: var(--theme-color); + display: flex; + align-items: center; + font-weight: 400; + padding: 10px; + font-size: 14px; + border-radius: 6px; + transition: 0.3s; +} +.side-menu a:hover { + background-color: var(--hover-menu-bg); +} +.side-menu svg { + width: 16px; + margin-right: 8px; +} + +.updates { + position: relative; + top: 0; + right: 0; + margin-left: auto; + width: 18px; + height: 18px; + font-size: 11px; +} + +.main-header { + display: flex; + align-items: center; + border-bottom: 1px solid var(--border-color); + height: 58px; + flex-shrink: 0; +} +.main-header .header-menu { + margin-left: 150px; +} +@media screen and (max-width: 1055px) { + .main-header .header-menu { + margin: auto; + } +} +.main-header .header-menu a { + padding: 20px 24px; +} + +.main-container { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.menu-link-main { + text-decoration: none; + color: var(--theme-color); + padding: 0 30px; +} +@media screen and (max-width: 1055px) { + .menu-link-main { + display: none; + } +} + +.content-wrapper { + display: flex; + flex-direction: column; + color: var(--theme-color); + padding: 20px 40px; + height: 100%; + overflow: auto; + background-color: var(--theme-bg-color); +} +@media screen and (max-width: 510px) { + .content-wrapper { + padding: 20px; + } +} +.content-wrapper-header { + display: flex; + align-items: center; + width: 100%; + justify-content: space-between; + background-image: url("https://www.transparenttextures.com/patterns/cubes.png"), linear-gradient(to right top, #cf4af3, #e73bd7, #f631bc, #fd31a2, #ff3a8b, #ff4b78, #ff5e68, #ff705c, #ff8c51, #ffaa49, #ffc848, #ffe652); + border-radius: 14px; + padding: 20px 40px; +} +@media screen and (max-width: 415px) { + .content-wrapper-header { + padding: 20px; + } +} +.content-wrapper.overlay { + pointer-events: none; + transition: 0.3s; + background-color: var(--overlay-bg); +} + +.overlay-app { + width: 100%; + height: 100%; + position: fixed; + left: 0; + top: 0; + pointer-events: all; + background-color: rgba(36, 39, 59, 0.8); + opacity: 0; + visibility: hidden; + transition: 0.3s; +} +.overlay-app.is-active { + visibility: visible; + opacity: 1; +} + +.img-content { + font-weight: 500; + font-size: 17px; + display: flex; + align-items: center; + margin: 0; +} +.img-content svg { + width: 28px; + margin-right: 14px; +} + +.content-text { + font-weight: 400; + font-size: 14px; + margin-top: 16px; + line-height: 1.7em; + color: #ebecec; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.content-wrapper-context { + max-width: 350px; +} + +.content-button { + background-color: #3a6df0; + border: none; + padding: 8px 26px; + color: #fff; + border-radius: 20px; + margin-top: 16px; + cursor: pointer; + transition: 0.3s; + white-space: nowrap; +} + +.content-wrapper-img { + width: 186px; + -o-object-fit: cover; + object-fit: cover; + margin-top: -25px; + -o-object-position: center; + object-position: center; +} +@media screen and (max-width: 570px) { + .content-wrapper-img { + width: 110px; + } +} + +.content-section { + margin-top: 30px; + display: flex; + flex-direction: column; +} +.content-section-title { + color: var(--content-title-color); + margin-bottom: 14px; +} +.content-section ul { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-around; + background-color: var(--content-bg); + padding-left: 0; + margin: 0; + border-radius: 14px; + border: 1px solid var(--theme-bg-color); + cursor: pointer; +} +.content-section ul li { + list-style: none; + padding: 10px 18px; + display: flex; + align-items: center; + font-size: 16px; + width: 100%; + height: 100%; + white-space: nowrap; + transition: 0.3s; +} +.content-section ul li:hover { + background-color: var(--theme-bg-color); +} +.content-section ul li:hover:first-child { + border-radius: 13px 13px 0 0; +} +.content-section ul li:hover:last-child { + border-radius: 0 0 13px 13px; +} +.content-section ul li + li { + border-top: 1px solid var(--border-color); +} +.content-section ul svg { + width: 28px; + border-radius: 6px; + margin-right: 16px; + flex-shrink: 0; +} + +.products { + display: flex; + align-items: center; + width: 150px; +} +@media screen and (max-width: 480px) { + .products { + width: 120px; + } +} + +.status { + margin-left: auto; + width: 140px; + font-size: 15px; + position: relative; +} +@media screen and (max-width: 700px) { + .status { + display: none; + } +} +.status-circle { + width: 6px; + height: 6px; + background-color: #396df0; + position: absolute; + border-radius: 50%; + top: 4px; + left: -20px; +} +.status-circle.green { + background-color: #3bf083; +} +.status-button { + font-size: 15px; + margin-top: 0; + padding: 6px 24px; +} +@media screen and (max-width: 390px) { + .status-button { + padding: 6px 14px; + } +} +.status-button.open { + background: none; + color: var(--button-inactive); + border: 1px solid var(--button-inactive); +} +.status-button:not(.open):hover { + color: #fff; + border-color: #fff; +} + +.content-button:not(.open):hover { + background: #1e59f1; +} + +.menu { + width: 5px; + height: 5px; + background-color: var(--button-inactive); + border-radius: 50%; + box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive); + margin: 0 12px; +} + +@media screen and (max-width: 415px) { + .adobe-product .menu { + display: none; + } +} +.dropdown { + position: relative; + height: 53px; + width: 40px; + top: -24px; + display: flex; + left: -5px; + background: transparent; + border: none; + cursor: pointer; +} +.dropdown ul { + position: absolute; + background: var(--dropdown-bg); + height: 110px; + width: 120px; + right: 0; + top: 20px; + pointer-events: none; + opacity: 0; + transform: translatey(10px); + transition: all 0.4s ease; +} +.dropdown ul li a { + text-decoration: none; + color: var(--theme-color); + font-size: 12px; +} + +.dropdown.is-active ul { + opacity: 1; + pointer-events: all; + transform: translatey(25px); +} +.dropdown.is-active ul li:hover { + background-color: var(--dropdown-hover); +} + +.button-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + width: 187px; + margin-left: auto; +} +@media screen and (max-width: 480px) { + .button-wrapper { + width: auto; + } +} + +.pop-up { + position: absolute; + padding: 30px 40px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow-y: auto; + box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4); + transition: all 0.3s; + z-index: 10; + background-color: var(--popup-bg); + width: 500px; + visibility: hidden; + opacity: 0; + border-radius: 6px; + display: flex; + flex-direction: column; + white-space: normal; +} +@media screen and (max-width: 570px) { + .pop-up { + width: 100%; + } +} +.pop-up.visible { + visibility: visible; + opacity: 1; +} +.pop-up__title { + padding-bottom: 20px; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; +} +.pop-up__subtitle { + white-space: normal; + margin: 20px 0; + font-size: 14px; + font-weight: 400; + line-height: 1.8em; +} +.pop-up__subtitle a { + color: var(--theme-color); +} + +.content-button-wrapper .content-button.status-button.open.close { + width: auto; +} + +.content-section .close { + margin-right: 0; + width: 24px; +} + +.checkbox-wrapper { + display: flex; + align-items: center; + font-size: 14px; + font-weight: 400; +} +.checkbox-wrapper + .checkbox-wrapper { + margin: 20px 0 40px; +} + +.checkbox { + display: none; +} + +.checkbox + label { + display: flex; + align-items: center; +} +.checkbox + label:before { + content: ""; + margin-right: 10px; + width: 15px; + height: 15px; + border: 1px solid var(--theme-color); + border-radius: 4px; + cursor: pointer; + flex-shrink: 0; +} + +.checkbox:checked + label:before { + background-color: #3a6df0; + border-color: #3a6df0; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e"); + background-position: 50%; + background-size: 12px; + background-repeat: no-repeat; +} + +.content-button-wrapper { + margin-top: auto; + margin-left: auto; +} +.content-button-wrapper .open { + margin-right: 8px; +} + +.apps-card { + display: flex; + align-items: center; + flex-wrap: wrap; + width: calc(100% + 20px); +} + +.app-card { + display: flex; + flex-direction: column; + width: calc(33.3% - 20px); + font-size: 16px; + background-color: var(--content-bg); + border-radius: 14px; + border: 1px solid var(--theme-bg-color); + padding: 20px; + cursor: pointer; + transition: 0.3s ease; +} +.app-card:hover { + transform: scale(1.02); + background-color: var(--theme-bg-color); +} +.app-card svg { + width: 28px; + border-radius: 6px; + margin-right: 12px; + flex-shrink: 0; +} +.app-card + .app-card { + margin-left: 20px; +} +.app-card span { + display: flex; + align-items: center; +} +.app-card__subtext { + font-size: 14px; + font-weight: 400; + line-height: 1.6em; + margin-top: 20px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 20px; +} +.app-card-buttons { + display: flex; + align-items: center; + margin-left: auto; + margin-top: 16px; +} +@media screen and (max-width: 1110px) { + .app-card { + width: calc(50% - 20px); + } + .app-card:last-child { + margin-top: 20px; + margin-left: 0px; + } +} +@media screen and (max-width: 565px) { + .app-card { + width: calc(100% - 20px); + margin-top: 20px; + } + .app-card + .app-card { + margin-left: 0; + } +} + +::-webkit-scrollbar { + width: 6px; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-bg); + border-radius: 10px; +} diff --git a/src/components/Home/ContentWrapper.vue b/src/components/Home/ContentWrapper.vue new file mode 100644 index 0000000..dcaa51c --- /dev/null +++ b/src/components/Home/ContentWrapper.vue @@ -0,0 +1,35 @@ + + + \ No newline at end of file diff --git a/src/components/Home/HomeHeader.vue b/src/components/Home/HomeHeader.vue new file mode 100644 index 0000000..27e5f84 --- /dev/null +++ b/src/components/Home/HomeHeader.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/components/Home/HomePage.vue b/src/components/Home/HomePage.vue index c8931ae..6f7b83b 100644 --- a/src/components/Home/HomePage.vue +++ b/src/components/Home/HomePage.vue @@ -1,1498 +1,59 @@ - - - - - - \ No newline at end of file diff --git a/src/components/Home/LeftSide.vue b/src/components/Home/LeftSide.vue new file mode 100644 index 0000000..c40be6e --- /dev/null +++ b/src/components/Home/LeftSide.vue @@ -0,0 +1,142 @@ + + \ No newline at end of file diff --git a/src/components/Home/MainContainer.vue b/src/components/Home/MainContainer.vue new file mode 100644 index 0000000..b9109bd --- /dev/null +++ b/src/components/Home/MainContainer.vue @@ -0,0 +1,251 @@ + + + \ No newline at end of file diff --git a/src/components/Home/MainHeader.vue b/src/components/Home/MainHeader.vue new file mode 100644 index 0000000..2bab9f1 --- /dev/null +++ b/src/components/Home/MainHeader.vue @@ -0,0 +1,42 @@ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 52d4a5c..7724d4f 100644 --- a/src/main.js +++ b/src/main.js @@ -2,5 +2,9 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' +const $ = require('jquery'); +window.$ = $; +// home-style +import './assets/css/home-style.css' createApp(App).use(store).use(router).use(router).mount('#app') diff --git a/src/router/index.js b/src/router/index.js index 9c89d0a..d965e02 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,5 +1,5 @@ import { createRouter, createWebHashHistory } from 'vue-router' -import Index from '../views/Index.vue' +import Index from '../views/HomeView.vue' const routes = [ { diff --git a/src/views/Index.vue b/src/views/HomeView.vue similarity index 100% rename from src/views/Index.vue rename to src/views/HomeView.vue diff --git a/vue.config.js b/vue.config.js index 910e297..e5ba0de 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,5 @@ const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ - transpileDependencies: true + transpileDependencies: true, + })