Update Index.html

Index.html

@@ -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',