diff --git a/.gitattributes b/.gitattributes index fcadb2c..a41c0a0 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,3 @@ * text eol=lf +*.png binary +*.jpg binary diff --git a/.gitignore b/.gitignore index 403adbc..6a7e624 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ pnpm-debug.log* *.njsproj *.sln *.sw? +.eslintcache diff --git a/package-lock.json b/package-lock.json index 41b85a3..a1e35eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "vue": "^3.0.0", "vue-i18n": "^9.0.0-rc.7", "vue-router": "^4.0.0-0", + "vue3-carousel": "^0.1.12", "vuex": "^4.0.0-0" }, "devDependencies": { @@ -15613,6 +15614,14 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "node_modules/vue3-carousel": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.1.12.tgz", + "integrity": "sha512-jej3kypcuJXgDmcpwpiurUpJCQBycAbu6hcn1wVjvLSeNOzYc7ILSwG3iQA1IaxGbboXqbrUSnr8cbYNY6ncHg==", + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vuex": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz", @@ -30061,6 +30070,12 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue3-carousel": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.1.12.tgz", + "integrity": "sha512-jej3kypcuJXgDmcpwpiurUpJCQBycAbu6hcn1wVjvLSeNOzYc7ILSwG3iQA1IaxGbboXqbrUSnr8cbYNY6ncHg==", + "requires": {} + }, "vuex": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz", diff --git a/package.json b/package.json index 2f318cd..b67cb13 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "vue": "^3.0.0", "vue-i18n": "^9.0.0-rc.7", "vue-router": "^4.0.0-0", + "vue3-carousel": "^0.1.12", "vuex": "^4.0.0-0" }, "devDependencies": { @@ -45,13 +46,12 @@ } }, "lint-staged": { - "*.js": [ + "*.{js,vue}": [ "eslint --cache --fix", - "git add" + "prettier write" ], "*.json": [ - "prettier --write", - "git add" + "prettier --write" ] } } diff --git a/src/App.vue b/src/App.vue index 60e1dbc..d5145a1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,6 +10,6 @@ - diff --git a/src/assets/css/font.css b/src/assets/css/font.css new file mode 100644 index 0000000..24d69fb --- /dev/null +++ b/src/assets/css/font.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); \ No newline at end of file diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/css/main.css b/src/assets/css/main.css new file mode 100644 index 0000000..79be9f0 --- /dev/null +++ b/src/assets/css/main.css @@ -0,0 +1 @@ +@import 'font.css'; \ No newline at end of file diff --git a/src/assets/scss/base/inputs.scss b/src/assets/scss/base/inputs.scss new file mode 100644 index 0000000..000cb2a --- /dev/null +++ b/src/assets/scss/base/inputs.scss @@ -0,0 +1,163 @@ +.inputgroup { + display: flex; + box-sizing: border-box; + flex-flow: row wrap; + align-items: center; + vertical-align: middle; + width: 100%; + height: auto; + padding-left: 1rem; + padding-right: 1rem; + margin-bottom: 1rem; + + &__label { + width: 100%; + height: auto; + font-size: 1.25rem; + font-weight: 500; + color: $textColor; + margin-bottom: 0.75rem; + } + + &__input { + font-family: 'Poppins'; + font-size: 1.6rem; + width: 100%; + height: 3rem; + color: $textColor; + background-color: transparent; + padding: 0.5rem 1rem; + border: 0.1rem solid; + border-radius: 0.8rem; + border-color: rgba(255, 255, 255, 0.15); + outline: none; + margin-bottom: 1.5rem; + &:hover { + opacity: 0.8; + } + &:focus { + border-color: rgba(255, 255, 255, 0.4); + background-color: rgba(255, 255, 255, 0.035); + } + } + &__textarea { + display: inline-flex; + font-family: 'Poppins'; + font-size: 1.6rem; + width: 100%; + min-height: 3rem; + height: auto; + color: $textColor; + background-color: transparent; + padding: 0.5rem 1rem; + padding-bottom: 2rem; + border: 0.1rem solid; + border-radius: 0.8rem; + border-color: rgba(255, 255, 255, 0.15); + outline: none; + margin-bottom: 1.5rem; + resize: none; + + &[contenteditable]:empty::before { + content: attr(placeholder); + color: gray; + } + + &:focus { + border-color: rgba(255, 255, 255, 0.4); + background-color: rgba(255, 255, 255, 0.035); + } + } + &__radio { + display: flex; + box-sizing: border-box; + width: 3.4rem; + height: 3.4rem; + border-radius: 0.7rem; + border: 0.2rem solid $brandPrimary; + outline: none; + cursor: pointer; + background-color: $darkBackground; + padding: 5px; + opacity: 0.6; + + &::after { + box-sizing: border-box; + content: ''; + position: relative; + top: 50%; + left: 50%; + border-radius: 0.3rem; + transform: translate(-50%, -50%); + width: 1.4rem; + height: 1.4rem; + } + &--checked { + opacity: 1; + } + &--checked::after { + background-color: $brandPrimary; + } + &--round { + border-radius: 100%; + &::before { + border-radius: 100%; + } + &::after { + border-radius: 100%; + } + } + } + + &__checkbox { + display: flex; + box-sizing: border-box; + width: 3.4rem; + height: 3.4rem; + border-radius: 0.7rem; + border: 0.2rem solid $brandPrimary; + outline: none; + box-shadow: none; + background-color: $darkBackground; + padding: 5px; + cursor: pointer; + + &::after { + display: block; + box-sizing: border-box; + content: ''; + position: relative; + top: 50%; + left: 50%; + border-radius: 0.3rem; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background-color: transparent; + } + &--checked::after { + background-color: $brandPrimary; + } + &--round { + border-radius: 100%; + &::after { + border-radius: 100%; + } + } + } +} +.inputgroup--as-row { + .inputgroup__label { + width: auto; + align-self: flex-start; + margin-bottom: 0rem; + } + .inputgroup__input { + margin-left: auto; + align-self: flex-end; + } +} + +.hidden { + display: none; +} diff --git a/src/assets/scss/base/main.scss b/src/assets/scss/base/main.scss index 1c6d2b3..db9c19b 100644 --- a/src/assets/scss/base/main.scss +++ b/src/assets/scss/base/main.scss @@ -1,7 +1,19 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); +@import './inputs.scss'; +@import './swipe.scss'; + +*, +*::after, +*::before { + box-sizing: border-box; +} + +html { + font-size: 10px; +} + body { - font-family: 'Poppins', sans-serif; - background-color: $background; - font-size:10px; + font-family: 'Poppins', sans-serif; + background-color: $background; } diff --git a/src/assets/scss/base/swipe.scss b/src/assets/scss/base/swipe.scss new file mode 100644 index 0000000..600c2d8 --- /dev/null +++ b/src/assets/scss/base/swipe.scss @@ -0,0 +1,60 @@ +.swipe { + background-color: $darkBackground; + border-radius: 3rem; + color: $textColor; + padding: 2rem; + width:25rem; + .carousel_row { + .carousel__slide { + min-height: 20rem; + .silder_text { + background-color: $brandPrimary; + border-radius: 2rem; + min-height: 100%; + padding: 2rem; + width: 100%; + } + } + .carousel__pagination{ + justify-content: flex-end; + margin-right: 1rem; + margin-top: -2.5rem; + position: relative; + z-index: 2; + .carousel__pagination-button { + background-color:$moduleColor; + border-radius: 10rem; + border: none; + cursor: pointer; + height: 0.7rem; + margin: 0.1rem; + padding: 0rem !important; + width: 0.8rem; + } + .carousel__pagination-button--active { + background-color:$darkBackground; + } + } + } + .title_row { + display: flex; + flex-flow: row wrap; + margin-top: 2rem; + .title { + font-size: 2rem; + font-weight: bold; + margin-bottom: 1rem; + width: 100%; + } + .subtitle { + font-size: 1rem; + } + } + .button_row { + align-items: flex-end; + display: flex; + justify-content: space-around; + margin-bottom: -2.5rem; + margin-top: 2rem; + } +} \ No newline at end of file diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 1af00ef..9aed2af 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -1,7 +1,10 @@ $background: #181818; -$brandPrimary: #9C5EEB; -$brandSecondary:#333B3E; -$iconColor: #5E5E5E; +$brandPrimary: #9c5eeb; +$brandSecondary: #333b3e; +$iconColor: #5e5e5e; $darkBackground: #131315; -$textColor: #D9D9D9; -$moduleColor: #1E2022; +$textColor: #d9d9d9; +$moduleColor: #1e2022; + +$mediaMinTables: 769px; +$mediaMinDesktop: 1024px; diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue index 130b3c8..003e4d3 100644 --- a/src/components/Checkbox.vue +++ b/src/components/Checkbox.vue @@ -1,15 +1,25 @@ @@ -19,8 +29,18 @@ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Checkbox', - props: { label: { type: String, default: null } }, + data() { + return { + state: this.$attrs.checked !== undefined, + }; + }, + methods: { + toggleInput() { + this.state = !this.state; + }, + isChecked() { + return this.state; + }, + }, }); - - diff --git a/src/components/Form.vue b/src/components/Form.vue index b36915e..8bd2c0c 100644 --- a/src/components/Form.vue +++ b/src/components/Form.vue @@ -13,4 +13,3 @@ export default defineComponent({ props: { onSubmit: { type: Function, default: () => null } }, }); - diff --git a/src/components/FormGroup.vue b/src/components/FormGroup.vue index 8c46853..e2901bd 100644 --- a/src/components/FormGroup.vue +++ b/src/components/FormGroup.vue @@ -5,8 +5,6 @@ - - - - diff --git a/src/components/Icon.vue b/src/components/Icon.vue index 839cb34..145bb75 100644 --- a/src/components/Icon.vue +++ b/src/components/Icon.vue @@ -9,6 +9,9 @@ const icons = {}; context.keys().forEach((fileName) => { const iconName = fileName.replace(/^\.\/(.+)\.svg$/, '$1'); const componentConfig = context(fileName); + delete componentConfig.default.render().props.width; + delete componentConfig.default.render().props.height; + componentConfig.default.render().props.viewBox = '0 0 15 15'; icons[iconName] = componentConfig.default || componentConfig; }); @@ -27,7 +30,15 @@ export default { }, computed: { iconComponent() { - return icons[this.name]; + const icon = icons[this.name]; + + if (this.$attrs.height) { + icon.default.render().props.height = this.$attrs.height; + } + if (this.$attrs.width) { + icon.default.render().props.width = this.$attrs.width; + } + return icon; }, }, }; diff --git a/src/components/Input.vue b/src/components/Input.vue index 8fe54cd..163ecb4 100644 --- a/src/components/Input.vue +++ b/src/components/Input.vue @@ -1,15 +1,17 @@ @@ -19,22 +21,5 @@ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Input', - props: { - label: { type: String, default: null }, - type: { type: String, default: 'text' }, - placeholder: { type: String, default: '' }, - }, }); - - diff --git a/src/components/Radio.vue b/src/components/Radio.vue index 7f4b7fe..0657d12 100644 --- a/src/components/Radio.vue +++ b/src/components/Radio.vue @@ -1,15 +1,27 @@ @@ -18,14 +30,19 @@ import { defineComponent } from 'vue'; export default defineComponent({ - name: 'Checkbox', - props: { label: { type: String, default: null } }, + name: 'Radio', + methods: { + toggleInput() { + this.state = !this.state; + }, + isChecked() { + return this.state; + }, + }, + data() { + return { + state: this.$attrs.checked ?? false, + }; + }, }); - - diff --git a/src/components/Swipe.vue b/src/components/Swipe.vue new file mode 100644 index 0000000..a704858 --- /dev/null +++ b/src/components/Swipe.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/components/Textarea.vue b/src/components/Textarea.vue index b1d98c0..296485f 100644 --- a/src/components/Textarea.vue +++ b/src/components/Textarea.vue @@ -1,13 +1,16 @@ @@ -16,22 +19,12 @@ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Textarea', - props: { - label: { type: String, default: null }, - placeholder: { type: String, default: '' }, + data() { + return { + text_area: '', + textareaRows: 1, + }; }, + methods: {}, }); - - diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..ccd8946 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,15 @@ +export { default as Badge } from './Badge.vue'; +export { default as Icon } from './Icon.vue'; +export { default as Radio } from './Radio.vue'; +export { default as Button } from './Button.vue'; +export { default as IconButton } from './IconButton.vue'; +export { default as Skill } from './Skill.vue'; +export { default as Card } from './Card.vue'; +export { default as Image } from './ImageTitleBox.vue'; +export { default as Textarea } from './Textarea.vue'; +export { default as Checkbox } from './Checkbox.vue'; +export { default as Info } from './InfoBox.vue'; +export { default as Form } from './Form.vue'; +export { default as Input } from './Input.vue'; +export { default as FormGroup } from './FormGroup.vue'; +export { default as Modal } from './Modal.vue'; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..e1a5f29 --- /dev/null +++ b/src/index.css @@ -0,0 +1 @@ +@import './assets/css/main.css'; diff --git a/src/views/Home.vue b/src/views/Home.vue index afb5fe9..625c77d 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -9,30 +9,78 @@
- + + + - + + + - + + + - + + +
-