mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 19:54:39 +00:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 SethBurkart123
|
51c265400c | ||
|
SethBurkart123
|
6209b65afe | ||
|
SethBurkart123
|
bb388ab000 | ||
|
SethBurkart123
|
f1512ba6e1 |
+3
-1
@@ -11,7 +11,6 @@ yarn.lock
|
|||||||
|
|
||||||
# Build
|
# Build
|
||||||
extension.zip
|
extension.zip
|
||||||
build/
|
|
||||||
dist/
|
dist/
|
||||||
betterseqtaplus-safari/
|
betterseqtaplus-safari/
|
||||||
|
|
||||||
@@ -19,3 +18,6 @@ betterseqtaplus-safari/
|
|||||||
.vscode/
|
.vscode/
|
||||||
|
|
||||||
**/.DS_Store
|
**/.DS_Store
|
||||||
|
|
||||||
|
# Electron
|
||||||
|
electron-dist/
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,162 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>BetterSEQTA Settings</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--background-primary: #ffffff;
|
||||||
|
--background-secondary: #e5e7eb;
|
||||||
|
--text-primary: black;
|
||||||
|
--theme-primary: #4F46E5;
|
||||||
|
--theme-hover: #4338CA;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-primary: #232323;
|
||||||
|
--background-secondary: #1a1a1a;
|
||||||
|
--text-primary: white;
|
||||||
|
--theme-primary: #6366F1;
|
||||||
|
--theme-hover: #818CF8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--background-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #666;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="url"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid var(--background-secondary);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--background-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="url"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--theme-primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--theme-primary);
|
||||||
|
color: white;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: var(--theme-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
#error-message {
|
||||||
|
color: #EF4444;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>BetterSEQTA Settings</h1>
|
||||||
|
<div class="subtitle">It's time to get started! To begin type in your school's SEQTA URL below.</div>
|
||||||
|
<label for="seqtaUrl">SEQTA Website URL</label>
|
||||||
|
<input type="url" id="seqtaUrl" placeholder="Enter your school's SEQTA URL (e.g https://seqta.school.edu.au)" required>
|
||||||
|
<div id="error-message"></div>
|
||||||
|
<button onclick="saveSettings()">Save Settings</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const electron = window.require('electron');
|
||||||
|
const { ipcRenderer } = electron;
|
||||||
|
const Store = window.require('electron-store');
|
||||||
|
const store = new Store();
|
||||||
|
|
||||||
|
// Load saved URL on page load
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const savedUrl = store.get('seqtaUrl') || '';
|
||||||
|
document.getElementById('seqtaUrl').value = savedUrl;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle error messages from main process
|
||||||
|
ipcRenderer.on('seqta-url-error', (event, message) => {
|
||||||
|
const errorElement = document.getElementById('error-message');
|
||||||
|
errorElement.textContent = message;
|
||||||
|
errorElement.style.display = 'block';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save settings
|
||||||
|
function saveSettings() {
|
||||||
|
const url = document.getElementById('seqtaUrl').value;
|
||||||
|
const errorElement = document.getElementById('error-message');
|
||||||
|
errorElement.style.display = 'none';
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
ipcRenderer.send('set-seqta-url', url);
|
||||||
|
} else {
|
||||||
|
errorElement.textContent = 'Please enter a URL';
|
||||||
|
errorElement.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle enter key
|
||||||
|
document.getElementById('seqtaUrl').addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
saveSettings();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,333 @@
|
|||||||
|
import { app, BrowserWindow, ipcMain, session, Menu } from 'electron';
|
||||||
|
import path from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
import Store from 'electron-store';
|
||||||
|
|
||||||
|
// Fix for __dirname in ES modules
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = path.dirname(__filename);
|
||||||
|
|
||||||
|
const store = new Store();
|
||||||
|
let mainWindow = null;
|
||||||
|
let settingsWindow = null;
|
||||||
|
|
||||||
|
// CSS to inject
|
||||||
|
const customCSS = `
|
||||||
|
#alertBar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Match SEQTA's styling */
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Create the application menu
|
||||||
|
function createAppMenu() {
|
||||||
|
const isMac = process.platform === 'darwin';
|
||||||
|
const template = [
|
||||||
|
...(isMac ? [{
|
||||||
|
label: app.name,
|
||||||
|
submenu: [
|
||||||
|
{ role: 'about' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'services' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'hide' },
|
||||||
|
{ role: 'hideOthers' },
|
||||||
|
{ role: 'unhide' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'quit' }
|
||||||
|
]
|
||||||
|
}] : []),
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Configure SEQTA URL',
|
||||||
|
accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
|
||||||
|
click: () => {
|
||||||
|
createSettingsWindow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
submenu: [
|
||||||
|
{ role: 'reload' },
|
||||||
|
{ role: 'forceReload' },
|
||||||
|
{ role: 'toggleDevTools' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'resetZoom' },
|
||||||
|
{ role: 'zoomIn' },
|
||||||
|
{ role: 'zoomOut' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'togglefullscreen' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const menu = Menu.buildFromTemplate(template);
|
||||||
|
Menu.setApplicationMenu(menu);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate SEQTA URL
|
||||||
|
function isValidSeqtaUrl(url) {
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(url);
|
||||||
|
// Only ensure it's a valid HTTPS URL
|
||||||
|
return urlObj.protocol === 'https:';
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the correct path for the extension based on whether we're in development or production
|
||||||
|
function getExtensionPath() {
|
||||||
|
if (app.isPackaged) {
|
||||||
|
// In production, the extension is in the resources directory
|
||||||
|
return path.join(process.resourcesPath, 'chrome-extension');
|
||||||
|
} else {
|
||||||
|
// In development, the extension is in the dist directory
|
||||||
|
return path.join(__dirname, '..', 'dist', 'chrome');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load the Chrome extension
|
||||||
|
async function loadExtension() {
|
||||||
|
try {
|
||||||
|
const extensionPath = getExtensionPath();
|
||||||
|
console.log('Loading extension from:', extensionPath);
|
||||||
|
|
||||||
|
await session.defaultSession.loadExtension(extensionPath, {
|
||||||
|
allowFileAccess: true
|
||||||
|
});
|
||||||
|
console.log('Extension loaded successfully!');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load extension:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMainWindow() {
|
||||||
|
console.log('🚀 Creating main window...');
|
||||||
|
if (mainWindow) {
|
||||||
|
if (!mainWindow.isDestroyed()) {
|
||||||
|
console.log('✨ Existing window found, focusing it');
|
||||||
|
mainWindow.focus();
|
||||||
|
return mainWindow;
|
||||||
|
}
|
||||||
|
console.log('🔄 Old window was destroyed, creating new one');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('📦 Initializing new BrowserWindow');
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
width: 1200,
|
||||||
|
height: 800,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: true,
|
||||||
|
contextIsolation: false,
|
||||||
|
backgroundThrottling: false,
|
||||||
|
enableWebSQL: false,
|
||||||
|
webgl: false,
|
||||||
|
offscreen: false
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
backgroundColor: '#ffffff'
|
||||||
|
});
|
||||||
|
|
||||||
|
const seqtaUrl = store.get('seqtaUrl');
|
||||||
|
console.log('📍 Stored SEQTA URL:', seqtaUrl);
|
||||||
|
|
||||||
|
// Register keyboard shortcut for settings
|
||||||
|
mainWindow.webContents.on('before-input-event', (event, input) => {
|
||||||
|
if ((input.meta || input.control) && input.key === ',') {
|
||||||
|
createSettingsWindow();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Inject CSS when the page loads
|
||||||
|
mainWindow.webContents.on('did-finish-load', () => {
|
||||||
|
console.log('🎨 Page loaded, injecting CSS');
|
||||||
|
mainWindow.webContents.insertCSS(customCSS).catch(err => {
|
||||||
|
console.error('Failed to inject CSS:', err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only show window when it's ready
|
||||||
|
mainWindow.once('ready-to-show', () => {
|
||||||
|
console.log('🎉 Window ready to show!');
|
||||||
|
mainWindow.show();
|
||||||
|
mainWindow.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (seqtaUrl) {
|
||||||
|
if (!isValidSeqtaUrl(seqtaUrl)) {
|
||||||
|
console.error('❌ Invalid SEQTA URL stored:', seqtaUrl);
|
||||||
|
createSettingsWindow();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('🌐 Loading SEQTA URL:', seqtaUrl);
|
||||||
|
mainWindow.loadURL(seqtaUrl)
|
||||||
|
.then(() => {
|
||||||
|
console.log('✅ Successfully loaded SEQTA URL');
|
||||||
|
mainWindow.show();
|
||||||
|
mainWindow.focus();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error('❌ Failed to load SEQTA URL:', err);
|
||||||
|
createSettingsWindow();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log('⚙️ No SEQTA URL found, opening settings');
|
||||||
|
createSettingsWindow();
|
||||||
|
}
|
||||||
|
|
||||||
|
return mainWindow;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSettingsWindow() {
|
||||||
|
if (settingsWindow) {
|
||||||
|
settingsWindow.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
settingsWindow = new BrowserWindow({
|
||||||
|
width: 600,
|
||||||
|
height: 400,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: true,
|
||||||
|
contextIsolation: false,
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
backgroundColor: '#ffffff'
|
||||||
|
});
|
||||||
|
|
||||||
|
const settingsPath = path.join(__dirname, 'index.html');
|
||||||
|
settingsWindow.loadFile(settingsPath);
|
||||||
|
|
||||||
|
settingsWindow.once('ready-to-show', () => {
|
||||||
|
settingsWindow.show();
|
||||||
|
settingsWindow.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only enable DevTools in development
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
settingsWindow.webContents.openDevTools();
|
||||||
|
}
|
||||||
|
|
||||||
|
settingsWindow.on('closed', () => {
|
||||||
|
settingsWindow = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Performance optimization: Disable hardware acceleration if running on low-end device
|
||||||
|
if (process.platform !== 'darwin') { // Skip for macOS
|
||||||
|
app.disableHardwareAcceleration();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Performance optimization: Disable smooth scrolling
|
||||||
|
app.commandLine.appendSwitch('disable-smooth-scrolling');
|
||||||
|
|
||||||
|
// Wait for app to be ready before creating windows
|
||||||
|
app.whenReady().then(async () => {
|
||||||
|
createAppMenu();
|
||||||
|
await loadExtension();
|
||||||
|
createMainWindow();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Performance optimization: Quit immediately instead of gracefully
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
app.quit();
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('activate', () => {
|
||||||
|
if (BrowserWindow.getAllWindows().length === 0) {
|
||||||
|
createMainWindow();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format and validate SEQTA URL
|
||||||
|
function formatAndValidateUrl(url) {
|
||||||
|
// Remove any whitespace
|
||||||
|
url = url.trim();
|
||||||
|
|
||||||
|
// If no protocol specified, add https://
|
||||||
|
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||||
|
url = 'https://' + url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's http://, upgrade to https://
|
||||||
|
if (url.startsWith('http://')) {
|
||||||
|
url = 'https://' + url.slice(7);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(url);
|
||||||
|
// Ensure it's https
|
||||||
|
if (urlObj.protocol !== 'https:') {
|
||||||
|
throw new Error('URL must use HTTPS');
|
||||||
|
}
|
||||||
|
return { isValid: true, url: url };
|
||||||
|
} catch (error) {
|
||||||
|
return { isValid: false, url: url, error: error.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle setting the SEQTA URL
|
||||||
|
ipcMain.on('set-seqta-url', (event, url) => {
|
||||||
|
console.log('🔧 Received new SEQTA URL:', url);
|
||||||
|
|
||||||
|
const { isValid, url: formattedUrl, error } = formatAndValidateUrl(url);
|
||||||
|
|
||||||
|
if (!isValid) {
|
||||||
|
console.error('❌ Invalid URL format:', error);
|
||||||
|
event.reply('seqta-url-error', 'Please enter a valid URL');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('💾 Saving URL to store:', formattedUrl);
|
||||||
|
store.set('seqtaUrl', formattedUrl);
|
||||||
|
|
||||||
|
// Create main window if it doesn't exist
|
||||||
|
if (!mainWindow || mainWindow.isDestroyed()) {
|
||||||
|
console.log('🆕 Creating new main window');
|
||||||
|
createMainWindow();
|
||||||
|
} else {
|
||||||
|
console.log('🔄 Loading new URL in existing window:', formattedUrl);
|
||||||
|
mainWindow.loadURL(formattedUrl).then(() => {
|
||||||
|
console.log('✅ URL loaded successfully');
|
||||||
|
|
||||||
|
console.log('🎨 Injecting CSS and settings button');
|
||||||
|
mainWindow.webContents.insertCSS(customCSS).catch(err => {
|
||||||
|
console.error('Failed to inject CSS:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
mainWindow.webContents.executeJavaScript(`
|
||||||
|
if (!document.getElementById('bsp-settings-button')) {
|
||||||
|
document.body.insertAdjacentHTML('beforeend', ${JSON.stringify(settingsButtonHTML)});
|
||||||
|
document.getElementById('bsp-settings-button').addEventListener('click', () => {
|
||||||
|
window.postMessage('open-settings', '*');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
`).catch(err => {
|
||||||
|
console.error('Failed to inject settings button:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('👀 Showing and focusing window');
|
||||||
|
mainWindow.show();
|
||||||
|
mainWindow.focus();
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('❌ Failed to load SEQTA URL:', err);
|
||||||
|
event.reply('seqta-url-error', 'Failed to load SEQTA. Please check your connection and URL.');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close settings window if it exists
|
||||||
|
if (settingsWindow && !settingsWindow.isDestroyed()) {
|
||||||
|
console.log('🚪 Closing settings window');
|
||||||
|
settingsWindow.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
-244
@@ -1,244 +0,0 @@
|
|||||||
<html class="reveal-full-page"><head>
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
const originalConsole = window.console;
|
|
||||||
window.console = {
|
|
||||||
log: (...args) => {
|
|
||||||
originalConsole.log(...args);
|
|
||||||
window.parent.postMessage({ type: 'console', message: args.join(' ') }, '*');
|
|
||||||
},
|
|
||||||
error: (...args) => {
|
|
||||||
originalConsole.error(...args);
|
|
||||||
window.parent.postMessage({ type: 'console', message: 'Error: ' + args.join(' ') }, '*');
|
|
||||||
},
|
|
||||||
warn: (...args) => {
|
|
||||||
originalConsole.warn(...args);
|
|
||||||
window.parent.postMessage({ type: 'console', message: 'Warning: ' + args.join(' ') }, '*');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('error', (event) => {
|
|
||||||
window.parent.postMessage({ type: 'console', message: 'Uncaught Error: ' + event.message }, '*');
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/night.min.css">
|
|
||||||
<link rel="stylesheet" href="https://sethburkart123.github.io/sf-pro-fonts/fonts.css" />
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
font-family: 'SF Pro Display', sans-serif !important;
|
|
||||||
}
|
|
||||||
.reveal section img {
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.custom-fragment {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.8s ease;
|
|
||||||
}
|
|
||||||
.visible {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.reveal .slides section {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.reveal h1, .reveal h2 {
|
|
||||||
color: #58a6ff;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
.reveal h3 {
|
|
||||||
color: #79c0ff;
|
|
||||||
}
|
|
||||||
.reveal .highlight {
|
|
||||||
color: #7ee787;
|
|
||||||
}
|
|
||||||
.reveal .container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.reveal .box {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.reveal code {
|
|
||||||
background: #1f2937;
|
|
||||||
padding: 3px 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="reveal-viewport" style="--slide-width: 960px; --slide-height: 700px;">
|
|
||||||
<div class="reveal slide center focused has-vertical-slides has-horizontal-slides" role="application" data-transition-speed="default" data-background-transition="fade" style="">
|
|
||||||
<div class="slides no-transition" style="width: 960px; height: 700px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(0.527);">
|
|
||||||
<!-- Title Slide -->
|
|
||||||
<section style="top: 0px; display: block;" class="present">
|
|
||||||
<h1>SHA-256: The Digital Fingerprint Maker</h1>
|
|
||||||
<h3>A Journey into Modern Cryptographic Security</h3>
|
|
||||||
<p>An interactive exploration of how SHA-256 keeps our digital world secure</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- What is SHA-256? -->
|
|
||||||
<section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future">
|
|
||||||
<section style="top: 97.5px; display: block;">
|
|
||||||
<h2>What is SHA-256?</h2>
|
|
||||||
<p>Think of SHA-256 as a magical fingerprint machine for digital data:</p>
|
|
||||||
<ul>
|
|
||||||
<li class="fragment" data-fragment-index="0">Takes <em>any</em> digital input (like a message or file)</li>
|
|
||||||
<li class="fragment" data-fragment-index="1">Always produces a unique 256-bit (64 character) fingerprint</li>
|
|
||||||
<li class="fragment" data-fragment-index="2">Even a tiny change creates a completely different fingerprint!</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- How it Works -->
|
|
||||||
<section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future">
|
|
||||||
<section style="top: 62px; display: block;">
|
|
||||||
<h2>How SHA-256 Works 🔨</h2>
|
|
||||||
<p>Imagine a complex assembly line that processes your data:</p>
|
|
||||||
<div class="container">
|
|
||||||
<div class="box fragment" data-fragment-index="0">
|
|
||||||
<h3>1. Preparation</h3>
|
|
||||||
<p>Data is padded like fitting puzzle pieces into fixed 512-bit blocks</p>
|
|
||||||
</div>
|
|
||||||
<div class="box fragment" data-fragment-index="1">
|
|
||||||
<h3>2. Processing</h3>
|
|
||||||
<p>64 rounds of mathematical "mixing" operations</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="future" aria-hidden="true" style="top: 350px; display: none;">
|
|
||||||
<h3>The SHA-256 Process Visualized</h3>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<svg viewBox="0 0 800 300" style="max-width: 800px;">
|
|
||||||
<!-- Input -->
|
|
||||||
<rect x="50" y="50" width="150" height="60" fill="#58a6ff" opacity="0.8"></rect>
|
|
||||||
<text x="125" y="85" text-anchor="middle" fill="white">Input Data</text>
|
|
||||||
|
|
||||||
<!-- Arrow 1 -->
|
|
||||||
<path d="M200 80 L300 80" stroke="white" stroke-width="2" marker-end="url(#arrowhead)"></path>
|
|
||||||
|
|
||||||
<!-- Processing -->
|
|
||||||
<rect x="300" y="40" width="200" height="80" fill="#7ee787" opacity="0.8"></rect>
|
|
||||||
<text x="400" y="85" text-anchor="middle" fill="white">SHA-256 Processing</text>
|
|
||||||
|
|
||||||
<!-- Arrow 2 -->
|
|
||||||
<path d="M500 80 L600 80" stroke="white" stroke-width="2" marker-end="url(#arrowhead)"></path>
|
|
||||||
|
|
||||||
<!-- Output -->
|
|
||||||
<rect x="600" y="50" width="150" height="60" fill="#ff7b72" opacity="0.8"></rect>
|
|
||||||
<text x="675" y="85" text-anchor="middle" fill="white">256-bit Hash</text>
|
|
||||||
|
|
||||||
<!-- Arrow Marker -->
|
|
||||||
<defs>
|
|
||||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
||||||
<polygon points="0 0, 10 3.5, 0 7" fill="white"></polygon>
|
|
||||||
</marker>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Real-world Applications -->
|
|
||||||
<section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="stack future">
|
|
||||||
<section style="top: 350px; display: none;">
|
|
||||||
<h2>Where is SHA-256 Used?</h2>
|
|
||||||
<div class="container">
|
|
||||||
<div class="box fragment" data-fragment-index="0">
|
|
||||||
<h3>Password Storage</h3>
|
|
||||||
<p>Websites store password fingerprints, not actual passwords</p>
|
|
||||||
</div>
|
|
||||||
<div class="box fragment" data-fragment-index="1">
|
|
||||||
<h3>⛓️ Blockchain</h3>
|
|
||||||
<p>Powers cryptocurrency mining and verification</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="future" aria-hidden="true" style="top: 350px; display: none;">
|
|
||||||
<h3>More Applications</h3>
|
|
||||||
<div class="container">
|
|
||||||
<div class="box fragment" data-fragment-index="0">
|
|
||||||
<h3>Digital Signatures</h3>
|
|
||||||
<p>Verify document authenticity</p>
|
|
||||||
</div>
|
|
||||||
<div class="box fragment" data-fragment-index="1">
|
|
||||||
<h3>File Integrity</h3>
|
|
||||||
<p>Ensure downloads aren't tampered with</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Strengths -->
|
|
||||||
<section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
|
|
||||||
<h2>Why SHA-256 is Strong 💪</h2>
|
|
||||||
<ul>
|
|
||||||
<li class="fragment" data-fragment-index="0">Collision Resistance: Like finding two people with identical fingerprints</li>
|
|
||||||
<li class="fragment" data-fragment-index="1">One-way Function: Can't reconstruct original data from hash</li>
|
|
||||||
<li class="fragment" data-fragment-index="2">Avalanche Effect: Tiny changes cause completely different outputs</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Interactive Demo -->
|
|
||||||
<section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
|
|
||||||
<h2>The Avalanche Effect 🌊</h2>
|
|
||||||
<div class="box">
|
|
||||||
<p>Original message: "Hello, World!"</p>
|
|
||||||
<code>a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e</code>
|
|
||||||
</div>
|
|
||||||
<div class="box fragment" data-fragment-index="0">
|
|
||||||
<p>Changed to: "Hello, World?"</p>
|
|
||||||
<code>7d1a54127b222502f5b79b5fb0803061152a44f92b37e23c6527baf665d4da9a</code>
|
|
||||||
</div>
|
|
||||||
<p class="fragment" data-fragment-index="1">Notice how one character change creates a completely different hash!</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Limitations -->
|
|
||||||
<section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
|
|
||||||
<h2>Challenges & Future 🔮</h2>
|
|
||||||
<ul>
|
|
||||||
<li class="fragment" data-fragment-index="0">Requires more computing power than older algorithms</li>
|
|
||||||
<li class="fragment" data-fragment-index="1">Theoretical vulnerability to quantum computers (but not yet practical)</li>
|
|
||||||
<li class="fragment" data-fragment-index="2">Still considered very secure for current and near-future use</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Summary -->
|
|
||||||
<section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future">
|
|
||||||
<h2>Key Takeaways 🎯</h2>
|
|
||||||
<ul>
|
|
||||||
<li class="fragment" data-fragment-index="0">SHA-256 creates unique digital fingerprints</li>
|
|
||||||
<li class="fragment" data-fragment-index="1">Powers modern security in passwords, blockchain, and more</li>
|
|
||||||
<li class="fragment" data-fragment-index="2">Extremely secure against current technology</li>
|
|
||||||
<li class="fragment" data-fragment-index="3">Essential part of our digital infrastructure</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-number" style="display: block;"><a href="#/">
|
|
||||||
<span class="slide-number-a">1</span>
|
|
||||||
</a></div><aside class="controls" data-controls-layout="bottom-right" data-controls-back-arrows="faded" style="display: block;"><button class="navigate-left" aria-label="previous slide" disabled="disabled"><div class="controls-arrow"></div></button>
|
|
||||||
<button class="navigate-right enabled highlight" aria-label="next slide"><div class="controls-arrow"></div></button>
|
|
||||||
<button class="navigate-up" aria-label="above slide" disabled="disabled"><div class="controls-arrow"></div></button>
|
|
||||||
<button class="navigate-down" aria-label="below slide" disabled="disabled"><div class="controls-arrow"></div></button></aside><div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div><div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div><div class="pause-overlay"><button class="resume-button">Resume presentation</button></div><div class="aria-status" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">SHA-256: The Digital Fingerprint Maker 🔐 A Journey into Modern Cryptographic Security An interactive exploration of how SHA-256 keeps our digital world secure </div></div>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.js"></script>
|
|
||||||
<script>
|
|
||||||
Reveal.initialize({
|
|
||||||
hash: true,
|
|
||||||
slideNumber: true,
|
|
||||||
transition: 'slide',
|
|
||||||
controls: true,
|
|
||||||
progress: true
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
|
||||||
+52
-1
@@ -3,6 +3,7 @@
|
|||||||
"version": "3.4.2",
|
"version": "3.4.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, while incorporating a plethora of new and improved features!",
|
"description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, while incorporating a plethora of new and improved features!",
|
||||||
|
"main": "electron/main.js",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "cross-env MODE=chrome vite dev",
|
"dev": "cross-env MODE=chrome vite dev",
|
||||||
@@ -14,7 +15,11 @@
|
|||||||
"convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
|
"convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari",
|
||||||
"release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
|
"release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes",
|
||||||
"publish": "bun lib/publish.js --b",
|
"publish": "bun lib/publish.js --b",
|
||||||
"zip": "bedframe zip"
|
"zip": "bedframe zip",
|
||||||
|
"electron-dev": "electron .",
|
||||||
|
"electron-build": "electron-builder",
|
||||||
|
"electron-pack": "npm run build:chrome && electron-builder --dir",
|
||||||
|
"electron-dist": "npm run build:chrome && electron-builder"
|
||||||
},
|
},
|
||||||
"targets": {
|
"targets": {
|
||||||
"prod": {
|
"prod": {
|
||||||
@@ -37,6 +42,8 @@
|
|||||||
"@types/mime-types": "^2.1.4",
|
"@types/mime-types": "^2.1.4",
|
||||||
"@vitejs/plugin-react-swc": "^3.7.0",
|
"@vitejs/plugin-react-swc": "^3.7.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
|
"electron": "^33.2.1",
|
||||||
|
"electron-builder": "^25.1.8",
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.57.0",
|
||||||
"glob": "^11.0.0",
|
"glob": "^11.0.0",
|
||||||
"mime-types": "^2.1.35",
|
"mime-types": "^2.1.35",
|
||||||
@@ -74,6 +81,7 @@
|
|||||||
"codemirror": "^6.0.1",
|
"codemirror": "^6.0.1",
|
||||||
"color": "^4.2.3",
|
"color": "^4.2.3",
|
||||||
"dompurify": "^3.1.6",
|
"dompurify": "^3.1.6",
|
||||||
|
"electron-store": "^10.0.0",
|
||||||
"embla-carousel-autoplay": "^8.3.1",
|
"embla-carousel-autoplay": "^8.3.1",
|
||||||
"embla-carousel-svelte": "^8.3.1",
|
"embla-carousel-svelte": "^8.3.1",
|
||||||
"fuse.js": "^7.0.0",
|
"fuse.js": "^7.0.0",
|
||||||
@@ -95,5 +103,48 @@
|
|||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"vite": "^5.4.4",
|
"vite": "^5.4.4",
|
||||||
"webextension-polyfill": "^0.10.0"
|
"webextension-polyfill": "^0.10.0"
|
||||||
|
},
|
||||||
|
"build": {
|
||||||
|
"appId": "com.betterseqta.app",
|
||||||
|
"productName": "BetterSEQTA",
|
||||||
|
"directories": {
|
||||||
|
"output": "electron-dist",
|
||||||
|
"buildResources": "build"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist/**/*",
|
||||||
|
"electron/**/*",
|
||||||
|
"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
|
||||||
|
"!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
|
||||||
|
"!**/node_modules/*.d.ts",
|
||||||
|
"!**/node_modules/.bin",
|
||||||
|
"!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
|
||||||
|
"!.editorconfig",
|
||||||
|
"!**/._*",
|
||||||
|
"!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
|
||||||
|
"!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
|
||||||
|
"!**/{appveyor.yml,.travis.yml,circle.yml}",
|
||||||
|
"!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
|
||||||
|
],
|
||||||
|
"extraResources": [
|
||||||
|
{
|
||||||
|
"from": "dist/chrome",
|
||||||
|
"to": "chrome-extension",
|
||||||
|
"filter": ["**/*"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mac": {
|
||||||
|
"category": "public.app-category.education",
|
||||||
|
"target": ["dmg", "zip"],
|
||||||
|
"icon": "build/icon.icns"
|
||||||
|
},
|
||||||
|
"win": {
|
||||||
|
"target": "nsis",
|
||||||
|
"icon": "build/icon.ico"
|
||||||
|
},
|
||||||
|
"linux": {
|
||||||
|
"target": "AppImage",
|
||||||
|
"icon": "build/icon.png"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-1
@@ -1019,9 +1019,11 @@ export async function ObserveMenuItemPosition() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function main() {
|
async function main() {
|
||||||
if (typeof settingsState.onoff === 'undefined') {
|
if (typeof settingsState.onoff === 'undefined') {
|
||||||
browser.runtime.sendMessage({ type: 'setDefaultStorage' })
|
browser.runtime.sendMessage({ type: 'setDefaultStorage' })
|
||||||
|
|
||||||
|
await delay(10)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDisabled = () => {
|
const handleDisabled = () => {
|
||||||
|
|||||||
@@ -1,402 +0,0 @@
|
|||||||
https://sethburkart123.github.io/sf-pro-https://sethburkart123.github.io/sf-pro-fonts/fonts/
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Pro Display
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 100;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralight.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralight.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralight.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 200;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thin.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thin.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thin.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-light.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-light.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-light.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regular.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regular.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regular.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-medium.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-medium.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-medium.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibold.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibold.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bold.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bold.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavy.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavy.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavy.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 900;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-black.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-black.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-black.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Pro Display Italic
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 100;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralightitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralightitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-ultralightitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 200;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thinitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thinitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-thinitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-lightitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-lightitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-lightitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regularitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regularitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-regularitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-mediumitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-mediumitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-mediumitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibolditalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-semibolditalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bolditalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-bolditalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavyitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavyitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-heavyitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Display';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 900;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-blackitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-blackitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-display-blackitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Pro Text
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-light.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-light.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-light.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regular.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regular.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regular.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-medium.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-medium.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-medium.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibold.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibold.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bold.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bold.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavy.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavy.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavy.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Pro Text Italic
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-lightitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-lightitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-lightitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regularitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regularitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-regularitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-mediumitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-mediumitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-mediumitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibolditalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-semibolditalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bolditalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-bolditalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Pro Text';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavyitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavyitalic.woff') format('woff'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sf-pro-text-heavyitalic.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Mono
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-light.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-light.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-regular.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-regular.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-medium.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-medium.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-semibold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-semibold.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-bold.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-bold.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-heavy.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-heavy.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
|
||||||
* SF Pro Text Italic
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-lightitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-lightitalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-regularitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-regularitalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-mediumitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-mediumitalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-semibolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-semibolditalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-bolditalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-bolditalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'SF Mono';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 800;
|
|
||||||
src: url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-heavyitalic.woff2') format('woff2'),
|
|
||||||
url('https://sethburkart123.github.io/sf-pro-fonts/fonts/sfmono-heavyitalic.woff') format('woff');
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user