university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: added fontawesome icons

Browse source
This commit is contained in:
Orangerot 2024-12-10 01:05:05 +01:00
parent 7961325d81
commit bd7ae62180
8 changed files with 66 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -4,8 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script> <script src="main.js"></script>
<link rel="stylesheet" href="bulma.min.css"> <link rel="stylesheet" href="lib/bulma.min.css">
<link rel="stylesheet" href="bulma-slider.css"> <link rel="stylesheet" href="lib/bulma-slider.css">
<link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="lib/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title> <title>Imagine - Image Editor</title>
</head> </head>
@ -19,14 +21,22 @@
<div id="imports" class="columns is-mobile"> <div id="imports" class="columns is-mobile">
<div class="column"> <div class="column">
<button id="take-picture" <button id="take-picture"
class="button is-large is-responsive is-fullwidth"> class="button is-large is-responsive is-fullwidth py-6"
style="display: flex; flex-direction: column; align-items: center;"
>
<i class="fa-solid fa-6x fa-camera mb-4"></i>
Take a Picture Take a Picture
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<label for="upload-image" <label for="upload-image"
class="button is-large is-responsive is-fullwidth"> class="button is-large is-responsive is-fullwidth py-6"
style="display: flex; flex-direction: column; align-items: center;"
>
<i class="fa-solid fa-6x fa-upload mb-4"></i>
<span>
Upload an Image Upload an Image
</span>
</label> </label>
<input type="file" id="upload-image" accept="image/*" style="display: none"> <input type="file" id="upload-image" accept="image/*" style="display: none">
</div> </div>
@ -34,7 +44,7 @@
</div><br> </div><br>
<a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px; <a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px;
bottom: 30px"> bottom: 30px">
Settings <i class="fa-solid fa-sliders mr-2"></i> Settings
</a> </a>
</div> </div>
</div> </div>
@ -48,6 +58,7 @@
Save Image Save Image
</button> </button>
<button id="share" class="button is-secondary"> <button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share Share
</button> </button>
@ -56,7 +67,10 @@
</p> </p>
<div class="field"> <div class="field">
<label class="label">Brightness</label> <label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="brightness" id="brightness"
@ -65,7 +79,10 @@
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Saturation</label> <label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="saturate" id="saturate"
@ -74,7 +91,10 @@
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Contrast</label> <label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="contrast" id="contrast"
@ -90,7 +110,10 @@
Blur and Sharpen Blur and Sharpen
</p> </p>
<div class="field"> <div class="field">
<label class="label">Blur</label> <label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="blur" id="blur"
@ -102,12 +125,11 @@
</div> </div>
</div> </div>
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200"> <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
<span id="settings"></span>
<a href="#top" class="delete"></a>
<button id="save" class="button is-primary"> <button id="save" class="button is-primary">
Save Image Save Image
</button> </button>
<button id="share" class="button is-secondary"> <button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share Share
</button> </button>
@ -116,7 +138,10 @@
</p> </p>
<div class="field"> <div class="field">
<label class="label">Brightness</label> <label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="brightness" id="brightness"
@ -125,7 +150,10 @@
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Saturation</label> <label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="saturate" id="saturate"
@ -134,7 +162,10 @@
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Contrast</label> <label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="contrast" id="contrast"
@ -150,7 +181,10 @@
Blur and Sharpen Blur and Sharpen
</p> </p>
<div class="field"> <div class="field">
<label class="label">Blur</label> <label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="blur" id="blur"

0
bulma-slider.css → lib/bulma-slider.css
View file

0
bulma.min.css → lib/bulma.min.css vendored
View file

9
lib/fontawesome/css/fontawesome.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
lib/fontawesome/css/solid.min.css vendored Normal file
View file

@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

BIN
lib/fontawesome/webfonts/fa-solid-900.ttf Normal file
View file

Binary file not shown.

BIN
lib/fontawesome/webfonts/fa-solid-900.woff2 Normal file
View file

Binary file not shown.

2
main.js
View file

@ -160,6 +160,6 @@ function draw(viewport_scale) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.filter = ''; ctx.filter = '';
lensflare(.3,.3); // lensflare(.3,.3);
} }