+ 185 GB left
+
+
+ 100> MB left
+
+
+ 10 MB left
+
+
+
+ 
+ 100MB left
+
+ MB left
+
+ 15 MB left
+
+ 100
MB left +
+ +
100
MB left +
+ 10
MB left +
+
+ 100 MB left
+
+ 100MB left
+
+ 100
MB left +
+ 10 MB left
+
+ 
+
+
+ " + (parseInt(maxMemory) - currentDiskSpace) + " MB left
"; +}); + + +function handleFiles(files) { + var allowedFormats = /(\.jpg|\.jpeg|\.gif|\.png)$/i; + var filePreviewContainer = document.getElementById('filePreviewContainer'); + var filePreviews = {}; + var totalSize = 0; + + + function createFilePreview(file, fileId) { + + var fileName = file.name; + var fileExtension = fileName.slice(((fileName.lastIndexOf(".") - 1) >>> 0) + 2); + var nameWithoutExtension = fileName.replace(/\.[^/.]+$/, ''); + var truncatedName = nameWithoutExtension.length > 7 ? nameWithoutExtension.substring(0, 7) + '...' : nameWithoutExtension; + + + var filePreview = document.createElement('div'); + filePreview.className = 'file-preview'; + filePreview.textContent = truncatedName + '.' + fileExtension; + filePreview.id = 'preview-' + fileId; + + + var deleteIndicator = document.createElement('span'); + deleteIndicator.className = 'delete-indicator'; + deleteIndicator.textContent = 'x'; + + + filePreview.appendChild(deleteIndicator); + + + filePreviewContainer.appendChild(filePreview); + + + deleteIndicator.addEventListener('click', function() { + filePreviewContainer.removeChild(filePreview); + delete filePreviews[fileId]; + document.getElementById('fileInput').value = ''; + currentDiskSpace -= file.size; + move(); + if(currentDiskSpace == 0){ + document.getElementById("memory-left").innerHTML = "" + parseInt(maxMemory) + " MB left
"; + } + }); + + filePreviews[fileId] = filePreview; + } + + Array.from(files).forEach(function(file) { + if (!allowedFormats.test(file.name)) { + alert('File format isn\'t supported.\nNote: Allowed file formats: .jpeg, .jpg, .gif, .png'); + return; + } + totalSize += file.size; + }); + + + if (currentDiskSpace + totalSize > diskSize) { + alert('There is not enough space on the disk.'); + } else { + Array.from(files).forEach(function(file, index) { + var fileId = 'file-' + Date.now() + '-' + index; + + createFilePreview(file, fileId); + currentDiskSpace += file.size; + move(); + }); + }; +} + + if(document.getElementById('fileInput') != null){ + document.getElementById('fileInput').addEventListener('change', function(e) { + handleFiles(e.target.files); + }); + } +function updateHTML(elementName, value){ + document.getElementById(elementName).innerHTML = value; +} +var i = 0; +function move() { + var elem = document.getElementById("progress-bar"); + currentPercent = currentDiskSpace/diskSize*100; + + if(currentPercent == 0){ + currentPercent = 0.5; + } + document.getElementById("used-memory").innerHTML = ((currentDiskSpace / 1024 / 1024) + "").substring(0,5) + " MB"; + elem.style.width = currentPercent + "%"; + document.getElementById("memory-left").innerHTML = "" + (parseFloat(maxMemory) - currentDiskSpace /1024 /1024).toFixed(1) + " MB left
"; +} + diff --git a/ofekWorcel/styles.css b/ofekWorcel/styles.css new file mode 100644 index 0000000..26797c8 --- /dev/null +++ b/ofekWorcel/styles.css @@ -0,0 +1,277 @@ +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"); + +:root { + --body-font: "Raleway", sans-serif; + --background-color: hsl(229, 57%, 11%); + --container-background-color: hsl(228, 56%, 26%); + --pale-blue: hsl(243, 100%, 93%); + --gradient: linear-gradient(90deg, rgba(255, 163, 153, 1) 36%, rgba(255, 77, 151, 1) 100%); + --gradient-bar: rgb(255, 163, 153); + --white: rgb(255, 255, 255); + --dark-blue: hsl(229, 57%, 11%); + --grayish-blue: hsl(229, 7%, 55%); +} + +html, +body { + overflow-x: hidden; +} +body { + -ms-overflow-style: none; /* for Internet Explorer, Edge */ + scrollbar-width: none; /* for Firefox */ + overflow-y: scroll; + min-height: 100vh; + box-sizing: border-box; + padding: 0; + margin: 0; + font-size: 97.5%; + font-family: var(--body-font); + background-color: var(--background-color); + background-image: url("images//bg-desktop.png"); + background-repeat: no-repeat; + background-position-y: bottom; + background-attachment: fixed; + background-size: contain; +} + +body::-webkit-scrollbar { + display: none; /* for Chrome, Safari, and Opera */ +} + +/** Main Container **/ +main { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr; + grid-template-areas: "a b b"; + margin: 0 auto; + margin-top: 18.125rem; + width: 70%; + max-width: 57.5rem; + height: auto; + gap: 2rem; + justify-content: space-evenly; + align-items: end; +} + +/** Fylo Container **/ +.fylo-container, +.storage-container { + background-color: var(--container-background-color); +} + +.fylo-container { + display: flex; + flex-direction: column; + align-items: left; + border-radius: 15px 90px 15px 15px; + padding: 2.5rem; + padding-right: 8.3rem; + grid-area: a; + gap: 2rem; +} + +.logo { + width: 8.5rem; + height: auto; +} + +.icons { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.icon-img { + background-color: var(--background-color); + border-radius: 10px; + padding: 0.8rem; +} + +.icon-img img { + width: 1.4rem; + height: 1.4rem; +} + +/** Storage Container **/ +.storage-container { + border-radius: 15px; + padding: 1.4rem 2.5rem; + min-height: 10rem; + position: relative; + grid-area: b; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +h1 { + font-size: 0.9rem; + font-weight: 400; + color: var(--pale-blue); + line-height: 2rem; +} + +h1 span { + font-weight: 700; +} + +/** Progress Bar **/ +.progress-bar { + position: relative; + display: flex; + background-color: var(--background-color); + border-radius: 50px; + width: 100%; + height: 1rem; + margin-top: -5px; + padding: 1px; + flex-direction: column; +} + +#scales{ + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + width: 100%; + justify-content: space-between; +} + +.gradient-bar { + display: flex; + align-items: center; + background: var(--gradient-bar); + background: var(--gradient); + border-radius: 50px; + filter: saturate(); + min-width: 0.7rem; + width: 0%; + height: 0.8rem; + position: relative; + transition: width 1s ease; +} +.dot-container { + position: relative; + display: inline-flex; + justify-content: flex-end; + width: 100%; + align-items: center; + height: 1rem; +} +.dot { + position: absolute; + background-color: var(--white); + height: 0.7rem; + width: 0.7rem; + border-radius: 50%; + margin-right: 2px; +} + +h2 { + color: var(--pale-blue); + font-size: 12px; + font-weight: 700; + display: flex; + justify-content: space-between; + margin-top: 9px; +} + +/** GB left **/ +.gb-left p { + color: var(--dark-blue); + font-size: 2.4rem; + font-weight: 700; + letter-spacing: 2px; + margin: 0; + display: inline-block; +} + +.gb-left span { + font-size: 0.8rem; + text-transform: uppercase; + color: var(--grayish-blue); + display: inline-block; + vertical-align: middle; + line-height: normal; + letter-spacing: 1px; +} + +.gb-left { + position: absolute; + border-radius: 10px 10px 0 10px; + max-width: 10.6rem; + min-width: 5rem; + width: 90%; + left: 76%; + top: -30%; + transform: translate(-50%, 0); + background-color: var(--white); + padding: 0.8rem; + text-align: right; +} +.gb-left:after { + content: ""; + position: absolute; + bottom: 0; + right: 0; + width: 0; + height: 0; + background-color: transparent; + margin-left: 10%; + margin-bottom: -10%; + border-top: 0; + border-bottom: 35px solid transparent; + border-right: 45px solid var(--white); +} + +/** Media Queries **/ +@media screen and (max-width: 1025px) { + body { + background-image: url("images/bg-mobile.png"); + background-size: cover; + } + + main { + margin-top: 8.125rem; + grid-template-areas: + "a a" + "b b"; + gap: 1rem; + } + + .gb-left { + position: relative; + left: 50%; + top: 5%; + text-align: center; + } + .gb-left:after { + display: none; + } + + +} + +.file-preview { + display: inline-block; + margin: 10px; + padding: 10px; + border: 1px solid #ddd; + position: relative; + border-radius: 25px; + background: darkblue; + color: white; +} + +.delete-indicator { + position: absolute; + top: -10px; + right: -10px; + cursor: pointer; + background-color: white; + color: black; + border-radius: 50%; + padding: 0 5px; + align-content: center; +} diff --git a/omerAmsalem/functions.js b/omerAmsalem/functions.js new file mode 100644 index 0000000..3cd3c5f --- /dev/null +++ b/omerAmsalem/functions.js @@ -0,0 +1,86 @@ +const TotalSizeMb = 100; +var files = []; + +function handleFileSelection(event) { + const fileList = event.target.files; + for (let i = 0; i < fileList.length; i++) { + const file = fileList[i]; + const allowedExtensions = ['.jpg', '.jpeg', '.gif', '.png']; + + if (!allowedExtensions.some(ext => file.name.toLowerCase().endsWith(ext))) { + alert("Error: File format is not supported."); + console.error('Error: File format is not supported.'); + continue; + } + + if (checkFileSize(file)) { + files.push(file); + if(fileSizeCalculator(file)<0){ + alert("Error: Files size is too large. Max size is 100MB."); + console.error('Error: Files size is too large. Max size is 100MB.'); + files.pop(); + return 0; + } + displayFile(file); + } + } +} + +function chooseFile() { + console.log('chooseFile'); + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.accept = ''; + fileInput.addEventListener('change', handleFileSelection); + fileInput.click(); +} + +function checkFileSize(file) { + console.log("check total size"); + const fileSizeInMbs = Math.ceil(file.size / (1024 ** 2)); + + console.log('File size:', fileSizeInMbs + ' Mb'); + if (fileSizeInMbs > TotalSizeMb) { + alert("Error: File size is too large. Max size is 100MB."); + console.error('Error: File size is too large. Max size is 100MB.'); + return false; + } + return true; +} + +function fileSizeCalculator(file) { + if(checkFileSize(file)){ + const totalUsedSpaceMb = Math.ceil(files.reduce((acc, curr) => acc + curr.size / (1024 ** 2), 0)); + const MbLeft = TotalSizeMb - totalUsedSpaceMb; + console.log('MbLeft:', MbLeft); + const StorageUsed = document.getElementById('StorageUsed'); + const BottomStorageUsed = document.getElementById('BottomStorageUsed'); + StorageUsed.innerHTML = 100-MbLeft; + BottomStorageUsed.innerHTML = 100-MbLeft; + document.querySelector('.gradient-bar').style.width = StorageUsed.innerHTML+'%'; + const StorageLeft = document.getElementById('StorageLeft'); + StorageLeft.innerHTML = MbLeft; + return MbLeft; + } + else { + return 0; + } +} + + +function displayFile(file) { + const fileList = document.getElementById('fileList'); + const listItem = document.createElement('li'); + listItem.innerHTML = `${file.name} `; + fileList.appendChild(listItem); +} + +function deleteFile(fileName) { + files = files.filter(file => file.name !== fileName); + const fileList = document.getElementById('fileList'); + fileList.innerHTML = ''; + files.forEach(file => displayFile(file)); +} + + + diff --git a/omerAmsalem/images/bg-desktop.png b/omerAmsalem/images/bg-desktop.png new file mode 100644 index 0000000..aa8ee6b Binary files /dev/null and b/omerAmsalem/images/bg-desktop.png differ diff --git a/omerAmsalem/images/bg-mobile.png b/omerAmsalem/images/bg-mobile.png new file mode 100644 index 0000000..9e6a539 Binary files /dev/null and b/omerAmsalem/images/bg-mobile.png differ diff --git a/omerAmsalem/images/favicon-32x32.png b/omerAmsalem/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/omerAmsalem/images/favicon-32x32.png differ diff --git a/omerAmsalem/images/icon-document.svg b/omerAmsalem/images/icon-document.svg new file mode 100644 index 0000000..11f469f --- /dev/null +++ b/omerAmsalem/images/icon-document.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/omerAmsalem/images/icon-folder.svg b/omerAmsalem/images/icon-folder.svg new file mode 100644 index 0000000..458df8d --- /dev/null +++ b/omerAmsalem/images/icon-folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/omerAmsalem/images/icon-upload.svg b/omerAmsalem/images/icon-upload.svg new file mode 100644 index 0000000..6d2b881 --- /dev/null +++ b/omerAmsalem/images/icon-upload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/omerAmsalem/images/logo.svg b/omerAmsalem/images/logo.svg new file mode 100644 index 0000000..d5c11e4 --- /dev/null +++ b/omerAmsalem/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/omerAmsalem/images/project-preview.png b/omerAmsalem/images/project-preview.png new file mode 100644 index 0000000..2e16b33 Binary files /dev/null and b/omerAmsalem/images/project-preview.png differ diff --git a/omerAmsalem/index.html b/omerAmsalem/index.html new file mode 100644 index 0000000..fafc9a1 --- /dev/null +++ b/omerAmsalem/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + +
+ 100 MB left
+
+ 800
MB left +
+ 10 GB left
+
+ 10
MB left +
+ 100
MB left +
+ 10 MB left
+
+ 999
MB left +
+ 185 MB left
+
+ 10 MB left
+
+ 100> MB left
+
+ 999 GB left
+
+ 185 MB left
+
+ 
+ 
+