💄fix clone ui to fit myapp

clone/Dockerfile

@@ -4,6 +4,7 @@ RUN npm install express
 RUN npm install body-parser
 RUN npm install cookie-parser
 ADD myapp.js /usr/app/myapp.js
+ADD files/script.js /usr/app/files/script.js
 USER nobody
 EXPOSE 2000
 CMD [ "node", "myapp.js" ]

clone/files/script.js

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const welcomeText = document.querySelector('.full-width');
+
+    welcomeText.addEventListener('mouseover', function(event) {
+      const target = event.target;
+      if (target.classList.contains('letter')) {
+        target.style.color = 'red'; // Change the color of the letter hovered over
+      } else {
+        welcomeText.style.color = 'red'; // Change the color of the whole text
+      }
+    });
+
+    welcomeText.addEventListener('mouseout', function(event) {
+      const target = event.target;
+      if (target.classList.contains('letter')) {
+        target.style.color = ''; // Reset the color of the letter
+      } else {
+        welcomeText.style.color = ''; // Reset the color of the whole text
+      }
+    });
+  });
+

clone/myapp.js

@@ -18,8 +18,11 @@ app.use((req, res, next) => {
 })
 
 const homepage=`
-<div class="full-width">CLONE</div>
+<div class="full-width">
+  ${'CLONE'.split('').map(letter => `<span class="letter">${letter}</span>`).join('')}
+</div>
 <div align="center"><button type="button" onclick="window.location.href='/login'">Login</button></div>
+<script src="/script.js"></script>
 `
 
 const css = `