CanvasRefined/html/popup.html
2026-10-25 16:35:44 -07:00

1714 lines
124 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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 class="header-search" id="header-search">
<svg class="header-search-icon" 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"><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="feature-search" data-i18n-placeholder="search_features" placeholder="Search features..." autocomplete="off" spellcheck="false">
<div class="search-results" id="feature-search-results"></div>
</div>
</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">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" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12Z"></path><path d="M10 16H6"></path><path d="M14 16H12.5"></path><path d="M2 10L22 10"></path></svg>
<span data-i18n="card_customization">Card Settings</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" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><path d="M17.5 14.0002L17.5 21.0004"></path><path d="M21.0001 17.5001L14 17.5001"></path></svg>
<span data-i18n="widgets">Widgets</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">
<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="hide_completed_cards" name="hide_completed_cards">
<label for="hide_completed_cards" class="sub-text" data-i18n="hide_completed_cards">Hide completed</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 class="sub-option">
<input type="checkbox" id="equal_height_cards" name="equal_height_cards">
<label for="equal_height_cards" class="sub-text" data-i18n="equal_height_cards">Equal height</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="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 class="sub-option" style="margin-top:5px">
<input type="checkbox" id="card_letter" name="card_letter">
<label for="card_letter" class="sub-text" data-i18n="card_letter">Show letter grade</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>
<div class="option-container">
<div class="option" id="quiz_safe_mode">
<input type="radio" id="off" name="quiz_safe_mode">
<input type="radio" id="on" name="quiz_safe_mode">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="quiz_safe_mode">Quiz Safe Mode</span>
<span class="cr-info-bubble" tabindex="0" role="button" data-i18n-aria-label="quiz_safe_info_label" aria-label="Quiz Safe Mode info">
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<span class="cr-info-bubble-text" data-i18n="quiz_safe_mode_desc">Turns off most Canvas Refined features on quiz pages so you get the default Canvas quiz experience.</span>
</span>
</div>
<div class="option" id="global_search">
<input type="radio" id="off" name="global_search">
<input type="radio" id="on" name="global_search">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="global_search">Global Canvas Search</span>
</div>
<div class="option" id="grade_analytics">
<input type="radio" id="off" name="grade_analytics">
<input type="radio" id="on" name="grade_analytics">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="grade_analytics">Grade Analytics</span>
<span class="cr-info-bubble" tabindex="0" role="button" data-i18n-aria-label="grade_analytics_info_label" aria-label="Grade Analytics info">
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<span class="cr-info-bubble-text" data-i18n="grade_analytics_desc">Adds tools to help you analyze your grades.</span>
</span>
</div>
<div class="sub-options">
<div class="sub-option" style="margin-top:5px">
<input type="checkbox" id="grade_analytics_zones" name="grade_analytics_zones">
<label for="grade_analytics_zones" class="sub-text" data-i18n="grade_analytics_zones">Colored grade zones</label>
</div>
</div>
</div>
<div class="option-container" id="language-selector-container">
<div class="sub-option widget-inline-row" style="margin-top:0;">
<label for="language-select" class="sub-text widget-inline-label" data-i18n="language">Language</label>
<select id="language-select" class="widget-pos widget-inline-select"></select>
</div>
</div>
<div class="option-container">
<div class="customDomain">
<span data-i18n="enter_url">Your Canvas URLs:</span>
<div id="custom-domain-list"></div>
<button id="add-domain-btn" class="customization-button" data-i18n="add_canvas">+ Add canvas</button>
<div class="domain-toggles">
<div class="sub-option">
<input type="checkbox" id="auto_detect_disabled" name="auto_detect_disabled">
<label for="auto_detect_disabled" class="sub-text" data-i18n="no_auto_detect">Don't auto detect canvases</label>
</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">
<!-- Frequently-changed options stay visible; rarer ones live in the collapsible "More options" section below -->
<div class="sub-option" style="flex-direction:column;align-items:stretch;gap:4px;">
<label for="todo_progress_rings" class="sub-text" data-i18n="todo_progress_display">Progress display</label>
<select id="todo_progress_rings" name="todo_progress_rings">
<option value="none" data-i18n="todo_progress_none">None</option>
<option value="rings" data-i18n="todo_progress_rings">Rings</option>
<option value="rainbow" data-i18n="todo_progress_rainbow">Rainbow</option>
<option value="lines" data-i18n="todo_progress_lines">Multiple lines</option>
<option value="line" data-i18n="todo_progress_line">One line</option>
</select>
</div>
<div class="sub-option" style="flex-direction:column;align-items:stretch;gap:4px;">
<label for="todo_timeframe" class="sub-text" data-i18n="todo_timeframe">Time frame</label>
<select id="todo_timeframe" name="todo_timeframe">
<option value="all" data-i18n="todo_timeframe_all">All time</option>
<option value="1week" data-i18n="todo_timeframe_1week">1 week</option>
<option value="2week" data-i18n="todo_timeframe_2week">2 weeks</option>
<option value="month" data-i18n="todo_timeframe_month">Month</option>
<option value="2month" data-i18n="todo_timeframe_2month">2 months</option>
<option value="custom" data-i18n="todo_timeframe_custom">Custom</option>
</select>
<div id="todo_timeframe_custom" class="custom-tf-wrap">
<div class="custom-tf-row">
<span class="sub-text" data-i18n="todo_timeframe_from">From</span>
<input type="number" id="todo_timeframe_custom_past" min="0" max="365">
<span class="sub-text" data-i18n="todo_timeframe_days_ago">days ago</span>
</div>
<div class="custom-tf-row">
<span class="sub-text" data-i18n="todo_timeframe_to">To</span>
<input type="number" id="todo_timeframe_custom_future" min="0" max="365">
<span class="sub-text" data-i18n="todo_timeframe_days_future">days from now</span>
</div>
</div>
</div>
<div class="sub-option">
<input type="checkbox" id="hover_preview" name="hover_preview">
<label for="hover_preview" class="sub-text" data-i18n="hover_preview">Previews on hover</label>
</div>
<div class="sub-option">
<input type="checkbox" id="todo_show_scores" name="todo_show_scores">
<label for="todo_show_scores" class="sub-text" data-i18n="todo_show_scores">Show assignment scores</label>
</div>
<div class="sub-option">
<input type="checkbox" id="todo_hide_read" name="todo_hide_read">
<label for="todo_hide_read" class="sub-text" data-i18n="todo_hide_read">Hide read announcements</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 class="todo-more-options" id="todo-more-options">
<div class="todo-more-toggle" id="todo-more-toggle" role="button" tabindex="0" aria-expanded="false" aria-controls="todo-more-items">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
<span data-i18n="more_options">More options</span>
</div>
<div class="todo-more-items" id="todo-more-items">
<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" id="todo_alternate_colors_wrap" style="display:none;">
<input type="checkbox" id="todo_alternate_colors" name="todo_alternate_colors">
<label for="todo_alternate_colors" class="sub-text" data-i18n="todo_alternate_colors">Alternate colors</label>
</div>
<div class="sub-option">
<input type="checkbox" id="todo_ignore_card_colors" name="todo_ignore_card_colors">
<label for="todo_ignore_card_colors" class="sub-text" data-i18n="todo_ignore_colors">Ignore card colors</label>
</div>
<div class="sub-option">
<input type="checkbox" id="todo_remove_icons" name="todo_remove_icons">
<label for="todo_remove_icons" class="sub-text" data-i18n="todo_remove_icons">Remove icons</label>
</div>
</div>
</div>
</div>
</div>
<div class="option-container" id="celebrations-container">
<div class="option" id="todo_celebrations_enabled" style="margin-top:0">
<input type="radio" id="off" name="todo_celebrations_enabled">
<input type="radio" id="on" name="todo_celebrations_enabled">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div>
<span class="option-name" data-i18n="celebration">Celebration</span>
</div>
<div class="sub-option celebration-sub" id="celebration-type-row" style="margin-top:6px;flex-direction:column;align-items:stretch;gap:4px;">
<span class="sub-text" data-i18n="celebration_type">Celebration type</span>
<div class="cr-multiselect" id="todo_celebrations">
<button type="button" class="cr-multiselect-btn" id="todo_celebrations_btn" aria-haspopup="listbox" aria-expanded="false">
<span id="todo_celebrations_label" data-i18n="celebration_confetti">Confetti</span>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6 6-6" /></svg>
</button>
<div class="cr-multiselect-menu" id="todo_celebrations_menu" role="listbox" aria-multiselectable="true"></div>
</div>
</div>
<div class="sub-option celebration-sub" id="celebration-amount-row" style="flex-direction:column;align-items:stretch;gap:4px;">
<label for="todo_celebration_amount" class="sub-text" data-i18n="celebration_amount">Amount</label>
<select id="todo_celebration_amount" name="todo_celebration_amount">
<option value="less" data-i18n="celebration_less">Less</option>
<option value="normal" data-i18n="celebration_normal">Normal</option>
<option value="more" data-i18n="celebration_more">More</option>
<option value="crazy" data-i18n="celebration_crazy">Crazy</option>
</select>
</div>
<button type="button" id="celebration-preview-btn" class="customization-button celebration-sub" style="margin-top:8px;width:100%;" data-i18n="celebration_preview">Preview celebration</button>
</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 class="option" id="remlogo" style="margin-top:2px">
<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="sub-option">
<input type="checkbox" id="hide_navbar" name="hide_navbar">
<label for="hide_navbar" class="sub-text" data-i18n="hide_navbar">Hide Navigation Bar</label>
</div>
<div style="margin-top: 5px" id="sidebarScaleSub">
<span class="sub-text" data-i18n="sidebar_scale">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">
<div class="option" id="center_cards">
<input type="radio" id="off" name="center_cards">
<input type="radio" id="on" name="center_cards">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div>
<span class="option-name" data-i18n="center_cards">Center Cards</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="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 class="option" id="hide_new_canvas">
<input type="radio" id="off" name="hide_new_canvas">
<input type="radio" id="on" name="hide_new_canvas">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="hide_new_canvas">Hide New Dashboard</span>
</div>
<div class="option" id="hide_sequence_footer">
<input type="radio" id="off" name="hide_sequence_footer">
<input type="radio" id="on" name="hide_sequence_footer">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="hide_sequence_footer">Hide Next/Previous Buttons</span>
</div>
</div>
</div>
</div>
<div class="social-footer" id="social-footer">
<div class="social-buttons" id="social-buttons">
<a class="discord-button" href="https://discord.gg/GjFh4JA3wh" target="_blank" rel="noopener noreferrer" data-i18n-title="join_discord" title="Join our Discord">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
<span>Discord</span>
</a>
<a class="github-button" href="https://github.com/GuySandler/CanvasRefined" target="_blank" rel="noopener noreferrer" data-i18n-title="view_on_github" title="View on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
<span>GitHub</span>
</a>
</div>
<a class="rate-link" id="rate-link" href="https://chromewebstore.google.com/detail/canvas-refined/ihienfbdfdamhmhhiokjnjmpjgbenedg/reviews" target="_blank" rel="noopener noreferrer" data-i18n="rate_us_chrome">Enjoying the extension? Rate us on the Chrome Web Store!</a>
<div class="social-toggle" id="social-toggle" role="button" tabindex="0" data-i18n="hide_links">Hide links</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" data-i18n="submission_confirmation">Submission confirmation</h3>
<p style="font-size:14px;margin-top: 10px;font-weight:600;" data-i18n="not_for_request">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;" data-i18n="submission_includes">Your submission will include your current thematic settings, such as your card images, dark mode, and font.</p>
<p style="margin-top: 10px;" data-i18n="theme_guidelines">Make sure your theme follows these guidelines:</p>
<ul>
<li data-i18n="guideline_1">Appropriate images/title</li>
<li data-i18n="guideline_2">Does not heavily use components from other themes</li>
<li data-i18n="guideline_3">Uses a unique custom dark mode (not one of the presets)</li>
<li data-i18n="guideline_4">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%;" data-i18n="submit">Submit</button>
<button id="cancel-theme-btn" class="big-button" style="width: 50%;" data-i18n="cancel">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;" data-i18n="theme_browser_settings">Theme browser settings</h3>
<div style="display:flex;gap:8px;align-items: center;color:#a7a7a7">
<input type="checkbox" id="browser_show_likes">
<span data-i18n="always_show_likes">Always show like count</span>
</div>
<button id="close-settings-btn" class="big-button" style="width: 50%;margin-top:14px;" data-i18n="close">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" data-i18n="submit_your_theme">Submit your theme</h3>
<div class="big-button" id="show-submit-form" data-i18n="show">Show</div>
</div>
<p style="color:#a7a7a7" data-i18n="do_you_want_submit">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" data-i18n="submit">Submit</button>
<button class="submit-tab-btn" id="view-submissions-btn" data-i18n="my_submissions">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;" data-i18n="title_label">Title</p>
<input type="text" class="card-input" id="submit-title">
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;" data-i18n="title_hint">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;" data-i18n="created_by">Created by</p>
<input type="text" class="card-input" id="submit-credits">
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;" data-i18n="created_by_hint">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;" data-i18n="preview">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" data-i18n="preview_title_default">Title</p>
<p class="theme-button-creator" id="theme-button-creator-preview" data-i18n="preview_creator_default">Credits</p>
</button>
</div>
</div>
<div style="display: flex;gap:6px;margin-top: 10px;">
<button id="submit-theme-btn-1" class="big-button" data-i18n="submit">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" data-i18n="showing_submissions">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" data-i18n="user_made_themes">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" data-i18n="popular">Popular</div>
<div id="theme-sort-trending" class="theme-sort-btn" data-i18n="trending">Trending</div>
<div id="theme-sort-liked" class="theme-sort-btn" data-i18n="liked">Liked</div>
<div id="theme-sort-new" class="theme-sort-btn" data-i18n="new_label">New</div>
<div id="theme-sort-old" class="theme-sort-btn" data-i18n="old_label">Old</div>
<div id="theme-sort-abc" class="theme-sort-btn" data-i18n="abc">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" data-i18n-placeholder="search">
</div>
<div style="display:flex;gap:4px;align-items:center">
<button id="premade-themes-left" data-i18n="back">Back</button>
<button id="premade-themes-right" data-i18n="next">Next</button>
</div>
</div>
<div style="position:relative">
<div id="premade-themes"></div>
</div>
</div>
<div class="option-container">
<div>
<h3 class="header-small" data-i18n="revert_theme">Revert theme changes</h3>
</div>
<div style="display:flex;gap: 12px;">
<button id="theme-revert" class="customization-button" data-i18n="revert">Revert</button>
<p data-i18n="revert_desc">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" data-i18n="my_saved_themes">My saved themes</h3>
<button id="save-theme" class="customization-button" data-i18n="save_current">+ Save current</button>
</div>
<div id="saved-themes"></div>
</div>
<div class="export-details option-container">
<h3 class="header-small" style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;">
<span data-i18n="export_settings">Export Settings</span>
<span style="display:flex;gap:6px;">
<button type="button" id="export-check-all" class="customization-button" style="padding:4px 10px;font-size:11px;" data-i18n="check_all">Check all</button>
<button type="button" id="export-check-none" class="customization-button" style="padding:4px 10px;font-size:11px;" data-i18n="check_none">Check none</button>
</span>
</h3>
<div style="display:flex;gap:30px;">
<div class="export-inputs">
<div class="sub-option">
<input type="checkbox" id="export-dark" />
<span data-i18n="export_dark">Dark mode</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-dark-schedule" />
<span data-i18n="export_dark_schedule">Dark mode schedule</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-cards" />
<span data-i18n="export_card_images">Card images</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-colors" />
<span data-i18n="export_card_colors">Card colors</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-card-styles" />
<span data-i18n="export_card_styles">Card styles</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-font" />
<span data-i18n="export_custom_font">Custom font</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-toggles" />
<span data-i18n="export_toggles">On/off toggles</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-todo" />
<span data-i18n="export_todo">Todo list</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-gpa" />
<span data-i18n="export_gpa">GPA settings</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-customStyles" />
<span data-i18n="export_custom_css">Custom CSS</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-background" />
<span data-i18n="export_background">Background &amp; opacity</span>
</div>
</div>
<div style="flex: 1">
<textarea class="card-input" id="export-output" data-i18n-placeholder="output" placeholder="Output"></textarea>
<button type="button" id="export-copy" class="customization-button" style="display:block;margin-top:8px;width:100%;" data-i18n="copy">Copy</button>
</div>
</div>
</div>
<div class="import-export-details">
<div class="import-details option-container">
<h3 class="header-small" data-i18n="import_label">Import</h3>
<p data-i18n="import_hint">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">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"><label for="radio-sidebar-solid" data-i18n="radio_sidebar_solid">Solid</label>
</div>
<div>
<input type="radio" id="radio-sidebar-gradient" name="sidebar-background"><label for="radio-sidebar-gradient" data-i18n="radio_sidebar_gradient">Gradient</label>
</div>
<div>
<input type="radio" id="radio-sidebar-image" name="sidebar-background"><label for="radio-sidebar-image" data-i18n="radio_sidebar_image">Image</label>
</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" data-i18n-placeholder="image_url" 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" data-i18n="custom_styles">Custom styles</h3>
<p style="color:#a4a4a4" data-i18n="custom_styles_desc">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</h2>
</div>
<button class="big-button back-btn" data-i18n="back">Back</button>
</div>
<p class="option-container sub-text" style="margin: 5px 0"><span data-i18n="click_eye">Click the eye on a course to hide or show its card.</span><br><span data-i18n="enter_none">Enter <b>"none"</b> to hide images and links.</span><br><span data-i18n="need_refresh">You may need to refresh the page to see some changes.</span></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" data-i18n="card_grid">Card Grid</h3>
<div class="sub-option">
<input type="checkbox" id="card_grid" name="card_grid">
<label for="card_grid" class="sub-text" data-i18n="card_grid">Card Grid</label>
</div>
<div id="card-grid-options" style="display:none; margin-top:12px;">
<div style="display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;">
<div id="card-grid-preview" data-i18n-title="card_grid_preview" title="Card grid preview" style="display:grid;gap:4px;padding:10px;background:#00000042;border:1px solid #3c3c3c;border-radius:10px;width:fit-content;"></div>
<div style="display:flex;flex-direction:column;gap:8px;">
<div style="display:flex;gap:8px;align-items:center;">
<span class="sub-text" style="width:90px;" data-i18n="horizontal">Horizontal</span>
<input type="number" id="card_grid_columns" class="card-input" min="1" max="12" value="4" style="width:80px;margin-top:0;">
</div>
<div style="display:flex;gap:8px;align-items:center;">
<span class="sub-text" style="width:90px;" data-i18n="vertical">Vertical</span>
<input type="number" id="card_grid_rows" class="card-input" min="1" max="12" value="3" style="width:80px;margin-top:0;">
</div>
<div style="display:flex;gap:8px;align-items:center;">
<span class="sub-text" style="width:90px;" data-i18n="column_spacing">Column spacing</span>
<input type="number" id="card_grid_column_gap" class="card-input" min="0" max="100" value="12" style="width:80px;margin-top:0;">
<span class="sub-text">px</span>
</div>
<div style="display:flex;gap:8px;align-items:center;">
<span class="sub-text" style="width:90px;" data-i18n="row_spacing">Row spacing</span>
<input type="number" id="card_grid_row_gap" class="card-input" min="0" max="100" value="12" style="width:80px;margin-top:0;">
<span class="sub-text">px</span>
</div>
</div>
</div>
<div class="sub-option" style="margin-top:10px">
<input type="checkbox" id="card_grid_center_rows" name="card_grid_center_rows">
<label for="card_grid_center_rows" class="sub-text" data-i18n="center_uneven">Center uneven rows</label>
</div>
<div class="sub-option" style="margin-top:10px">
<input type="checkbox" id="card_grid_flex" name="card_grid_flex">
<label for="card_grid_flex" class="sub-text" data-i18n="flexible_grid">Flexible grid</label>
</div>
<p id="card-grid-warning" style="display:none;margin:10px 0 0;color:#ffd166;font-size:12px;font-weight:600;"></p>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="missing_cards">Missing cards?</h3>
<div style="display: flex; gap: 10px; align-items: center;">
<input type="checkbox" id="card_method_dashboard"></input>
<span data-i18n="get_active_cards">Get Active Cards From Dashboard</span>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="more_card_styles">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" data-i18n="custom_card_styles">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;" data-i18n="image_size">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;" data-i18n="card_roundness">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;" data-i18n="image_roundness">Image Roundness</span>
<input type="number" id="imageRoundness" class="card-input" min="0" max="50" value="0" 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;" data-i18n="extra_spacing">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;" data-i18n="card_width">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;" data-i18n="card_height">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 class="sub-option">
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
<span class="sub-text" style="width:75px;" data-i18n="card_padding">Card Padding</span>
<input type="number" id="cardPadding" class="card-input" min="0" max="100" value="0" style="width: 80px;">
<span class="sub-text">px</span>
</div>
</div>
</div>
</div>
<div class="option-container">
<p class="sub-text"><b data-i18n="disable_high_contrast">Disable High Contrast UI</b> <span data-i18n="high_contrast_desc">if your colors become duller after refreshing! On the sidebar, if you click on your profile icon you can turn it off there.</span></p>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="popular_palettes">Popular Palettes</h3>
<div class="options-presets">
<button id="revert-colors" class="colors-button" data-i18n="revert_original">Revert to original</button>
<button class="preset-button colors-button">
<p data-i18n="palette_reds">Reds</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_oranges">Oranges</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_greens">Greens</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_blues">Blues</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_pinks">Pinks</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_purples">Purples</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_pastels">Pastels</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_mesa">Mesa</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_fade">Fade</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_fade2">Fade2</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_ocean">Ocean</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_watermelon">Watermelon</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_army">Army</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_rainbow">Rainbow</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_sunset">Sunset</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_popsicle">Popsicle</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_berries">Berries</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_fruit">Fruit</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_night">Night</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_base">Base</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_muted">Muted</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_candy">Candy</p>
<div class="colors-preview"></div>
</button>
<button class="preset-button colors-button">
<p data-i18n="palette_chess">Chess</p>
<div class="colors-preview"></div>
</button>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="single_color">Single color</h3>
<p data-i18n="single_color_desc">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" data-i18n="go">Go</button>
</div>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="gradient">Gradient</h3>
<p data-i18n="gradient_desc">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" data-i18n="go">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="widgets">Widgets</h2>
<button class="big-button back-btn" data-i18n="back">Back</button>
</div>
<!-- Widget ordering: one shared box titled "Widget order"; each area
section shows only when 2+ enabled widgets share that area -->
<div class="option-container" id="widget-order-container" style="display:none">
<h3 class="header-small" data-i18n="widget_order_title">Widget order</h3>
<div class="widget-order-section" id="widget-order-top-wrap" style="display:none">
<div class="widget-order-label" data-i18n="pos_top">Top</div>
<div class="widget-order-strip" id="widget-order-top"></div>
</div>
<div class="widget-order-section" id="widget-order-cards_start-wrap" style="display:none">
<div class="widget-order-label" data-i18n="pos_cards_start">Before cards</div>
<div class="widget-order-strip" id="widget-order-cards_start"></div>
</div>
<div class="widget-order-section" id="widget-order-cards_end-wrap" style="display:none">
<div class="widget-order-label" data-i18n="pos_cards_end">After cards</div>
<div class="widget-order-strip" id="widget-order-cards_end"></div>
</div>
<div class="widget-order-section" id="widget-order-below-wrap" style="display:none">
<div class="widget-order-label" data-i18n="pos_below">Bottom</div>
<div class="widget-order-strip" id="widget-order-below"></div>
</div>
</div>
<!-- Widgets: two-column grid; add one option-container per widget here -->
<div class="option-container">
<h3 class="header-small" data-i18n="top_bottom_height">Top / Bottom height</h3>
<div class="sub-option widget-inline-row">
<label for="widget_top_height" class="sub-text widget-inline-label" data-i18n="pos_top">Top</label>
<input type="number" id="widget_top_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="widget_bottom_height" class="sub-text widget-inline-label" data-i18n="pos_below">Bottom</label>
<input type="number" id="widget_bottom_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
</div>
<div class="widgets-grid">
<div class="option-container">
<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="sub-options">
<div class="sub-option widget-inline-row">
<label for="dashboard_notes_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="dashboard_notes_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="dashboard_notes_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="dashboard_notes_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</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 widget-inline-row">
<label for="gpa_calc_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="gpa_calc_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="gpa_calc_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="gpa_calc_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</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 class="sub-option" style="margin-top:5px">
<input type="checkbox" id="gpa_calc_show_on_hover" name="gpa_calc_show_on_hover">
<label for="gpa_calc_show_on_hover" class="sub-text" data-i18n="gpa_show_on_hover">Show on hover</label>
</div>
</div>
</div>
<div class="option-container">
<div class="option" id="focus_timer">
<input type="radio" id="off" name="focus_timer">
<input type="radio" id="on" name="focus_timer">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="focus_timer">Focus Timer</span>
</div>
<div class="sub-options">
<div class="sub-option widget-inline-row">
<label for="focus_timer_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="focus_timer_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="focus_timer_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="focus_timer_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_1">Button 1</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="focus_timer_preset_1_h" inputmode="numeric" maxlength="2" value="00">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_1_m" inputmode="numeric" maxlength="2" value="15">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_1_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_2">Button 2</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="focus_timer_preset_2_h" inputmode="numeric" maxlength="2" value="00">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_2_m" inputmode="numeric" maxlength="2" value="25">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_2_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_3">Button 3</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="focus_timer_preset_3_h" inputmode="numeric" maxlength="2" value="00">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_3_m" inputmode="numeric" maxlength="2" value="45">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="focus_timer_preset_3_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
</div>
</div>
<div class="option-container">
<div class="option" id="breathing">
<input type="radio" id="off" name="breathing">
<input type="radio" id="on" name="breathing">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="breathing_breaks">Breathing Breaks</span>
</div>
<div class="sub-options">
<div class="sub-option widget-inline-row">
<label for="breathing_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="breathing_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="breathing_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="breathing_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_1">Button 1</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="breathing_preset_1_m" inputmode="numeric" maxlength="2" value="03">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="breathing_preset_1_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_2">Button 2</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="breathing_preset_2_m" inputmode="numeric" maxlength="2" value="05">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="breathing_preset_2_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<span class="sub-text widget-inline-label" data-i18n="button_3">Button 3</span>
<div class="popup-time-input">
<input type="text" class="popup-tf" id="breathing_preset_3_m" inputmode="numeric" maxlength="2" value="10">
<span class="popup-tf-colon">:</span>
<input type="text" class="popup-tf" id="breathing_preset_3_s" inputmode="numeric" maxlength="2" value="00">
</div>
</div>
</div>
</div>
<div class="option-container">
<div class="option" id="daily_quotes">
<input type="radio" id="off" name="daily_quotes">
<input type="radio" id="on" name="daily_quotes">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="daily_quotes">Daily Quotes</span>
</div>
<div class="sub-options">
<div class="sub-option widget-inline-row">
<label for="daily_quotes_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="daily_quotes_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="daily_quotes_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="daily_quotes_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
</div>
</div>
<div class="option-container">
<div class="option" id="quick_links">
<input type="radio" id="off" name="quick_links">
<input type="radio" id="on" name="quick_links">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="quick_links">Quick Links</span>
</div>
<div class="sub-options">
<div class="sub-option widget-inline-row">
<label for="quick_links_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="quick_links_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="quick_links_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="quick_links_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="quickLinksFontSizeSlider" class="sub-text widget-inline-label" data-i18n="quick_links_font_size">Link label size</label>
<span class="sub-text" id="quickLinksFontSizeValue" style="margin-left:auto;">12px</span>
</div>
<input type="range" min="8" max="24" step="1" id="quickLinksFontSizeSlider" data-i18n-aria-label="quick_links_font_size" aria-label="Link label size">
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="quickLinksIconSizeSlider" class="sub-text widget-inline-label" data-i18n="quick_links_icon_size">Icon size</label>
<span class="sub-text" id="quickLinksIconSizeValue" style="margin-left:auto;">36px</span>
</div>
<input type="range" min="20" max="64" step="1" id="quickLinksIconSizeSlider" data-i18n-aria-label="quick_links_icon_size" aria-label="Icon size">
</div>
</div>
<div class="option-container">
<div class="option" id="heatmap">
<input type="radio" id="off" name="heatmap">
<input type="radio" id="on" name="heatmap">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="heatmap_widget">Heatmap</span>
</div>
<div class="sub-options">
<div class="sub-option widget-inline-row">
<label for="heatmap_position" class="sub-text widget-inline-label" data-i18n="widget_position">Position</label>
<select id="heatmap_position" class="widget-pos widget-inline-select">
<option value="top" data-i18n="pos_top">Top</option>
<option value="cards_start" data-i18n="pos_cards_start">Before cards</option>
<option value="cards_end" data-i18n="pos_cards_end">After cards</option>
<option value="below" data-i18n="pos_below">Bottom</option>
</select>
</div>
<div class="sub-option widget-inline-row" style="margin-top:6px;">
<label for="heatmap_height" class="sub-text widget-inline-label" data-i18n="height">Height</label>
<input type="number" id="heatmap_height" class="card-input" min="0" max="2000" data-i18n-placeholder="auto" placeholder="auto" style="width:92px;margin:0;">
<span class="sub-text">px</span>
</div>
<!-- Course filter: ticked courses are left out of the grid. -->
<div class="sub-option" style="margin-top:6px;flex-direction:column;align-items:stretch;gap:4px;">
<span class="sub-text" data-i18n="heatmap_exclude_courses">Exclude courses</span>
<div class="cr-multiselect" id="heatmap_excluded">
<button type="button" class="cr-multiselect-btn" id="heatmap_excluded_btn" aria-haspopup="listbox" aria-expanded="false">
<span id="heatmap_excluded_label" data-i18n="celebration_none">None</span>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6 6-6" /></svg>
</button>
<div class="cr-multiselect-menu" id="heatmap_excluded_menu" role="listbox" aria-multiselectable="true"></div>
</div>
</div>
</div>
</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;">
<span data-i18n="dashboard_font">Dashboard Font</span>
<img id="fontsDropdownArrow" style="transform:rotate(180deg);" src="../icon/dropdownArrow.svg" width="16px" height="16px">
<span style="margin-left:auto; display:flex; align-items:center; gap:6px; cursor:pointer;">
<input type="checkbox" id="custom_font_skip_p" name="custom_font_skip_p">
<label for="custom_font_skip_p" class="sub-text" style="cursor:pointer;" data-i18n="keep_font">Keep original assignment font</label>
</span>
</h3>
<div id="quick-fonts"></div>
<div style="margin-top:10px;" class="custom-font">
<h3 class="header-small" data-i18n="custom_fonts">Custom Fonts</h3>
<p data-i18n="custom_fonts_desc">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" data-i18n="custom_background">Custom Background</h3>
<p data-i18n="custom_background_desc">Pick a preset or use your own image url.</p>
<div id="customBackgroundManualControls">
<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;" data-i18n="image_scale">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;" data-i18n="clear_background">Clear Background</button>
</div>
<div class="sub-option" style="margin-top:10px;">
<input type="checkbox" id="customBackgroundDaily" name="customBackgroundDaily">
<label for="customBackgroundDaily" class="sub-text" data-i18n="daily_random">Daily Random Image</label>
</div>
<div class="sub-option" style="margin-top:6px;">
<input type="checkbox" id="customBackgroundNasaDaily" name="customBackgroundNasaDaily">
<label for="customBackgroundNasaDaily" class="sub-text" data-i18n="nasa_apod">NASA Astronomy Picture of the Day</label>
</div>
<div class="sub-option" style="margin-top:8px;">
<input type="checkbox" id="fitImageToScreen" name="fitImageToScreen">
<label for="fitImageToScreen" class="sub-text" data-i18n="fit_image">Fit image to screen</label>
</div>
<div class="sub-option" style="margin-top:8px;">
<input type="checkbox" id="card_transparency" name="card_transparency">
<label for="card_transparency" class="sub-text" data-i18n="card_transparency">Card transparency</label>
</div>
</div>
<div class="option-container" id="opacity-options" style="display:none;">
<h3 class="header-small" data-i18n="opacity_options">Opacity &amp; Blur</h3>
<p class="sub-text" style="color:#a4a4a4;margin:4px 0 8px;" data-i18n="opacity_only_background">Only available with a custom background.</p>
<div class="opacity-slider-row">
<div style="display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:6px;">
<span class="sub-text" style="font-weight:600;color:#e2e2e2;" data-i18n="background_opacity">Background opacity</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="bgOpacityReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="bgOpacityValue">65%</span>
</div>
</div>
<input type="range" min="0" max="100" step="1" id="bgOpacitySlider">
</div>
<div class="opacity-slider-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;" data-i18n="bg_blur">Background blur</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="bgBlurReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="bgBlurValue">8px</span>
</div>
</div>
<input type="range" min="0" max="30" step="1" id="bgBlurSlider">
</div>
<div class="opacity-slider-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;" data-i18n="sidebar_opacity">Sidebar opacity</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="sidebarOpacityReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="sidebarOpacityValue">100%</span>
</div>
</div>
<input type="range" min="0" max="100" step="1" id="sidebarOpacitySlider">
</div>
<div class="opacity-slider-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;" data-i18n="sidebar_blur">Sidebar blur</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="sidebarBlurReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="sidebarBlurValue">0px</span>
</div>
</div>
<input type="range" min="0" max="30" step="1" id="sidebarBlurSlider">
</div>
<div class="opacity-slider-row" id="card-transparency-options" style="display:none;">
<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;" data-i18n="card_opacity">Card opacity</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="cardOpacityReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="cardOpacityValue">80%</span>
</div>
</div>
<input type="range" min="0" max="100" step="1" id="cardOpacitySlider">
</div>
<div class="opacity-slider-row" id="card-transparency-blur-row" style="display:none;">
<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;" data-i18n="card_blur">Card blur</span>
<div style="display:flex;align-items:center;gap:6px;">
<button class="opacity-reset-btn" id="cardBlurReset" type="button" title="Reset to default" data-i18n-title="reset_default"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
<span class="sub-text" id="cardBlurValue">8px</span>
</div>
</div>
<input type="range" min="0" max="30" step="1" id="cardBlurSlider">
</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" data-i18n="report_desc">Please join the discord server or create a Github issue for any issues, feedback, or suggestions. Thank you!</p>
<div class="option-container" style="display:flex;flex-direction:column;gap:10px;">
<!-- <h3 class="header-small" data-i18n="get_in_touch">Get in touch</h3> -->
<p class="sub-text" data-i18n="report_social_desc" style="margin:0;">For quicker help, feature requests, and community discussion, reach us here instead of email:</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a class="discord-button" href="https://discord.gg/GjFh4JA3wh" target="_blank" rel="noopener noreferrer" style="flex:1;min-width:140px;justify-content:center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
<span>Discord</span>
</a>
<a class="github-button" href="https://github.com/GuySandler/CanvasRefined" target="_blank" rel="noopener noreferrer" style="flex:1;min-width:140px;justify-content:center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
<span>GitHub</span>
</a>
</div>
<p class="sub-text" style="margin:0;font-size:11px;opacity:0.85;">Email is still available at <strong>sandlerguy5@gmail.com</strong> for private matters.</p>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="dev_tools">Dev tools</h3>
<div class="option" id="hide_personal_details">
<input type="radio" id="off" name="hide_personal_details">
<input type="radio" id="on" name="hide_personal_details">
<div class="slider">
<div class="sliderknob"></div>
<div class="sliderbg"></div>
</div><span class="option-name" data-i18n="hide_personal_details">Hide personal details</span>
</div>
<div class="sub-options">
<div class="sub-option">
<input type="checkbox" id="hide_course_images" name="hide_course_images">
<label for="hide_course_images" class="sub-text" data-i18n="hide_images_temp">Temporarily remove all course images</label>
</div>
<div class="sub-option" style="flex-direction:column;align-items:stretch;gap:4px;">
<label for="anon_grade_preset" class="sub-text" data-i18n="fake_grade_level">Fake grade level</label>
<select id="anon_grade_preset" name="anon_grade_preset">
<option value="high" data-i18n="fake_grade_high">High</option>
<option value="medhigh" data-i18n="fake_grade_medhigh">Med-High</option>
<option value="med" data-i18n="fake_grade_medium">Medium</option>
<option value="medlow" data-i18n="fake_grade_medlow">Med-Low</option>
</select>
</div>
<div class="sub-option">
<input type="checkbox" id="anon_fake_todo" name="anon_fake_todo">
<label for="anon_fake_todo" class="sub-text" data-i18n="fake_todo">Fill the todo list with fake courses</label>
</div>
<div class="sub-option" id="anon_fake_completed_wrap" style="display:none;align-items:center;">
<span class="sub-text" data-i18n="fake_tasks_completed">Fake tasks completed:</span>
<input type="number" id="anon_fake_completed" class="card-input" min="0" max="7" value="2" style="width:52px;margin-top:0;">
<span class="sub-text">/ 7</span>
</div>
<div class="sub-option" style="align-items:center;flex-wrap:wrap;">
<input type="checkbox" id="anon_progress_enabled" name="anon_progress_enabled">
<label for="anon_progress_enabled" class="sub-text" data-i18n="fake_progress">Fake progress display:</label>
<input type="number" id="anon_progress_done" class="card-input" min="0" max="999" value="12" style="width:52px;margin-top:0;">
<span class="sub-text">/</span>
<input type="number" id="anon_progress_total" class="card-input" min="1" max="999" value="18" style="width:52px;margin-top:0;">
<span class="sub-text" data-i18n="complete">complete</span>
</div>
<div class="sub-option">
<button id="anon-reroll-btn" class="customization-button" style="width:100%;" data-i18n="reroll_classes">Reroll classes</button>
</div>
</div>
</div>
<p id="dev-alert"></p>
<div class="option-container">
<h3 class="header-small" data-i18n="storage_reset">Storage reset</h3>
<div style="display: flex; gap: 10px; align-items: center;">
<button class="big-button" id="storage-reset-btn" data-i18n="go">Go</button>
<span data-i18n="storage_reset_desc">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" data-i18n="clear_cache">Clear planner cache</h3>
<div style="display: flex; gap: 10px; align-items: center;">
<button class="big-button" id="planner-cache-clear-btn" data-i18n="go">Go</button>
<span data-i18n="clear_cache_desc">This deletes the cached to-do list data (assignments, announcements, reminders) so it is re-fetched fresh from Canvas. Open Canvas tabs update automatically.</span>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="storage_usage">Storage usage</h3>
<div style="display: flex; flex-direction: column; gap: 3px;">
<span class="sub-text"><span data-i18n="storage_sync_label">Settings (sync):</span> <span id="storage-usage-sync">…</span></span>
<span class="sub-text"><span data-i18n="storage_cache_label">Planner cache:</span> <span id="storage-usage-cache">…</span></span>
<span class="sub-text"><span data-i18n="storage_other_label">Other local data:</span> <span id="storage-usage-local">…</span></span>
<span class="sub-text"><span data-i18n="storage_quota_label">Local quota:</span> <span id="storage-usage-quota">…</span></span>
</div>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="storage_dump">Storage Dump</h3>
<div style="margin-bottom: 10px">
<div style="display: flex; gap: 10px; align-items: center;">
<button class="big-button" id="rk_btn" data-i18n="go">Go</button>
<span data-i18n="storage_dump_desc">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" data-i18n="dark_inspector">Dark mode inspector</h3>
<div style="display: flex; gap: 10px; align-items: center;">
<button class="big-button" id="inspector-btn" data-i18n="go">Go</button>
<span data-i18n="dark_inspector_desc">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" data-i18n="card_limit">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" data-i18n="experimental">This is an experimental feature.</b> <span data-i18n="card_limit_desc">Adjusting this number will reset your cards and could cause storage issues.</span></p>
</div>
</div>
<!--
<div class="option-container">
<h3 class="header-small" data-i18n="card_method">Card method</h3>
<p><b style="font-weight:600" data-i18n="experimental">This is an experimental feature.</b> <span data-i18n="card_method_desc">You shouldn't need these on.</span></p>
<div style="display: flex; gap: 10px; align-items: center;margin-top: 5px;">
<input type="checkbox" id="card_method_date"></input>
<span data-i18n="date">Date</span>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<input type="checkbox" id="card_method_dashboard"></input>
<span data-i18n="dashboard">Dashboard</span>
</div>
</div>
-->
<div class="option-container">
<h3 class="header-small" data-i18n="error_log">Error log</h3>
<div>
<textarea id="error_log_output" class="card-input"></textarea>
</div>
</div>
</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>