Skip to content

Commit

Permalink
SpotOn V2 Release (#32)
Browse files Browse the repository at this point in the history 
Please see the full release notes in releases!
  • Loading branch information
@SenpaiHunters
SenpaiHunters authored Aug 27, 2023
1 parent 78e2294 commit 0a80dce
Show file tree
Hide file tree
Showing 95 changed files with 16,191 additions and 0 deletions.
1,651 changes: 1,651 additions & 0 deletions SpotOn/background.js
View file

Large diffs are not rendered by default.

98 changes: 98 additions & 0 deletions SpotOn/color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<title>Color Picker</title>
<link rel="icon" href="./icons/icon128.png" type="image/png" />
<link rel="stylesheet" href="css/color/color.css" />
<link rel="stylesheet" href="css/shared/shared.css" />
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<button class="back-button" id="backButton">
<i class="bx bx-chevron-left"></i>
</button>
<div class="toggle-mode">
<button id="modeToggle">
<i id="modeIcon" class="fas fa-toggle-on"></i>Toggle mode
</button>
</div>

<button
class="theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="auto"
aria-live="polite"
>
<svg
class="sun-and-moon"
aria-hidden="true"
width="24"
height="24"
viewBox="0 0 24 24"
>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle cx="24" cy="10" r="6" fill="black"></circle>
</mask>
<circle
class="sun"
cx="12"
cy="12"
r="6"
mask="url(#moon-mask)"
fill="currentColor"
></circle>
<g class="sun-beams" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</g>
</svg>
</button>

<h1>Color Picker</h1>
<div id="colorBox"></div>

<div class="color-picker">
<label for="colorInput">Pick a Color:</label>
<input type="color" id="colorInput" />
</div>
<div class="color-format">
<label for="colorFormat">Copy Color As:</label>
<select id="colorFormat">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
<option value="rgba">RGBA</option>
<option value="hsl">HSL</option>
</select>
</div>
<button id="copyButton" class="icon-button">
<i class="bx bx-copy"></i> Copy Color
</button>
<span id="colorValue">#FFFFFF</span>
<br />
<button id="colorOptionsButton" class="icon-button">
<i class="bx bx-save"></i> Go to Color Options
</button>

<button id="viewHistoryButton" class="icon-button">
<i class="bx bx-history"></i> View Color History
</button>

<!-- Watermark -->
<div class="watermark">Made by Kami</div>
</div>
<script src="js/coloring/color.js"></script>
<script src="js/shared/shared.js"></script>
</body>
</html>
78 changes: 78 additions & 0 deletions SpotOn/colorHistory.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./icons/icon128.png" type="image/png" />
<title>Color History</title>
<link rel="stylesheet" href="css/color/colorHistory.css" />
<link rel="stylesheet" href="css/shared/shared.css" />
</head>
<body>
<div class="container">
<button id="backToMainPageButton">Back to Main Page</button>
<div class="toggle-mode">
<button id="modeToggle">
<i id="modeIcon" class="fas fa-toggle-on"></i>Toggle mode
</button>
</div>

<button
class="theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="auto"
aria-live="polite"
>
<svg
class="sun-and-moon"
aria-hidden="true"
width="24"
height="24"
viewBox="0 0 24 24"
>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle cx="24" cy="10" r="6" fill="black"></circle>
</mask>
<circle
class="sun"
cx="12"
cy="12"
r="6"
mask="url(#moon-mask)"
fill="currentColor"
></circle>
<g class="sun-beams" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</g>
</svg>
</button>
<h1>Color History</h1>
<div class="color-history">
<!-- Total Colors Saved Counter -->
<p id="totalColorsSavedMessage">Total Colors Saved: 0</p>

<!-- Color viewer for each saved color -->
<div class="color-viewer-container" id="colorViewerContainer">
<!-- Add a message for empty color history -->
<div class="empty-message">No saved colors</div>
</div>
</div>
<button id="removeAllButton">Remove All Colors</button>
<button id="backButton">Back</button>
<!-- Watermark -->

<div class="watermark">Made by Kami</div>
</div>
<script src="js/coloring/colorHistory.js"></script>
<script src="js/shared/shared.js"></script>
</body>
</html>
156 changes: 156 additions & 0 deletions SpotOn/colorOptions.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="A color converter and gradient generator tool"
/>
<meta
property="og:title"
content="Color Converter and Gradient Generator"
/>
<meta
property="og:description"
content="Convert colors and generate gradients with this tool"
/>
<meta property="og:image" content="/icons/icon128.png" />
<link rel="icon" href="./icons/icon128.png" type="image/png" />

<link rel="stylesheet" href="css/shared/shared.css" />
<link rel="stylesheet" href="css/color/colorOptions.css" />
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
<title>Color Converter and Gradient Generator</title>
</head>
<body>
<div class="container">
<button id="backToMainPageButton">Back to Main Page</button>

<div class="toggle-mode">
<button id="modeToggle">
<i id="modeIcon" class="fas fa-toggle-on"></i>Toggle mode
</button>
</div>

<button
class="theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="auto"
aria-live="polite"
>
<svg
class="sun-and-moon"
aria-hidden="true"
width="24"
height="24"
viewBox="0 0 24 24"
>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle cx="24" cy="10" r="6" fill="black"></circle>
</mask>
<circle
class="sun"
cx="12"
cy="12"
r="6"
mask="url(#moon-mask)"
fill="currentColor"
></circle>
<g class="sun-beams" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</g>
</svg>
</button>

<!-- Color Converter -->
<h1>Color Converter</h1>
<div>
<label for="hexColor">Enter HEX Color:</label>
<input type="text" id="hexColor" />
<select id="conversionType">
<option value="rgb">RGB</option>
<option value="rgba">RGBA</option>
<option value="hsl">HSL</option>
<!--- i am not doing these lol
<option value="cmyk">CMYK</option>
<option value="hsv">HSV</option>
<option value="named">Named Color</option>
<option value="lcc">LCC</option>
<option value="oklch">OKLCH</option>
-------->
</select>
</div>
<div class="color-box" id="colorBox"></div>
<p id="colorConversionResult"></p>
<!-- Additional options for the hex color converter -->
<button id="copyColorResult">Copy Color to Clipboard</button>

<!-- Gradient Generator -->
<h1>Gradient Generator</h1>
<div>
<label for="gradientColors"
>Enter Gradient Colors (comma-separated):</label
>
<input type="text" id="gradientColors" />
<br />
<label for="gradientDirection">Gradient Direction:</label>
<select id="gradientDirection">
<option value="to right">To Right</option>
<option value="to left">To Left</option>
<option value="to top">To Top</option>
<option value="to bottom">To Bottom</option>
<option value="to top right">To Top Right</option>
<option value="to top left">To Top Left</option>
<option value="to bottom right">To Bottom Right</option>
<option value="to bottom left">To Bottom Left</option>
</select>
</div>
<div class="color-box" id="gradientBox"></div>
<p id="gradientGenerationResult"></p>
<button id="copyGradientResult">Copy Gradient to Clipboard</button>
<br />
<!-- Additional gradient options for the gradient generator -->
<h2>Gradient Options</h2>
<div>
<label for="gradientPresets">Choose Gradient Preset:</label>
<select id="gradientPresets">
<option value="none">None</option>
<option value="warm">Warm Colors</option>
<option value="cool">Cool Colors</option>
<option value="earth">Earth Colors</option>
<option value="rainbow">Rainbow Colors</option>
<option value="pastel">Pastel Colors</option>
<option value="vibrant">Vibrant Colors</option>
<option value="ocean">Ocean Colors</option>
<option value="candy">Candy Colors</option>
<option value="retro">Retro Colors</option>
<option value="neon">Neon Colors</option>
<option value="oceanBreeze">Ocean Breeze Colors</option>
<option value="purpleDream">Purple Dream Colors</option>
<option value="roseGold">Rose Gold Colors</option>
<option value="azureSky">Azure Sky Colors</option>
</select>
</div>
<button id="clearColorsButton">Clear Colors</button>
</div>

<!-- Watermark -->
<div class="watermark">Made by Kami</div>
<!-- Scripts -->
<script src="js/shared/shared.js"></script>
<script src="js/coloring/colorOptions.js"></script>
</body>
</html>
Loading

0 comments on commit 0a80dce

Please sign in to comment.