admin/35036-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ea

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-18 06:18:18 +00:00
parent c4afa542ce
commit 5ac9dfcbf0
4 changed files with 623 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app.php Normal file
View File

@ -0,0 +1,64 @@
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: index.php');
exit;
}
$page_title = "My Notes";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($page_title); ?> - YourApp</title>
<link rel="stylesheet" href="assets/css/glass-theme.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<div class="sidebar">
<div class="logo">
AI-App
</div>
<ul class="nav-menu">
<li class="nav-item active">
<a href="app.php"><i class="fas fa-sticky-note"></i> Notes</a>
</li>
<li class="nav-item">
<a href="settings.php"><i class="fas fa-cog"></i> Settings</a>
</li>
</ul>
<div class="logout-link">
<a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
<!-- Main Content -->
<main class="main-content">
<h1><?php echo htmlspecialchars($page_title); ?></h1>
<!-- Notes Grid -->
<div id="notes-grid" class="notes-grid">
<!-- Notes will be loaded here by JavaScript -->
</div>
</main>
</div>
<!-- Note Editor Modal -->
<div id="note-editor-modal">
<div class="note-editor-panel glass-panel">
<textarea id="note-editor-textarea" placeholder="Start typing..."></textarea>
<div class="note-editor-footer">
<button id="save-note-btn" class="btn btn-primary">Save</button>
<input type="hidden" id="note-editor-id">
</div>
</div>
</div>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>

240
assets/css/glass-theme.css Normal file
View File

