styles added

2025-06-22 20:19:12 -04:00
parent 0c63ce94c4
commit 73b396344e
4 changed files with 112 additions and 17 deletions
@@ -2,12 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="https://fav.farm/📂"  />
+    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Intro_to_Prisma</title>
  </head>
  <body>
-    <div id="app"></div>
+    <button id="toggle">Dark Theme</button>
+    <div id="app" class="container"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
@@ -1,3 +1,6 @@
+import './styles.css';
+
+
 const dataContainer = document.getElementById('app');

 async function fetchAndDisplayData() {
@@ -19,21 +22,24 @@ async function fetchAndDisplayData() {

    // Create HTML for the data
    const html = `
-        <ul>
+        <ul class="item-list">
            ${data.map(item => `
-        <li>
+        <li class="item-card">
+            <div class="avatar-container">
+               <strong>Avatar</strong><img src="${item.avatar}" alt="Avatar of ${item.name}" class="avatar">
+               <div class="avatar-name">${item.username}</div>
+            </div>
            <h2>${item.name}</h2>
-            <strong>Role:</strong> ${item.role}<br>
-            <strong>Email:</strong> ${item.email}<br>
-            <strong>Username:</strong> ${item.username}<br>
-            <strong>UUID:</strong> ${item.userId}<br>
-            <strong>Avatar:</strong>${item.avatar}<br>
-            <strong>Initial Password:</strong> ${item.password}<br>
-            <strong>Birthdate:</strong> ${new Date(item.birthdate).toDateString()}<br>
-            <strong>Registered:</strong> ${new Date(item.registeredAt).toDateString()}<br>
-            <strong>Created On:</strong> ${new Date(item.createdAt).toDateString()}<br>
-            <strong>Updated On:</strong> ${new Date(item.updatedAt).toDateString()}<br> 
-            <strong>Profile Bio:</strong> ${item.profile?.bio || 'N/A'}<br><br>
+            <p><strong>Role:</strong> ${item.role}</p>
+            <p><strong>Email:</strong> ${item.email}</p>
+            <p><strong>Username:</strong> ${item.username}</p>
+            <p><strong>UUID:</strong> ${item.userId}</p>
+            <p><strong>Initial Password:</strong> ${item.password}</p>
+            <p><strong>Birthdate:</strong> ${new Date(item.birthdate).toDateString()}</p>
+            <p><strong>Registered:</strong> ${new Date(item.registeredAt).toDateString()}</p>
+            <p><strong>Created On:</strong> ${new Date(item.createdAt).toDateString()}</p>
+            <p><strong>Updated On:</strong> ${new Date(item.updatedAt).toDateString()}</p> 
+            <p><strong>Profile Bio:</strong> ${item.profile?.bio || 'N/A'}</p><br>
            <ul>
            </ul>
        </li>
@@ -50,3 +56,8 @@ async function fetchAndDisplayData() {

 // Fetch and display data when the page loads
 document.addEventListener('DOMContentLoaded', fetchAndDisplayData);
+
+//change theme
+ document.getElementById('toggle').addEventListener('click', () => {
+      document.body.classList.toggle('dark-mode');
+    });
@@ -0,0 +1,82 @@
+body {
+  font-family: Fredoka, sans-serif;
+  background-color: #ffffff;
+  color: #333;
+  margin: 0;
+  padding: 20px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+  max-width: 900px;
+  margin: auto;
+}
+
+.item-list {
+  list-style: none;
+  padding: 0;
+}
+.item-card {
+  position: relative;
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  padding: 20px;
+  padding-top: 40px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  /* transition: background-color 0.3s ease; */
+}
+.item-card h2 {
+  margin-top: 0;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-top: 5px;
+  border: 2px solid #ccc;
+  background-color: #fff;
+  display: block;
+  margin: 0 auto;
+}
+
+.avatar-container {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  text-align: center;
+}
+
+body.dark-mode {
+  background-color: #1f1f1f;
+  color: #f4f4f4;
+}
+
+body.dark-mode .item-card {
+  background-color: #2a2a2a;
+}
+
+body.dark-mode a,
+body.dark-mode p,
+body.dark-mode h2 {
+  color: #ccc;
+}
+
+button#toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background-color: #ff0095;
+  color: white;
+  border: none;
+  padding: 10px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button#toggle:hover {
+  background-color: #6d0246;
+}