mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-06-20 17:39:54 +02:00
1035 lines
64 KiB
HTML
1035 lines
64 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Canvas Refined</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="Canvas_Refined">Canvas Refined</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 width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.5 8.5H15.51M10.5 7.5H10.51M7.5 11.5H7.51M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.6569 19.6569 15 18 15H17.4C17.0284 15 16.8426 15 16.6871 15.0246C15.8313 15.1602 15.1602 15.8313 15.0246 16.6871C15 16.8426 15 17.0284 15 17.4V18C15 19.6569 13.6569 21 12 21ZM16 8.5C16 8.77614 15.7761 9 15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5ZM11 7.5C11 7.77614 10.7761 8 10.5 8C10.2239 8 10 7.77614 10 7.5C10 7.22386 10.2239 7 10.5 7C10.7761 7 11 7.22386 11 7.5ZM8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5Z" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
|
<span data-i18n="styles">Styles</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" style="display:none">
|
|
<!-- TODO: scrapped maybe forever -->
|
|
<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" style="display:none;">
|
|
<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> <!-- TODO: Later -->
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_separate_scrollbar" name="todo_separate_scrollbar">
|
|
<label for="todo_separate_scrollbar" class="sub-text" data-i18n="todo_separate_scrollbar">Separate Scrollbar</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_full_height" name="todo_full_height">
|
|
<label for="todo_full_height" class="sub-text" data-i18n="todo_full_height">Force Full Height</label> <!-- TO REMOVE and replace with full height -->
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_hide_feedback" name="todo_hide_feedback">
|
|
<label for="todo_hide_feedback" class="sub-text" data-i18n="todo_hide_feedback">Hide Recent Feedback</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_progress_rings" name="todo_progress_rings">
|
|
<label for="todo_progress_rings" class="sub-text">Show progress rings</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_confetti" name="todo_confetti">
|
|
<label for="todo_confetti" class="sub-text">Show confetti on complete</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="12" id="numTodoItemsSlider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="better_sidebar">
|
|
<input type="radio" id="off" name="better_sidebar">
|
|
<input type="radio" id="on" name="better_sidebar">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="better_sidebar">Better Sidebar</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div style="margin-top: 5px">
|
|
<span class="sub-text">Sidebar scale: </span><span id="sidebarScaleValue"></span><span class="sub-text">%</span>
|
|
<input type="range" min="70" max="150" id="sidebarScaleSlider">
|
|
</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">Full Width Fix</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" style="display:none;">
|
|
<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 class="sub-option">
|
|
<input type="checkbox" id="export-customStyles" />
|
|
<span>Custom card styles</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-background" />
|
|
<span>Background image</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="advanced-cards">
|
|
<div class="card-grid" id="card-grid">
|
|
|
|
</div>
|
|
<div class="card-edit-menu" id="card-edit-menu" style="display:none;">
|
|
|
|
</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>Get Active Cards From Dashboard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-container">
|
|
<h3 class="header-small">More Card Styles</h3>
|
|
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="customCardStyles" name="customCardStyles">
|
|
<label for="customCardStyles" class="sub-text">Custom Card Styles</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Image Size</span>
|
|
<input type="number" id="imageSize" class="card-input" min="0" max="300" value="1" style="width:80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Roundness</span>
|
|
<input type="number" id="cardRoundness" class="card-input" min="0" max="300" value="1" style="width:80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Extra Card Spacing</span>
|
|
<input type="number" id="cardSpacing" class="card-input" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Width</span>
|
|
<input type="number" id="cardWidth" class="card-input" min="0" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Height</span>
|
|
<input type="number" id="cardHeight" class="card-input" min="0" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="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">
|
|
<!-- TODO: make this a dropdown -->
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="styles">Styles</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small" id="fontsDropdown" style="cursor:pointer; display:flex; align-items:center; gap:8px;">
|
|
Dashboard Font
|
|
<img id="fontsDropdownArrow" style="transform:rotate(180deg);" src="../icon/dropdownArrow.svg" width="16px" height="16px">
|
|
</h3>
|
|
|
|
<div id="quick-fonts"></div>
|
|
|
|
<div style="margin-top:10px;" class="custom-font">
|
|
<h3 class="header-small">Custom Fonts</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="custom-font option-container">
|
|
<h3 class="header-small">Custom Background</h3>
|
|
<p>Pick a preset or use your own image url.</p>
|
|
<div class="background-preset-grid" id="background-presets"></div>
|
|
<div class="background-scale-row">
|
|
<div style="display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;">
|
|
<span class="sub-text" style="font-weight:600; color:#e2e2e2;">Image scale</span>
|
|
<span class="sub-text" id="customBackgroundScaleValue">100%</span>
|
|
</div>
|
|
<input type="range" min="50" max="200" step="1" id="customBackgroundScale">
|
|
</div>
|
|
<input style="width:85%;" class="card-input" id="customBackgroundLink" placeholder="https://...">
|
|
<button id="clearCustomBackground" class="big-button" style="margin-top: 8px;">Clear Background</button>
|
|
</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>
|
|
|
|
<script type="text/javascript" src="../js/themes.js"></script>
|
|
<script type="text/javascript" src="../js/backgrounds.js"></script>
|
|
<script type="text/javascript" src="../js/popup.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |