From 509aefe20e4e6ea32388ba7614139e80f2860ebd Mon Sep 17 00:00:00 2001 From: Furkan Torun Date: Sat, 7 Sep 2024 15:11:31 +0200 Subject: [PATCH] Prettify web --- .gitignore | 4 + website/create.html | 109 ++++++++++++-------- website/css.css | 232 ++++++++++++++++++++++++------------------- website/error.html | 27 +++-- website/index.html | 58 +++++------ website/js.js | 236 ++++++++++++++++++++++---------------------- 6 files changed, 360 insertions(+), 306 deletions(-) diff --git a/.gitignore b/.gitignore index 2d811bf..0b06bc6 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,10 @@ app/model_files/ Icon +# NodeJS +node_modules/ +*.json + # Thumbnails ._* diff --git a/website/create.html b/website/create.html index c8e3201..b2c9332 100644 --- a/website/create.html +++ b/website/create.html @@ -1,56 +1,85 @@ - + - - - + + + VoiceCloning - - - + + + +

VoiceCloning | Create

+
-

VoiceCloning | Create

-
- -
- -

Create a new project

- Here, what you will need to clone a voice: +
+

Create a new project

+ Here, what you will need to clone a voice:
  • Upload 5 files and each lasts for 6-10 seconds
  • Total size should NOT exceed 10MB
  • Audio records in '.mp3' format
  • Your text can contain max. 255 characters
    • -     -
    -
    + +
    +
    -
    -
    - + +
    +
    - -

    + + +

    - + - - -
    -
    - -
    - + + +
    + +
    - -
    - VoiceCloning by @furkanmtorun | 2024 -
    + +
    + VoiceCloning by + @furkanmtorun + | 2024 +
    - - + + diff --git a/website/css.css b/website/css.css index 108dc42..64c5663 100644 --- a/website/css.css +++ b/website/css.css @@ -1,160 +1,184 @@ /* VoiceCloning */ -body {background: #fff;} -a {text-decoration: none !important; color: #000;} +body { + background: #fff; +} +a { + text-decoration: none !important; + color: #000; +} h1 { - color: lightseagreen; - text-align: center; + color: lightseagreen; + text-align: center; } -hr {border-color: lightseagreen;} +hr { + border-color: lightseagreen; +} h2 { - color: lightcoral; - padding-top: 10px; + color: lightcoral; + padding-top: 10px; +} +.link { + color: lightcoral; } -.link {color: lightcoral} .page_container { - padding: 0px 30px; + padding: 0px 30px; } .disabled { - background-color: lightslategray !important; - cursor: not-allowed !important; + background-color: lightslategray !important; + cursor: not-allowed !important; } .border-for-upload { - border: 1px solid #ccc; - border-radius: 5px; - padding: 15px 0px 0 10px; - margin-bottom: 5px; + border: 1px solid #ccc; + border-radius: 5px; + padding: 15px 0px 0 10px; + margin-bottom: 5px; } .create_project { - background: lightcoral; - color: white; - border-radius: 5px; - padding: 10px; - text-decoration: none; - display: block; - margin-top: 5px; - width: 100%; + background: lightcoral; + color: white; + border-radius: 5px; + padding: 10px; + text-decoration: none; + display: block; + margin-top: 5px; + width: 100%; } .create_project:hover { - background: lightseagreen; -} - - .project-card { - border: 1px solid #ddd; - border-radius: 5px; - padding: 10px; - margin: 5px 8px; - display: inline-block; - box-shadow: rgba(99, 99, 99, 0.2) 0px 1px 1px 0px; - transition-duration: 0.4s; - transition-property: box-shadow; - opacity: 0.9; - cursor: pointer; - min-width: 295px; - max-width: 295px; - min-height: 180px; - max-height: 180px; + background: lightseagreen; +} + +.project-card { + border: 1px solid #ddd; + border-radius: 5px; + padding: 10px; + margin: 5px 8px; + display: inline-block; + box-shadow: rgba(99, 99, 99, 0.2) 0px 1px 1px 0px; + transition-duration: 0.4s; + transition-property: box-shadow; + opacity: 0.9; + cursor: pointer; + min-width: 295px; + max-width: 295px; + min-height: 180px; + max-height: 180px; } .project-card.create { - background: lightseagreen; - color: white + background: lightseagreen; + color: white; } .project-card:hover { - opacity: 1; - box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + opacity: 1; + box-shadow: + rgba(0, 0, 0, 0.25) 0px 54px 55px, + rgba(0, 0, 0, 0.12) 0px -12px 30px, + rgba(0, 0, 0, 0.12) 0px 4px 6px, + rgba(0, 0, 0, 0.17) 0px 12px 13px, + rgba(0, 0, 0, 0.09) 0px -3px 5px; } .progress-label { - width: 70px; - padding: 5px; - border-radius: 15px; - text-align: center; - color: white; - background: lightcoral -} -.progress-label.create {background: white; color: lightseagreen;} -.progress-label.ongoing {background: lightcoral;} -.progress-label.failed {background: red;} -.progress-label.ready {background: green;} + width: 70px; + padding: 5px; + border-radius: 15px; + text-align: center; + color: white; + background: lightcoral; +} +.progress-label.create { + background: white; + color: lightseagreen; +} +.progress-label.ongoing { + background: lightcoral; +} +.progress-label.failed { + background: red; +} +.progress-label.ready { + background: green; +} .avatar { - width:50px; - height:50px; - border-radius:50%; + width: 50px; + height: 50px; + border-radius: 50%; } .footer { - text-align: center; - padding: 50px; + text-align: center; + padding: 50px; } /* Project Pop-up */ .popup-container { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 65vw; /* 65% of viewport width */ - height: 65vh; /* 40% of viewport height */ - z-index: 1000; - overflow: auto; - background-color: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 65vw; /* 65% of viewport width */ + height: 65vh; /* 40% of viewport height */ + z-index: 1000; + overflow: auto; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .close-popup { - position: absolute; - top: 10px; - right: 10px; - background: none; - border: none; - font-size: 16px; - text-align: right; - color: lightcoral !important + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 16px; + text-align: right; + color: lightcoral !important; } .popup-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ - backdrop-filter: blur(8px); /* Blur effect */ - z-index: 999; /* Ensure it's below the pop-up */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ + backdrop-filter: blur(8px); /* Blur effect */ + z-index: 999; /* Ensure it's below the pop-up */ } - /* Create Project | Form */ #projectFormContainer { - max-width: 700px; - margin: 50px auto; - background-color: #fff; - border-radius: 8px; - padding: 5px 20px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + max-width: 700px; + margin: 50px auto; + background-color: #fff; + border-radius: 8px; + padding: 5px 20px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } input[type="text"], select, textarea, button { - width: 100%; - padding: 10px; - margin-bottom: 10px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; -} -button {cursor: pointer !important;} + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +button { + cursor: pointer !important; +} diff --git a/website/error.html b/website/error.html index fc5f3af..ee5e0a9 100644 --- a/website/error.html +++ b/website/error.html @@ -1,20 +1,19 @@ - + - - - + + + VoiceCloning - - - + + + +

    VoiceCloning | Error

    +
    -

    VoiceCloning | Error

    -
    +

    Ooops!

    + Something happened on our end! We apologize! -

    Ooops!

    -Something happened on our end! We apologize! - - - + + diff --git a/website/index.html b/website/index.html index b4c0a8d..a8f0abb 100644 --- a/website/index.html +++ b/website/index.html @@ -1,41 +1,41 @@ - + - - - + + + VoiceCloning - - - - -

    VoiceCloning

    -
    - -
    - - -

    Projects

    - - -
    - VoiceCloning by @furkanmtorun | 2024 -
    + +
    + VoiceCloning by + @furkanmtorun + | 2024 +
    - - + + diff --git a/website/js.js b/website/js.js index 15ef530..ca846bf 100644 --- a/website/js.js +++ b/website/js.js @@ -2,113 +2,113 @@ // HARDCODED: // const BASE_API_URL = "https://d20hbh58zkqtxv.cloudfront.net/projects" -const BASE_API_URL = "https://l481bschml.execute-api.eu-central-1.amazonaws.com/api/projects"; -const projectsContainer = $('#projectsContainer'); -const S3_OUTPUT_URL = "https://voicecloning-outputs.s3.eu-central-1.amazonaws.com/" +const BASE_API_URL = + "https://l481bschml.execute-api.eu-central-1.amazonaws.com/api/projects"; +const projectsContainer = $("#projectsContainer"); +const S3_OUTPUT_URL = + "https://voicecloning-outputs.s3.eu-central-1.amazonaws.com/"; // ######################## // ####### General ######## // ######################## -$(document).ready(function() { - if (window.location.pathname === '/' || window.location.pathname === '/website/') { - - // Main (Home) Page - fetchProjects(); - projectsContainer.on('click', 'a', function(event) { - const projectId = $(this).attr('project_id'); - if (projectId != "-1") { - event.preventDefault(); - fetchProjectDetails(projectId); - } - }); - - } - // else if (window.location.pathname === '/create.html' || window.location.pathname === '/website/create.html') { - // // Project Create Page - // } - +$(document).ready(function () { + if ( + window.location.pathname === "/" || + window.location.pathname === "/website/" + ) { + // Main (Home) Page + fetchProjects(); + projectsContainer.on("click", "a", function (event) { + const projectId = $(this).attr("project_id"); + if (projectId != "-1") { + event.preventDefault(); + fetchProjectDetails(projectId); + } + }); + } + // else if (window.location.pathname === '/create.html' || window.location.pathname === '/website/create.html') { + // // Project Create Page + // } }); // ################################## // ###### Project Create Form ####### // ################################## -document.addEventListener('DOMContentLoaded', function() { - const form = document.getElementById('projectForm'); - const submitButton = document.getElementById('submitButton'); - - // Function to check form validity and update submit button - function checkFormValidity() { - if (form.checkValidity()) { - submitButton.classList.remove('disabled'); - submitButton.disabled = false; - } else { - submitButton.classList.add('disabled'); - submitButton.disabled = true; - } +document.addEventListener("DOMContentLoaded", function () { + const form = document.getElementById("projectForm"); + const submitButton = document.getElementById("submitButton"); + + // Function to check form validity and update submit button + function checkFormValidity() { + if (form.checkValidity()) { + submitButton.classList.remove("disabled"); + submitButton.disabled = false; + } else { + submitButton.classList.add("disabled"); + submitButton.disabled = true; } - - // Initial check to disable button if form is not valid on page load - checkFormValidity(); - - // Add event listeners to all form inputs to check validity on change - const inputs = form.querySelectorAll('input, select, textarea'); - inputs.forEach(input => { - input.addEventListener('input', checkFormValidity); - }); - - // Handle form submission - form.addEventListener('submit', function(event) { - if (submitButton.classList.contains('disabled')) { - event.preventDefault(); - } else { - submitProjectForm(event); // Submit - } - }); + } + + // Initial check to disable button if form is not valid on page load + checkFormValidity(); + + // Add event listeners to all form inputs to check validity on change + const inputs = form.querySelectorAll("input, select, textarea"); + inputs.forEach((input) => { + input.addEventListener("input", checkFormValidity); + }); + + // Handle form submission + form.addEventListener("submit", function (event) { + if (submitButton.classList.contains("disabled")) { + event.preventDefault(); + } else { + submitProjectForm(event); // Submit + } + }); }); - // ######################## // ####### Fetching ####### // ######################## function fetchProjects() { - $.ajax({ - url: BASE_API_URL, - type: 'GET', - success: function(response) { - displayProjects(response); - }, - error: function() { - displayError(); - } - }); + $.ajax({ + url: BASE_API_URL, + type: "GET", + success: function (response) { + displayProjects(response); + }, + error: function () { + displayError(); + }, + }); } function fetchProjectDetails(projectId) { - $.ajax({ - url: BASE_API_URL + "/" + projectId, - type: 'GET', - success: function(response) { - displayProjectPopup(response); - }, - error: function() { - displayError(); - } - }); + $.ajax({ + url: BASE_API_URL + "/" + projectId, + type: "GET", + success: function (response) { + displayProjectPopup(response); + }, + error: function () { + displayError(); + }, + }); } // ######################## // ####### Displays ####### // ######################## function displayProjects(projects) { - - projects.forEach(function(project) { - const projectCard = createProjectCard(project); - projectsContainer.append(projectCard); - }); + projects.forEach(function (project) { + const projectCard = createProjectCard(project); + projectsContainer.append(projectCard); + }); } function createProjectCard(project) { - return ` + return ` Project Avatar
    @@ -121,8 +121,8 @@ function createProjectCard(project) { } function displayProjectPopup(project) { - // Create the popup HTML - const popupContent = ` + // Create the popup HTML + const popupContent = `

    ${project.title}

    @@ -140,56 +140,54 @@ function displayProjectPopup(project) {
    `; - // Append the popup to the body - $('body').append(popupContent); - - // Event listener for closing the popup - $('body').on('click', '.close-popup, .popup-overlay', function() { - $('.popup-container, .popup-overlay').remove(); - }); + // Append the popup to the body + $("body").append(popupContent); + + // Event listener for closing the popup + $("body").on("click", ".close-popup, .popup-overlay", function () { + $(".popup-container, .popup-overlay").remove(); + }); } function displayError() { - alert('Error fetching data'); + alert("Error fetching data"); } - // ######################## // ####### Posting ######## // ######################## function createProject(formData) { - - return new Promise(function(resolve, reject) { - $.ajax({ - url: BASE_API_URL, - type: 'POST', - data: formData, - processData: false, // Prevent jQuery from transforming the data into a query string - contentType: false, // Allow the browser to set the content type to multipart/form-data - success: function(data) { - resolve(data); - }, - error: function(xhr, status, error) { - console.log(error); - return error - } - }); + return new Promise(function (resolve, reject) { + $.ajax({ + url: BASE_API_URL, + type: "POST", + data: formData, + processData: false, // Prevent jQuery from transforming the data into a query string + contentType: false, // Allow the browser to set the content type to multipart/form-data + success: function (data) { + resolve(data); + }, + error: function (xhr, status, error) { + console.log(error); + return error; + }, }); + }); } function submitProjectForm(event) { - event.preventDefault(); // Prevent default form submission behavior - var formData = new FormData(document.getElementById('projectForm')); - - createProject(formData) - .then(function(data) { - alert("Success: The voice is being cloned!"); - window.location.href = "../"; // Redirect to the root page - }) - .catch(function(error) { - // Handle error - alert("Error: " + error); - // window.location.reload(); // Refresh the page - }); + event.preventDefault(); // Prevent default form submission behavior + var formData = new FormData(document.getElementById("projectForm")); + + createProject(formData) + .then(function (data) { + alert("Success: The voice is being cloned!"); + window.location.href = "../"; // Redirect to the root page + }) + .catch(function (error) { + // Handle error + alert("Error: " + error); + // window.location.reload(); // Refresh the page + }); }