Update Index.html
This commit is contained in:
maxi committed
1 parent
2f6156e6d9
commit
607344fad9
1 file changed
+282
-1
+282
-1
@@ -233,6 +233,180 @@
|
||||
.lightbox-close:hover {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.now-playing-cover {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #1a1a1a;
|
||||
border: 2px solid #000000;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.now-playing-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.now-playing-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.now-playing-artist {
|
||||
font-size: 11px;
|
||||
color: #cccccc;
|
||||
margin-bottom: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.now-playing-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.now-playing-progress-bar {
|
||||
height: 100%;
|
||||
background-color: #1db954;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.now-playing-time {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.now-playing-link {
|
||||
font-size: 11px;
|
||||
color: #1db954;
|
||||
text-decoration: underline;
|
||||
margin-top: 8px;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.now-playing-link:hover {
|
||||
color: #1ed760;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
background-color: rgba(20, 20, 20, 0.9);
|
||||
border: 1px solid #444;
|
||||
color: #ffffff;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.comment-input:focus {
|
||||
outline: none;
|
||||
border-color: #66c0f4;
|
||||
}
|
||||
|
||||
.comment-submit {
|
||||
background-color: #66c0f4;
|
||||
color: #000000;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.comment-submit:hover {
|
||||
background-color: #4a9fdd;
|
||||
}
|
||||
|
||||
.comments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background-color: rgba(30, 30, 30, 0.8);
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.comment-username {
|
||||
font-weight: bold;
|
||||
color: #66c0f4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.comment-delete {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ff4444;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.comment:hover .comment-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.comment-delete:hover {
|
||||
color: #ff6666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -278,6 +452,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-header">fav song rn / best part</div>
|
||||
<div class="box-body" style="padding-bottom: 15px;">
|
||||
<div class="now-playing">
|
||||
<div class="now-playing-cover" style="background-image: url('cover.png');"></div>
|
||||
<div class="now-playing-info">
|
||||
<div class="now-playing-title">Death Cup</div>
|
||||
<div class="now-playing-artist">Mom Jeans.</div>
|
||||
<div class="now-playing-progress">
|
||||
<div class="now-playing-progress-bar" style="width: 50%"></div>
|
||||
</div>
|
||||
<div class="now-playing-time">02:24 / 04:36</div>
|
||||
<a href="https://open.spotify.com/track/19aUuDd6udp1ACNo9t3IuZ?si=d59c65a535524cef" target="_blank" class="now-playing-link">Song</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right-col">
|
||||
@@ -350,11 +542,23 @@
|
||||
<div class="box-header">things i like</div>
|
||||
<div class="box-body">
|
||||
<div style="font-size: 16px; font-weight: bold;">
|
||||
music, art, animal´s.
|
||||
music, art, animals.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-header">comments</div>
|
||||
<div class="box-body">
|
||||
<div class="comment-form">
|
||||
<input type="text" id="commentUsername" class="comment-input" placeholder="Username" maxlength="20">
|
||||
<textarea id="commentText" class="comment-input" placeholder="Write a comment..." rows="3" maxlength="500"></textarea>
|
||||
<button onclick="addComment()" class="comment-submit">Post Comment</button>
|
||||
</div>
|
||||
<div class="comments-list" id="commentsList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -374,6 +578,83 @@
|
||||
document.getElementById('lightboxModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function addComment() {
|
||||
const username = document.getElementById('commentUsername').value.trim();
|
||||
const text = document.getElementById('commentText').value.trim();
|
||||
|
||||
if (!username || !text) {
|
||||
alert('Please enter both username and comment');
|
||||
return;
|
||||
}
|
||||
|
||||
const comments = JSON.parse(localStorage.getItem('comments') || '[]');
|
||||
const newComment = {
|
||||
id: Date.now(),
|
||||
username: username,
|
||||
text: text,
|
||||
timestamp: new Date().toISOString(),
|
||||
userId: localStorage.getItem('commentUserId') || Date.now().toString()
|
||||
};
|
||||
|
||||
localStorage.setItem('commentUserId', newComment.userId);
|
||||
comments.push(newComment);
|
||||
localStorage.setItem('comments', JSON.stringify(comments));
|
||||
|
||||
document.getElementById('commentUsername').value = '';
|
||||
document.getElementById('commentText').value = '';
|
||||
|
||||
renderComments();
|
||||
}
|
||||
|
||||
function deleteComment(commentId) {
|
||||
const comments = JSON.parse(localStorage.getItem('comments') || '[]');
|
||||
const comment = comments.find(c => c.id === commentId);
|
||||
|
||||
if (comment && comment.userId === localStorage.getItem('commentUserId')) {
|
||||
const updatedComments = comments.filter(c => c.id !== commentId);
|
||||
localStorage.setItem('comments', JSON.stringify(updatedComments));
|
||||
renderComments();
|
||||
} else {
|
||||
alert('You can only delete your own comments');
|
||||
}
|
||||
}
|
||||
|
||||
function renderComments() {
|
||||
const comments = JSON.parse(localStorage.getItem('comments') || '[]');
|
||||
const commentsList = document.getElementById('commentsList');
|
||||
commentsList.innerHTML = '';
|
||||
|
||||
comments.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)).forEach(comment => {
|
||||
const commentDiv = document.createElement('div');
|
||||
commentDiv.className = 'comment';
|
||||
|
||||
const date = new Date(comment.timestamp);
|
||||
const timeString = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
|
||||
const canDelete = comment.userId === localStorage.getItem('commentUserId');
|
||||
const deleteButton = canDelete ? `<button class="comment-delete" onclick="deleteComment(${comment.id})">Delete</button>` : '';
|
||||
|
||||
commentDiv.innerHTML = `
|
||||
<div class="comment-header">
|
||||
<span class="comment-username">${escapeHtml(comment.username)}</span>
|
||||
<span class="comment-time">${timeString}</span>
|
||||
</div>
|
||||
<div class="comment-text">${escapeHtml(comment.text)}</div>
|
||||
${deleteButton}
|
||||
`;
|
||||
|
||||
commentsList.appendChild(commentDiv);
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
renderComments();
|
||||
|
||||
const petImages = {
|
||||
fiene: [
|
||||
'fiene1.png',
|
||||
|
||||
Reference in new issue
Block a user