Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

summary #955

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

summary #955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 115 additions & 46 deletions Projects/Daily_Diary_Entry_Website/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Logging Your Progress</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Log Your Day</h1>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metaverse Daily Diary</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f8f8; /* Off-white background */
color: #333;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
min-height: 100vh;
justify-content: center;
}
.container {
width: 90%;
max-width: 700px;
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #a3a3ff; /* Pastel blue */
font-size: 2.2em;
}
textarea {
width: 100%;
height: 120px;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
margin-bottom: 15px;
font-size: 1em;
resize: none;
outline: none;
background-color: #fffae3; /* Pastel yellow */
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
background-color: #ffb3ba; /* Pastel pink */
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #ff8b94; /* Darker pastel pink */
}
.entries {
margin-top: 20px;
text-align: left;
}
.entry {
background: #e3ffe3; /* Pastel green */
padding: 15px;
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.entry strong {
color: #333;
font-size: 1em;
}
.entry p {
margin: 10px 0 0;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<div class="previousLogs">
<h2>Previous Entries</h2>
<table>
<tbody id="logTableBody">
<!-- Previous logs will be inserted here dynamically -->
</tbody>
</table>
</div>
<form action="/" method="POST">
<label for="logMessage"> New Log:</label>
<textarea
id="logMessage"
name="logMessage"
spellcheck="false"
></textarea>
<button type="submit">Log</button>
</form>
<h1>Metaverse Daily Diary</h1>
<textarea id="entry" placeholder="Write your daily entry here..."></textarea>
<button onclick="addEntry()">Add Entry</button>
<div class="entries" id="entries"></div>
</div>
<script>
// Fetch the previous logs and insert them into the table
fetch("/logs")
.then((response) => response.json())
.then((logs) => {
const logTableBody = document.getElementById("logTableBody");
logs["logs"].forEach((log) => {
const row = document.createElement("tr");
const timestampCell = document.createElement("td");
timestampCell.textContent = log.timestamp;
const messageCell = document.createElement("td");
//replacing \n and \r with <br>
log.text = log.text.replace(/(?:\r\n|\r|\n)/g, "<br>");
messageCell.innerHTML = log.text;
row.appendChild(timestampCell);
row.appendChild(messageCell);
logTableBody.appendChild(row);
window.scrollTo(0, document.body.scrollHeight);
});
});
function addEntry() {
const entryText = document.getElementById('entry').value;
if (entryText.trim() === '') return;

const entry = {
text: entryText,
date: new Date().toLocaleString()
};

let entries = JSON.parse(localStorage.getItem('diaryEntries')) || [];
entries.push(entry);
localStorage.setItem('diaryEntries', JSON.stringify(entries));

document.getElementById('entry').value = '';
loadEntries();
}

function loadEntries() {
const entries = JSON.parse(localStorage.getItem('diaryEntries')) || [];
const entriesDiv = document.getElementById('entries');
entriesDiv.innerHTML = '';

entries.forEach(entry => {
const entryDiv = document.createElement('div');
entryDiv.className = 'entry';
entryDiv.innerHTML = `<strong>${entry.date}</strong><p>${entry.text}</p>`;
entriesDiv.appendChild(entryDiv);
});
}

window.onload = loadEntries;
</script>
</body>
</body>
</html>
129 changes: 0 additions & 129 deletions Projects/Daily_Diary_Entry_Website/public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,200;1,600;1,900&display=swap");
:root {
--accent-clr: rgb(100, 185, 255);
}
::selection {
color: black;
background: rgb(173, 218, 255);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
accent-color: var(--accent-clr);
}
html,
body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
max-width: 100vw;
font-family: Poppins, sans-serif;
background: rgb(243, 243, 243);
color: rgb(24, 25, 26);
position: relative;
}
html {
overflow-x: hidden;
}
a {
color: rgb(0, 140, 255);
}
kbd {
display: inline-block;
background-color: rgba(0, 140, 255, 0.151);
color: black;
border-radius: 10em;
padding: 2px 1em;
font-size: 0.9em;
cursor: pointer;
color: rgba(0, 67, 122, 0.699);
}
h1 {
width: 100%;
text-align: center;
padding: 10px;
color: rgb(0, 140, 255);
background-color: rgb(243, 243, 243);
}
.container {
max-width: 700px;
padding-bottom: 30px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.previousLogs {
min-height: 300px;
padding: 20px;
}
form {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 20px 40px;
background-color: rgba(255, 255, 255, 0.541);
}
textarea {
padding: 10px;
outline: none;
border: none;
width: 100%;
display: block;
box-shadow: 0 0 2px rgb(221, 221, 221);
height: 200px;
color: black;
font-size: 1.4em;
}
form label[for="logMessage"] {
width: 100%;
font-weight: 500;
}
form button {
padding: 10px 30px;
margin: 10px;
outline: none;
border: none;
font-weight: 700;
background: var(--accent-clr);
cursor: pointer;
transition: box-shadow 0.5s;
}
form button:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.39);
}
tr {
position: relative;
background: white;
margin: 20px;
min-width: calc(700px - 80px);
display: block;
padding: 3em;
}
td:nth-child(2) {
font-size: 1.2em;
}
td:nth-child(1) {
position: absolute;
top: 6px;
left: 0;
font-size: 14px;
font-family: "Poppins";
letter-spacing: 0.4ch;
color: var(--accent-clr);
font-weight: 300;
background: rgba(100, 185, 255, 0.1);
padding: 0 20px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
blockquote {
padding: 10px;
background-color: rgb(115 192 255 / 12%);
border-left: 10px solid rgb(115 192 255);
padding-left: 25px;
font-size: 0.8em;
font-weight: 400;
}