@ -0,0 +1,240 @@
/* assets/css/glass-theme.css */
/* --- Core Theme & Animated Background --- */
:root {
--primary-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--title-font: 'Lexend Deca', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--text-color: #f0f0f0;
--text-muted: #a0a0a0;
--accent-color: #8a2be2; /* Dark Orchid Purple */
--accent-hover: #9932cc; /* Medium Orchid */
--background-start: #000000;
--background-mid: #050510;
--background-end: #100510;
--glass-bg: rgba(10, 5, 20, 0.45);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: rgba(0, 0, 0, 0.5);
--glass-blur: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Lexend+Deca&display=swap');
/* --- Animations --- */
@keyframes blue-purple-glow {
0% {
box-shadow: 0 0 20px 3px rgba(0, 100, 255, 0.4), 0 0 30px 8px rgba(75, 0, 130, 0.3);
}
50% {
box-shadow: 0 0 25px 5px rgba(75, 0, 130, 0.4), 0 0 35px 10px rgba(0, 100, 255, 0.3);
}
100% {
box-shadow: 0 0 20px 3px rgba(0, 100, 255, 0.4), 0 0 30px 8px rgba(75, 0, 130, 0.3);
}
}
@keyframes float-effect {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
body {
font-family: var(--primary-font);
background: linear-gradient(-45deg, var(--background-start), var(--background-mid), var(--background-end));
background-size: 400% 400%;
animation: gradientBG 20s ease infinite;
color: var(--text-color);
margin: 0;
padding: 2rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* --- Main App Container --- */
.app-container {
width: 100%;
max-width: 1200px;
height: 90vh;
display: flex;
background: rgba(0,0,0,0.2);
border-radius: 30px; /* More rounded */
overflow: hidden;
border: 1px solid var(--glass-border);
box-shadow: 0 15px 35px var(--glass-shadow);
}
/* --- Sidebar Navigation --- */
.sidebar {
width: 240px;
background: rgba(0,0,0,0.15);
padding: 2rem 0;
flex-shrink: 0;
border-right: 1px solid var(--glass-border);
}
.sidebar .logo {
text-align: center;
font-family: var(--title-font);
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 3rem;
padding: 0 1rem;
text-shadow: 0 0 12px var(--accent-hover);
}
.sidebar .nav-menu { list-style: none; padding: 0; margin: 0; }
.sidebar .nav-menu .nav-item a {
display: block; padding: 1rem 2rem; color: var(--text-muted);
text-decoration: none; font-weight: 500; font-size: 1rem;
position: relative; transition: color 0.3s ease, background 0.3s ease;
}
.sidebar .nav-menu .nav-item a:hover { color: #fff; background: rgba(138, 43, 226, 0.15); }
.sidebar .nav-menu .nav-item.active a { color: #fff; font-weight: 700; }
.sidebar .nav-menu .nav-item.active a::before {
content: ''; position: absolute; left: 0; top: 0; height: 100%;
width: 4px; background: var(--accent-color); border-radius: 0 4px 4px 0;
box-shadow: 0 0 8px var(--accent-color);
}
.sidebar .logout-link { position: absolute; bottom: 2rem; width: 240px; text-align: center; }
.sidebar .logout-link a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
.sidebar .logout-link a:hover { color: #fff; }
/* --- Main Content Area --- */
.main-content { flex-grow: 1; padding: 3rem; overflow-y: auto; }
.main-content h1 {
font-family: var(--title-font); font-size: 2.5rem; color: #fff;
margin-bottom: 2rem; text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
/* --- Glass Panel Style (with Blue/Purple Glow) --- */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 25px; /* More rounded */
padding: 2.5rem;
animation: blue-purple-glow 10s linear infinite;
}
/* --- Form Elements --- */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-weight: 500; }
.form-control {
width: 100%; padding: 1rem 1.2rem; background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--glass-border); border-radius: 15px; /* More rounded */
color: var(--text-color);
font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
outline: none; border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.3);
}
.form-control:disabled { background: rgba(0, 0, 0, 0.5); cursor: not-allowed; }
/* --- Buttons (with Float and Glow) --- */
.btn {
padding: 1rem 2rem; border: 1px solid transparent; border-radius: 50px; /* Pill shape */
font-size: 1rem; font-weight: 700; cursor: pointer;
transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 1px;
position: relative; overflow: hidden;
animation: float-effect 6s ease-in-out infinite;
}
.btn-primary {
background-color: var(--accent-color); color: #fff;
border-color: var(--accent-hover);
animation: blue-purple-glow 8s linear infinite alternate, float-effect 6s ease-in-out infinite;
}
.btn-primary:hover {
background-color: var(--accent-hover);
transform: translateY(-2px) scale(1.05); /* Keep hover effect, float is separate */
box-shadow: 0 8px 25px rgba(153, 50, 204, 0.6);
}
/* --- Notes Grid --- */
.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem; margin-top: 2rem;
}
.note-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 25px; /* More rounded */
padding: 1.5rem;
transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
position: relative; overflow: hidden;
animation: blue-purple-glow 12s linear infinite;
}
.note-card:hover {
transform: translateY(-10px) scale(1.03);
background: rgba(20, 10, 30, 0.7);
animation-play-state: paused; /* Pause the glow to show a specific hover shadow */
box-shadow: 0 10px 40px rgba(138, 43, 226, 0.5);
}
.note-card-content { color: var(--text-color); margin-bottom: 1rem; max-height: 150px; overflow: hidden; text-overflow: ellipsis; }
.note-card-content a { color: var(--accent-hover); text-decoration: none; font-weight: 600; }
.note-card-content a:hover { text-decoration: underline; }
.note-card-footer { display: flex; justify-content: space-between; align-items: center; }
.note-card-date { font-size: 0.8rem; color: var(--text-muted); }
.delete-note-btn {
background: none; border: none; color: var(--text-muted);
font-size: 1.2rem; cursor: pointer; transition: color 0.3s ease; padding: 5px;
}
.delete-note-btn:hover { color: #ff4757; }
/* Add Note Button */
.add-note-card {
display: flex; align-items: center; justify-content: center; flex-direction: column;
min-height: 200px; cursor: pointer; border-style: dashed; border-width: 2px;
border-radius: 25px; /* More rounded */
background: rgba(255, 255, 255, 0.02);
animation: blue-purple-glow 15s linear infinite reverse;
}
.add-note-card:hover {
background: rgba(138, 43, 226, 0.1);
border-color: var(--accent-hover);
}
.add-note-icon { font-size: 3rem; color: var(--text-muted); transition: color 0.3s ease; }
.add-note-card:hover .add-note-icon { color: var(--accent-hover); }
.add-note-text { margin-top: 1rem; font-weight: 500; color: var(--text-muted); transition: color 0.3s ease; }
.add-note-card:hover .add-note-text { color: var(--accent-hover); }
/* Note Editor Modal */
#note-editor-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7); display: none; /* Hidden by default */
align-items: center; justify-content: center; z-index: 1000;
backdrop-filter: blur(10px);
}
#note-editor-modal.show { display: flex; }
.note-editor-panel {
width: 90%; max-width: 700px; height: 70vh;
display: flex; flex-direction: column;
animation: blue-purple-glow 9s linear infinite;
border-radius: 25px; /* More rounded */
}
#note-editor-textarea {
flex-grow: 1; background: rgba(0,0,0,0.5);
border: 1px solid var(--glass-border); color: var(--text-color);
padding: 1.5rem; font-size: 1.1rem; line-height: 1.6;
resize: none; border-radius: 25px 25px 0 0;
}
#note-editor-textarea:focus { outline: none; border-color: var(--accent-color); }
.note-editor-footer {
display: flex; justify-content: flex-end; padding: 1rem;
background: var(--glass-bg); border-top: 1px solid var(--glass-border);
border-radius: 0 0 25px 25px;
}

