tokslaw/FullStack_with_PrismaDB
1
0
Fork 0
Code Issues Pull Requests Releases Activity

styles added

Browse Source
This commit is contained in:
tokslaw7
2025-06-22 20:19:12 -04:00
parent 0c63ce94c4
commit 73b396344e
4 changed files with 112 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+5 -3
View File
@@ -2,12 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Intro_to_Prisma</title>
</head> </head>
<body> <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> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
frontend/public/assets/images/tokslaw_logo_main.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

frontend/src/main.js
+25 -14
View File
@@ -1,3 +1,6 @@
import './styles.css';
const dataContainer = document.getElementById('app'); const dataContainer = document.getElementById('app');
async function fetchAndDisplayData() { async function fetchAndDisplayData() {
@@ -19,21 +22,24 @@ async function fetchAndDisplayData() {
// Create HTML for the data // Create HTML for the data
const html = ` const html = `
<ul> <ul class="item-list">
${data.map(item => ` ${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> <h2>${item.name}</h2>
<strong>Role:</strong> ${item.role}<br> <p><strong>Role:</strong> ${item.role}</p>
<strong>Email:</strong> ${item.email}<br> <p><strong>Email:</strong> ${item.email}</p>
<strong>Username:</strong> ${item.username}<br> <p><strong>Username:</strong> ${item.username}</p>
<strong>UUID:</strong> ${item.userId}<br> <p><strong>UUID:</strong> ${item.userId}</p>
<strong>Avatar:</strong>${item.avatar}<br> <p><strong>Initial Password:</strong> ${item.password}</p>
<strong>Initial Password:</strong> ${item.password}<br> <p><strong>Birthdate:</strong> ${new Date(item.birthdate).toDateString()}</p>
<strong>Birthdate:</strong> ${new Date(item.birthdate).toDateString()}<br> <p><strong>Registered:</strong> ${new Date(item.registeredAt).toDateString()}</p>
<strong>Registered:</strong> ${new Date(item.registeredAt).toDateString()}<br> <p><strong>Created On:</strong> ${new Date(item.createdAt).toDateString()}</p>
<strong>Created On:</strong> ${new Date(item.createdAt).toDateString()}<br> <p><strong>Updated On:</strong> ${new Date(item.updatedAt).toDateString()}</p>
<strong>Updated On:</strong> ${new Date(item.updatedAt).toDateString()}<br> <p><strong>Profile Bio:</strong> ${item.profile?.bio || 'N/A'}</p><br>
<strong>Profile Bio:</strong> ${item.profile?.bio || 'N/A'}<br><br>
<ul> <ul>
</ul> </ul>
</li> </li>
@@ -49,4 +55,9 @@ async function fetchAndDisplayData() {
} }
// Fetch and display data when the page loads // Fetch and display data when the page loads
document.addEventListener('DOMContentLoaded', fetchAndDisplayData); document.addEventListener('DOMContentLoaded', fetchAndDisplayData);
//change theme
document.getElementById('toggle').addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
frontend/src/styles.css
+82
View File
@@ -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;
}