mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-09-19 12:04:54 +02:00
1266 lines
84 KiB
HTML
1266 lines
84 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Canvas Refined</title>
|
|
<link href="../css/popup.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body style="background: #1a1a1ad6; background: #232323">
|
|
<div id="gradientbg"></div>
|
|
<div id="alert"></div>
|
|
<div class="main">
|
|
<div class="header">
|
|
<img id="bclogo" src="../icon/icon-128.png">
|
|
<h1 data-i18n="Canvas_Refined">Canvas Refined</h1>
|
|
<div 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">Edit Dark Mode</span>
|
|
</button>
|
|
<button id="advanced-settings" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path></svg>
|
|
<span data-i18n="card_customization">Card Customization</span>
|
|
</button>
|
|
<!-- <button id="card-colors-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path><path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2"></path><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path></svg>
|
|
<span data-i18n="card_colors">Card Colors</span>
|
|
</button> -->
|
|
<button id="import-export-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path><path d="M21 3a16 16 0 0 0 -12.8 10.2"></path><path d="M21 3a16 16 0 0 1 -10.2 12.8"></path><path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path></svg>
|
|
<span data-i18n="themes">Themes</span>
|
|
</button>
|
|
<button id="custom-font-btn" class="big-button tab-btn">
|
|
<svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.5 8.5H15.51M10.5 7.5H10.51M7.5 11.5H7.51M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.6569 19.6569 15 18 15H17.4C17.0284 15 16.8426 15 16.6871 15.0246C15.8313 15.1602 15.1602 15.8313 15.0246 16.6871C15 16.8426 15 17.0284 15 17.4V18C15 19.6569 13.6569 21 12 21ZM16 8.5C16 8.77614 15.7761 9 15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5ZM11 7.5C11 7.77614 10.7761 8 10.5 8C10.2239 8 10 7.77614 10 7.5C10 7.22386 10.2239 7 10.5 7C10.7761 7 11 7.22386 11 7.5ZM8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5Z" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
|
<span data-i18n="styles">Styles</span>
|
|
</button>
|
|
<button id="gpa-bounds-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"></path><path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"></path></svg>
|
|
<span data-i18n="gpa_settings">GPA Settings</span>
|
|
</button>
|
|
<button id="report-issue-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
|
|
<span data-i18n="report_issue">Report issue</span>
|
|
</button>
|
|
<!-- <button id="updates-btn" class="big-button tab-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
|
|
<span data-i18n="updates">Updates</span>
|
|
</button> -->
|
|
</div>
|
|
<div class="options">
|
|
<div class="options-left">
|
|
<div class="option-container">
|
|
<div class="option" id="dark_mode">
|
|
<input type="radio" id="off" name="dark_mode">
|
|
<input type="radio" id="on" name="dark_mode">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="dark_mode">Dark mode</span>
|
|
</div>
|
|
<div class="option" id="auto_dark">
|
|
<input type="radio" id="off" name="auto_dark">
|
|
<input type="radio" id="on" name="auto_dark">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="automatic_dark_mode">Automatic dark mode</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="timesets">
|
|
<div class="timeset">
|
|
<input type="time" id="auto_dark_start" step="60"></input>
|
|
<span class="sub-text" data-i18n="auto_start_time">Start time</span>
|
|
</div>
|
|
<div class="timeset">
|
|
<input type="time" id="auto_dark_end" step="60"></input>
|
|
<span class="sub-text" data-i18n="auto_end_time">End time</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="device_dark" name="device_dark">
|
|
<label for="device_dark" class="sub-text" data-i18n="device_dark">Use device dark mode settings</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="assignments_due">
|
|
<input type="radio" id="off" name="assignments_due">
|
|
<input type="radio" id="on" name="assignments_due">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="card_assignments">Card assignments</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="assignment_date_format" name="assignment_date_format">
|
|
<label for="assignment_date_format" class="sub-text" data-i18n="useddmm">Use dd/mm</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="card_overdues" name="card_overdues">
|
|
<label for="card_overdues" class="sub-text" data-i18n="show_past_due">Show past due</label>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="relative_dues" name="relative_dues">
|
|
<label for="relative_dues" class="sub-text" data-i18n="relative_due_dates">Relative due dates</label>
|
|
</div>
|
|
<div 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="gpa_calc">
|
|
<input type="radio" id="off" name="gpa_calc">
|
|
<input type="radio" id="on" name="gpa_calc">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="gpa_calculator">GPA calculator</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_prepend" name="gpa_calc_prepend">
|
|
<label for="gpa_calc_prepend" class="sub-text" data-i18n="move_top">Move to top</label>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_cumulative" name="gpa_calc_cumulative">
|
|
<label for="gpa_calc_cumulative" class="sub-text" data-i18n="gpa_calc_cumulative">Show cumulative GPA</label>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="gpa_calc_weighted" name="gpa_calc_weighted">
|
|
<label for="gpa_calc_weighted" class="sub-text" data-i18n="gpa_calc_weighted">Show weighted GPA</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="dashboard_grades">
|
|
<input type="radio" id="off" name="dashboard_grades">
|
|
<input type="radio" id="on" name="dashboard_grades">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="card_grades">Card Grades</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="grade_hover" name="grade_hover">
|
|
<label for="grade_hover" class="sub-text" data-i18n="grade_hover">Show only when hovering</label>
|
|
</div>
|
|
<div 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" 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="dashboard_notes">
|
|
<input type="radio" id="off" name="dashboard_notes">
|
|
<input type="radio" id="on" name="dashboard_notes">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div><span class="option-name" data-i18n="dashboard_notes">Dashboard Notes</span>
|
|
</div>
|
|
<div class="option" id="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" 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="social-buttons">
|
|
<a class="discord-button" href="https://discord.gg/GjFh4JA3wh" target="_blank" rel="noopener noreferrer" title="Join our Discord">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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" title="View on GitHub">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
|
|
<div class="social-toggle" id="social-toggle" role="button" tabindex="0"></div>
|
|
</div>
|
|
|
|
<div class="options-right">
|
|
<div class="option-container">
|
|
<div class="option" id="better_todo">
|
|
<input type="radio" id="off" name="better_todo">
|
|
<input type="radio" id="on" name="better_todo">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="better_todo">Better Todo List</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="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="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_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" style="flex-direction:column;align-items:stretch;gap:4px;">
|
|
<label for="todo_progress_rings" class="sub-text">Progress display</label>
|
|
<select id="todo_progress_rings" name="todo_progress_rings">
|
|
<option value="none">None</option>
|
|
<option value="rings">Rings</option>
|
|
<option value="rainbow">Rainbow</option>
|
|
<option value="lines">Multiple lines</option>
|
|
<option value="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">Time frame</label>
|
|
<select id="todo_timeframe" name="todo_timeframe">
|
|
<option value="all">All time</option>
|
|
<option value="1week">1 week</option>
|
|
<option value="2week">2 weeks</option>
|
|
<option value="month">Month</option>
|
|
<option value="2month">2 months</option>
|
|
</select>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="todo_confetti" name="todo_confetti">
|
|
<label for="todo_confetti" class="sub-text">Show confetti on complete</label>
|
|
</div>
|
|
<div 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">Ignore card colors</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">Hide read announcements</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">Remove icons</label>
|
|
</div>
|
|
<div style="margin-top: 5px">
|
|
<span class="sub-text" data-i18n="max_items">Max items to show: </span><span
|
|
id="numTodoItems"></span>
|
|
<input type="range" min="1" max="12" id="numTodoItemsSlider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="option" id="better_sidebar">
|
|
<input type="radio" id="off" name="better_sidebar">
|
|
<input type="radio" id="on" name="better_sidebar">
|
|
<div class="slider">
|
|
<div class="sliderknob"></div>
|
|
<div class="sliderbg"></div>
|
|
</div>
|
|
<span class="option-name" data-i18n="better_sidebar">Better Sidebar</span>
|
|
</div>
|
|
<div class="sub-options">
|
|
<div 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 style="margin-top: 5px" id="sidebarScaleSub">
|
|
<span class="sub-text">Sidebar scale: </span><span id="sidebarScaleValue"></span><span class="sub-text">%</span>
|
|
<input type="range" min="70" max="150" id="sidebarScaleSlider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<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 class="option-container">
|
|
<div class="customDomain">
|
|
<span data-i18n="enter_url">Your Canvas URL:</span>
|
|
<p style="font-size: 11px;color:#8d8d8d" data-i18n="enter_multiple">(Enter multiple with a comma)</p>
|
|
<input type="text" id="customDomain" placeholder="Or just refresh your Canvas page!"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="import-export tab" style="display: none">
|
|
<div id="submit-popup">
|
|
<div style="max-width: 75%;color:#a7a7a7">
|
|
<h3 class="header-small" style="font-size:18px;color:#fff">Submission confirmation</h3>
|
|
<p style="font-size:14px;margin-top: 10px;font-weight:600;">This is <span style="text-decoration: underline;">not</span> for requesting a theme. I don't create themes by request.</p>
|
|
<p style="margin-top: 10px;">Your submission will include your current thematic settings, such as your card images, dark mode, and font.</p>
|
|
<p style="margin-top: 10px;">Make sure your theme follows these guidelines:</p>
|
|
<ul>
|
|
<li>Appropriate images/title</li>
|
|
<li>Does not heavily use components from other themes</li>
|
|
<li>Uses a unique custom dark mode (not one of the presets)</li>
|
|
<li>Custom images cannot be from Discord or Gmail. These images are not public</li>
|
|
</ul>
|
|
<div style="display: flex; gap: 5px;margin-top:14px;">
|
|
<button id="submit-theme-btn" class="big-button" style="width: 50%;">Submit</button>
|
|
<button id="cancel-theme-btn" class="big-button" style="width: 50%;">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="browser-settings-popup">
|
|
<div style="width: 50%;">
|
|
<h3 class="header-small" style="margin-bottom:14px;font-size:18px;">Theme browser settings</h3>
|
|
<div style="display:flex;gap:8px;align-items: center;color:#a7a7a7">
|
|
<input type="checkbox" id="browser_show_likes">
|
|
<span>Always show like count</span>
|
|
</div>
|
|
<button id="close-settings-btn" class="big-button" style="width: 50%;margin-top:14px;">Close</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="themes">Themes</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container" style="display:none;">
|
|
<div class="theme-header small-option">
|
|
<h3 class="header-small" style="margin:0">Submit your theme</h3>
|
|
<div class="big-button" id="show-submit-form">Show</div>
|
|
</div>
|
|
<p style="color:#a7a7a7">Do you want to submit your theme for others to use?</p>
|
|
|
|
<div id="submit-drawer" style="display: none;">
|
|
<div>
|
|
<div id="submit-tab">
|
|
<button class="submit-tab-btn active" id="submit-form-btn">Submit</button>
|
|
<button class="submit-tab-btn" id="view-submissions-btn">My submissions</button>
|
|
</div>
|
|
</div>
|
|
<div id="submit-form" style="margin-top:10px;">
|
|
<div style="display: flex;gap:40px;">
|
|
<div>
|
|
<div>
|
|
<p style="font-weight:600;">Title</p>
|
|
<input type="text" class="card-input" id="submit-title">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;">Try to keep this short and relevant so people can search for it.</p>
|
|
</div>
|
|
<div style="margin-top:14px;">
|
|
<p style="font-weight:600;">Created by</p>
|
|
<input type="text" class="card-input" id="submit-credits">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-top:4px;">This can be anything including your name, social media handle, anonymous etc.</p>
|
|
</div>
|
|
</div>
|
|
<div style="min-width: 25%;">
|
|
<p style="color:#a7a7a7;font-size:12px;margin-bottom:5px;">Preview</p>
|
|
<button id="theme-button-img" class="theme-button customization-button"
|
|
style="width: 100%;background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));">
|
|
<p class="theme-button-title" id="theme-button-title-preview">Title</p>
|
|
<p class="theme-button-creator" id="theme-button-creator-preview">Credits</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;gap:6px;margin-top: 10px;">
|
|
<button id="submit-theme-btn-1" class="big-button">Submit</button>
|
|
</div>
|
|
</div>
|
|
<div id="view-submissions" style="display: none;">
|
|
<div id="latest-submissions"></div>
|
|
<p style="font-size:12px;color:#a4a4a4;margin:6px 0">Showing your latest 3 submissions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="theme-header">
|
|
<div style="display:flex;gap:6px;align-items:center">
|
|
<h3 class="header-small" style="margin:0">User made themes</h3>
|
|
<svg id="browser-settings-btn" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-settings"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" /></svg>
|
|
</div>
|
|
<span id="premade-themes-pagenum"></span>
|
|
</div>
|
|
<div class="theme-controls">
|
|
<div id="theme-sorts-container">
|
|
<button id="theme-sorts">
|
|
<div>
|
|
<svg style="display: block" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrows-up-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3l0 18" /><path d="M10 6l-3 -3l-3 3" /><path d="M20 18l-3 3l-3 -3" /><path d="M17 21l0 -18" /></svg>
|
|
</div>
|
|
<span id="theme-current-sort"></span>
|
|
</button>
|
|
<div id="theme-sort-selector">
|
|
<div id="theme-sort-score" class="theme-sort-btn">Popular</div>
|
|
<div id="theme-sort-trending" class="theme-sort-btn">Trending</div>
|
|
<div id="theme-sort-liked" class="theme-sort-btn">Liked</div>
|
|
<div id="theme-sort-new" class="theme-sort-btn">New</div>
|
|
<div id="theme-sort-old" class="theme-sort-btn">Old</div>
|
|
<div id="theme-sort-abc" class="theme-sort-btn">ABC</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-input" id="theme-search-container">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
|
|
<input type="text" id="theme-search" placeholder="Search">
|
|
</div>
|
|
<div style="display:flex;gap:4px;align-items:center">
|
|
<button id="premade-themes-left">Back</button>
|
|
<button id="premade-themes-right">Next</button>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative">
|
|
<div id="premade-themes"></div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div>
|
|
<h3 class="header-small">Revert theme changes</h3>
|
|
</div>
|
|
<div style="display:flex;gap: 12px;">
|
|
<button id="theme-revert" class="customization-button">Revert</button>
|
|
<p>This will revert customizations back to when you first installed the extension.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="theme-header">
|
|
<h3 class="header-small" style="margin:0;flex:100">My saved themes</h3>
|
|
<button id="save-theme" class="customization-button">+ Save current</button>
|
|
</div>
|
|
<div id="saved-themes"></div>
|
|
</div>
|
|
<div class="export-details option-container">
|
|
<h3 class="header-small" style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;">
|
|
<span>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;">Check all</button>
|
|
<button type="button" id="export-check-none" class="customization-button" style="padding:4px 10px;font-size:11px;">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>Dark mode</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-dark-schedule" />
|
|
<span>Dark mode schedule</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-cards" />
|
|
<span>Card images</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-colors" />
|
|
<span>Card colors</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-card-styles" />
|
|
<span>Card styles</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-font" />
|
|
<span>Custom font</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-toggles" />
|
|
<span>On/off toggles</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-todo" />
|
|
<span>Todo list</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-gpa" />
|
|
<span>GPA settings</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-customStyles" />
|
|
<span>Custom CSS</span>
|
|
</div>
|
|
<div class="sub-option">
|
|
<input type="checkbox" id="export-background" />
|
|
<span>Background & opacity</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<textarea class="card-input" id="export-output" placeholder="Output"></textarea>
|
|
<button type="button" id="export-copy" class="customization-button" style="display:block;margin-top:8px;width:100%;">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="import-export-details">
|
|
<div class="import-details option-container">
|
|
<h3 class="header-small">Import</h3>
|
|
<p>Copy and paste exported themes here:</p>
|
|
<div>
|
|
<textarea class="card-input" id="import-input"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="option-container">
|
|
<div class="theme-header">
|
|
<h3 class="header-small" style="margin:0;flex:100">Theme browser opt-in reset</h3>
|
|
</div>
|
|
<div style="display:flex;gap:12px;">
|
|
<button id="reset-optin" class="customization-button">Reset opt-in status</button>
|
|
<p style="color:#a7a7a7">This will bring back the opt-in message so you can select a different option.</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="customize-dark tab" style="display: none">
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="edit_dark_mode">Edit dark mode</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="customization">
|
|
<div class="container">
|
|
<div class="option-container">
|
|
<h3 class="header-small" data-i18n="presets">Presets</h3>
|
|
<div class="options-presets">
|
|
<button id="dark-lighter" class="preset-button customization-button" style="background:#272727;border:1px solid #454545;color:#f5f5f5" data-i18n="dark_lighter">Lighter</button>
|
|
<button id="dark-light" class="preset-button customization-button" style="background:#202020;border:1px solid #404040;color:#f5f5f5" data-i18n="dark_light">Light</button>
|
|
<button id="dark-default" class="preset-button customization-button" style="background:#161616;border:1px solid #3c3c3c;color:#f5f5f5" data-i18n="dark_default">Default</button>
|
|
<button id="dark-dark" class="preset-button customization-button" style="background:#101010;border:1px solid #272727;color:#f5f5f5" data-i18n="dark_dark">Dark</button>
|
|
<button id="dark-darker" class="preset-button customization-button" style="background:#000000;border:1px solid #000000;color:#c5c5c5" data-i18n="dark_darker">Darker</button>
|
|
<button id="dark-mint" class="preset-button customization-button" style="background:#0f0f0f;border:1px solid #1e1e1e;color:#7CF3CB" data-i18n="dark_mint">Mint</button>
|
|
<button id="dark-blue" class="preset-button customization-button" style="background:#14181d;border:1px solid #2e3943;color:#f5f5f5" data-i18n="dark_blue">Blue Tint</button>
|
|
<button id="dark-burn" class="preset-button customization-button" style="background:#ffffff;border:1px solid #cccccc;color:#9d9a9a" data-i18n="dark_burn">Eyeball Burn</button>
|
|
<button id="dark-unicorn" class="preset-button customization-button" style="background:#ff6090;border:1px solid #00C1FF;color:#FFFF00" data-i18n="dark_unicorn">Unicorn</button>
|
|
<button id="dark-lightmode" class="preset-button customization-button" style="background:#fff;border:1px solid #c7cdd1;color:#2d3b45" data-i18n="dark_lightmode">Lightmode</button>
|
|
<button id="dark-catppuccin" class="preset-button customization-button" style="background:#11111b!important;border:1px solid #4f5463;color:#f5c2e7;" data-i18n="dark_catppuccin">Catppuccin<br />by Angel</button>
|
|
<button id="dark-sage" class="preset-button customization-button" style="background:#2f3e46!important;border:1px solid #84a98c;color:#d8f5c7;" data-i18n="dark_sage">Sage<br />by LivDoesDevStuf</button>
|
|
<button id="dark-pink" class="preset-button customization-button" style="background:#ffe0ed!important;border:1px solid #ff007b;color:#ff0088;" data-i18n="dark_pink">Pink<br />by Sayde</button>
|
|
<button id="dark-coral" class="preset-button customization-button" style="background:#131c26!important;border:1px solid #0e1721;color:#f88379;" data-i18n="dark_coral">Coral<br />by Superchido</button>
|
|
<button style="opacity: 0">placeholder</button>
|
|
<button style="opacity: 0">placeholder</button>
|
|
<!--
|
|
<button id="preset-placeholder1" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
<button id="preset-placeholder2" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
<button id="preset-placeholder3" class="preset-button customization-button" style="opacity: 0;">button</button>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="option-container">
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_sidebar-text">
|
|
<h3 class="color-type-header" data-i18n="dp_sidebar_text">Sidebar Text</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<h3 class="color-type-header" data-i18n="dp_sidebar">Sidebar</h3>
|
|
<div class="changer-container" id="dp_sidebar" style="align-items: flex-start;">
|
|
<div style="width:160px;margin-top:5px;">
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-solid" name="sidebar-background" data-i18n="radio_sidebar_solid">Solid</input>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-gradient" name="sidebar-background" data-i18n="radio_sidebar_gradient">Gradient</input>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio-sidebar-image" name="sidebar-background" data-i18n="radio_sidebar_image">Image</input>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<div class="sidebar-changer" id="sidebar-color1">
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
<div class="sidebar-changer" id="sidebar-color2">
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
<div class="sidebar-changer" id="sidebar-image">
|
|
<input class="card-input" type="text" placeholder="Image URL"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<div class="color-options">
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-0">
|
|
<h3 class="color-type-header" data-i18n="dp_background_0">Background Main</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-1">
|
|
<h3 class="color-type-header" data-i18n="dp_background_1">Background Alt</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_background-2">
|
|
<h3 class="color-type-header" data-i18n="dp_background_2">Background Other</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_borders">
|
|
<h3 class="color-type-header" data-i18n="dp_borders">Borders</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_links">
|
|
<h3 class="color-type-header" data-i18n="dp_links">Links</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-0">
|
|
<h3 class="color-type-header" data-i18n="dp_text_0">Text Main</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-1">
|
|
<h3 class="color-type-header" data-i18n="dp_text_1">Text Other</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="changer">
|
|
<div class="changer-container" id="dp_text-2">
|
|
|
|
<h3 class="color-type-header" data-i18n="dp_text_2">Text Alt</h3>
|
|
<input class="card-input" type="color"></input>
|
|
<input class="card-input" type="text"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Custom styles</h3>
|
|
<p style="color:#a4a4a4">You can use this area to write custom CSS styles. You may need to add an !important rule to force them to take effect.</p>
|
|
<textarea id="custom-styles" class="card-input"></textarea>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small" data-i18n="dark_mode_fixer">Dark mode fixer (beta)</h3>
|
|
<div style="display: flex; gap: 10px;align-items: center">
|
|
<button id="fix-dm-btn" class="big-button" data-i18n="fix_dm_btn">Go</button>
|
|
<span data-i18n="dark_mode_fixer_text">This will try to fix any dark mode gaps on the current page.</span>
|
|
</div>
|
|
<p id="fix-dm-output" style="margin-top: 10px;color:#ffee00;"></p>
|
|
<p style="margin: 15px 0 5px;" data-i18n="fix_dm_text">The fixer is automatically running on these pages:</p>
|
|
<div id="dark-mode-fix-urls">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="advanced tab" style="display:none">
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="card_customization">Card Customization</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<p class="option-container sub-text" style="margin: 5px 0">Enter <b>"none"</b> to hide images and links.<br>You may need to refresh the page to see some changes.</p>
|
|
<!-- <div class="advanced-cards">
|
|
<div id="advanced-current"></div>
|
|
<div id="advanced-past"></div>
|
|
</div> -->
|
|
<div class="advanced-cards">
|
|
<div class="card-grid" id="card-grid">
|
|
|
|
</div>
|
|
<div class="card-edit-menu" id="card-edit-menu" style="display:none;">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-container">
|
|
<h3 class="header-small">Missing cards?</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<input type="checkbox" id="card_method_dashboard"></input>
|
|
<span>Get Active Cards From Dashboard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-container">
|
|
<h3 class="header-small">More Card Styles</h3>
|
|
|
|
<div class="sub-options">
|
|
<div class="sub-option" style="margin-top:5px">
|
|
<input type="checkbox" id="customCardStyles" name="customCardStyles">
|
|
<label for="customCardStyles" class="sub-text">Custom Card Styles</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Image Size</span>
|
|
<input type="number" id="imageSize" class="card-input" min="0" max="300" value="1" style="width:80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Roundness</span>
|
|
<input type="number" id="cardRoundness" class="card-input" min="0" max="300" value="1" style="width:80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">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;">Extra Card Spacing</span>
|
|
<input type="number" id="cardSpacing" class="card-input" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Width</span>
|
|
<input type="number" id="cardWidth" class="card-input" min="0" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">Card Height</span>
|
|
<input type="number" id="cardHeight" class="card-input" min="0" max="300" value="1" style="width: 80px;">
|
|
<span class="sub-text">px</span>
|
|
</div>
|
|
</div>
|
|
<div class="sub-option">
|
|
<div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
|
|
<span class="sub-text" style="width:75px;">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>Disable High Contrast UI</b> if your colors become duller after refreshing! On the sidebar, if you click on your profile icon you can turn it off there.</p>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Popular Palettes</h3>
|
|
<div class="options-presets">
|
|
<button id="revert-colors" class="colors-button">Revert to original</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Reds</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Oranges</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Greens</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Blues</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Pinks</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Purples</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Pastels</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Mesa</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fade</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fade2</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Ocean</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Watermelon</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Army</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Rainbow</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Sunset</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Popsicle</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Berries</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Fruit</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Night</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Base</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Muted</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Candy</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
<button class="preset-button colors-button">
|
|
<p>Chess</p>
|
|
<div class="colors-preview"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Single color</h3>
|
|
<p>Choose a color to set all cards to that color:</p>
|
|
<div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#34FECB" id="singleColorInput" class="color-picker-small"></input>
|
|
<input type="text" class="card-input" value="#34FECB" id="singleColorText" />
|
|
<button id="setSingleColor" class="big-button">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Gradient</h3>
|
|
<p>Choose 2 colors to create a gradient between them:</p>
|
|
<div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#EA76DA" id="gradientColorFrom" class="color-picker-small" />
|
|
<input type="text" class="card-input" value="#EA76DA" id="gradientColorFromText" />
|
|
</div>
|
|
<div class="palette-selection">
|
|
<input type="color" value="#7B61FF" id="gradientColorTo" class="color-picker-small" />
|
|
<input type="text" class="card-input" value="#7B61FF" id="gradientColorToText" />
|
|
<button id="setGradientColor" class="big-button">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gpa-bounds-container tab" style="display:none">
|
|
<div class="tab-header">
|
|
<h2 style="margin-top: 0" data-i18n="gpa_settings">GPA Calculator Bounds</h2>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div style="display: flex;gap: 8px;">
|
|
<div class="gpa-bounds option-container"></div>
|
|
<div class="gpa-bounds-explanation option-container">
|
|
The letter grade will be calculated as greater than or equal to the percentage given. <br><br>
|
|
If your school doesn't use the +/- system, you can enter 101 for those grades to remove them from the
|
|
calculation. (for example A+ = 101, A = 90, A- = 101)
|
|
<h3 class="header-small" style="margin-top: 20px;">GPA Scale Presets 0-4</h3>
|
|
<button class="big-button" id="gpa-plus-minus">+/- GPA Scale</button>
|
|
<button class="big-button" id="gpa-by-letter">By Letter GPA Scale</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-font-container tab" style="display:none">
|
|
<!-- TODO: make this a dropdown -->
|
|
<div class="tab-header">
|
|
<div>
|
|
<h2 style="margin-top: 0" data-i18n="styles">Styles</h2>
|
|
</div>
|
|
<button class="big-button back-btn" data-i18n="back">Back</button>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small" id="fontsDropdown" style="cursor:pointer; display:flex; align-items:center; gap:8px;">
|
|
Dashboard Font
|
|
<img id="fontsDropdownArrow" style="transform:rotate(180deg);" src="../icon/dropdownArrow.svg" width="16px" height="16px">
|
|
</h3>
|
|
|
|
<div id="quick-fonts"></div>
|
|
|
|
<div style="margin-top:10px;" class="custom-font">
|
|
<h3 class="header-small">Custom Fonts</h3>
|
|
<p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family="
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="custom-font option-container">
|
|
<h3 class="header-small">Custom Background</h3>
|
|
<p>Pick a preset or use your own image url.</p>
|
|
<div 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;">Image scale</span>
|
|
<span class="sub-text" id="customBackgroundScaleValue">100%</span>
|
|
</div>
|
|
<input type="range" min="50" max="200" step="1" id="customBackgroundScale">
|
|
</div>
|
|
<input style="width:85%;" class="card-input" id="customBackgroundLink" placeholder="https://...">
|
|
<button id="clearCustomBackground" class="big-button" style="margin-top: 8px;">Clear Background</button>
|
|
</div>
|
|
<div class="sub-option" style="margin-top:10px;">
|
|
<input type="checkbox" id="customBackgroundDaily" name="customBackgroundDaily">
|
|
<label for="customBackgroundDaily" class="sub-text">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">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">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 & 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">You can also email <b style="font-weight:600">sandlerguy5@gmail.com</b> for any issues or feedback. Thank you!</p>
|
|
<p id="dev-alert"></p>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Storage reset</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="storage-reset-btn">Go</button>
|
|
<span>This will reset all settings to the default. You will need to refresh the page after.</span>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Clear planner cache</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="planner-cache-clear-btn">Go</button>
|
|
<span>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">Storage usage</h3>
|
|
<div style="display: flex; flex-direction: column; gap: 3px;">
|
|
<span class="sub-text">Settings (sync): <span id="storage-usage-sync">…</span></span>
|
|
<span class="sub-text">Planner cache: <span id="storage-usage-cache">…</span></span>
|
|
<span class="sub-text">Other local data: <span id="storage-usage-local">…</span></span>
|
|
<span class="sub-text">Local quota: <span id="storage-usage-quota">…</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Storage Dump</h3>
|
|
<div style="margin-bottom: 10px">
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="rk_btn">Go</button>
|
|
<span>This will retrieve all the settings saved by the extension.</span>
|
|
</div>
|
|
<textarea class="card-input" id="rk_output"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Dark mode inspector</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<button class="big-button" id="inspector-btn">Go</button>
|
|
<span>This will inspect the page for any dark mode gaps.</span>
|
|
</div>
|
|
<div>
|
|
<textarea id="inspector-output" class="card-input"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="option-container">
|
|
<h3 class="header-small">Card limit</h3>
|
|
<div style="display: flex; gap: 10px; align-items: center;width:100%">
|
|
<div>
|
|
<input type="range" max="40" min="5" id="card_limit"></input>
|
|
<p style="text-align: center" id="card_limit_num"></p>
|
|
</div>
|
|
<p><b style="font-weight:600">This is an experimental feature.</b> Adjusting this number will reset your cards and could cause storage issues.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--
|
|
<div class="option-container">
|
|
<h3 class="header-small">Card method</h3>
|
|
<p><b style="font-weight:600">This is an experimental feature.</b> You shouldn't need these on.</p>
|
|
<div style="display: flex; gap: 10px; align-items: center;margin-top: 5px;">
|
|
<input type="checkbox" id="card_method_date"></input>
|
|
<span>Date</span>
|
|
</div>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<input type="checkbox" id="card_method_dashboard"></input>
|
|
<span>Dashboard</span>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="option-container">
|
|
<h3 class="header-small">Error log</h3>
|
|
<div>
|
|
<textarea id="error_log_output" class="card-input"></textarea>
|
|
</div>
|
|
</div>
|
|
</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> |