176
assets/js/main.js Normal file
View File

@ -0,0 +1,176 @@
/* assets/js/main.js */
document.addEventListener('DOMContentLoaded', () => {
const notesGrid = document.getElementById('notes-grid');
const modal = document.getElementById('note-editor-modal');
const editorTextarea = document.getElementById('note-editor-textarea');
const saveNoteBtn = document.getElementById('save-note-btn');
const noteIdInput = document.getElementById('note-editor-id');
// --- Main Functions ---
const fetchAndRenderNotes = async () => {
try {
const response = await fetch('api/notes.php');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const notes = await response.json();
renderNotes(notes);
} catch (error) {
console.error("Error fetching notes:", error);
notesGrid.innerHTML = '<p style="color: var(--text-muted);">Could not load notes. Please try again later.</p>';
}
};
const renderNotes = (notes) => {
notesGrid.innerHTML = ''; // Clear existing notes
// 1. Add "New Note" Card
const addCard = createAddNoteCard();
notesGrid.appendChild(addCard);
// 2. Add Note Cards
if (Array.isArray(notes)) {
notes.forEach(note => {
const noteCard = createNoteCard(note);
notesGrid.appendChild(noteCard);
});
}
};
// --- UI Element Creation ---
const createAddNoteCard = () => {
const card = document.createElement('div');
card.className = 'note-card add-note-card';
card.innerHTML = "
<div class=\"add-note-icon\"><i class=\"fas fa-plus\"></i></div>
<div class=\"add-note-text\">Add New Note</div>
";
card.addEventListener('click', () => openEditor());
return card;
};
const createNoteCard = (note) => {
const card = document.createElement('div');
card.className = 'note-card';
card.dataset.id = note.id;
// Auto-link URLs
const linkedContent = (note.content || '').replace(/(https?:\[^\]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
card.innerHTML = "
<div class=\"note-card-content">${linkedContent}</div>
<div class=\"note-card-footer\">
<span class=\"note-card-date\">${new Date(note.updated_at).toLocaleDateString()}</span>
<button class=\"delete-note-btn\"><i class=\"fas fa-trash-alt\"></i></button>
</div>
";
// Edit by clicking the card body
card.querySelector('.note-card-content').addEventListener('click', () => openEditor(note));
// Delete button
card.querySelector('.delete-note-btn').addEventListener('click', (e) => {
e.stopPropagation(); // Prevent opening editor
showDeleteConfirmation(note.id);
});
return card;
};
// --- Editor Modal Logic ---
const openEditor = (note = {}) => {
noteIdInput.value = note.id || '';
editorTextarea.value = note.content || '';
modal.classList.add('show');
editorTextarea.focus();
};
const closeEditor = () => {
modal.classList.remove('show');
noteIdInput.value = '';
editorTextarea.value = '';
};
const saveNote = async () => {
const id = noteIdInput.value;
const content = editorTextarea.value;
const url = 'api/notes.php';
const formData = new FormData();
formData.append('content', content);
if (id) {
formData.append('id', id);
}
try {
const response = await fetch(url, {
method: 'POST', // Using POST for both create and update
body: formData
});
if (!response.ok) {
throw new Error('Failed to save note');
}
closeEditor();
await fetchAndRenderNotes(); // Refresh notes list
} catch (error) {
console.error("Error saving note:", error);
alert('Could not save note. Please try again.');
}
};
const showDeleteConfirmation = (id) => {
if (confirm('Are you sure you want to delete this note?')) {
deleteNote(id);
}
};
const deleteNote = async (id) => {
try {
const formData = new FormData();
formData.append('id', id);
const response = await fetch('api/notes.php', {
method: 'DELETE',
body: formData
});
if (!response.ok) {
throw new Error('Failed to delete note');
}
await fetchAndRenderNotes(); // Refresh notes list
} catch (error) {
console.error("Error deleting note:", error);
alert('Could not delete note. Please try again.');
}
};
// --- Event Listeners ---
saveNoteBtn.addEventListener('click', saveNote);
// Close modal if clicking on the background
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeEditor();
}
});
// Close with Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('show')) {
closeEditor();
}
});
// --- Initial Load ---
if (notesGrid) { // Only run on pages with the notes grid
fetchAndRenderNotes();
}
});

