mirror of
https://github.com/DevJSTAR/JSTAR-Tab.git
synced 2025-04-18 17:35:26 +00:00
Add files via upload
This commit is contained in:
JSTAR
GitHub
parent
383896b69d
commit
c8b5e54495
115
index.html
Normal file
115
index.html
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>New JSTAR Tab</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="greeting"></div>
|
||||||
|
|
||||||
|
<!-- Search Bar -->
|
||||||
|
<div id="search-bar">
|
||||||
|
<input type="text" id="search" placeholder="Search Brave...">
|
||||||
|
<button id="search-btn"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Icon at Bottom Right -->
|
||||||
|
<button id="settings-btn" class="settings-icon">
|
||||||
|
<i class="fas fa-cog"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Shortcuts Grid -->
|
||||||
|
<div id="shortcuts" class="grid-container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Modal -->
|
||||||
|
<div id="settings-modal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close-btn">×</span>
|
||||||
|
<h2>Settings</h2>
|
||||||
|
<div class="section">
|
||||||
|
<h3>Theme</h3>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="theme-switch">
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<h3>Shortcuts</h3>
|
||||||
|
<div class="button-group">
|
||||||
|
<button id="add-shortcut" class="icon-btn" data-tooltip="Add Shortcut">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
<button id="import-shortcuts" class="icon-btn" data-tooltip="Import Shortcuts">
|
||||||
|
<i class="fas fa-file-import"></i>
|
||||||
|
</button>
|
||||||
|
<button id="export-shortcuts" class="icon-btn" data-tooltip="Export Shortcuts">
|
||||||
|
<i class="fas fa-file-export"></i>
|
||||||
|
</button>
|
||||||
|
<button id="reset-shortcuts" class="icon-btn" data-tooltip="Reset Shortcuts">
|
||||||
|
<i class="fas fa-undo"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<h3>Tools</h3>
|
||||||
|
<div class="button-group">
|
||||||
|
<button id="open-calculator-btn" class="icon-btn" data-tooltip="Calculator">
|
||||||
|
<i class="fas fa-calculator"></i>
|
||||||
|
</button>
|
||||||
|
<button id="open-currency-converter" class="icon-btn" data-tooltip="Currency Converter">
|
||||||
|
<i class="fas fa-coins"></i>
|
||||||
|
</button>
|
||||||
|
<button id="anonymize-btn" class="icon-btn" data-tooltip="Anonymize">
|
||||||
|
<i class="fas fa-user-secret"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Calculator Modal -->
|
||||||
|
<div id="calculator-modal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close-btn" id="close-calculator-btn">×</span>
|
||||||
|
<div id="calculator">
|
||||||
|
<div id="calculator-display">0</div>
|
||||||
|
<div id="calculator-buttons">
|
||||||
|
<button data-value="7">7</button>
|
||||||
|
<button data-value="8">8</button>
|
||||||
|
<button data-value="9">9</button>
|
||||||
|
<button data-value="/">/</button>
|
||||||
|
<button data-value="4">4</button>
|
||||||
|
<button data-value="5">5</button>
|
||||||
|
<button data-value="6">6</button>
|
||||||
|
<button data-value="*">*</button>
|
||||||
|
<button data-value="1">1</button>
|
||||||
|
<button data-value="2">2</button>
|
||||||
|
<button data-value="3">3</button>
|
||||||
|
<button data-value="-">-</button>
|
||||||
|
<button data-value="0">0</button>
|
||||||
|
<button data-value="C">C</button>
|
||||||
|
<button data-value="=">=</button>
|
||||||
|
<button data-value="+">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="context-menu">
|
||||||
|
<div id="edit-shortcut" class="context-menu-item" onclick="editShortcut()">
|
||||||
|
<i class="fas fa-pencil-alt"></i> Edit
|
||||||
|
</div>
|
||||||
|
<div id="delete-shortcut" class="context-menu-item delete" onclick="deleteShortcut()">
|
||||||
|
<i class="fas fa-trash-alt"></i> Delete
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
manifest.json
Normal file
13
manifest.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"manifest_version": 3,
|
||||||
|
"name": "JSTAR Tab",
|
||||||
|
"version": "1.0",
|
||||||
|
"description": "A sleek modern custom new tab with search, shortcuts, and settings.",
|
||||||
|
"chrome_url_overrides": {
|
||||||
|
"newtab": "index.html"
|
||||||
|
},
|
||||||
|
"permissions": ["storage"],
|
||||||
|
"action": {
|
||||||
|
"default_title": "New JSTAR Tab"
|
||||||
|
}
|
||||||
|
}
|
||||||
380
script.js
Normal file
380
script.js
Normal file
|
|
@ -0,0 +1,380 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
applyTheme();
|
||||||
|
updateGreeting();
|
||||||
|
loadAnonymizationState(); // Load anonymization state on page load
|
||||||
|
loadShortcuts(); // Load shortcuts on page load
|
||||||
|
|
||||||
|
document.getElementById('theme-switch').addEventListener('change', toggleTheme);
|
||||||
|
document.getElementById('settings-btn').addEventListener('click', toggleSettings);
|
||||||
|
document.getElementById('search-btn').addEventListener('click', searchBrave);
|
||||||
|
document.getElementById('search').addEventListener('keypress', function(event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
searchBrave();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add event listener for the anonymize button
|
||||||
|
const anonymizeBtn = document.getElementById('anonymize-btn');
|
||||||
|
anonymizeBtn.addEventListener('click', toggleAnonymize);
|
||||||
|
|
||||||
|
const modal = document.getElementById('settings-modal');
|
||||||
|
modal.addEventListener('click', closeOnClickOutside);
|
||||||
|
document.querySelector('.close-btn').addEventListener('click', closeSettings);
|
||||||
|
|
||||||
|
// Add shortcut button listeners
|
||||||
|
document.getElementById('add-shortcut').addEventListener('click', addShortcut);
|
||||||
|
document.getElementById('import-shortcuts').addEventListener('click', importShortcuts);
|
||||||
|
document.getElementById('export-shortcuts').addEventListener('click', exportShortcuts);
|
||||||
|
document.getElementById('reset-shortcuts').addEventListener('click', resetShortcuts);
|
||||||
|
|
||||||
|
// Custom context menu for shortcuts
|
||||||
|
const contextMenu = document.createElement('div');
|
||||||
|
contextMenu.id = 'context-menu';
|
||||||
|
contextMenu.innerHTML = `
|
||||||
|
<button id="edit-shortcut">Edit</button>
|
||||||
|
<button id="delete-shortcut">Delete</button>
|
||||||
|
`;
|
||||||
|
contextMenu.style.display = 'none';
|
||||||
|
document.body.appendChild(contextMenu);
|
||||||
|
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
const contextMenu = document.getElementById('context-menu');
|
||||||
|
// Hide context menu if the click is outside of it
|
||||||
|
if (event.target !== contextMenu && !contextMenu.contains(event.target)) {
|
||||||
|
contextMenu.style.display = 'none'; // Hide menu on click outside
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close context menu on Escape key
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
contextMenu.style.display = 'none'; // Hide context menu
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Detect Shift + A to toggle anonymization, but ensure no other keys are pressed
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'A' && event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
||||||
|
toggleAnonymize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Detect Shift + T to toggle theme
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'T' && event.shiftKey) {
|
||||||
|
toggleThemeShortcut(); // Toggle theme when Shift + T is pressed
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Detect Shift + S to toggle settings menu
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'S' && event.shiftKey) {
|
||||||
|
toggleSettings(); // Open or close settings modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let isAnonymized = false; // Track the anonymization state
|
||||||
|
let currentShortcutIndex = -1; // To keep track of the current shortcut for editing or deleting
|
||||||
|
|
||||||
|
function updateGreeting() {
|
||||||
|
const greeting = document.getElementById('greeting');
|
||||||
|
const date = new Date();
|
||||||
|
const hours = date.getUTCHours() + 5; // Adjust for timezone
|
||||||
|
|
||||||
|
let message = `Good ${getTimeOfDay(hours)}, ${isAnonymized ? 'JSTAR' : 'Junaid'}!`;
|
||||||
|
greeting.textContent = message;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTimeOfDay(hours) {
|
||||||
|
if (hours >= 5 && hours < 12) {
|
||||||
|
return "Morning";
|
||||||
|
} else if (hours >= 12 && hours < 17) {
|
||||||
|
return "Afternoon";
|
||||||
|
} else if (hours >= 17 && hours < 22) {
|
||||||
|
return "Evening";
|
||||||
|
} else {
|
||||||
|
return "Night";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchBrave() {
|
||||||
|
const query = document.getElementById('search').value.trim();
|
||||||
|
if (query) {
|
||||||
|
window.location.href = `https://search.brave.com/search?q=${encodeURIComponent(query)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const isDark = document.getElementById('theme-switch').checked;
|
||||||
|
document.body.classList.toggle('dark-theme', isDark);
|
||||||
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||||
|
|
||||||
|
const modalContent = document.querySelector('.modal-content');
|
||||||
|
modalContent.style.backgroundColor = isDark ? '#1a1a1a' : 'white';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shortcut to toggle theme
|
||||||
|
function toggleThemeShortcut() {
|
||||||
|
const themeSwitch = document.getElementById('theme-switch');
|
||||||
|
themeSwitch.checked = !themeSwitch.checked;
|
||||||
|
toggleTheme();
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
|
document.body.classList.toggle('dark-theme', savedTheme === 'dark');
|
||||||
|
document.getElementById('theme-switch').checked = savedTheme === 'dark';
|
||||||
|
document.querySelector('.modal-content').style.backgroundColor = savedTheme === 'dark' ? '#1a1a1a' : 'white';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load the anonymization state from localStorage
|
||||||
|
function loadAnonymizationState() {
|
||||||
|
const savedAnonymization = localStorage.getItem('anonymization');
|
||||||
|
isAnonymized = savedAnonymization === 'true'; // Convert string to boolean
|
||||||
|
|
||||||
|
updateAnonymizeButton();
|
||||||
|
updateGreeting();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load shortcuts from localStorage and display them
|
||||||
|
function loadShortcuts() {
|
||||||
|
const shortcutsContainer = document.getElementById('shortcuts');
|
||||||
|
shortcutsContainer.innerHTML = ''; // Clear existing shortcuts
|
||||||
|
|
||||||
|
const savedShortcuts = JSON.parse(localStorage.getItem('shortcuts')) || [];
|
||||||
|
savedShortcuts.forEach((shortcut, index) => {
|
||||||
|
const shortcutButton = document.createElement('div');
|
||||||
|
shortcutButton.className = 'shortcut';
|
||||||
|
|
||||||
|
const favicon = document.createElement('img');
|
||||||
|
favicon.src = `https://www.google.com/s2/favicons?domain=${new URL(shortcut.url).hostname}`; // Fetch favicon
|
||||||
|
const shortcutName = document.createElement('span');
|
||||||
|
shortcutName.textContent = shortcut.name.length > 10 ? shortcut.name.slice(0, 10) + '...' : shortcut.name; // Truncate long names
|
||||||
|
|
||||||
|
// Add a click event to open the shortcut link
|
||||||
|
shortcutButton.addEventListener('click', (event) => {
|
||||||
|
if (event.ctrlKey) {
|
||||||
|
window.open(shortcut.url, '_blank'); // Open in a new tab if Ctrl is held
|
||||||
|
} else {
|
||||||
|
window.location.href = shortcut.url; // Open in the same tab
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add context menu for right-click
|
||||||
|
shortcutButton.addEventListener('contextmenu', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
showContextMenu(event.clientX, event.clientY, index);
|
||||||
|
});
|
||||||
|
|
||||||
|
shortcutButton.appendChild(favicon);
|
||||||
|
shortcutButton.appendChild(shortcutName);
|
||||||
|
shortcutsContainer.appendChild(shortcutButton);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show custom context menu
|
||||||
|
function showContextMenu(x, y, index) {
|
||||||
|
currentShortcutIndex = index; // Store the index of the current shortcut
|
||||||
|
const contextMenu = document.getElementById('context-menu');
|
||||||
|
contextMenu.style.display = 'block';
|
||||||
|
contextMenu.style.left = `${x}px`;
|
||||||
|
contextMenu.style.top = `${y}px`;
|
||||||
|
|
||||||
|
// Clear previous event handlers (important to prevent multiple listeners)
|
||||||
|
const editButton = contextMenu.querySelector('#edit-shortcut');
|
||||||
|
const deleteButton = contextMenu.querySelector('#delete-shortcut');
|
||||||
|
|
||||||
|
if (editButton) {
|
||||||
|
editButton.onclick = () => {
|
||||||
|
editShortcut(); // Trigger edit shortcut
|
||||||
|
contextMenu.style.display = 'none'; // Hide context menu
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
const editBtn = document.createElement('button');
|
||||||
|
editBtn.id = 'edit-shortcut';
|
||||||
|
editBtn.textContent = 'Edit';
|
||||||
|
editBtn.onclick = () => {
|
||||||
|
editShortcut(); // Trigger edit shortcut
|
||||||
|
contextMenu.style.display = 'none'; // Hide context menu
|
||||||
|
};
|
||||||
|
contextMenu.appendChild(editBtn);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deleteButton) {
|
||||||
|
deleteButton.onclick = () => {
|
||||||
|
deleteShortcut(); // Trigger delete shortcut
|
||||||
|
contextMenu.style.display = 'none'; // Hide context menu
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
const deleteBtn = document.createElement('button');
|
||||||
|
deleteBtn.id = 'delete-shortcut';
|
||||||
|
deleteBtn.textContent = 'Delete';
|
||||||
|
deleteBtn.onclick = () => {
|
||||||
|
deleteShortcut(); // Trigger delete shortcut
|
||||||
|
contextMenu.style.display = 'none'; // Hide context menu
|
||||||
|
};
|
||||||
|
contextMenu.appendChild(deleteBtn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle anonymization state
|
||||||
|
function toggleAnonymize() {
|
||||||
|
isAnonymized = !isAnonymized; // Toggle the anonymized state
|
||||||
|
updateAnonymizeButton();
|
||||||
|
updateGreeting();
|
||||||
|
|
||||||
|
// Save the current anonymization state to localStorage
|
||||||
|
localStorage.setItem('anonymization', isAnonymized);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAnonymizeButton() {
|
||||||
|
const anonymizeBtn = document.getElementById('anonymize-btn');
|
||||||
|
if (isAnonymized) {
|
||||||
|
anonymizeBtn.classList.add('active');
|
||||||
|
anonymizeBtn.setAttribute('data-tooltip', 'Unanonymize');
|
||||||
|
anonymizeBtn.innerHTML = '<i class="fas fa-user"></i>'; // Change icon to un-anonymize
|
||||||
|
} else {
|
||||||
|
anonymizeBtn.classList.remove('active');
|
||||||
|
anonymizeBtn.setAttribute('data-tooltip', 'Anonymize');
|
||||||
|
anonymizeBtn.innerHTML = '<i class="fas fa-user-secret"></i>'; // Change icon to anonymize
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSettings() {
|
||||||
|
const modal = document.getElementById('settings-modal');
|
||||||
|
modal.classList.contains('active') ? closeSettings() : openSettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSettings() {
|
||||||
|
const modal = document.getElementById('settings-modal');
|
||||||
|
modal.style.display = 'flex';
|
||||||
|
setTimeout(() => {
|
||||||
|
modal.classList.add('active');
|
||||||
|
modal.querySelector('.modal-content').classList.add('active');
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSettings() {
|
||||||
|
const modal = document.getElementById('settings-modal');
|
||||||
|
modal.querySelector('.modal-content').classList.remove('active');
|
||||||
|
modal.classList.remove('active');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
modal.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeOnClickOutside(event) {
|
||||||
|
const modal = document.getElementById('settings-modal');
|
||||||
|
if (event.target === modal) {
|
||||||
|
closeSettings();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate if the URL is valid
|
||||||
|
function isValidURL(url) {
|
||||||
|
try {
|
||||||
|
new URL(url);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a new shortcut
|
||||||
|
function addShortcut() {
|
||||||
|
const name = prompt("Enter the shortcut name:");
|
||||||
|
const url = prompt("Enter the shortcut URL:");
|
||||||
|
|
||||||
|
if (!name || !url || !isValidURL(url)) {
|
||||||
|
alert("Invalid input. Please provide a valid name and URL.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shortcuts = JSON.parse(localStorage.getItem('shortcuts')) || [];
|
||||||
|
shortcuts.push({ name, url });
|
||||||
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
||||||
|
loadShortcuts();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Edit the current shortcut
|
||||||
|
function editShortcut() {
|
||||||
|
if (currentShortcutIndex < 0) return;
|
||||||
|
|
||||||
|
const shortcuts = JSON.parse(localStorage.getItem('shortcuts'));
|
||||||
|
const currentShortcut = shortcuts[currentShortcutIndex];
|
||||||
|
|
||||||
|
const newName = prompt("Edit the shortcut name:", currentShortcut.name);
|
||||||
|
const newUrl = prompt("Edit the shortcut URL:", currentShortcut.url);
|
||||||
|
|
||||||
|
if (!newName || !newUrl || !isValidURL(newUrl)) {
|
||||||
|
alert("Invalid input. Please provide a valid name and URL.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
shortcuts[currentShortcutIndex] = { name: newName, url: newUrl };
|
||||||
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
||||||
|
loadShortcuts();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete the current shortcut
|
||||||
|
function deleteShortcut() {
|
||||||
|
if (currentShortcutIndex < 0) return;
|
||||||
|
|
||||||
|
const shortcuts = JSON.parse(localStorage.getItem('shortcuts'));
|
||||||
|
shortcuts.splice(currentShortcutIndex, 1);
|
||||||
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
||||||
|
loadShortcuts();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Import shortcuts from a JSON file
|
||||||
|
function importShortcuts() {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.accept = '.json';
|
||||||
|
|
||||||
|
input.onchange = (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = (e) => {
|
||||||
|
try {
|
||||||
|
const shortcuts = JSON.parse(e.target.result);
|
||||||
|
if (Array.isArray(shortcuts)) {
|
||||||
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
||||||
|
loadShortcuts();
|
||||||
|
} else {
|
||||||
|
alert("Invalid file format. Please upload a valid JSON file.");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert("Error parsing JSON. Please ensure the file is valid.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Export shortcuts to a JSON file
|
||||||
|
function exportShortcuts() {
|
||||||
|
const shortcuts = JSON.parse(localStorage.getItem('shortcuts')) || [];
|
||||||
|
const dataStr = JSON.stringify(shortcuts, null, 2);
|
||||||
|
const blob = new Blob([dataStr], { type: 'application/json' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'shortcuts.json';
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset shortcuts to the default state
|
||||||
|
function resetShortcuts() {
|
||||||
|
if (confirm("Are you sure you want to reset the shortcuts? This action cannot be undone.")) {
|
||||||
|
localStorage.removeItem('shortcuts');
|
||||||
|
loadShortcuts();
|
||||||
|
}
|
||||||
|
}
|
||||||
399
style.css
Normal file
399
style.css
Normal file
|
|
@ -0,0 +1,399 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
background-color: #ffffff; /* Light mode background */
|
||||||
|
color: #000000; /* Light mode text color */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#greeting {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #f0f0f0; /* Light mode input background */
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-bar input {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 400px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
outline: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #000000; /* Light mode input text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-bar button {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #000; /* Light mode icon color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #e0e0e0; /* Light mode button background */
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut img {
|
||||||
|
width: 24px; /* Size of favicon */
|
||||||
|
height: 24px; /* Size of favicon */
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut:hover {
|
||||||
|
background-color: #ccc; /* Light mode button hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-icon {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000; /* Light mode settings icon color */
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8); /* Modal background color */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #1A1A1A; /* Dark mode modal background */
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 400px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #000000; /* Close button color in dark mode */
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc; /* Light mode toggle background */
|
||||||
|
transition: 0.4s;
|
||||||
|
border-radius: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white; /* Light mode toggle circle color */
|
||||||
|
transition: 0.4s;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: rgb(100, 100, 100); /* Light mode toggle active color */
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
background-color: rgb(133, 133, 133);
|
||||||
|
transform: translateX(26px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme {
|
||||||
|
background-color: #000000; /* Dark mode background */
|
||||||
|
color: #ffffff; /* Dark mode text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme #search-bar {
|
||||||
|
background-color: #111111; /* Dark mode input background */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme #search-bar input {
|
||||||
|
color: #ffffff; /* Dark mode input text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .settings-icon {
|
||||||
|
color: #ffffff; /* Dark mode settings icon color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .modal-content {
|
||||||
|
background-color: #1A1A1A; /* Dark mode modal background */
|
||||||
|
color: #ffffff; /* Dark mode modal text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .close-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme #search-bar button {
|
||||||
|
color: #ffffff; /* Dark mode button text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme #search-bar button:hover {
|
||||||
|
color: #ffffff; /* Dark mode button hover color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000000; /* Light mode heading color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme h2, body.dark-theme h3 {
|
||||||
|
color: #ffffff; /* Dark mode heading color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 15px;
|
||||||
|
border: none;
|
||||||
|
background-color: #e0e0e0; /* Light mode button background */
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #000000; /* Light mode button text color */
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
background-color: #ccc; /* Light mode button hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .icon-btn {
|
||||||
|
background-color: #333333; /* Dark mode button background */
|
||||||
|
color: #ffffff; /* Dark mode button text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .icon-btn:hover {
|
||||||
|
background-color: #444444; /* Dark mode button hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn[data-tooltip]::after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(100% + 6px);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease-in;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn[data-tooltip]:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.active {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content.hide {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.hide {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional styles for the shortcut buttons */
|
||||||
|
.shortcut {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #e0e0e0; /* Light mode button background */
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut img {
|
||||||
|
width: 24px; /* Size of favicon */
|
||||||
|
height: 24px; /* Size of favicon */
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut:hover {
|
||||||
|
background-color: #ccc; /* Light mode button hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode styles for shortcuts */
|
||||||
|
body.dark-theme .shortcut {
|
||||||
|
background-color: #444; /* Dark mode button background */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .shortcut:hover {
|
||||||
|
background-color: #555; /* Dark mode button hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom context menu styles */
|
||||||
|
#context-menu {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff; /* Light mode menu background */
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 0; /* Remove padding from menu itself */
|
||||||
|
display: none; /* Hidden by default */
|
||||||
|
width: 150px; /* Set width for the context menu */
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px; /* Increased padding for larger button size */
|
||||||
|
color: #000; /* Default text color */
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #fff; /* Divider between items */
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
width: 100%; /* Full width buttons */
|
||||||
|
text-align: left; /* Align text to the left */
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item i {
|
||||||
|
margin-right: 8px; /* Space between icon and text */
|
||||||
|
font-size: 16px; /* Icon size */
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item:last-child {
|
||||||
|
border-bottom: none; /* No divider after last item */
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item:hover {
|
||||||
|
background-color: #f0f0f0; /* Menu item hover background */
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item.delete {
|
||||||
|
color: #000; /* Set delete button text color to red */
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item.delete:hover {
|
||||||
|
color: red; /* Set delete button text color to red */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme #context-menu {
|
||||||
|
background-color: #222; /* Dark mode menu background */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .context-menu-item {
|
||||||
|
color: #ffffff; /* Dark mode menu text color */
|
||||||
|
border-bottom: 1px solid #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .context-menu-item.delete {
|
||||||
|
color: #fff; /* Dark mode delete text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .context-menu-item.delete:hover {
|
||||||
|
color: red; /* Dark mode delete text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .context-menu-item:hover {
|
||||||
|
background-color: #333; /* Dark mode item hover background */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user