diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json new file mode 100644 index 000000000..7b46a7eda --- /dev/null +++ b/.codesandbox/workspace.json @@ -0,0 +1,20 @@ +{ + "responsive-preview": { + "Mobile": [ + 320, + 675 + ], + "Tablet": [ + 1024, + 765 + ], + "Desktop": [ + 1400, + 800 + ], + "Desktop HD": [ + 1920, + 1080 + ] + } +} \ No newline at end of file diff --git a/index.html b/index.html index 4ad4ffff6..35c94848e 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,74 @@ - + - - - - Static Template + + + Adaptive Placeholder + - -

This is a static template, there is no bundler or bundling involved!

+ +
+ +
+ +
+ + + +
+ +
+
+

Professional

+
+

+
+
+
    +
    +
    +
    + +
    +
    +

    Personal

    +
    +

    +
    +
    +
      +
      +
      +
      + + +
      + +
      + + - \ No newline at end of file + diff --git a/package.json b/package.json index 229967170..f95010eac 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "static", + "name": "done-us", "version": "1.0.0", - "description": "This is a static template with no bundling", + "description": "", "main": "index.html", "scripts": { "start": "serve", @@ -11,11 +11,7 @@ "type": "git", "url": "git+https://github.com/codesandbox-app/static-template.git" }, - "keywords": [ - "static", - "template", - "codesandbox" - ], + "keywords": [], "author": "Ives van Hoorne", "license": "MIT", "bugs": { @@ -25,4 +21,4 @@ "devDependencies": { "serve": "^11.2.0" } -} +} \ No newline at end of file diff --git a/ressources/Image PNG.png b/ressources/Image PNG.png new file mode 100644 index 000000000..800a079d9 Binary files /dev/null and b/ressources/Image PNG.png differ diff --git a/ressources/baseLogo.svg b/ressources/baseLogo.svg new file mode 100644 index 000000000..f3e92fd17 --- /dev/null +++ b/ressources/baseLogo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/ressources/contactUs.png b/ressources/contactUs.png new file mode 100644 index 000000000..ea09c5e3e Binary files /dev/null and b/ressources/contactUs.png differ diff --git a/script.js b/script.js new file mode 100644 index 000000000..d3c5c4755 --- /dev/null +++ b/script.js @@ -0,0 +1,119 @@ +let inputText = document.getElementById("inputText"); +let taskCardSelector = document.getElementById("taskCardSelector"); +let radialMenu = document.getElementById("radialMenu"); +let selectedTask = null; + +// Créer une nouvelle carte (liste) +function createNewCard(cardName) { + let newCard = document.createElement("section"); + newCard.classList.add("carte"); + newCard.id = cardName; + newCard.appendChild(containerTasks); + + let containerTasks = document.createElement("div"); + containerTasks.classList.add("containerTasks"); + + let h2 = document.createElement("h2"); + h2.textContent = cardName; + titleContainerTasks.appendChild(h2); + + let titleContainerTasks = document.createElement("div"); + titleContainerTasks.classList.add("titleContainerTasks"); + containerTasks.appendChild(titleContainerTasks); + + let ul = document.createElement("ul"); + containerTasks.appendChild(ul); + + // Mettre à jour le sélecteur d'input avec la nouvelle carte + let newOption = document.createElement("option"); + newOption.value = cardName; + newOption.textContent = cardName; + taskCardSelector.insertBefore(newOption, taskCardSelector.lastChild); + + return newCard; +} + +// Ajouter une tâche +function addTask() { + let selectedCardValue = taskCardSelector.value; + + if (selectedCardValue === "nouvelleCarte") { + // Demander à l'utilisateur le nom de la nouvelle carte (liste) + let newCardName = prompt("Nom de la nouvelle liste :"); + + if (newCardName) { + // Créer une nouvelle carte avec le nom saisi + let newCard = createNewCard(newCardName); + document.body.insertBefore(newCard, radialMenu); + selectedCardValue = newCardName; // Mettre à jour la valeur sélectionnée + } else { + // L'utilisateur a annulé la création de la carte, ne rien faire + return; + } + } + + let selectedList = document.getElementById(selectedCardValue); + + if (inputText.value === "") { + alert("Veuillez insérer une nouvelle tâche !"); + return; + } + + let li = document.createElement("li"); + li.textContent = inputText.value; + + // Ajouter la tâche à la carte sélectionnée + selectedList.querySelector("ul").appendChild(li); + inputText.value = ""; + saveData(); +} + +// Menu radial +document.body.addEventListener("contextmenu", function (e) { + e.preventDefault(); + + if (e.target.tagName === "LI") { + selectedTask = e.target; + let x = e.clientX; + let y = e.clientY; + + radialMenu.style.top = y + "px"; + radialMenu.style.left = x + "px"; + radialMenu.style.display = "block"; + } else { + radialMenu.style.display = "none"; + } +}false); + +// Gestion des options du menu radial +radialMenu.addEventListener("click", function (e) { + if (e.target.id === "editTask") { + // Éditer la tâche (à implémenter) + } else if (e.target.id === "deleteTask") { + // Supprimer la tâche + selectedTask.remove(); + saveData(); + } else if (e.target.id === "checkTask") { + // Cocher la tâche + selectedTask.classList.toggle("checked"); + saveData(); + } else if (e.target.id === "urgentTask") { + // Mettre en urgent (à implémenter) + } + + radialMenu.style.display = "none"; +}); + +// Reste de votre code pour la gestion des tâches et de l'historique + +// Sauvegarder les données +function saveData() { + // ... (implémenter la sauvegarde des données) +} + +// Charger l'historique des tâches +function historyTasks() { + // ... (implémenter le chargement de l'historique des tâches) +} + +historyTasks(); diff --git a/style.css b/style.css new file mode 100644 index 000000000..dbf85de3e --- /dev/null +++ b/style.css @@ -0,0 +1,203 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: #ccdbfd; + font-family: Arial, sans-serif; +} + +html { + height: 100%; + width: 100%; +} + +nav { + background-color: #fefee3; + display: flex; + height: 11vh; + justify-content: space-between; + align-items: center; + box-shadow: 10px 5px 15px 1px grey; + padding: 0 20px; +} + +.logo { + border-radius: 50%; + height: 8vh; + width: 8vh; + margin-top: 0.5vh; +} + +nav img { + height: 8vh; + width: 8vh; + margin-right: 1.5vh; + cursor: pointer; +} + +.containerTasks { + width: 80%; + border-radius: 30px; + max-height: 350px; + max-width: 50rem; + padding: 2rem; + margin: 60px auto 170px; + overflow: hidden; + overflow-y: scroll; + box-shadow: 15px 15px 20px grey; + background-color: #fefee3; +} + +.carteUn { + display: flex; + justify-content: center; +} + +.containerTasks h2 { + display: flex; + justify-content: center; + margin-top: 1vh; + position: absolute; +} + +.newTask { + background-color: transparent; + height: 60px; + width: 100%; + position: fixed; + bottom: 0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); +} + +.folder-selector { + display: flex; + align-items: center; + cursor: pointer; +} + +.folder-selector img { + height: 24px; + margin-right: 10px; +} + +.folder-selector select { + border: none; + background: transparent; + outline: none; + font-size: 14px; +} + +.folder-input { + height: 40px; + width: 100%; + border: none; + outline: none; + background-color: #fefee3; + border-radius: 20px; + padding-left: 20px; + font-size: 16px; +} + +.folder-input::placeholder { + color: #ccc; + transition: color 0.3s; +} + +.folder-input:focus::placeholder { + color: #00bafa; +} + +.clickable-button { + cursor: pointer; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + transition: background-color 0.3s; +} + +.clickable-button:hover { + background-color: #0056b3; +} + +ul li { + list-style: none; + font-size: 20px; + padding: 15px 10px 15px 50px; + user-select: none; + cursor: pointer; + position: relative; +} + +ul li::before { + content: ""; + position: absolute; + height: 30px; + width: 30px; + border-radius: 50%; + background-image: url(ressources/unchecked.png); + background-size: cover; + background-position: center; + top: 15px; + left: 10px; +} + +ul li.checked { + color: gray; + text-decoration: line-through; +} + +ul li.checked::before { + background-image: url(ressources/checked.png); +} + +ul li span { + position: absolute; + right: 0; + top: 5px; + width: 40px; + height: 40px; + font-size: 40px; + color: blue; + line-height: 40px; + text-align: center; + border-radius: 50px; +} + +.radial-menu { + position: absolute; + display: none; + flex-direction: column; + align-items: center; + justify-content: space-around; + width: 120px; + height: 200px; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 50%; + color: white; + z-index: 1; +} + +.radial-menu button { + background: none; + border: none; + color: white; + font-size: 16px; + cursor: pointer; + transition: transform 0.2s; +} + +.radial-menu button:hover { + transform: scale(1.1); +} + +/* Ajoutez ici les styles pour d'autres éléments si nécessaire */ diff --git a/test/checklist/styletest.css b/test/checklist/styletest.css new file mode 100644 index 000000000..d30e95579 --- /dev/null +++ b/test/checklist/styletest.css @@ -0,0 +1,204 @@ +#checklist { + --background: #fff; + --text: #414856; + --check: #4f29f0; + --disabled: #c3c8de; + --width: 100px; + --height: 180px; + --border-radius: 10px; + background: var(--background); + width: var(--width); + height: var(--height); + border-radius: var(--border-radius); + position: relative; + box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); + padding: 30px 85px; + display: grid; + grid-template-columns: 30px auto; + align-items: center; + justify-content: center; + } + + #checklist label { + color: var(--text); + position: relative; + cursor: pointer; + display: grid; + align-items: center; + width: fit-content; + transition: color 0.3s ease; + margin-right: 20px; + } + + #checklist label::before, #checklist label::after { + content: ""; + position: absolute; + } + + #checklist label::before { + height: 2px; + width: 8px; + left: -27px; + background: var(--check); + border-radius: 2px; + transition: background 0.3s ease; + } + + #checklist label:after { + height: 4px; + width: 4px; + top: 8px; + left: -25px; + border-radius: 50%; + } + + #checklist input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + position: relative; + height: 15px; + width: 15px; + outline: none; + border: 0; + margin: 0 15px 0 0; + cursor: pointer; + background: var(--background); + display: grid; + align-items: center; + margin-right: 20px; + } + + #checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after { + content: ""; + position: absolute; + height: 2px; + top: auto; + background: var(--check); + border-radius: 2px; + } + + #checklist input[type="checkbox"]::before { + width: 0px; + right: 60%; + transform-origin: right bottom; + } + + #checklist input[type="checkbox"]::after { + width: 0px; + left: 40%; + transform-origin: left bottom; + } + + #checklist input[type="checkbox"]:checked::before { + animation: check-01 0.4s ease forwards; + } + + #checklist input[type="checkbox"]:checked::after { + animation: check-02 0.4s ease forwards; + } + + #checklist input[type="checkbox"]:checked + label { + color: var(--disabled); + animation: move 0.3s ease 0.1s forwards; + } + + #checklist input[type="checkbox"]:checked + label::before { + background: var(--disabled); + animation: slice 0.4s ease forwards; + } + + #checklist input[type="checkbox"]:checked + label::after { + animation: firework 0.5s ease forwards 0.1s; + } + + @keyframes move { + 50% { + padding-left: 8px; + padding-right: 0px; + } + + 100% { + padding-right: 4px; + } + } + + @keyframes slice { + 60% { + width: 100%; + left: 4px; + } + + 100% { + width: 100%; + left: -2px; + padding-left: 0; + } + } + + @keyframes check-01 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + + 51% { + width: 0px; + top: 8px; + transform: rotate(45deg); + } + + 100% { + width: 5px; + top: 8px; + transform: rotate(45deg); + } + } + + @keyframes check-02 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + + 51% { + width: 0px; + top: 8px; + transform: rotate(-45deg); + } + + 100% { + width: 10px; + top: 8px; + transform: rotate(-45deg); + } + } + + @keyframes firework { + 0% { + opacity: 1; + box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; + } + + 30% { + opacity: 1; + } + + 100% { + opacity: 0; + box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; + } + } \ No newline at end of file diff --git a/test/checklist/test.html b/test/checklist/test.html new file mode 100644 index 000000000..c76ed52b3 --- /dev/null +++ b/test/checklist/test.html @@ -0,0 +1,51 @@ + + + + + + Done Us - ToDo List + + + + +
      + + +
      + +
      +
      +
      +

      Courses

      +
      + +
      +
      + + + + + + +
      +
      +
      + + + + +
      +
      +
      + +
      + + + + \ No newline at end of file diff --git a/test/inputText/index.html b/test/inputText/index.html new file mode 100644 index 000000000..71138af7c --- /dev/null +++ b/test/inputText/index.html @@ -0,0 +1,2 @@ +%form %input{type: "text", required: ""} %label{placeholder: "Adaptive +Placeholder", alt: "Placeholder"}