From 36ee4ac0c93d5f47a67cf0e927a614cf3b503302 Mon Sep 17 00:00:00 2001 From: Maciej Date: Mon, 24 Jan 2022 16:29:16 +0100 Subject: [PATCH] buttons --- assets/scss/_layout.scss | 130 +++------------------------------------ assets/scss/index.scss | 26 ++++++++ assets/scss/input.scss | 53 ++++++++++++++++ assets/scss/loader.scss | 42 +++++++++++++ assets/scss/main.scss | 7 ++- assets/scss/result.scss | 12 ++++ components/InputFile.vue | 6 +- components/Loader.vue | 5 +- components/Result.vue | 20 +++--- pages/check.vue | 2 +- pages/index.vue | 16 +++-- 11 files changed, 175 insertions(+), 144 deletions(-) create mode 100644 assets/scss/index.scss create mode 100644 assets/scss/input.scss create mode 100644 assets/scss/loader.scss create mode 100644 assets/scss/result.scss diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index c3953b1..17bf0e9 100644 --- a/assets/scss/_layout.scss +++ b/assets/scss/_layout.scss @@ -1,128 +1,16 @@ -button{ - background-color:#f2e527 ; - height: 70px; - width: 350px; - border-radius: 8px; - color:#253340; - font-size: 30px; - font-weight: bolder; - -} -div#catornot{ - background-image:linear-gradient(rgba(0, 0, 0, 0.726),rgba(0, 0, 0, 0.767)),url(../../static/img/catsornot.jpg); - background-repeat: no-repeat; - color:#f2e527; - width:1400px; - height: 788px; - margin: 0 auto; -} body{ background-color: #283643; } -div#text{ - width: 100%; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 90px; - padding-left:10px; - padding-top: 110px; - text-align: center; +main{ + display: flex; + align-items: center; + flex-direction: column; + row-gap: 20px; } -Button#button{ - margin: 1% 40.5%; - -} -div.image-container{ - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 50px; - color: #f2e527; - width: 1050px; - height: 550px; - border: 5px dashed #f2e527; - display: inline-block; - text-align: center; - background-image:linear-gradient(rgba(0, 0, 0, 0.76),rgba(0, 0, 0, 0.80),rgba(0,0,0,0.90)),url(../../static/img/catsornot.jpg); - background-repeat: no-repeat; - margin:150px 350px 100px 450px ; - display: flex; - justify-content: center; -} -div#cloud{ - font-size: 100px; - padding-top: 40px; -} -div#browse{ - background-color: #5d653f; - height: 60px; - width: 330px; - text-align: center; - border-style: none solid solid none; - border-color: #f2e527; - border-radius: 5px; - font-size: 50px; - font-family: Georgia, 'Times New Roman', Times, serif; - color: #f2e527; - margin: 0 auto; -} -h4{ - font-size: 35px; -} -label.file-input-label{ - font-size: 35px; - color: #f2e527; - position: absolute; - left: 450px; - top: 121px; -} -div#con{ - padding-left: 800px; -} -div#false{ - color:red; - font-size: 70px; - text-align: center; - position: relative; - top:-50px; - left: -600px; -} -div#true{ - color: green; - font-size: larger; - text-align: center; - font-size: 70px; - position: relative; - top:-50px; - left: -600px; -} -div#buttons{ - margin-top:50px; -} -button#again{ - position: relative; - left: -400px; - top:-50px; -} -button#con{ - position: relative; - left: 100px; - top:-50px; -} -div#loading{ - z-index: 10; - height: 100%; - width: 100%; - animation-name: loading; - animation-duration: 2s; - margin: auto; - font-size: 100px; - text-align: center; -} -@keyframes loading{ - 0%{color: red;font-weight: bolder;} - 25%{color: #f2e527;font-weight: lighter;} - 50%{color:red ; font-weight: bolder;} - 75%{color:#f2e527;font-weight:lighter;} - 100%{color:red ; font-weight: bolder;} -} \ No newline at end of file + + + + diff --git a/assets/scss/index.scss b/assets/scss/index.scss new file mode 100644 index 0000000..0999de9 --- /dev/null +++ b/assets/scss/index.scss @@ -0,0 +1,26 @@ +div#catornot{ + background-image:linear-gradient(rgba(0, 0, 0, 0.726),rgba(0, 0, 0, 0.767)),url(../../static/img/catsornot.jpg); + background-repeat: no-repeat; + color:#f2e527; + width:1400px; + height: 788px; + display: flex; + justify-content: center; + align-items: center; + +} +div#flex{ + display: flex; + align-items: center; + justify-content: center; + } + div#text{ + + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 100px; + text-align: center; +} +div#test{ + display: flex; + justify-content: center; + } \ No newline at end of file diff --git a/assets/scss/input.scss b/assets/scss/input.scss new file mode 100644 index 0000000..d972092 --- /dev/null +++ b/assets/scss/input.scss @@ -0,0 +1,53 @@ +div.image-container{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 50px; + color: #f2e527; + width: 1050px; + height: 550px; + border: 5px dashed #f2e527; + display: inline-block; + text-align: center; + background-image:linear-gradient(rgba(0, 0, 0, 0.76),rgba(0, 0, 0, 0.80),rgba(0,0,0,0.90)),url(../../static/img/catsornot.jpg); + background-repeat: no-repeat; + display: flex; + justify-content: center; + row-gap: 10px; +} +div#cloud{ + font-size: 100px; +} +div.file-input{ + width: 50%; + height: 50%; + display: flex; + align-items: center; + flex-direction: column; + row-gap: 20px; +} +div#browse{ + background-color: #5d653f; + height: 60px; + width: 330px; + text-align: center; + border-style: none solid solid none; + border-color: #f2e527; + border-radius: 5px; + font-size: 50px; + font-family: Georgia, 'Times New Roman', Times, serif; + color: #f2e527; + margin: 0 auto; + +} +h4{ + font-size: 35px; + } + label.file-input-label{ + font-size: 35px; + color: #f2e527; + align-self:stretch; + } + p#error{ + align-self: flex-end; + font-size: 25px; + color: #f2e527; + } \ No newline at end of file diff --git a/assets/scss/loader.scss b/assets/scss/loader.scss new file mode 100644 index 0000000..62d8d73 --- /dev/null +++ b/assets/scss/loader.scss @@ -0,0 +1,42 @@ +.loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: #242f3f; + display:flex; + justify-content: center; + align-items: center; + } + .loader { + display: inline-block; + width: 30px; + height: 30px; + position: relative; + border: 4px solid #Fff; + animation: loader 2s infinite ease; + } + .loader-inner { + vertical-align: top; + display: inline-block; + width: 100%; + background-color: #fff; + animation: loader-inner 2s infinite ease-in; + } + + @keyframes loader { + 0% { transform: rotate(0deg);} + 25% { transform: rotate(180deg);} + 50% { transform: rotate(180deg);} + 75% { transform: rotate(360deg);} + 100% { transform: rotate(360deg);} + } + + @keyframes loader-inner { + 0% { height: 0%;} + 25% { height: 0%;} + 50% { height: 100%;} + 75% { height: 100%;} + 100% { height: 0%;} + } \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 66c76a8..f6612ca 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1 +1,6 @@ -@import 'layout' \ No newline at end of file +@import 'layout'; +@import 'loader'; +@import 'input'; +@import 'index'; +@import 'buttons'; +@import 'result' \ No newline at end of file diff --git a/assets/scss/result.scss b/assets/scss/result.scss new file mode 100644 index 0000000..a0a1d75 --- /dev/null +++ b/assets/scss/result.scss @@ -0,0 +1,12 @@ +div#false{ + color:red; + font-size: 70px; + text-align: center; + + } + div#true{ + color: green; + font-size: larger; + text-align: center; + font-size: 70px; + } \ No newline at end of file diff --git a/components/InputFile.vue b/components/InputFile.vue index 1dd3f7d..00f0804 100644 --- a/components/InputFile.vue +++ b/components/InputFile.vue @@ -19,7 +19,7 @@ alt="obrazek" > -