DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Removed ALL errors

Browse source
This commit is contained in:
BOT Alex 2025-04-06 00:17:55 +02:00
parent f64ae9f991
commit 379577cc5c
21 changed files with 379 additions and 713 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/routes/comps/SlantedText.svelte
View file

@ -1,8 +1,6 @@
<script lang="ts">
import { onMount } from "svelte";
import { Vector2 } from "./../zhen/Utils/Vector2";
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
import { Vector2 } from "../zhen/Utils/Vector2";
// Params
let mouseMoveScale: number = 0.25;

85
src/routes/comps/Tags.svelte
View file

@ -1,37 +1,69 @@
<script lang="ts">
export let Tags= ["null"];
export let Tags = ["null"];
export let isMobile = false;
type ColorType = string | { color1: string; color2: string; rotation: string; offset: string };
let colors: { [String: string]: ColorType} = {
"programmer": "#0CC27F",
"uxdesigner": "#027893",
"3dartist": "#F4881C",
"2dartist": "#F1EAC0",
"2d/3dartist": {"color1":"#F1EAC0", "color2":"#F4881C","rotation": "-65deg", "offset": "71.5%"},
"sounddesigner": "#F3EC2A",
"storydesigner": "#EEC12A",
"back-endadmin": "#3236a8",
};
// Define an interface for our detailed color object.
interface ColorObject {
color1: string;
color2: string;
rotation: string;
offset: string;
}
// ColorType can be a simple string or a ColorObject.
type ColorType = string | ColorObject;
// Create an interface for the color mapping.
interface ColorsMapping {
[key: string]: ColorType;
}
// Define a class to manage the colors.
class ColorManager {
private colors: ColorsMapping;
constructor() {
this.colors = {
"programmer": "#0CC27F",
"uxdesigner": "#027893",
"3dartist": "#F4881C",
"2dartist": "#F1EAC0",
"2d/3dartist": { color1: "#F1EAC0", color2: "#F4881C", rotation: "-65deg", offset: "71.5%" },
"sounddesigner": "#F3EC2A",
"storydesigner": "#EEC12A",
"back-endadmin": "#3236a8",
};
}
// Return the color for the given key or a default value.
getColor(key: string): ColorType {
return this.colors[key] || "#ccc";
}
}
// Create an instance of ColorManager.
const colorManager = new ColorManager();
</script>
<div class="flex gap-2" style='font-size: {!isMobile ? "0.875rem" : "2vw"};'>
<div class="flex gap-2" style="font-size: { !isMobile ? '0.875rem' : '2vw' };">
{#each Tags as tag}
{@const key = tag.replaceAll(" ", "").toLowerCase()}
{@const color = colorManager.getColor(key)}
{#if key.indexOf("/") < 0}
<div class="badge2 text-primary-content cozette" style="background-color: {colors[key] || "#ccc"};">{tag}</div>
{:else}
<!-- Single Color Badge -->
<div class="badge2 text-primary-content cozette" style="background-color: {typeof color === 'string' ? color : '#ccc'};">
{tag}
</div>
{:else}
<!-- Gradient Badge -->
{#if typeof colors[key] === 'object' && colors[key] !== null}
{#if typeof color === 'object' && color !== null}
<div
class="badge2 text-primary-content cozette"
style="background: linear-gradient({colors[key].rotation}, {colors[key].color2} {colors[key].offset}, {colors[key].color1} {colors[key].offset});">
style="background: linear-gradient({color.rotation}, {color.color2} {color.offset}, {color.color1} {color.offset});">
{tag}
</div>
{:else}
<div
class="badge2 text-primary-content cozette"
style="background-color: #ccc;">
<div class="badge2 text-primary-content cozette" style="background-color: #ccc;">
{tag}
</div>
{/if}
@ -44,12 +76,11 @@
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.25rem /* 20px */;
line-height: 1.25rem /* 20px */;
height: 1.25rem; /* 20px */
line-height: 1.25rem; /* 20px */
width: fit-content;
padding-left: 0.563rem /* 9.008px */;
padding-right: 0.563rem /* 9.008px */;
border-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
padding-left: 0.563rem; /* 9.008px */
padding-right: 0.563rem; /* 9.008px */
border-radius: var(--rounded-badge, 1.9rem); /* 30.4px */
}
</style>
</style>