143
settings.php Normal file
View File

@ -0,0 +1,143 @@
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: index.php');
exit;
}
require_once 'db/config.php';
$user_id = $_SESSION['user_id'];
$username = $_SESSION['username'] ?? 'User';
// Fetch user email (assuming it's stored in the users table)
$email = 'email@example.com'; // Default
try {
$pdo = db();
$stmt = $pdo->prepare("SELECT email FROM users WHERE id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch();
if ($user && $user['email']) {
$email = htmlspecialchars($user['email']);
}
} catch (PDOException $e) {
// Log error or handle it gracefully
// For now, we just use the default
}
$page_title = "Settings";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($page_title); ?> - YourApp</title>
<link rel="stylesheet" href="assets/css/glass-theme.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<div class="sidebar">
<div class="logo">
AI-App
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="app.php"><i class="fas fa-sticky-note"></i> Notes</a>
</li>
<li class="nav-item active">
<a href="settings.php"><i class="fas fa-cog"></i> Settings</a>
</li>
</ul>
<div class="logout-link">
<a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
<!-- Main Content -->
<main class="main-content">
<h1><?php echo htmlspecialchars($page_title); ?></h1>
<div class="glass-panel">
<form id="settings-form" action="api/settings.php" method="POST">
<h2>Profile Information</h2>
<p style="color: var(--text-muted); margin-top: -1rem; margin-bottom: 2rem;">Your profile details are managed by the system.</p>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" value="<?php echo htmlspecialchars($username); ?>" disabled>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-control" value="<?php echo $email; ?>" disabled>
</div>
<hr style="border: none; border-top: 1px solid var(--glass-border); margin: 2rem 0;">
<h2>Change Password</h2>
<div class="form-group">
<label for="current_password">Current Password</label>
<input type="password" id="current_password" name="current_password" class="form-control" required>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input type="password" id="new_password" name="new_password" class="form-control" required>
</div>
<div class="form-group">
<label for="confirm_password">Confirm New Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
<div id="settings-message" style="margin-top: 1rem;"></div>
</div>
</main>
</div>
<script>
// Simple AJAX for form submission
document.getElementById('settings-form').addEventListener('submit', function(e) {
e.preventDefault();
const form = e.target;
const messageDiv = document.getElementById('settings-message');
const formData = new FormData(form);
fetch(form.action, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
messageDiv.style.padding = '1rem';
messageDiv.style.borderRadius = '8px';
if (data.success) {
messageDiv.textContent = data.success;
messageDiv.style.backgroundColor = 'rgba(46, 204, 113, 0.2)';
messageDiv.style.color = '#2ecc71';
form.reset();
} else {
messageDiv.textContent = data.error || 'An unknown error occurred.';
messageDiv.style.backgroundColor = 'rgba(231, 76, 60, 0.2)';
messageDiv.style.color = '#e74c3c';
}
})
.catch(error => {
messageDiv.style.padding = '1rem';
messageDiv.style.borderRadius = '8px';
messageDiv.textContent = 'A network error occurred. Please try again.';
messageDiv.style.backgroundColor = 'rgba(231, 76, 60, 0.2)';
messageDiv.style.color = '#e74c3c';
});
});
</script>
</body>
</html>