Skip to content

Commit

Permalink
Added Drag & Drop Feature and Redesigned the Upload Section (#221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@antilneeraj
antilneeraj authored Jan 23, 2024
1 parent 7ca8418 commit 1fa8fd5
Show file tree
Hide file tree
Showing 3 changed files with 378 additions and 113 deletions.
289 changes: 230 additions & 59 deletions assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,107 +489,278 @@ img {
object-fit: contain;
}

/* Upload section */
/* ----------------- Upload section ------------------- */

.upload-edible-section {
.container-upload {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 100px !important;
}

.upload-edible-btn {
.uploadzone {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.1px;
padding-bottom: 0.1em;
}

.upload-edible-btn h5 {
margin-top: 0rem !important;
.wrapper {
width: 498px;
background-color: #fff;
border-radius: 16px;
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 3px solid var(--primary);
padding: 30px;
}

.upload-btn {
.wrapper .dragDrop {
height: 210px;
display: flex;
flex-direction: column;
cursor: pointer;
align-items: center;
justify-content: center;
position: relative;
padding-left: 5px;
padding-right: 5px;
width: 20vw !important;
height: auto !important;
flex-direction: column;
border-radius: 5px;
border: 0.23rem dashed #000;
}

.upload-btn:hover {
background-color: var(--block);
transform: scale(1);
form :where(i, p) {
color: #000;
}

.upload-btn img {
margin-top: 1rem;
width: 120px !important;
height: 120px !important;
object-fit: contain;
form i {
font-size: 50px;
color: var(--block);
}

#choose-edible {
background-color: var(--c);
font-size: small;
color: white;
padding: 0.5rem;
font-family: sans-serif;
border-radius: 0.3rem;
margin-top: 1rem;
margin-bottom: 0.25rem;
form p {
margin-top: 15px;
font-size: 18px;
color: #000;
}

#choose-edible:hover {
transform: scale(1.1);
transition: all 0.3s ease;
/* Animation - Optional */
@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

#choose-uploaded-edible {
background-color: #4CAF50;
font-size: small;
color: white;
padding: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
.styled-url-input,
.submit-button {
animation: fadeIn 1s ease;
}

section .row-upload {
margin-bottom: 10px;
background: #e9f0ff;
list-style: none;
padding: 15px 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}

section .row-upload i {
color: #000;
font-size: 30px;
}

section .details-upload span {
font-size: 14px;
}

.content-upload .progress-bar .progress {
height: 100%;
width: 0%;
background: #000;
border-radius: inherit;
}

.name{
font-size: 14px;
font-weight: 600;
color: #000;
}

.uploaded-area {
max-height: 232px;
overflow-y: scroll;
}

.uploaded-area.onprogress {
max-height: 150px;
}

.uploaded-area::-webkit-scrollbar {
display:none;
}

.uploaded-area .row-upload .content-upload {
display: flex;
align-items: center;
}

.uploaded-area .row-upload .details-upload {
display: flex;
margin-left: 15px;
flex-direction: column;
}

.uploaded-area .row-upload .details-upload .size {
color: #404040;
font-size: 12px;
}

.uploaded-area i.fa-check {
font-size: 16px;
}

.uploaded-area .file-preview{
width: 50px;
height: 50px;
margin-right: 15px;
background-size: cover;
background-position: center;
}

#upload-btn{
display: none;
border: none;
font-family: sans-serif;
border-radius: 0.3rem;
margin-top: 1rem;
color: white;
padding: .5em 1.5em;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor:none;
background-color: var(--block);
border-radius: 0.5em;
scale: 1;
transition: scale .3s ease-in-out;
}

#choose-uploaded-edible:hover {
background-color: #3e8e41;
transform: scale(1.1);
transition: all 0.3s ease;
#upload-btn:hover{
scale: 1.05;
}

@media (max-width: 768px) {
.upload-btn {
width: 30vw !important;
#upload-btn:active{
scale: 0.95;
}

#snackbar {
visibility: hidden;
min-width: 250px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(97, 97, 97, 0.11);
color: #000;
text-align: center;
padding: 16px;
position: fixed;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
bottom: 30px;
font-size: 17px;
}

#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}


/* Animations for Toast Message */
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}

to {
bottom: 30px;
opacity: 1;
}
}

@media screen and (max-width: 415px) {
.upload-btn {
width: 40vw !important;
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}

to {
bottom: 30px;
opacity: 1;
}
}

@media screen and (max-width: 375px) {
.upload-btn {
width: 50vw !important;
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}

to {
bottom: 0;
opacity: 0;
}
}

@media screen and (max-width: 320px) {
.upload-btn {
width: 60vw !important;
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}

to {
bottom: 0;
opacity: 0;
}
}

@media screen and (max-width: 280px) {
/* Responsive Upload Edible Section */

@media (min-width: 320px) and (max-width: 450px) {
.upload-btn {
width: 70vw !important;
width: 60vw !important;
}
.wrapper{
width: 90%;
min-width: 90%;
}
.container-upload h5{
margin-bottom: 3rem;
}
.container-upload h1{
font-size: 1.5rem;
}
.container-upload h3{
font-size: .7rem;
}
.name{
font-size: 14px;
}
.uploaded-area .row-upload .details-upload{
margin: 0;
padding: 0 10px;
}
.row-upload i{
display:none;
}
}

Expand Down
27 changes: 15 additions & 12 deletions assets/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,21 +410,24 @@ <h1>OR</h1>
</div>

<!----- Upload Edible ----->

<div class="upload-edible-section">
<div class="screen-page">
<h1>Didn't find your favourite Edible ?</h1>
<h3>Upload your Edible to continue....</h3>
<div class="upload-edible-btn">
<div class="choose-btn upload-btn">
<img src="images/upload.png" alt="Uploaded Edible" id="file-preview">
<input type="file" accept=".jpg, .jpeg, .png" id="file-upload" hidden>
<label for="file-upload" id="choose-edible">Choose Your Own Edible</label>
<button id="choose-uploaded-edible" style="display: none;">Continue ▶️</button>
<div class="container-upload">
<h1>Didn't find your favourite Edible ?</h1>
<h3>Upload your Edible to continue....</h3>
<div class="uploadzone">
<div class="wrapper" id="drag-warper">
<div class="drag-area" id="drag-area">
<form class="dragDrop" action="#" id="drag-form">
<input class="file-input" type="file" id="file-input" name="file" hidden />
<i class="fas fa-cloud-upload-alt" id="drag-cloud"></i>
<p id="drag_text">Click Or Drag and Drop File to Upload</p>
</form>
</div>
<section class="uploaded-area"></section>
</div>
<h5>(Make sure that your image has a transparent background)</h5>
</div>
<div id="snackbar"></div>
<button id="upload-btn">Play!</button>
<h5>(Make sure that your image has a transparent background)</h5>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 1fa8fd5

Please sign in to comment.