update some ui elements
This commit is contained in:
Triston Armstrong
parent
91be4dcc63
commit
0fa8c3ec56
@ -1,9 +1,8 @@
|
||||
<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="30" height="30" rx="8" ry="8" fill="#2db0ff"/>
|
||||
<g fill="#ffffff" stroke-width="1.0001">
|
||||
<rect x="5" y="5" width="10" height="10" rx="4" ry="4"/>
|
||||
<path d="m9 17c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4h-2zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/>
|
||||
<path d="m21 17c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/>
|
||||
<path d="m21 5c-2.216 0-4 1.784-4 4v2c0 2.216 1.784 4 4 4h2c2.216 0 4-1.784 4-4v-2c0-2.216-1.784-4-4-4zm0 1h2c1.662 0 3 1.338 3 3v2c0 1.662-1.338 3-3 3h-2c-1.662 0-3-1.338-3-3v-2c0-1.662 1.338-3 3-3z" opacity=".45"/>
|
||||
</g>
|
||||
<svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">
|
||||
.ColorScheme-Text { color:#fff; } .ColorScheme-Highlight { color:#4285f4; }
|
||||
</style>
|
||||
</defs>
|
||||
<path d="m6 4c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm14 0c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm-14 1h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm14 0h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm-14 13c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm14 0c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-6zm-14 1h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm14 0h6c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1z" class="ColorScheme-Text" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 923 B After Width: | Height: | Size: 1.1 KiB |
23
assets/documents.svg
Normal file
23
assets/documents.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
|
||||
color:#333333;
|
||||
}
|
||||
.ColorScheme-Highlight {
|
||||
color:#60c0f0;
|
||||
}</style>
|
||||
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
|
||||
<stop stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
|
||||
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
|
||||
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
|
||||
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
|
||||
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
|
||||
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
|
||||
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
|
||||
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
|
||||
<path d="m24.666 23.169a3.6587 3.6587 0 0 0-3.6662 3.6662v18.331c0 2.0296 1.6366 3.6662 3.6662 3.6662h14.665c2.0334 0 3.67-1.6328 3.67-3.6662v-12.832l-9.1655-9.1693zm0 1.8293h7.3324v5.5031c0 2.0296 1.6366 3.6662 3.6662 3.6662h5.5031v10.999a1.8293 1.8293 0 0 1-1.8331 1.8331h-14.665a1.8293 1.8293 0 0 1-1.8369-1.8331v-18.331c0-1.0205 0.81639-1.8331 1.8331-1.8331zm9.1693 0.7597 6.5727 6.5765h-4.7396a1.8293 1.8293 0 0 1-1.8331-1.8331z" opacity=".15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
1
assets/file.svg
Normal file
1
assets/file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
22
assets/folder.svg
Normal file
22
assets/folder.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
|
||||
color:#333333;
|
||||
}
|
||||
.ColorScheme-Highlight {
|
||||
color:#60c0f0;
|
||||
}</style>
|
||||
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
|
||||
<stop stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
|
||||
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
|
||||
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
|
||||
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
|
||||
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
|
||||
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
|
||||
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
|
||||
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
6
assets/go-home.svg
Normal file
6
assets/go-home.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">.ColorScheme-Text { color:#bfbfbf; }</style>
|
||||
</defs>
|
||||
<path class="ColorScheme-Text" d="m8 1.0059c-0.12781 0-0.25558 0.04855-0.35352 0.14648l-7.0703 7.0723c-0.19587 0.19587-0.19587 0.51116 0 0.70703s0.51116 0.19587 0.70703 0l0.7168-0.7168v5.7852c0 1.108 0.892 2 2 2h8c1.108 0 2-0.892 2-2v-5.7852l0.7168 0.7168c0.19587 0.19587 0.51116 0.19587 0.70703 0s0.19587-0.51116 0-0.70703l-7.0703-7.0723c-0.097934-0.097934-0.22571-0.14648-0.35352-0.14648zm0 1.209 5 5v6.7852c0 0.554-0.446 1-1 1h-2v-3c0-1.108-0.892-2-2-2s-2 0.892-2 2v3h-2c-0.554 0-1-0.446-1-1v-6.7852z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 726 B |
23
assets/home.svg
Normal file
23
assets/home.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
|
||||
color:#333333;
|
||||
}
|
||||
.ColorScheme-Highlight {
|
||||
color:#60c0f0;
|
||||
}</style>
|
||||
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
|
||||
<stop stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
|
||||
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
|
||||
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
|
||||
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
|
||||
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
|
||||
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
|
||||
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
|
||||
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
|
||||
<path d="m32.002 22.062a0.79372 0.79372 0 0 0-0.56694 0.23434l-11.316 11.32a0.80177 0.80177 0 1 0 1.1339 1.1339l1.1452-1.149v9.26c0 1.7764 1.4287 3.2013 3.2013 3.2013h12.805c1.7726 0 3.2013-1.4287 3.2013-3.2013v-9.26l1.1452 1.149a0.80177 0.80177 0 1 0 1.1339-1.1339l-11.316-11.316a0.79372 0.79372 0 0 0-0.56694-0.23434zm0 1.9352 8.0014 8.0014v10.863a1.5988 1.5988 0 0 1-1.5988 1.5988h-3.2013v-4.8001c0-1.7764-1.4287-3.2013-3.2013-3.2013s-3.2013 1.4287-3.2013 3.2013v4.8001h-3.2013a1.5988 1.5988 0 0 1-1.6026-1.5988v-10.859z" opacity=".15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.4 KiB |
1
assets/image_outline.svg
Normal file
1
assets/image_outline.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
|
||||
|
After Width: | Height: | Size: 349 B |
23
assets/images.svg
Normal file
23
assets/images.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style id="current-color-scheme" type="text/css">.ColorScheme-Text {
|
||||
color:#333333;
|
||||
}
|
||||
.ColorScheme-Highlight {
|
||||
color:#60c0f0;
|
||||
}</style>
|
||||
<linearGradient id="linearGradient946" x1="445.28" x2="445.28" y1="181.8" y2="200.07" gradientTransform="matrix(1.4724 0 0 1.4432 -625.58 -239.75)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ffffff" stop-opacity="0" offset="0"/>
|
||||
<stop stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<image x="2.5" y="49.215" width="59" height="10" image-rendering="optimizeQuality" opacity=".5" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAAKCAYAAAAKAya7AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA GXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMFJREFUSInVltEOwyAIRaH1/794 rXvBhF2vDhb6MBIC1gY4gVpV6kQLY6H0iiCRAvEdTfrRPAjUkz5bh4pQZzMq4GMOlm8H0sGPKsai yX3hh9MT1kN3wLs8TFZdYjA30QvWCC9tATrgmvnN1INHIKOgK2D/jAEPwJfpZVbN/4hxJAr5e4mO MRtllbnDQizLw4R9u6yrt8yjjCNMx/ipA4rZVb5vkAhbdkAxif56dnu/dhb9zN4k1ReBJy4WJRcK EZE37lJlFEBdtGUAAAAASUVORK5CYII="/>
|
||||
<path class="ColorScheme-Highlight" d="m8.3493 8.996h10.187c2.8348 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5832 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3647 1.9419 4.3542 4.3504v26.293c0.004189 2.4065-1.9477 4.3583-4.3542 4.3541h-47.295c-2.405 0.002095-4.3546-1.9492-4.3504-4.3541v-30.296c-0.0041836-2.405 1.9454-4.3562 4.3504-4.3541z" fill="currentColor"/>
|
||||
<path d="m8.3494 8.996h10.187c2.8349 0 2.9596 0.10961 5.8283 2.3812 2.6345 1.9881 3.5833 1.6252 7.0454 1.6252h24.236c2.4085-0.01263 4.3648 1.9419 4.3542 4.3504v26.293c0.0042 2.4065-1.9477 4.3583-4.3542 4.3541h-47.296c-2.405 0.0021-4.3546-1.9492-4.3505-4.3541v-30.296c-0.0042-2.405 1.9454-4.3562 4.3505-4.3541z" fill="#000000" opacity=".2"/>
|
||||
<rect class="ColorScheme-Highlight" x="3.9998" y="17.001" width="56" height="38" rx="4.3542" ry="4.2672" fill="currentColor"/>
|
||||
<path d="m8.3528 17.001c-2.4114 0-4.3541 1.9012-4.3541 4.2634v1.0016c0-2.3623 1.9427-4.2672 4.3541-4.2672h47.294c2.4114 0 4.3541 1.9049 4.3541 4.2672v-1.0016c0-2.3623-1.9427-4.2634-4.3541-4.2634z" fill="#ffffff" opacity=".08"/>
|
||||
<path d="m3.9986 49.737v0.99782c0 2.366 1.9427 4.2672 4.3541 4.2672h47.294c2.4114 0 4.3541-1.9012 4.3541-4.2672v-0.99782c0 2.3623-1.9427 4.2634-4.3541 4.2634h-47.294a4.3012 4.3012 0 0 1-4.3541-4.2634z" opacity=".15"/>
|
||||
<path d="m8.3528 16c-2.4114 0-4.3541 1.9049-4.3541 4.2672v0.99782c0-2.3623 1.9427-4.2634 4.3541-4.2634h47.294c2.4114 0 4.3541 1.9012 4.3541 4.2634v-0.99782c0-2.3623-1.9427-4.2672-4.3541-4.2672z" opacity=".05"/>
|
||||
<rect x="4" y="17" width="56" height="38" rx="4.3542" ry="4.2672" fill="url(#linearGradient946)" opacity=".2"/>
|
||||
<path d="m21.846 24.998c-1.8747 0-3.3827 1.5118-3.3827 3.3865v15.232c0 1.8747 1.5081 3.3827 3.3827 3.3827h20.308c1.8747 0 3.3865-1.5118 3.3865-3.3827v-15.232c0-1.8747-1.5118-3.3865-3.3865-3.3865zm0 1.6933h20.308c0.93734 0 1.6933 0.75592 1.6933 1.6933v15.232l-8.4625-8.4663-5.8886 6.7693-4.2634-3.3827-5.0798 5.076v-15.228c0-0.93734 0.75592-1.6933 1.6933-1.6933zm4.2332 3.3865a2.5399 2.5399 0 1 0 0 5.076 2.5399 2.5399 0 0 0 0-5.076z" opacity=".15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
18
index.css
18
index.css
@ -13,13 +13,23 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("./assets/wallpaper3.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wallpaper {
|
||||
position: fixed;
|
||||
top: -1;
|
||||
left: -1;
|
||||
width: 101vw;
|
||||
height: 101vh;
|
||||
background-image: url("./assets/wallpaper7.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<title>KlectrDesktop</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wallpaper"></div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
@ -4,9 +4,11 @@ import FileManager from "./applications/fileManager";
|
||||
export default class Applications {
|
||||
/** currently openedd applications */
|
||||
applications: Application[];
|
||||
os: OS;
|
||||
|
||||
constructor() {
|
||||
this.applications = [];
|
||||
constructor(os: OS) {
|
||||
this.applications = [new FileManager("File Manager", this)];
|
||||
this.os = os;
|
||||
}
|
||||
|
||||
addApplication(application: Application) {
|
||||
@ -22,8 +24,13 @@ export default class Applications {
|
||||
console.log("skipping file manager");
|
||||
return
|
||||
}
|
||||
const app = new FileManager()
|
||||
const app = new FileManager("File Manager", this)
|
||||
this.applications.push(app);
|
||||
return app
|
||||
}
|
||||
|
||||
end_application(application: Application) {
|
||||
this.applications = this.applications.filter(app => app !== application);
|
||||
this.os.ui.updateDesktop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import Window from "../../ui/window";
|
||||
import Applications from "../applications";
|
||||
|
||||
export default class Application {
|
||||
name: string;
|
||||
constructor(name: string) {
|
||||
parent: Applications;
|
||||
ui_element: Window;
|
||||
|
||||
constructor(name: string, parent: Applications) {
|
||||
this.name = name;
|
||||
this.parent = parent
|
||||
this.ui_element = new Window(this);
|
||||
this.init()
|
||||
}
|
||||
|
||||
getName() {
|
||||
@ -19,4 +28,12 @@ export default class Application {
|
||||
run() {
|
||||
console.log(`Running ${this.getName()}`);
|
||||
}
|
||||
|
||||
remove_window() {
|
||||
this.parent.end_application(this);
|
||||
}
|
||||
|
||||
init(){
|
||||
console.log(`Initializing ${this.getName()}`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,21 +4,50 @@
|
||||
|
||||
export default class FileManager extends Application {
|
||||
/** the ui element for this application */
|
||||
ui_element: Window;
|
||||
icon: string = "📁";
|
||||
|
||||
constructor() {
|
||||
super("File Manager");
|
||||
this.ui_element = new Window(this);
|
||||
}
|
||||
|
||||
getDescription() {
|
||||
return "This is a file manager";
|
||||
}
|
||||
|
||||
|
||||
init_window_ui() {
|
||||
this.ui_element.add_content(`
|
||||
<div class="flex text-white h-full">
|
||||
<div class="flex-05 flex flex-col p-2 bg-[#555] gap-2 h-full rounded-bl-xl text-xs">
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li class="flex items-center gap-1">
|
||||
<image width="14px" src="../../../assets/go-home.svg"/>
|
||||
Home
|
||||
</li>
|
||||
<li class="flex items-center gap-1">
|
||||
<image width="14px" src="../../../assets/image_outline.svg"/>
|
||||
Pictures
|
||||
</li>
|
||||
<li class="flex items-center gap-1">
|
||||
<image width="14px" src="../../../assets/file.svg"/>
|
||||
Documents
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- folder list here -->
|
||||
<div style="grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(60px, 1fr))" class="w-full h-full grid gap-2 p-2 flex-1">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<image width="60px" src="../../../assets/folder.svg"/>
|
||||
<small>Folder 1</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
/** returns the ui for this application */
|
||||
run(){
|
||||
const el = this.ui_element.start()
|
||||
return el
|
||||
}
|
||||
|
||||
init(){
|
||||
this.init_window_ui()
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,9 +10,9 @@ export default class OS {
|
||||
applications: Applications;
|
||||
|
||||
constructor() {
|
||||
this.cursor = new Cursor();
|
||||
this.filesystem = new Filesystem();
|
||||
this.applications = new Applications();
|
||||
this.cursor = new Cursor(this);
|
||||
this.filesystem = new Filesystem(this);
|
||||
this.applications = new Applications(this);
|
||||
}
|
||||
|
||||
addUi(ui: UI) {
|
||||
@ -20,7 +20,6 @@ export default class OS {
|
||||
}
|
||||
|
||||
start() {
|
||||
console.log("start os");
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ export default class Desktop extends Component {
|
||||
const windows = this.os.applications.getApplications()
|
||||
console.log(windows)
|
||||
this.shortcuts_container.element.replaceChildren(...this.shortcuts.map(s => s.start()));
|
||||
this.windows_container.element.replaceChildren(...windows.map(w => w.ui_element.start()));
|
||||
this.windows_container.element.replaceChildren(...windows.map(w => w.run()));
|
||||
}
|
||||
|
||||
addApplicationShortcut(shortcut: DesktopShortcut) {
|
||||
@ -44,7 +44,7 @@ export default class Desktop extends Component {
|
||||
|
||||
initDesktopShortcuts() {
|
||||
this.addApplicationShortcut(
|
||||
new DesktopShortcut("../../assets/homebank.svg", "Home", this.os, 'file_manager'),
|
||||
new DesktopShortcut("../../assets/home.svg", "Home", this.os, 'file_manager'),
|
||||
);
|
||||
this.addApplicationShortcut(
|
||||
new DesktopShortcut("../../assets/image.svg", "fun.png", this.os, 'image_viewer'),
|
||||
|
||||
@ -5,7 +5,7 @@ export default class NavBar extends Component {
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
this.element.classList.add('flex', 'flex-column', 'w-20', 'h-full', 'bg-[#000a]', 'justify-center','py-2', 'z-[12]')
|
||||
this.element.classList.add('flex', 'flex-column', 'w-14', 'h-full', 'bg-[#444]', 'justify-center','py-2', 'z-[12]')
|
||||
}
|
||||
|
||||
init(){
|
||||
@ -40,7 +40,7 @@ class Application extends Component {
|
||||
start() {
|
||||
this.setup_click_handler()
|
||||
this.element.innerHTML = `
|
||||
<img src="${this.icon}" style="width: 60px;">
|
||||
<img src="${this.icon}" style="width: 40px;">
|
||||
`
|
||||
return this.element
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export default class TopBar extends Component {
|
||||
add_time(){
|
||||
const date = new Date()
|
||||
this.time = new Component()
|
||||
this.time.element.classList.add( "text-white", "text-center", "cursor-default")
|
||||
this.time.element.classList.add( "text-white", "text-center", "cursor-default", "text-xs")
|
||||
this.time.element.innerText = format(date, "MMM dd H:mm aa")
|
||||
|
||||
this.element.appendChild(this.time.start())
|
||||
|
||||
@ -10,13 +10,12 @@ export default class Window {
|
||||
resize_start_pos: { x: number, y: number } = { x: 0, y: 0 };
|
||||
|
||||
constructor(application: Application) {
|
||||
this.element.classList.add("bg-[#ccc]", "absolute", "rounded-lg", "shadow-xl");
|
||||
this.element.classList.add("bg-[#333]", "absolute", "rounded-xl", "shadow-sm");
|
||||
this.element.style.width = `${this.initial_size.w}px`;
|
||||
this.element.style.height = `${this.initial_size.h}px`;
|
||||
this.application = application;
|
||||
|
||||
this._add_header();
|
||||
this._add_content("This is a test");
|
||||
this._add_resize_handles();
|
||||
this._handle_drag()
|
||||
}
|
||||
@ -25,9 +24,10 @@ export default class Window {
|
||||
this.header = new Component()
|
||||
this.header.element.id = "header";
|
||||
this.header.element.classList.add(
|
||||
"bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move", "flex", "justify-between",
|
||||
"items-center"
|
||||
"bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t-xl", "text-center", "cursor-move", "flex", "justify-between",
|
||||
"items-center", "border-b", "border-[#444]",
|
||||
);
|
||||
this.header.element.style.height = "2rem"
|
||||
this.element.appendChild(this.header.start());
|
||||
|
||||
const window_title = new Component('window-title')
|
||||
@ -38,8 +38,9 @@ export default class Window {
|
||||
close_btn_container.element.classList.add("flex-1", "justify-end", "flex")
|
||||
|
||||
const closeButton= document.createElement('button')
|
||||
closeButton.textContent = "X"
|
||||
closeButton.classList.add("hover:rounded-full", "hover:bg-[#f554]", "w-6", "h-6", "hover", "font-red")
|
||||
closeButton.onclick = this._handle_close.bind(this);
|
||||
closeButton.textContent = "x"
|
||||
closeButton.classList.add("hover:rounded-full", "hover:bg-[#111]", "w-6", "h-6", "hover", "font-red", "flex", "justify-center", "transition-all")
|
||||
|
||||
const dummy = document.createElement('div')
|
||||
dummy.classList.add("flex-1")
|
||||
@ -86,10 +87,14 @@ export default class Window {
|
||||
}
|
||||
}
|
||||
|
||||
private _add_content(content: string): HTMLDivElement {
|
||||
private _handle_close(): void {
|
||||
this.application.remove_window(this);
|
||||
}
|
||||
|
||||
add_content(content: string): HTMLDivElement {
|
||||
const content_element = document.createElement("div");
|
||||
content_element.classList.add("bg-[#eee]", "p-2", "text-sm", "text-[#333]");
|
||||
content_element.innerText = content;
|
||||
content_element.style.height = "calc(100% - 2rem)"
|
||||
content_element.innerHTML = content;
|
||||
this.element.appendChild(content_element);
|
||||
return content_element;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user