mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-06-21 09:59:55 +02:00
1084 lines
64 KiB
HTML
1084 lines
64 KiB
HTML
<!doctype html>
|
|
<html lang="en" style="/*background:linear-gradient(115deg, rgb(255, 53, 88), rgb(255, 131, 73), rgb(255, 103, 187))*/">
|
|
|
|
<head>
|
|
<title>Better Canvas</title>
|
|
<link href="../css/popup.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body style="background: #1a1a1ad6; background: #232323">
|
|
<div id="gradientbg"></div>
|
|
<div id="alert"></div>
|
|
<div class="main">
|
|
<div class="header">
|
|
<img id="bclogo" src="../icon/icon-128.png">
|
|
<h1 data-i18n="better_canvas">Better Canvas</h1>
|
|
</div>
|
|
<div class="more-options-container">
|
|
<button id="customize-dark-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
|
|
<span data-i18n="edit_dark_mode">Edit Dark Mode</span>
|
|
</button>
|
|
<button id="advanced-settings" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path></svg>
|
|
<span data-i18n="card_customization">Card Customization</span>
|
|
</button>
|
|
<button id="card-colors-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path><path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2"></path><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path></svg>
|
|
<span data-i18n="card_colors">Card Colors</span>
|
|
</button>
|
|
<button id="import-export-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path><path d="M21 3a16 16 0 0 0 -12.8 10.2"></path><path d="M21 3a16 16 0 0 1 -10.2 12.8"></path><path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path></svg>
|
|
<span data-i18n="themes">Themes</span>
|
|
</button>
|
|
<button id="custom-font-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 7v-2h13v2"></path><path d="M10 5v14"></path><path d="M12 19h-4"></path><path d="M15 13v-1h6v1"></path><path d="M18 12v7"></path><path d="M17 19h2"></path></svg>
|
|
<span data-i18n="custom_font">Custom Font</span>
|
|
</button>
|
|
<button id="gpa-bounds-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"></path><path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"></path></svg>
|
|
<span data-i18n="gpa_settings">GPA Settings</span>
|
|
</button>
|
|
<button id="report-issue-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
|
|
<span data-i18n="report_issue">Report issue</span>
|
|
</button>
|
|
<button id="updates-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
|
|
<span data-i18n="updates">Updates</span>
|
|
</button>
|
|
</div>
|
|
<div class="options">
|
|
<div class="options-left">
|
|
<div class="option-container">
|
|
<div class="option" id="dark_mode">
|
|
<input type="radio" id="off" name="dark_mode">
|
|
<input type="radio" id="on" name="dark_mode">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="dark_mode">Dark mode</span>
|
|
</div>
|
|
<div class="option" id="auto_dark" style="margin-top:10px">
|
|
<input type="radio" id="off" name="auto_dark">
|
|
<input type="radio" id="on" name="auto_dark">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="automatic_dark_mode">Automatic dark mode</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="timesets">
|
|
<div class="timeset">
|
|
<input type="time" id="auto_dark_start" step="60"></input>
|
|
<span class="sub-text" data-i18n="auto_start_time">Start time</span>
|
|
</div>
|
|
<div class="timeset">
|
|
<input type="time" id="auto_dark_end" step="60"></input>
|
|
<span class="sub-text" data-i18n="auto_end_time">End time</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="device_dark" name="device_dark">
|
|
<label for="device_dark" class="sub-text" data-i18n="device_dark">Use device dark mode settings</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="assignments_due">
|
|
<input type="radio" id="off" name="assignments_due">
|
|
<input type="radio" id="on" name="assignments_due">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="card_assignments">Card assignments</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="assignment_date_format" name="assignment_date_format">
|
|
<label for="assignment_date_format" class="sub-text" data-i18n="useddmm">Use dd/mm</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="card_overdues" name="card_overdues">
|
|
<label for="card_overdues" class="sub-text" data-i18n="show_past_due">Show past due</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="relative_dues" name="relative_dues">
|
|
<label for="relative_dues" class="sub-text" data-i18n="relative_due_dates">Relative due dates</label>
|
|
</div>
|
|
<div style="margin-top: 5px">
|
|
<span class="sub-text" data-i18n="max_items">Max items to show: </span><span
|
|
id="numAssignments"></span>
|
|
<input type="range" min="1" max="10" id="numAssignmentsSlider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="gpa_calc">
|
|
<input type="radio" id="off" name="gpa_calc">
|
|
<input type="radio" id="on" name="gpa_calc">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="gpa_calculator">GPA calculator</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_prepend" name="gpa_calc_prepend">
|
|
<label for="gpa_calc_prepend" class="sub-text" data-i18n="move_top">Move to top</label>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_cumulative" name="gpa_calc_cumulative">
|
|
<label for="gpa_calc_cumulative" class="sub-text" data-i18n="gpa_calc_cumulative">Show cumulative GPA</label>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_weighted" name="gpa_calc_weighted">
|
|
<label for="gpa_calc_weighted" class="sub-text" data-i18n="gpa_calc_weighted">Show weighted GPA</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="dashboard_grades">
|
|
<input type="radio" id="off" name="dashboard_grades">
|
|
<input type="radio" id="on" name="dashboard_grades">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="card_grades">Card Grades</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="grade_hover" name="grade_hover">
|
|
<label for="grade_hover" class="sub-text" data-i18n="grade_hover">Show only when hovering</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="remind">
|
|
<input type="radio" id="off" name="remind">
|
|
<input type="radio" id="on" name="remind">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="todo_remind">Todo Reminders</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="scheduledReminder" name="scheduledReminder">
|
|
<label for="scheduledReminder" class="sub-text">scheduled reminders</label>
|
|
</div>
|
|
<div class="timesets">
|
|
<div class="timeset">
|
|
<input type="time" id="scheduledReminderTime" step="60"></input>
|
|
<span class="sub-text" data-i18n="scheduledReminderTime">Show reminders at specific time</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-right">
|
|
<div class="option-container">
|
|
<div class="option" id="better_todo">
|
|
<input type="radio" id="off" name="better_todo">
|
|
<input type="radio" id="on" name="better_todo">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="better_todo">Better Todo List</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="hover_preview" name="hover_preview">
|
|
<label for="hover_preview" class="sub-text" data-i18n="hover_preview">Hover to preview
|
|
details</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="hide_completed" name="hide_completed">
|
|
<label for="hide_completed" class="sub-text" data-i18n="hide_completed">Hide
|
|
completed</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_hr24" name="todo_hr24">
|
|
<label for="todo_hr24" class="sub-text" data-i18n="24hrformat">Use 24hr format</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_overdues" name="todo_overdues">
|
|
<label for="todo_overdues" class="sub-text" data-i18n="show_past_due">Show past due</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_colors" name="todo_colors">
|
|
<label for="todo_colors" class="sub-text" data-i18n="todo_colors">Use card colors</label>
|
|
</div>
|
|
<div style="margin-top: 5px">
|
|
<span class="sub-text" data-i18n="max_items">Max items to show: </span><span
|
|
id="numTodoItems"></span>
|
|
<input type="range" min="1" max="7" id="numTodoItemsSlider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container" style="display:flex;flex-direction:column;gap:6px;">
|
|
<div class="option" id="dashboard_notes">
|
|
<input type="radio" id="off" name="dashboard_notes">
|
|
<input type="radio" id="on" name="dashboard_notes">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="dashboard_notes">Dashboard Notes</span>
|
|
</div>
|
|
<div class="option" id="gradient_cards">
|
|
<input type="radio" id="off" name="gradient_cards">
|
|
<input type="radio" id="on" name="gradient_cards">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="gradient_cards">Gradient cards</span>
|
|
</div>
|
|
<div class="option" id="condensed_cards">
|
|
<input type="radio" id="off" name="condensed_cards">
|
|
<input type="radio" id="on" name="condensed_cards">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="condensed_cards">Condensed Cards</span>
|
|
</div>
|
|
<div class="option" id="disable_color_overlay">
|
|
<input type="radio" id="off" name="disable_color_overlay">
|
|
<input type="radio" id="on" name="disable_color_overlay">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="disable_color">Disable Color Overlay</span>
|
|
</div>
|
|
<div class="option" id="full_width">
|
|
<input type="radio" id="off" name="full_width">
|
|
<input type="radio" id="on" name="full_width">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="full_width">Dashboard full width</span>
|
|
</div>
|
|
<div class="option" id="remlogo">
|
|
<input type="radio" id="off" name="remlogo">
|
|
<input type="radio" id="on" name="remlogo">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="remlogo">Remove sidebar logo</span>
|
|
</div>
|
|
<div class="option" id="hide_feedback">
|
|
<input type="radio" id="off" name="hide_feedback">
|
|
<input type="radio" id="on" name="hide_feedback">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="hide_feedback">Hide recent feedback</span>
|
|
</div>
|
|
<div class="option" id="tab_icons">
|
|
<input type="radio" id="off" name="tab_icons">
|
|
<input type="radio" id="on" name="tab_icons">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="tab_icons">Color coded tab icons</span>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="customDomain">
|
|
<span data-i18n="enter_url">Your Canvas URL:</span>
|
|
<p style="font-size: 11px;color:#8d8d8d" data-i18n="enter_multiple">(Enter multiple with a comma)</p>
|
|
<input type="text" id="customDomain" placeholder="Or just refresh your Canvas page!"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="import-export tab" style="display: none">
|
|
<div id="submit-popup">
|
|
<div style="max-width: 75%;color:#a7a7a7">
|
|
<h3 class="header-small" style="font-size:18px;color:#fff">Submission confirmation</h3>
|
|
<p style="font-size:14px;margin-top: 10px;font-weight:600;">This is <span style="text-decoration: underline;">not</span> for requesting a theme. I don't create themes by request.</p>
|
|
<p style="margin-top: 10px;">Your submission will include your current thematic settings, such as your card images, dark mode, and font.</p>
|
|
<p style="margin-top: 10px;">Make sure your theme follows these guidelines:</p>
|
|
<ul>
|
|
<li>Appropriate images/title</li>
|
|
<li>Does not heavily use components from other themes</li>
|
|
<li>Uses a unique custom dark mode (not one of the presets)</li>
|
|
<li>Custom images cannot be from Discord or Gmail. These images are not public</li>
|
|
</ul>
|
|
<div style="display: flex; gap: 5px;margin-top:14px;">
|
|
<button id="submit-theme-btn" class="big-button" style="width: 50%;">Submit</button>
|
|
<button id="cancel-theme-btn" class="big-button" style="width: 50%;">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="browser-settings-popup">
|
|
<div style="width: 50%;">
|
|
<h3 class="header-small" style="margin-bottom:14px;font-size:18px;">Theme browser settings</h3>
|
|
<div style="display:flex;gap:8px;align-items: center;color:#a7a7a7">
|
|
<input type="checkbox" id="browser_show_likes">
|
|
<span>Always show like count</span>
|
|
</div>
|
|
<button id="close-settings-btn" class="big-button" style="width: 50%;margin-top:14px;">Close</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="themes">Themes</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="theme-header small-option">
|
|
<h3 class="header-small" style="margin:0">Submit your theme</h3>
|
|
<div class="big-button" id="show-submit-form">Show</div>
|
|
</div>
|
|
<p style="color:#a7a7a7">Do you want to submit your theme for others to use?</p>
|
|
|
|
<div id="submit-drawer" style="display: none;">
|
|
<div>
|
|
<div id="submit-tab">
|
|
<button class="submit-tab-btn active" id="submit-form-btn">Submit</button>
|
|
<button class="submit-tab-btn" id="view-submissions-btn">My submissions</button>
|
|
</div>
|
|
</div>
|
|
<div id="submit-form" style="margin-top:10px;">
|
|
<div style="display: flex;gap:40px;">
|
|
<div>
|
|
<div>
|
|
<p style="font-weight:600;">Title</p>
|
|
<input type="text" class="card-input" id="submit-title">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;">Try to keep this short and relevant so people can search for it.</p>
|
|
</div>
|
|
<div style="margin-top:14px;">
|
|
<p style="font-weight:600;">Created by</p>
|
|
<input type="text" class="card-input" id="submit-credits">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;">This can be anything including your name, social media handle, anonymous etc.</p>
|
|
</div>
|
|
</div>
|
|
<div style="min-width: 25%;">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-bottom:5px;">Preview</p>
|
|
<button id="theme-button-img" class="theme-button customization-button"
|
|
style="width: 100%;background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));">
|
|
<p class="theme-button-title" id="theme-button-title-preview">Title</p>
|
|
<p class="theme-button-creator" id="theme-button-creator-preview">Credits</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;gap:6px;margin-top: 10px;">
|
|
<button id="submit-theme-btn-1" class="big-button">Submit</button>
|
|
</div>
|
|
</div>
|
|
<div id="view-submissions" style="display: none;">
|
|
<div id="latest-submissions"></div>
|
|
<p style="font-size:12px;color:#a4a4a4;margin:6px 0">Showing your latest 3 submissions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="theme-header">
|
|
<div style="display:flex;gap:6px;align-items:center">
|
|
<h3 class="header-small" style="margin:0">User made themes</h3>
|
|
<svg id="browser-settings-btn" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-settings"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" /></svg>
|
|
</div>
|
|
<span id="premade-themes-pagenum"></span>
|
|
</div>
|
|
<div class="theme-controls">
|
|
<div id="theme-sorts-container">
|
|
<button id="theme-sorts">
|
|
<div>
|
|
<svg style="display: block" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrows-up-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3l0 18" /><path d="M10 6l-3 -3l-3 3" /><path d="M20 18l-3 3l-3 -3" /><path d="M17 21l0 -18" /></svg>
|
|
</div>
|
|
<span id="theme-current-sort"></span>
|
|
</button>
|
|
<div id="theme-sort-selector">
|
|
<div id="theme-sort-score" class="theme-sort-btn">Popular</div>
|
|
<div id="theme-sort-trending" class="theme-sort-btn">Trending</div>
|
|
<div id="theme-sort-liked" class="theme-sort-btn">Liked</div>
|
|
<div id="theme-sort-new" class="theme-sort-btn">New</div>
|
|
<div id="theme-sort-old" class="theme-sort-btn">Old</div>
|
|
<div id="theme-sort-abc" class="theme-sort-btn">ABC</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-input" id="theme-search-container">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
|
|
<input type="text" id="theme-search" placeholder="Search">
|
|
</div>
|
|
<div style="display:flex;gap:4px;align-items:center">
|
|
<button id="premade-themes-left">Back</button>
|
|
<button id="premade-themes-right">Next</button>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative">
|
|
<div id="premade-themes"></div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div>
|
|
<h3 class="header-small">Revert theme changes</h3>
|
|
</div>
|
|
<div style="display:flex;gap: 12px;">
|
|
<button id="theme-revert" class="customization-button">Revert</button>
|
|
<p>This will revert customizations back to when you first installed the extension.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="theme-header">
|
|
<h3 class="header-small" style="margin:0;flex:100">My saved themes</h3>
|
|
<button id="save-theme" class="customization-button">+ Save current</button>
|
|
</div>
|
|
<div id="saved-themes"></div>
|
|
</div>
|
|
<div class="export-details option-container">
|
|
<h3 class="header-small">Export Settings</h3>
|
|
<div style="display:flex;gap:30px;">
|
|
<div class="export-inputs">
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-dark" />
|
|
<span>Dark mode</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-cards" />
|
|
<span>Card images</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-colors" />
|
|
<span>Card colors</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-font" />
|
|
<span>Custom font</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-toggles" />
|
|
<span>On/off toggles</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-gpa" />
|
|
<span>GPA settings</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<textarea class="card-input" id="export-output" placeholder="Output"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="import-export-details">
|
|
<div class="import-details option-container">
|
|
<h3 class="header-small">Import</h3>
|
|
<p>Copy and paste exported themes here:</p>
|
|
<div>
|
|
<textarea class="card-input" id="import-input"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="option-container">
|
|
<div class="theme-header">
|
|
<h3 class="header-small" style="margin:0;flex:100">Theme browser opt-in reset</h3>
|
|
</div>
|
|
<div style="display:flex;gap:12px;">
|
|
<button id="reset-optin" class="customization-button">Reset opt-in status</button>
|
|
<p style="color:#a7a7a7">This will bring back the opt-in message so you can select a different option.</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="customize-dark tab" style="display: none">
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="edit_dark_mode">Edit dark mode</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="customization">
|
|
<div class="container">
|
|
<div class="option-container">
|
|
<h3 class="header-small" data-i18n="presets">Presets</h3>
|
|
<div class="options-presets">
|
|
<button id="dark-lighter" class="preset-button customization-button" style="background:#272727;border:1px solid #454545;color:#f5f5f5" data-i18n="dark_lighter">Lighter</button>
|
|
<button id="dark-light" class="preset-button customization-button" style="background:#202020;border:1px solid #404040;color:#f5f5f5" data-i18n="dark_light">Light</button>
|
|
<button id="dark-default" class="preset-button customization-button" style="background:#161616;border:1px solid #3c3c3c;color:#f5f5f5" data-i18n="dark_default">Default</button>
|
|
<button id="dark-dark" class="preset-button customization-button" style="background:#101010;border:1px solid #272727;color:#f5f5f5" data-i18n="dark_dark">Dark</button>
|
|
<button id="dark-darker" class="preset-button customization-button" style="background:#000000;border:1px solid #000000;color:#c5c5c5" data-i18n="dark_darker">Darker</button>
|
|
<button id="dark-mint" class="preset-button customization-button" style="background:#0f0f0f;border:1px solid #1e1e1e;color:#7CF3CB" data-i18n="dark_mint">Mint</button>
|
|
<button id="dark-blue" class="preset-button customization-button" style="background:#14181d;border:1px solid #2e3943;color:#f5f5f5" data-i18n="dark_blue">Blue Tint</button>
|
|
<button id="dark-burn" class="preset-button customization-button" style="background:#ffffff;border:1px solid #cccccc;color:#9d9a9a" data-i18n="dark_burn">Eyeball Burn</button>
|
|
<button id="dark-unicorn" class="preset-button customization-button" style="background:#ff6090;border:1px solid #00C1FF;color:#FFFF00" data-i18n="dark_unicorn">Unicorn</button>
|
|
<button id="dark-lightmode" class="preset-button customization-button" style="background:#fff;border:1px solid #c7cdd1;color:#2d3b45" data-i18n="dark_lightmode">Lightmode</button>
|
|
<button id="dark-catppuccin" class="preset-button customization-button" style="background:#11111b!important;border:1px solid #4f5463;color:#f5c2e7;" data-i18n="dark_catppuccin">Catppuccin<br />by Angel</button>
|
|
<button id="dark-sage" class="preset-button customization-button" style="background:#2f3e46!important;border:1px solid #84a98c;color:#d8f5c7;" data-i18n="dark_sage">Sage<br />by LivDoesDevStuf</button>
|
|
<button id="dark-pink" class="preset-button customization-button" style="background:#ffe0ed!important;border:1px solid #ff007b;color:#ff0088;" data-i18n="dark_pink">Pink<br />by Sayde</button>
|
|
<button id="dark-coral" class="preset-button customization-button" style="background:#131c26!important;border:1px solid #0e1721;color:#f88379;" data-i18n="dark_coral">Coral<br />by Superchido</button>
|
|
<button style="opacity: 0">placeholder</button>
|
|
<button style="opacity: 0">placeholder</button>
|
|
<!--
|
|
<button id="preset-placeholder1" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
<button id="preset-placeholder2" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
<button id="preset-placeholder3" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="option-container">
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_sidebar-text">
|
|
<h3 class="color-type-header" data-i18n="dp_sidebar_text">Sidebar Text</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<h3 class="color-type-header" data-i18n="dp_sidebar">Sidebar</h3>
|
|
<div class="changer-container" id="dp_sidebar" style="align-items: flex-start;">
|
|
<div style="width:160px;margin-top:5px;">
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-solid" name="sidebar-background" data-i18n="radio_sidebar_solid">Solid</input>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-gradient" name="sidebar-background" data-i18n="radio_sidebar_gradient">Gradient</input>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-image" name="sidebar-background" data-i18n="radio_sidebar_image">Image</input>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<div class="sidebar-changer" id="sidebar-color1">
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
<div class="sidebar-changer" id="sidebar-color2">
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
<div class="sidebar-changer" id="sidebar-image">
|
|
<input class="card-input" type="text" placeholder="Image URL"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="color-options">
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-0">
|
|
<h3 class="color-type-header" data-i18n="dp_background_0">Background Main</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-1">
|
|
<h3 class="color-type-header" data-i18n="dp_background_1">Background Alt</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-2">
|
|
<h3 class="color-type-header" data-i18n="dp_background_2">Background Other</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_borders">
|
|
<h3 class="color-type-header" data-i18n="dp_borders">Borders</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_links">
|
|
<h3 class="color-type-header" data-i18n="dp_links">Links</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-0">
|
|
<h3 class="color-type-header" data-i18n="dp_text_0">Text Main</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-1">
|
|
<h3 class="color-type-header" data-i18n="dp_text_1">Text Other</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-2">
|
|
|
|
<h3 class="color-type-header" data-i18n="dp_text_2">Text Alt</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Custom styles</h3>
|
|
<p style="color:#a4a4a4">You can use this area to write custom CSS styles. You may need to add an !important rule to force them to take effect.</p>
|
|
<textarea id="custom-styles" class="card-input"></textarea>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small" data-i18n="dark_mode_fixer">Dark mode fixer (beta)</h3>
|
|
<div style="display: flex; gap: 10px;align-items: center">
|
|
<button id="fix-dm-btn" class="big-button" data-i18n="fix_dm_btn">Go</button>
|
|
<span data-i18n="dark_mode_fixer_text">This will try to fix any dark mode gaps on the current page.</span>
|
|
</div>
|
|
<p id="fix-dm-output" style="margin-top: 10px;color:#ffee00;"></p>
|
|
<p style="margin: 15px 0 5px;" data-i18n="fix_dm_text">The fixer is automatically running on these pages:</p>
|
|
<div id="dark-mode-fix-urls">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="advanced tab" style="display:none">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="card_customization">Card Customization</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<p class="option-container sub-text" style="margin: 5px 0">Enter <b>"none"</b> to hide images and links.<br>You may need to refresh the page to see some changes.</p>
|
|
<div class="advanced-cards">
|
|
<div id="advanced-current"></div>
|
|
<div id="advanced-past"></div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Missing cards?</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<input type="checkbox" id="card_method_dashboard"></input>
|
|
<span>Enable alternative card method</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gpa-bounds-container tab" style="display:none">
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="gpa_settings">GPA Calculator Bounds</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div style="display: flex;gap: 8px;">
|
|
<div class="gpa-bounds option-container"></div>
|
|
<div class="gpa-bounds-explanation option-container">
|
|
The letter grade will be calculated as greater than or equal to the percentage given. <br><br>
|
|
If your school doesn't use the +/- system, you can enter 101 for those grades to remove them from the
|
|
calculation. (for example A+ = 101, A = 90, A- = 101)
|
|
<h3 class="header-small" style="margin-top: 20px;">GPA Scale Presets 0-4</h3>
|
|
<button class="big-button" id="gpa-plus-minus">+/- GPA Scale</button>
|
|
<button class="big-button" id="gpa-by-letter">By Letter GPA Scale</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-font-container tab" style="display:none">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="custom_font">Custom Font</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div>
|
|
<div class="quick-fonts-container">
|
|
<div class="option-container">
|
|
<h3 class="header-small">Popular Fonts</h3>
|
|
<div id="quick-fonts"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="custom-font option-container">
|
|
<h3 class="header-small">Custom Font</h3>
|
|
<p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family="
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-colors-container tab" style="display:none">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="card_colors">Card Color Palettes</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container">
|
|
<p class="sub-text"><b>Disable High Contrast UI</b> if your colors become duller after refreshing! On the sidebar, if you click on your profile icon you can turn it off there.</p>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Popular Palettes</h3>
|
|
<div class="options-presets">
|
|
<button id="revert-colors" class="colors-button">Revert to original</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Reds</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Oranges</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Greens</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Blues</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Pinks</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Purples</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Pastels</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Mesa</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fade</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fade2</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Ocean</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Watermelon</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Army</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Rainbow</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Sunset</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Popsicle</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Berries</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fruit</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Night</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Base</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Muted</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Candy</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Chess</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Single color</h3>
|
|
<p>Choose a color to set all cards to that color:</p>
|
|
<div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#34FECB" id="singleColorInput" class="color-picker-small"></input>
|
|
<input type="text" class="card-input" value="#34FECB" id="singleColorText" />
|
|
<button id="setSingleColor" class="big-button">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Gradient</h3>
|
|
<p>Choose 2 colors to create a gradient between them:</p>
|
|
<div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#EA76DA" id="gradientColorFrom" class="color-picker-small" />
|
|
<input type="text" class="card-input" value="#EA76DA" id="gradientColorFromText" />
|
|
</div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#7B61FF" id="gradientColorTo" class="color-picker-small" />
|
|
<input type="text" class="card-input" value="#7B61FF" id="gradientColorToText" />
|
|
<button id="setGradientColor" class="big-button">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-issue-container tab">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="report_issue">Report issue</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<p class="option-container">You can also email <b style="font-weight:600">sandlerguy5@gmail.com</b> for any issues or feedback. Thank you!</p>
|
|
<p id="dev-alert"></p>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Storage reset</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="storage-reset-btn">Go</button>
|
|
<span>This will reset all settings to the default. You will need to refresh the page after.</span>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Storage Dump</h3>
|
|
<div style="margin-bottom: 10px">
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="rk_btn">Go</button>
|
|
<span>This will retrieve all the settings saved by the extension.</span>
|
|
</div>
|
|
<textarea class="card-input" id="rk_output"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Dark mode inspector</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="inspector-btn">Go</button>
|
|
<span>This will inspect the page for any dark mode gaps.</span>
|
|
</div>
|
|
<div>
|
|
<textarea id="inspector-output" class="card-input"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Card limit</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;width:100%">
|
|
<div>
|
|
<input type="range" max="40" min="5" id="card_limit"></input>
|
|
<p style="text-align: center" id="card_limit_num"></p>
|
|
</div>
|
|
<p><b style="font-weight:600">This is an experimental feature.</b> Adjusting this number will reset your cards and could cause storage issues.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--
|
|
<div class="option-container">
|
|
<h3 class="header-small">Card method</h3>
|
|
<p><b style="font-weight:600">This is an experimental feature.</b> You shouldn't need these on.</p>
|
|
<div style="display: flex; gap: 10px; align-items: center;margin-top: 5px;">
|
|
<input type="checkbox" id="card_method_date"></input>
|
|
<span>Date</span>
|
|
</div>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<input type="checkbox" id="card_method_dashboard"></input>
|
|
<span>Dashboard</span>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="option-container">
|
|
<h3 class="header-small">Error log</h3>
|
|
<div>
|
|
<textarea id="error_log_output" class="card-input"></textarea>
|
|
</div>
|
|
</div>
|
|
<p>5.11.2</p>
|
|
</div>
|
|
|
|
<div class="updates-container tab">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="updates">Updates</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container" style="display:flex;gap:8px;">
|
|
<input type="checkbox" id="show_updates"></input>
|
|
<span>Show update messages on dashboard</span>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.11.2</h3>
|
|
<h4 class="update-date">Aug. 31, 2024</h4>
|
|
<ul>
|
|
<li>New themes</li>
|
|
<li>Updated menu</li>
|
|
<li>New sorting function for themes (score, color, alphabetical, date)</li>
|
|
<li>More troubleshooting features</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.10.10</h3>
|
|
<h4 class="update-date">Jul. 15, 2024</h4>
|
|
<ul>
|
|
<li>"Hide recent feedback" feature</li>
|
|
<li>"Color coded tab icons" feature</li>
|
|
<li>"Remove sidebar logo" feature</li>
|
|
<li>"Dark mode fixer" feature</li>
|
|
<li>"Use card colors" option for todo list</li>
|
|
<li>"Use device dark mode settings" option</li>
|
|
<li>Added more themes</li>
|
|
<li>Redesigned menu</li>
|
|
<li>Added cumulative GPA into GPA calculator</li>
|
|
<li>Done items section for todo list (click the "Todo" text to see)</li>
|
|
<li>Card colors now change instantly</li>
|
|
<li>Dark mode buttons preview their appearance</li>
|
|
<li>Dark mode now syncs across devices</li>
|
|
<li>New dark mode sidebar options</li>
|
|
<li>Card customization now shows preview of image</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.8.11</h3>
|
|
<h4 class="update-date">Jan. 8, 2024</h4>
|
|
<ul>
|
|
<li>Card customization now sorts by current/previous</li>
|
|
<li>Added "revert to original" for card colors</li>
|
|
<li>Improved dark mode customization tab</li>
|
|
<li>New import/export themes feature</li>
|
|
<li>Improved menu design</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.7.5</h3>
|
|
<h4 class="update-date">Sep. 8, 2023</h4>
|
|
<ul>
|
|
<li>New card color palletes feature</li>
|
|
<li>Updated gpa calculator interface</li>
|
|
<li>Added espanol language option</li>
|
|
<li>Added color picker input to dark mode customization</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.6.2</h3>
|
|
<h4 class="update-date">Jun. 17, 2023</h4>
|
|
<ul>
|
|
<li>Changes made in the menu no longer require refresh</li>
|
|
<li>Can now change items shown in better todo list</li>
|
|
<li>Added customizable GPA boundaries</li>
|
|
<li>Options now sync between devices</li>
|
|
<li>Added custom card links feature</li>
|
|
<li>Hover to preview details option</li>
|
|
<li>Disable color overlay option</li>
|
|
<li>New uninstall goodbye message</li>
|
|
<li>Added custom fonts feature</li>
|
|
<li>Welcome screen redesign</li>
|
|
<li>Menu redesign</li>
|
|
<li>New logo</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.5.1</h3>
|
|
<h4 class="update-date">Apr. 26, 2023</h4>
|
|
<ul>
|
|
<li>Corrected order of todo list announcements</li>
|
|
<li>GPA calculator now saves credits/weight</li>
|
|
<li>Hide completed assignments option</li>
|
|
<li>Added card customization feature</li>
|
|
<li>Card grade hover only option</li>
|
|
<li>Fixed card assignments bug</li>
|
|
<li>Dark mode improvements</li>
|
|
<li>More dark mode presets</li>
|
|
<li>Custom assignments
|
|
<li>Menu redesign</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.2.1</h3>
|
|
<h4 class="update-date">Feb. 2, 2023</h4>
|
|
<ul>
|
|
<li>Condensed cards feature</li>
|
|
<li>Fixed gradient cards</li>
|
|
<li>Fixed GPA calculator</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.1.4</h3>
|
|
<h4 class="update-date">Jan. 5, 2023</h4>
|
|
<ul>
|
|
<li>Improved URL setup</li>
|
|
<li>Added 24hr format option</li>
|
|
<li>GPA calculator moved to dashboard page</li>
|
|
<li>Dashboard grades moved to the card header</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 5.0.6</h3>
|
|
<h4 class="update-date">Oct. 21, 2022</h4>
|
|
<ul>
|
|
<li>Dark mode improvements</li>
|
|
<li>Can now enter multiple urls for the custom url</li>
|
|
<li>Quizzes link correctly in the assignments list</li>
|
|
<li>"Better todo list" feature</li>
|
|
<li>"Dashboard notes" feature</li>
|
|
<li>Optional dd/mm format for dashboard assignments</li>
|
|
<li>View dark mode changes in real time</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 4.2.1</h3>
|
|
<h4 class="update-date">Mar. 2, 2022</h4>
|
|
<ul>
|
|
<li>Removed assignment potentials and link preview features</li>
|
|
<li>Dark mode can now target iframes (better coverage)</li>
|
|
<li>Added dark mode presets</li>
|
|
<li>"Dashboard grades" feature</li>
|
|
<li>New welcome message</li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Update 1.0.0</h3>
|
|
<h4 class="update-date">Oct. 17, 2021</h4>
|
|
<ul>
|
|
<li>First release :)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../js/themes.js"></script>
|
|
<script type="text/javascript" src="../js/popup.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |