finalizing but I need more time

This commit is contained in:
Guy Sandler 2026-04-28 22:55:27 -07:00
parent a0e26918ad
commit e85c6c3d00
15 changed files with 139 additions and 163 deletions

Binary file not shown.

136
README.md
View File

@ -1,14 +1,10 @@
![Better Canvas](/icon/NEWtitle.png)
# Betterer Canvas
name idea: even better canvas or Actually Better Canvas (ABC)
# Actually Better Canvas
I don't like the direction bettercanvas (bettercampus) is heading so I forked it
They tried to change license but forgot to wipe the codebase for thier MIT licensed version, so this is a fully legal fork.
Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA calculator, and more!
They tried to change license but forgot to rebase so this is based on the MIT licensed version and fully legal 🙃
<!-- ### Supported on -->
@ -20,8 +16,6 @@ Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA ca
To contact me, please email sandlerguy5@gmail.com, or you can open an issue within the "Issues" tab on GitHub.
If you are ksucpea and want to take this down, you can't, and I have [proof of legality](#proof-of-legality)
## Table of Contents
- [Features](#features)
@ -54,15 +48,17 @@ Better Canvas introduces improvements to the Canvas user interface:
- Preview assignments and announcements from the dashboard
## Newly added features
Actually Better Canvas adds more with more to come!
- GPA presets
- Scheduled Reminder Popups (broken)
- backend stuff:
- Searching themes (the original didn't actually impliment that)
- made the dark mode into a css file instead of a reallllllly long string
- Card Styles (image size, card roundness, card spacing, width, height, theme compatible)
- Custom Background (by URL, theme compatible)
- Popup UI revamp
- NEW Better todo list (todo: hover preview, cutoff)
- NEW Better todo list
## Planned Features (by priority)
- widgets (music, timer)
@ -87,6 +83,7 @@ Better Canvas introduces improvements to the Canvas user interface:
- transcribe lecture (if there is demand for it)
- flashcards
- goals
- Scheduled Reminder Popups
## Community suggestions (maybe will be done at some point)
- when opening assignments it will show you "if you get a 0 on this your grade will be _"
@ -113,9 +110,9 @@ To install, run, and build with this repository locally,
To use Better Canvas, select your browser below to install the extension from a store.
[Chrome](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
<!-- [Chrome](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh) -->
[Firefox](https://addons.mozilla.org/addon/better-canvas/)
<!-- [Firefox](https://addons.mozilla.org/addon/better-canvas/) -->
### How to use
@ -124,29 +121,6 @@ To use Better Canvas, select your browser below to install the extension from a
- When the menu opens, click on the Better Canvas extension.
- A menu will appear with configuration options for your Canvas homepage.
## Version Notes
#### Update 5.10
- Fixed dark mode bug in discussion text boxes
- Added new themes + fonts
- Card colors now change instantly
- Dark mode fixer feature
- Card customization now shows preview of image
- New sidebar options
- Dark mode buttons preview their appearance
- "Remove sidebar logo" feature
- "Hide recent feedback" feature
- Menu redesign
- Fixed card assignment bug
- Card assignment efficiency improvements
- Dark mode rework
- Dark mode now syncs
- Option to use device dark mode settings
- Improved todo list
- "Color coded tab icons" feature
- "Use card colors" option for todo list
## Color Reference
| Color | Hex |
@ -229,96 +203,6 @@ To add a new feature, please follow these guidelines.
- If the function only adds css, it should be added to `applyAestheticChanges()`, and in this case should not be a separate function, instead add the css to the existing styles found in this function.
- Anything else should be put under `startExtension()` and should be placed no higher than the `checkDashboardReady` function found here.
### Add a new theme
To add a new theme, please follow these guidelines.
You can export a theme using the export tool in the menu and sending an email to me, or you can merge it here after doing the following:
#### Exporting
- Go to the Themes tab and export dark mode, card images, card colors, and custom font. - The only on/off toggles that need be included are `disable_color_overlay` and `gradient_cards`.
Any other toggles aren't necessary, so you should manually add these keys and the appropriate values in with the export code.
- Pick a unique id for the theme, doesn't matter how long this is.
#### Changes to js/popup.js
- Add the export code under `getTheme()`.
- Make sure it follows this format: `"theme-<id>: { "exports": {"..."}, "preview": "..." }`
- For the preivew, try to pick the smallest image size from the card images (under ~50kb is perfect), or you can find a smaller display image that isn't included in the card images.
#### Changes to html/popup.html
- Add the following under all the other theme buttons:
```
<button id="theme-<id>" class="theme-button customization-button"><theme name> by <you></button>
```
- The theme name should be one/two words so it doesn't take up too much space.
## File structure
```
.
├── README.md
├── \_locales
│ ├── en
│ │ └── messages.json
│ └── es
│ └── messages.json
├── css
│ ├── content.css
│ ├── options.css
│ └── popup.css
├── html
│ ├── options.html
│ └── popup.html
├── icon
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-19.png
│ ├── icon-32.png
│ ├── icon-38.png
│ ├── icon-48.png
│ ├── icon-wide.png
│ ├── iconwpadding.png
│ └── oldicon-128.png
├── js
│ ├── background.js
│ ├── content.js
│ └── popup.js
└── manifest.json
```
### Update the file structure
#### Use the tree command
- Linux/Unix
- Install [tree command line tool](https://www.geeksforgeeks.org/tree-command-unixlinux/)
- Use the tree command to generate file structure:
```
tree
```
Learn more about tree commands for Linux/Unix [here](https://www.geeksforgeeks.org/tree-command-unixlinux/).
- Windows
- Use the tree command to generate file structure:
```
tree /
```
Learn more about tree commands for Windows [here](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/tree).
## proof of legality
This is the version right before the monetization of bettercanvas, original license and all.
here is some proof the lisence was changed and this is based on the reverted MIT version 5.12.6
![case1](./proof-of-legality/case1.png)
![case2](./proof-of-legality/case2.png)
## Authors
#### Fork Owner
@ -346,5 +230,7 @@ You can fork, modify, and use this code however you like with attributes, but no
![Better Canvas](/icon/icon-48.png)
Copyright (c) 2024 ksucpea
Copyright (c) 2026 Guy Sandler

View File

@ -1,6 +1,6 @@
{
"better_canvas": {
"message": "Better Canvas"
"actually_better_canvas": {
"message": "Actually Better Canvas"
},
"updates": {
"message": "Updates"

View File

@ -1,33 +1,124 @@
body, html {font-family: 'Wix Madefor Text';background:#161616;color:#e2e2e2}
h1, h2, p {margin:0;padding:0;}
.main {display:flex;margin:auto;width:1200px;margin-top:60px;align-items: center;justify-content: center;font-size: 15px;gap:20px;}
#updateCSS {border:1px solid #8dd28d;background: #8dd28d24}
#updateCSS:hover {background: #8dd28d24}
.container {flex: 300px; border-radius: 14px;margin-bottom: 20px;}
.steps-item {display:flex;align-items:center;margin-top: 12px;font-size:18px;font-weight:600;}
.main-left { flex-wrap: wrap; gap: 20px;width:500px}
.welcome img {height: 66px;width:66px;}
h1 {font-size: 50px;line-height:52px;}
h2 {font-size: 20px}
.steps {margin-top: 40px; margin-bottom: 20px;background:#101010;padding:24px;border-radius: 14px;display: inline-block;}
.menu-frame {border: none; height: 150vh;flex: 1;max-width: 514px;max-height:700px;overflow:scroll;border:1px solid #323232;border-radius:8px;}
.bettercanvas {display:inline-block;background:-webkit-linear-gradient(0deg, #ff002e, #ff5200, #ff47ad);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.icon {height: 22px; width: 22px;margin-right: 10px;}
.pin-icon {fill: #727272}
.puzzle-icon {fill: #fff;}
p {color: #adadad}
.contact-info { font-size:12px;max-width:75%;}
#finger2 {position:absolute;bottom:0;animation:bounce2 .7s infinite linear;font-size:18px;}
#refresh-note {position:relative;font-size:16px;display:inline-block;margin-top:18px;}
body,
html {
font-family: "Wix Madefor Text";
background: #161616;
color: #e2e2e2;
}
h1,
h2,
p {
margin: 0;
padding: 0;
}
.main {
display: flex;
margin: auto;
width: 1800px;
height: 70vh;
margin-top: 60px;
align-items: center;
justify-content: center;
font-size: 15px;
gap: 20px;
}
#updateCSS {
border: 1px solid #8dd28d;
background: #8dd28d24;
}
#updateCSS:hover {
background: #8dd28d24;
}
.container {
flex: 600px;
border-radius: 14px;
margin-bottom: 20px;
}
.steps-item {
display: flex;
align-items: center;
margin-top: 12px;
font-size: 18px;
font-weight: 600;
}
.main-left {
flex-wrap: wrap;
gap: 20px;
width: 800px;
}
.welcome img {
height: 66px;
width: 66px;
}
h1 {
font-size: 50px;
line-height: 52px;
}
h2 {
font-size: 20px;
}
.steps {
margin-top: 40px;
margin-bottom: 20px;
background: #101010;
padding: 24px;
border-radius: 14px;
display: inline-block;
}
.menu-frame {
border: none;
height: 150vh;
flex: 1;
max-width: 514px;
max-height: 700px;
overflow: scroll;
border: 1px solid #323232;
border-radius: 8px;
}
.bettercanvas {
display: inline-block;
background: -webkit-linear-gradient(0deg, #ff002e, #ff5200, #ff47ad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.icon {
height: 22px;
width: 22px;
margin-right: 10px;
}
.pin-icon {
fill: #727272;
}
.puzzle-icon {
fill: #fff;
}
p {
color: #adadad;
}
.contact-info {
font-size: 12px;
max-width: 75%;
}
#finger2 {
position: absolute;
bottom: 0;
animation: bounce2 0.7s infinite linear;
font-size: 18px;
}
#refresh-note {
position: relative;
font-size: 16px;
display: inline-block;
margin-top: 18px;
}
@keyframes bounce2 {
0% {
right: -36px;
}
50% {
right: -30px;
}
100% {
right: -36px;
}
0% {
right: -36px;
}
50% {
right: -30px;
}
100% {
right: -36px;
}
}

View File

@ -18,8 +18,7 @@
<div class="main-left">
<div class="container">
<div class="welcome">
<h2 style="transform:rotate(-20deg);color:cyan;position:relative;top:-12px;left:120px;">-er</h2>
<h1>Welcome to <span class="bettercanvas">Better Canvas!</span></h1>
<h1>Welcome to <span class="bettercanvas">Actually Better Canvas!</span></h1>
<div id="refresh-note">
<p style="font-weight:600;">Refresh your Canvas page to setup</p>
<span id="finger2">&#128072;</span>
@ -34,7 +33,7 @@
</svg>
<span>Click on this puzzle icon at the top right</span>
</li>
<li class="steps-item"><img src="../icon/icon-48.png" class="icon">Click on Better Canvas</li>
<li class="steps-item"><img src="../icon/icon-48.png" class="icon">Click on Actually Better Canvas</li>
<li class="steps-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pin-icon icon">
<path

View File

@ -2,7 +2,7 @@
<html lang="en" style="/*background:linear-gradient(115deg, rgb(255, 53, 88), rgb(255, 131, 73), rgb(255, 103, 187))*/">
<head>
<title>Better Canvas</title>
<title>Actually Better Canvas</title>
<link href="../css/popup.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -23,7 +23,7 @@
<div class="main">
<div class="header">
<img id="bclogo" src="../icon/icon-128.png">
<h1 data-i18n="better_canvas">Better Canvas</h1>
<h1 data-i18n="actually_better_canvas">Actually Better Canvas</h1>
</div>
<div class="more-options-container">
<button id="customize-dark-btn" class="big-button tab-btn">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 593 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1004 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB