mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
400 lines
17 KiB
Plaintext
400 lines
17 KiB
Plaintext
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-700">
|
|
Your Data Vault
|
|
</h1>
|
|
<div class="relative">
|
|
<input id="data-vault-search" type="text" placeholder="Search tools..." class="pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<i class="material-icons absolute left-3 top-2 text-gray-400">search</i>
|
|
<button id="clear-search" class="absolute right-2 top-2 text-gray-400 hover:text-gray-600 hidden">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
</div>
|
|
<div id="no-results-message" class="hidden mt-4 p-4 bg-yellow-100 text-yellow-800 rounded-lg">
|
|
No matching tools found. Try a different search term.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center">
|
|
<i class="material-icons text-blue-600 mr-2">star</i>
|
|
Featured Tools
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<%= link_to usage_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold mb-2">Usage Overview</h2>
|
|
<i class="material-icons text-white group-hover:scale-110 transition-transform">insert_chart</i>
|
|
</div>
|
|
<p class="text-blue-100">
|
|
See how you've used Notebook.ai with detailed analytics and charts.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to year_in_review_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold mb-2">Year in Review</h2>
|
|
<i class="material-icons text-white group-hover:scale-110 transition-transform">date_range</i>
|
|
</div>
|
|
<p class="text-purple-100">
|
|
Explore your yearly activity with personalized statistics and insights.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to edit_user_registration_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-gradient-to-br from-gray-700 to-gray-800 text-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold mb-2">Account Settings</h2>
|
|
<i class="material-icons text-white group-hover:scale-110 transition-transform">settings</i>
|
|
</div>
|
|
<p class="text-gray-300">
|
|
Manage your account preferences, privacy settings, and profile information.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data & Analytics Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center border-b border-gray-200 pb-2">
|
|
<i class="material-icons text-blue-600 mr-2">analytics</i>
|
|
Data & Analytics
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<%= link_to data_documents_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-indigo-50 rounded-lg shadow-sm border border-indigo-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Document Statistics</h2>
|
|
<i class="material-icons <%= Document.text_color %> group-hover:text-indigo-800 transition-colors"><%= Document.icon %></i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Track your writing progress and document metrics.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to green_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-green-100 rounded-lg shadow-sm border border-green-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Eco Footprint</h2>
|
|
<i class="material-icons text-green-600 group-hover:text-green-700 transition-colors">public</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
See how many trees you've saved by going digital.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to achievements_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-amber-50 rounded-lg shadow-sm border border-amber-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Achievements & Milestones</h2>
|
|
<i class="material-icons text-amber-600 group-hover:text-amber-700 transition-colors">emoji_events</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Track your progress and unlock worldbuilding achievements.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Management Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center border-b border-gray-200 pb-2">
|
|
<i class="material-icons text-purple-600 mr-2">folder</i>
|
|
Content Management
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<%= link_to archive_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-gray-100 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Archives</h2>
|
|
<i class="material-icons text-gray-700 group-hover:text-gray-800 transition-colors">archive</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Access archived pages without deleting them.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to recently_deleted_content_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-red-50 rounded-lg shadow-sm border border-red-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Recycle Bin</h2>
|
|
<i class="material-icons text-red-700 group-hover:text-red-800 transition-colors">delete</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Recover recently deleted content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to tags_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-purple-50 rounded-lg shadow-sm border border-purple-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Tag Management</h2>
|
|
<i class="material-icons text-purple-700 group-hover:text-purple-800 transition-colors"><%= PageTag.icon %></i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Organize your content with tags.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to uploads_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-yellow-50 rounded-lg shadow-sm border border-yellow-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Image Uploads</h2>
|
|
<i class="material-icons text-yellow-700 group-hover:text-yellow-800 transition-colors">file_upload</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Manage all your uploaded images.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collaboration & Community Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center border-b border-gray-200 pb-2">
|
|
<i class="material-icons text-blue-600 mr-2">people</i>
|
|
Collaboration & Community
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<%= link_to collaboration_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-purple-100 rounded-lg shadow-sm border border-purple-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Collaboration</h2>
|
|
<i class="material-icons text-purple-700 group-hover:text-purple-800 transition-colors"><%= Universe.icon %></i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Manage shared universes and collaborators.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to discussions_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-blue-50 rounded-lg shadow-sm border border-blue-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Discussion Activity</h2>
|
|
<i class="material-icons text-blue-700 group-hover:text-blue-800 transition-colors">forum</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Track your forum participation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to referrals_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-orange-50 rounded-lg shadow-sm border border-orange-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Referrals</h2>
|
|
<i class="material-icons text-orange-700 group-hover:text-orange-800 transition-colors">favorite</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Invite friends and earn rewards.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account & Support Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center border-b border-gray-200 pb-2">
|
|
<i class="material-icons text-gray-600 mr-2">account_circle</i>
|
|
Account & Support
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<%= link_to notebook_export_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-amber-50 rounded-lg shadow-sm border border-amber-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Export Data</h2>
|
|
<i class="material-icons text-amber-700 group-hover:text-amber-800 transition-colors">file_download</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Download your notebook in various formats.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to privacy_policy_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-blue-50 rounded-lg shadow-sm border border-blue-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Privacy Policy</h2>
|
|
<i class="material-icons text-blue-700 group-hover:text-blue-800 transition-colors">verified_user</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Review our privacy practices.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= link_to help_center_path, class: 'block group data-vault-card' do %>
|
|
<div class="bg-pink-50 rounded-lg shadow-sm border border-pink-200 hover:shadow-md transition-shadow duration-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Help Center</h2>
|
|
<i class="material-icons text-pink-700 group-hover:text-pink-800 transition-colors">help</i>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Get help and request features.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('data-vault-search');
|
|
const clearButton = document.getElementById('clear-search');
|
|
const cards = document.querySelectorAll('.data-vault-card');
|
|
const sections = document.querySelectorAll('.mb-12');
|
|
const noResultsMessage = document.getElementById('no-results-message');
|
|
|
|
// Function to highlight matching text
|
|
function highlightText(element, searchTerm) {
|
|
if (!searchTerm) {
|
|
// Restore original text if no search term
|
|
if (element.dataset.originalText) {
|
|
element.innerHTML = element.dataset.originalText;
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Store original text if not already stored
|
|
if (!element.dataset.originalText) {
|
|
element.dataset.originalText = element.innerHTML;
|
|
}
|
|
|
|
const originalText = element.dataset.originalText;
|
|
const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
element.innerHTML = originalText.replace(regex, '<mark class="bg-yellow-200 px-0.5 rounded">$1</mark>');
|
|
}
|
|
|
|
// Function to handle search filtering
|
|
function filterCards() {
|
|
const searchTerm = searchInput.value.toLowerCase().trim();
|
|
let visibleCardCount = 0;
|
|
|
|
// Show/hide clear button
|
|
if (searchTerm) {
|
|
clearButton.classList.remove('hidden');
|
|
} else {
|
|
clearButton.classList.add('hidden');
|
|
}
|
|
|
|
// Show all sections initially
|
|
sections.forEach(section => {
|
|
section.style.display = 'block';
|
|
});
|
|
|
|
// Filter cards based on search term
|
|
cards.forEach(card => {
|
|
const titleElement = card.querySelector('h2');
|
|
const descriptionElement = card.querySelector('p');
|
|
const cardTitle = titleElement.textContent.toLowerCase();
|
|
const cardDescription = descriptionElement.textContent.toLowerCase();
|
|
const isMatch = cardTitle.includes(searchTerm) || cardDescription.includes(searchTerm);
|
|
|
|
card.style.display = isMatch ? 'block' : 'none';
|
|
|
|
// Highlight matching text
|
|
highlightText(titleElement, searchTerm);
|
|
highlightText(descriptionElement, searchTerm);
|
|
|
|
if (isMatch) visibleCardCount++;
|
|
});
|
|
|
|
// Show/hide no results message
|
|
if (searchTerm && visibleCardCount === 0) {
|
|
noResultsMessage.classList.remove('hidden');
|
|
} else {
|
|
noResultsMessage.classList.add('hidden');
|
|
}
|
|
|
|
// Hide sections with no visible cards
|
|
sections.forEach(section => {
|
|
if (section.querySelector('h2')?.textContent === 'Featured Tools') {
|
|
// Skip the featured section if we're searching
|
|
if (searchTerm) {
|
|
const featuredCards = section.querySelectorAll('.data-vault-card');
|
|
const hasVisibleCard = Array.from(featuredCards).some(card => card.style.display !== 'none');
|
|
if (!hasVisibleCard) {
|
|
section.style.display = 'none';
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
const sectionCards = section.querySelectorAll('.data-vault-card');
|
|
if (sectionCards.length > 0) {
|
|
const hasVisibleCard = Array.from(sectionCards).some(card => card.style.display !== 'none');
|
|
if (!hasVisibleCard) {
|
|
section.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listener for search input
|
|
searchInput.addEventListener('input', filterCards);
|
|
|
|
// Add event listener for clear button
|
|
clearButton.addEventListener('click', function() {
|
|
searchInput.value = '';
|
|
filterCards();
|
|
searchInput.focus();
|
|
});
|
|
|
|
// Clear search when ESC key is pressed
|
|
searchInput.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
this.value = '';
|
|
filterCards();
|
|
}
|
|
});
|
|
});
|
|
</script>
|