diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..abd38df
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/coders-editpage.css b/coders-editpage.css
new file mode 100644
index 0000000..19e2610
--- /dev/null
+++ b/coders-editpage.css
@@ -0,0 +1,397 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+@media screen and (max-width:760px) {
+ body{
+ height: 100vh;
+ width: 100vw;
+ background-color: #78C7E6;
+ font-family: 'Open Sans', sans-serif;
+ background-image: url('images/background-mobile.png');
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: cover;
+ z-index: 1;
+ }
+ .container-center{
+ width:100vw;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ z-index: 1;
+ }
+ .container-header{
+ display: inline-flex;
+ width: 100vw;
+ justify-content: space-between;
+ z-index: 1;
+ }
+ .logo{
+ display: flex;
+ width: 40vw;
+ margin-left: 1.5rem;
+ z-index: 2;
+ }
+ #edit--btn{
+ margin-top: 4.5vh;
+ margin-right: 2rem;
+ width: 20vw;
+ height: 6vh;
+ background-color: #003C8D;
+ border-radius: 0.2rem;
+ border-style: none;
+ box-sizing: border-box;
+ color: white;
+ cursor: pointer;
+ list-style: none;
+ outline: none;
+ font-family: 'Open Sans';
+ font-size: 1.5rem;
+ font-style: normal;
+ font-weight: 800;
+ z-index: 2;
+ }
+ .name--container{
+ display: flex;
+ justify-content: center;
+ border-radius: 1rem;
+ background: #FFF;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
+ padding: 1rem;
+ margin-top: 3rem;
+ width: 20rem;
+ transform: translate(6%, 0%);
+ }
+ #newName {
+ display: inline-block;
+ color: #000;
+ background: #EEE;
+ border-radius: 0.9rem;
+ font-family: 'Open Sans';
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ list-style: none;
+ outline: none;
+ margin-right: 1rem;
+ padding: 1rem;
+ width: 14rem;
+ }
+ #add--btn{
+ display: inline-block;
+ border-radius: 0.9rem;
+ background: #66B511;
+ color: #FFF;
+ font-family: 'Open Sans';
+ font-size: 1.2rem;
+ font-style: normal;
+ font-weight: 800;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ cursor: pointer;
+ list-style: none;
+ outline: none;
+ padding: 0.5rem;
+ }
+ #namesList{
+ border-radius: 1rem;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
+ margin-top: 2rem;
+ width: 20rem;
+ height: 5.5rem;
+ transform: translate(6%, 0%);
+ }
+ ul{
+ overflow:scroll;
+ }
+ li{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #000;
+ background: #fff;
+ border-radius: 0.9rem;
+ font-family: 'Open Sans';
+ font-size: 1.2rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ list-style: none;
+ width: 20rem;
+ height: 5.5rem;
+ padding: 0.8rem 2rem 0.8rem 2rem;
+ margin-bottom: 1rem;
+ gap: 3rem;
+ }
+ #editName--btn, #deleteName--btn{
+ border-radius: 0.9rem;
+ background: #eee;
+ width: 3rem;
+ height: 3rem;
+ padding: 0.5rem;
+ }
+ #deleteName--btn{
+ margin-left: -2.7rem;
+ }
+ #deleteAll--btn{
+ border-radius: 0.9rem;
+ background: #BC2024;
+ color: #FFF;
+ font-family: 'Open Sans';
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 800;
+ text-align: center;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ color: white;
+ cursor: pointer;
+ list-style: none;
+ outline: none;
+ padding: 1rem;
+ margin-top: 2rem;
+ width: 20rem;
+ transform: translate(6%, 0%);
+ }
+
+ .hero5-container{
+ position: relative;
+ display: flex;
+ justify-content: end;
+ margin-right: 4rem;
+ z-index: 3;
+ margin-top: 1.5rem;
+ }
+ #hero-manage{
+ position: absolute;
+ width: 7rem;
+ flex-shrink: 0;
+ margin-top: 2.4rem;
+ margin-right: 6rem;
+ }
+ #bubble-manage{
+ position: absolute;
+ width: 8rem;
+ transform: rotate(30deg);
+ margin-top: 1rem;
+ }
+}
+
+@media screen and (min-width:759px) {
+ body{
+ width: 100vw;
+ margin: 0;
+ padding: 0;
+ font-family: 'Open Sans', sans-serif;
+ background-image: url('images/background-desktop.png');
+ background-repeat: no-repeat;
+ background-size: cover;
+ z-index: 1;
+ }
+ .container-center{
+ height: 100vh;
+ width: 100vw;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ z-index: 1;
+ }
+ .container-header{
+ display: inline-flex;
+ width: 100vw;
+ justify-content: space-between;
+ z-index: 1;
+ }
+ .logo{
+ display: flex;
+ width: 20vw;
+ margin-left: 6rem;
+ z-index: 2;
+ }
+ #edit--btn{
+ margin-top: 3rem;
+ margin-right: 5.3rem;
+ width: 12vw;
+ height: 6vh;
+ background-color: #003C8D;
+ border-radius: 0.2rem;
+ border-style: none;
+ box-sizing: border-box;
+ color: white;
+ font-family: 'Open Sans';
+ font-size: 2rem;
+ font-style: normal;
+ font-weight: 800;
+ outline: none;
+ z-index: 2;
+ }
+ .name--container{
+ display: inline-flex;
+ justify-content: center;
+ border-radius: 1rem;
+ background: #FFF;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
+ padding: 1.5rem;
+ width: 30rem;
+ height: 7rem;
+ transform: translate(100%, 0%);
+ margin-top: 1rem;
+ }
+ #newName {
+ display: inline-block;
+ color: #000;
+ background: #EEE;
+ border-radius: 0.9rem;
+ font-family: 'Open Sans';
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ list-style: none;
+ outline: none;
+ width: 18rem;
+ height: 4rem;
+ margin-right: 1rem;
+ padding: 1rem;
+ }
+ #add--btn{
+ display: inline-block;
+ border-radius: 0.9rem;
+ background: #66B511;
+ color: #FFF;
+ font-family: 'Open Sans';
+ font-size: 2rem;
+ font-style: normal;
+ font-weight: 800;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ cursor: pointer;
+ list-style: none;
+ outline: none;
+ width: 8rem;
+ height: 4rem;
+ padding: 0.5rem;
+ }
+ #namesList{
+ justify-content: center;
+ border-radius: 1rem;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
+ width: 30rem;
+ height: 7rem;
+ transform: translate(100%, 0%);
+ margin-top: 2rem;
+ }
+ li{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #000;
+ background: #FFF;
+ border-radius: 0.9rem;
+ font-family: 'Open Sans';
+ font-size: 1.2rem;
+ font-style: normal;
+ font-weight: 700;
+ border-style: none;
+ box-sizing: border-box;
+ list-style: none;
+ outline: none;
+ width: 30rem;
+ height: 7rem;
+ padding: 1rem 3rem;
+ margin-bottom: 1rem;
+ }
+ ul{
+ overflow:scroll;
+ }
+ #editName--btn, #deleteName--btn{
+ border-radius: 0.9rem;
+ background: #EEE;
+ width: 4rem;
+ height: 4rem;
+ padding: 1rem;
+ }
+ #deleteName--btn{
+ margin-left: -6rem;
+ }
+ #deleteAll--btn{
+ border-radius: 0.9rem;
+ background: #BC2024;
+ color: #FFF;
+ font-family: 'Open Sans';
+ font-size: 2rem;
+ font-style: normal;
+ font-weight: 800;
+ text-align: center;
+ line-height: normal;
+ border-style: none;
+ box-sizing: border-box;
+ color: white;
+ cursor: pointer;
+ outline: none;
+ width: 30rem;
+ height: 5rem;
+ padding: 1rem;
+ transform: translate(100%, 0%);
+ margin-top: 2rem;
+ }
+
+ .hero5-container{
+ position: relative;
+ display: flex;
+ justify-content: end;
+ margin-right: 4rem;
+ z-index: 3;
+ margin-top: -0.6rem;
+ }
+ #hero-manage{
+ position: absolute;
+ width: 13rem;
+ flex-shrink: 0;
+ margin-right: 8rem;
+ animation: slideInRight 1s 1 linear;
+ }
+ #bubble-manage{
+ position: absolute;
+ width: 12rem;
+ margin-right: 4rem;
+ margin-top: -7rem;
+ animation: popOut 3s 1;
+ }
+}
+
+@keyframes slideInRight {
+ 0% {
+ transform: translate(20%, 0);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
+
+@keyframes popOut {
+ 0% {
+ transform: scale(0, 0);
+ }
+ 50% {
+ transform: scale(0, 0);
+ }
+ 75% {
+ transform: scale(1.2, 1.2);
+ }
+ 100% {
+ transform: scale(1, 1);
+ }
+}
\ No newline at end of file
diff --git a/coders-editpage.html b/coders-editpage.html
new file mode 100644
index 0000000..91f5898
--- /dev/null
+++ b/coders-editpage.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Random Supercoder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ list.appendChild(li);
+ }
+};
+
+function editName(index){
+ let namePrompt = prompt("Edita el nombre del superCoder", superCoders[index]);
+ superCoders[index] = namePrompt
+ showNames();
+}
+
+function removeName(index) {
+ Swal.fire({
+ title: 'Are you sure?',
+ text: "You won't be able to revert this!",
+ icon: 'warning',
+ showCancelButton: true,
+ confirmButtonColor: '#3085d6',
+ cancelButtonColor: '#d33',
+ confirmButtonText: 'Yes, delete it!',
+ backdrop:`
+ rgba(0,0,123,0.4)
+ url("images/spiderman-deadpool.gif")
+ left-start
+ no-repeat
+ `
+ }).then((result) => {
+ if (result.isConfirmed) {
+ superCoders.splice(index,1)
+ showNames()
+ Swal.fire({
+ title: 'Deleted!',
+ text: 'Your file has been deleted.',
+ icon: 'success',
+ })
+ }
+ })
+}
+
+function reset(){
+ location.reload()
+}
+
+showNames()
+
+
+function deleteAll() {
+ superCoders.length = 0;
+ showNames();
+}
+
+
+document.getElementById("deleteAll--btn").addEventListener("click", deleteAll);
+
+
+
+//Animación de heroes
+let firstHero = document.getElementByClass("hero1-container");
+let opacity = 0;
+
+let fadeInFirstHero = setInterval(() => {
+ if (opacity >= 1) {
+ clearInterval(fadeInFirstHero);
+ }
+ firstHero.style.opacity = opacity;
+ opacity += 0.01;
+}, 5);
+
+function alertMsj(){
+ Swal.fire({
+ position: 'center',
+ icon: 'success',
+ title: 'Your work has been saved',
+ showConfirmButton: false,
+ timer: 2000,
+ backdrop: `
+ rgba(120, 199, 230, 0.4)
+ url("images/spiderman-deadpool.gif")
+ left-start
+ no-repeat
+ `
+ })
+}
+
+