mirror of
https://github.com/DevJSTAR/JSTAR-Tab.git
synced 2025-04-18 17:35:26 +00:00
115 lines
4.6 KiB
HTML
115 lines
4.6 KiB
HTML
<!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> |