Initial commit
This commit is contained in:
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
4
src/component/footer.svelte
Normal file
4
src/component/footer.svelte
Normal file
@ -0,0 +1,4 @@
|
||||
<footer>
|
||||
<p>© 2025 Colormatic Studios, All Rights Reserved.</p>
|
||||
<p><a href="mailto:support@colormatic.org">support@colormatic.org</a></p>
|
||||
</footer>
|
||||
55
src/component/navbar.svelte
Normal file
55
src/component/navbar.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
function toggleModalMenu() {
|
||||
var pages = document.getElementById("pages") as HTMLElement;
|
||||
pages.classList.toggle("hidden");
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<a href="/" class="title nav-left">Colormatic</a>
|
||||
<img
|
||||
src="/img/colormatic_logo.svg"
|
||||
alt="Colormatic Logo"
|
||||
class="nav-center colormatic-logo"
|
||||
/>
|
||||
<div class="nav-right inline">
|
||||
<ul class="responsive-hidden">
|
||||
<li><a href="/zakarya">Zakarya</a></li>
|
||||
<li><a href="/studios">Colormatic Studios</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
<a
|
||||
href="https://git.colormatic.org"
|
||||
class="git-icon"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Colormatic Git"><i class="bi bi-git"></i></a
|
||||
>
|
||||
<button
|
||||
on:click={toggleModalMenu}
|
||||
class="responsive menu-button"
|
||||
aria-label="menu"><i class="bi bi-list"></i></button
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<span id="pages" class="modalbg hidden">
|
||||
<script>
|
||||
// A dirty way to close the modal when the user clicks outside
|
||||
var pages = document.getElementById("pages");
|
||||
pages.addEventListener("click", (e) => {
|
||||
if (e.target == pages) {
|
||||
pages.classList.toggle("hidden");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div>
|
||||
<button on:click={toggleModalMenu} class="close" aria-label="Close"
|
||||
><i class="bi bi-x"></i></button
|
||||
>
|
||||
<ul>
|
||||
<li><a href="/zakarya">Zakarya</a></li>
|
||||
<li><a href="/studios">Colormatic Studios</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
22
src/routes/+layout.svelte
Normal file
22
src/routes/+layout.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import "../style/main.scss";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import Navbar from "../component/navbar.svelte";
|
||||
import Footer from "../component/footer.svelte";
|
||||
|
||||
import { createBackground } from "../script/bg.ts";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(createBackground);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href="/img/colormatic_logo.svg" />
|
||||
<!--<link rel="stylesheet" href="../style/main.scss" />-->
|
||||
</svelte:head>
|
||||
|
||||
<Navbar />
|
||||
|
||||
<slot />
|
||||
|
||||
<Footer />
|
||||
3
src/routes/+layout.ts
Normal file
3
src/routes/+layout.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const prerender = true;
|
||||
export const csr = true;
|
||||
export const trailingSlash = "always";
|
||||
34
src/routes/+page.svelte
Normal file
34
src/routes/+page.svelte
Normal file
@ -0,0 +1,34 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="heading">Featured Colormatic Studios Projects:</div>
|
||||
<div class="hero panel">
|
||||
<h1>
|
||||
<a
|
||||
href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Quality First Person Controller</a
|
||||
>
|
||||
</h1>
|
||||
<p>An actually good first person controller for the Godot Engine.</p>
|
||||
</div>
|
||||
<div class="hero panel">
|
||||
<h1>ColorQuest</h1>
|
||||
<p>A simple MMORPG in your browser.</p>
|
||||
<p>
|
||||
Currently in
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Software_release_life_cycle#Pre-alpha"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">pre-alpha.</a
|
||||
>
|
||||
</p>
|
||||
<p>Not yet public.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
21
src/routes/about/+page.svelte
Normal file
21
src/routes/about/+page.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic - About</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="hero panel">
|
||||
<h1>Colormatic: A non-profit project for creation.</h1>
|
||||
<p class="justify">
|
||||
Colormatic is a non-profit project for creating a curated collection of
|
||||
sub-projects that match a high-quality, high attention to detail standard.
|
||||
</p>
|
||||
<p class="justify">
|
||||
Colormatic Studios is a creative studio dedicated to giving life to these
|
||||
maximum effort projects.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
102
src/routes/studios/+page.svelte
Normal file
102
src/routes/studios/+page.svelte
Normal file
@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import "../../style/studios.scss";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Colormatic Studios</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<div class="cs-title"><h1>Colormatic Studios</h1></div>
|
||||
|
||||
<div class="project-grid-container">
|
||||
<div class="project-grid-box panel">
|
||||
<h1>
|
||||
<a
|
||||
href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Quality First Person Controller</a
|
||||
>
|
||||
</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img
|
||||
src="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg"
|
||||
alt="First Person Logo"
|
||||
/>
|
||||
<p>An actually good first person controller for the Godot Engine.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-grid-box panel">
|
||||
<h1>A Silly Game</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img src="/img/studios/hatcat.webp" alt="HatCat" />
|
||||
<p>This is a silly little game project to get us started.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-grid-box panel">
|
||||
<h1>ColorQuest</h1>
|
||||
<div class="project-grid-box-contents">
|
||||
<img
|
||||
src="/img/studios/colorquest.png"
|
||||
class="pixelart"
|
||||
alt="ColorQuest"
|
||||
/>
|
||||
<p>A simple MMORPG in your browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero panel">
|
||||
<h1>Links:</h1>
|
||||
<div class="double-linktree">
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://mastodon.social/@colormaticstudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/colormaticstudios/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Instagram</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.youtube.com/@colormaticstudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Youtube</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/ColormaticStudios"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://bsky.app/profile/colormaticstudios.bsky.social"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Bluesky</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://x.com/ColormaticStudy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">X/Twitter</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
46
src/routes/video/+page.svelte
Normal file
46
src/routes/video/+page.svelte
Normal file
@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { getParam, getVideo } from "../../script/video.ts";
|
||||
import "../../style/video.scss";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
let channel = getParam("c");
|
||||
let video = getParam("v");
|
||||
// Don't request an empty string
|
||||
if (channel && video) {
|
||||
getVideo(channel, video);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Video Player</title>
|
||||
</svelte:head>
|
||||
|
||||
<spacer></spacer>
|
||||
|
||||
<main>
|
||||
<div class="video container">
|
||||
<video id="videoplayer" controls></video>
|
||||
<div class="videoobjects">
|
||||
<div class="videodetails">
|
||||
<h1 id="videotitle">Video Player</h1>
|
||||
<p id="videodescription" class="justify"></p>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="download-dropdown">
|
||||
<i class="bi bi-download"></i>
|
||||
<div class="dropdown-content">
|
||||
<ul>
|
||||
<li><a id="videodownload">Download Video</a></li>
|
||||
<li><a id="sourcedownload">Download Source</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
68
src/routes/zakarya/+page.svelte
Normal file
68
src/routes/zakarya/+page.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<svelte:head>
|
||||
<title>Colormatic - Zakarya</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<img class="banner" src="/img/zakarya-banner.png" alt="Zakarya Banner" />
|
||||
<span class="name-title">Zakarya</span>
|
||||
<div class="hero panel">
|
||||
<h1>Links:</h1>
|
||||
<ul class="linktree">
|
||||
<li>
|
||||
<a
|
||||
href="https://mstdn.party/@zakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://ko-fi.com/zakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Ko-fi</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.youtube.com/@czakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Youtube</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/CZakarya"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>
|
||||
</li>
|
||||
<!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero panel">
|
||||
<h1>Featured Videos:</h1>
|
||||
<ul class="videolist">
|
||||
<li>
|
||||
<a href="/video?c=zakarya&v=the-way-forward">
|
||||
<img
|
||||
src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png"
|
||||
alt="Video Thumbnail"
|
||||
/>
|
||||
<span class="title">The Way Forward</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/video?c=zakarya&v=hello-world">
|
||||
<img
|
||||
src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png"
|
||||
alt="Video Thumbnail"
|
||||
/>
|
||||
<span class="title">Hello World</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<spacer></spacer>
|
||||
271
src/script/bg.ts
Normal file
271
src/script/bg.ts
Normal file
@ -0,0 +1,271 @@
|
||||
/*/
|
||||
* Wrapping this entire program into a function isn't ideal,
|
||||
* but it's the only way I can figure out how to start this
|
||||
* when the page finishes loading. (svelte onMount function)
|
||||
/*/
|
||||
export function createBackground() {
|
||||
var canvas = document.createElement("canvas") as HTMLCanvasElement;
|
||||
var ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
canvas.classList.add("bg-canvas");
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
var dark_theme = false;
|
||||
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
dark_theme = true;
|
||||
}
|
||||
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (event) => {
|
||||
dark_theme = event.matches;
|
||||
gradientsArray.forEach((gradient: Gradient) => {
|
||||
gradient.color = getRandomColor();
|
||||
});
|
||||
});
|
||||
|
||||
let particlesArray: Array<Particle> = [];
|
||||
|
||||
const clamp = (val: number, min: number, max: number) =>
|
||||
Math.min(Math.max(val, min), max);
|
||||
|
||||
class Entity {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
originalSize: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
growthSpeed: number;
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = (Math.random() * 5 + 1) * 1.5;
|
||||
this.originalSize = this.size;
|
||||
this.speedX = (Math.random() - 0.5) * 0.2;
|
||||
this.speedY = (Math.random() - 0.5) * 0.2;
|
||||
this.growthSpeed = Math.random() * 0.02 + 0.01;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
|
||||
// Reverse direction if particle hits edge
|
||||
if (this.x <= 0 || this.x >= canvas.width) {
|
||||
this.speedX = -this.speedX;
|
||||
}
|
||||
this.x = clamp(0, this.x, canvas.width);
|
||||
if (this.y <= 0 || this.y >= canvas.height) {
|
||||
this.speedY = -this.speedY;
|
||||
}
|
||||
this.y = clamp(0, this.y, canvas.height);
|
||||
|
||||
// Breathing effect: oscillate size
|
||||
this.size += this.growthSpeed;
|
||||
if (
|
||||
this.size >= this.originalSize * 1.5 ||
|
||||
this.size <= this.originalSize * 0.5
|
||||
) {
|
||||
this.growthSpeed = -this.growthSpeed; // Reverse growth direction
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function roundRect(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
) {
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.quadraticCurveTo(
|
||||
x + width,
|
||||
y + height,
|
||||
x + width - radius,
|
||||
y + height,
|
||||
);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
}
|
||||
|
||||
function roundTriangle(size: number, radius: number) {
|
||||
const x1 = 0,
|
||||
y1 = 0;
|
||||
const x2 = size,
|
||||
y2 = 0;
|
||||
const x3 = size / 2,
|
||||
y3 = size / 1.375;
|
||||
const midX1 = (x1 + x2) / 2;
|
||||
const midY1 = (y1 + y2) / 2;
|
||||
const midX2 = (x2 + x3) / 2;
|
||||
const midY2 = (y2 + y3) / 2;
|
||||
const midX3 = (x3 + x1) / 2;
|
||||
const midY3 = (y3 + y1) / 2;
|
||||
ctx.arcTo(x2, y2, midX2, midY2, radius);
|
||||
ctx.arcTo(x3, y3, midX3, midY3, radius);
|
||||
ctx.arcTo(x1, y1, midX1, midY1, radius);
|
||||
}
|
||||
|
||||
class Shape {
|
||||
draw(angle: number, size: number) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
class Circle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
class Square extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
roundRect(-size / 2, -size / 2, size, size, size / 5);
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
class Triangle extends Shape {
|
||||
draw(angle: number, size: number) {
|
||||
ctx.rotate((angle * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
roundTriangle(size * 2, size / 5);
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
class Particle extends Entity {
|
||||
shape: Shape;
|
||||
angle: number;
|
||||
rotationSpeed: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.shape = new [Circle, Square, Triangle][
|
||||
Math.floor(Math.random() * 3)
|
||||
](); // A very strange but effective way to pick a random shape
|
||||
this.angle = Math.random() * 360;
|
||||
this.rotationSpeed = Math.random() * 2 - 1;
|
||||
}
|
||||
|
||||
update() {
|
||||
super.update();
|
||||
this.angle += this.rotationSpeed;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = dark_theme ? "#333" : "#bbb";
|
||||
ctx.save();
|
||||
ctx.translate(this.x, this.y);
|
||||
this.shape.draw(this.angle, this.size);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function getRandomColor() {
|
||||
if (dark_theme) {
|
||||
const r = Math.floor(Math.random() * 255 - 100);
|
||||
const b = Math.floor(Math.random() * 255 - 100);
|
||||
const g = Math.floor(Math.random() * 255 - 100);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
} else {
|
||||
const r = Math.floor(Math.random() * 100 + 155);
|
||||
const g = Math.floor(Math.random() * 100 + 155);
|
||||
const b = Math.floor(Math.random() * 100 + 155);
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
}
|
||||
|
||||
class Gradient extends Entity {
|
||||
radius: number;
|
||||
color: string;
|
||||
alpha: number;
|
||||
dAlpha: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.radius = Math.random() * 500 + 300;
|
||||
this.color = getRandomColor();
|
||||
this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
|
||||
this.dAlpha = (Math.random() - 0.5) * 0.01;
|
||||
}
|
||||
|
||||
draw() {
|
||||
const gradient = ctx.createRadialGradient(
|
||||
this.x,
|
||||
this.y,
|
||||
0,
|
||||
this.x,
|
||||
this.y,
|
||||
this.radius,
|
||||
);
|
||||
gradient.addColorStop(0, this.color);
|
||||
if (dark_theme) {
|
||||
gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
|
||||
} else {
|
||||
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
|
||||
}
|
||||
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
let gradientsArray: Array<Gradient> = [];
|
||||
|
||||
function init() {
|
||||
particlesArray = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
particlesArray.push(new Particle());
|
||||
}
|
||||
gradientsArray = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
gradientsArray.push(new Gradient());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
gradientsArray.forEach((gradient) => {
|
||||
gradient.update();
|
||||
gradient.draw();
|
||||
});
|
||||
|
||||
particlesArray.forEach((particle) => {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
resize();
|
||||
init();
|
||||
animate();
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
}
|
||||
86
src/script/video.ts
Normal file
86
src/script/video.ts
Normal file
@ -0,0 +1,86 @@
|
||||
const BASEURL = "https://files.colormatic.org/";
|
||||
|
||||
export function getParam(paramName: string) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
let t_param = params.get(paramName);
|
||||
return t_param ? t_param : ""; // Return empty string if null
|
||||
}
|
||||
|
||||
async function getJSON(url: string) {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error(response.statusText);
|
||||
|
||||
const data = response.json();
|
||||
return data;
|
||||
}
|
||||
|
||||
export function getVideo(cname: string, vname: string) {
|
||||
var videoplayer = document.getElementById("videoplayer") as HTMLElement;
|
||||
var videotitle = document.getElementById("videotitle") as HTMLElement;
|
||||
var videodescription = document.getElementById(
|
||||
"videodescription",
|
||||
) as HTMLElement;
|
||||
var videodownload = document.getElementById("videodownload") as HTMLElement;
|
||||
var sourcedownload = document.getElementById(
|
||||
"sourcedownload",
|
||||
) as HTMLElement;
|
||||
getJSON(BASEURL + cname + "/videos/data/" + vname + ".json")
|
||||
.then((data) => {
|
||||
let videoURL =
|
||||
BASEURL +
|
||||
cname +
|
||||
"/videos/raw/" +
|
||||
data.video_file +
|
||||
"." +
|
||||
data.video_format;
|
||||
videoplayer.setAttribute(
|
||||
"poster",
|
||||
BASEURL + cname + "/videos/thumbnail/" + data.thumbnail,
|
||||
);
|
||||
var videosource = document.createElement("source");
|
||||
videosource.setAttribute("src", videoURL);
|
||||
videosource.setAttribute("type", "video/" + data.video_format);
|
||||
videoplayer.appendChild(videosource);
|
||||
|
||||
document.title = data.title;
|
||||
videotitle.innerText = data.title;
|
||||
data.description.forEach((iter: number) => {
|
||||
// TODO: Detect if one of these lines contains a link and if so, make it a link
|
||||
videodescription.appendChild(
|
||||
document.createTextNode(iter.toString()),
|
||||
);
|
||||
videodescription.appendChild(document.createElement("br"));
|
||||
});
|
||||
|
||||
videodownload.setAttribute(
|
||||
"href",
|
||||
BASEURL +
|
||||
cname +
|
||||
"/videos/raw/" +
|
||||
data.video_file +
|
||||
"." +
|
||||
data.video_format,
|
||||
);
|
||||
videodownload.setAttribute(
|
||||
"download",
|
||||
data.video_file + "." + data.video_format,
|
||||
);
|
||||
sourcedownload.setAttribute(
|
||||
"href",
|
||||
BASEURL +
|
||||
cname +
|
||||
"/videos/source/" +
|
||||
data.source_file +
|
||||
"." +
|
||||
data.source_format,
|
||||
);
|
||||
sourcedownload.setAttribute(
|
||||
"download",
|
||||
data.source_file + "." + data.source_format,
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
videotitle.innerText = "Failed to load video.";
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
2
src/style/global.scss
Normal file
2
src/style/global.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$text-color: var(--text-color);
|
||||
$mobile-width: 900px;
|
||||
400
src/style/main.scss
Normal file
400
src/style/main.scss
Normal file
@ -0,0 +1,400 @@
|
||||
@use "global.scss";
|
||||
|
||||
:root {
|
||||
--text-color: #383c3f;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: white;
|
||||
}
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
canvas.bg-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 1fr;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-bottom: solid 1px global.$text-color;
|
||||
z-index: 1;
|
||||
|
||||
margin: 0 auto;
|
||||
width: 95%;
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
nav .nav-left {
|
||||
justify-self: left;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
nav .nav-center {
|
||||
justify-self: center;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
nav .nav-right {
|
||||
justify-self: right;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
nav a,
|
||||
nav button {
|
||||
padding: 8px;
|
||||
color: global.$text-color;
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav a.title {
|
||||
font-size: 140%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav img.colormatic-logo {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
nav button.menu-button {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav .menu-button i {
|
||||
font-size: 230%;
|
||||
transform: translateY(-1px);
|
||||
/*/
|
||||
* Ugly hack to account for the fact that the menu icon is off-center
|
||||
* (Bootstrap please fix)
|
||||
/*/
|
||||
}
|
||||
|
||||
nav .git-icon i {
|
||||
font-size: 140%;
|
||||
}
|
||||
|
||||
nav div.inline {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav .responsive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
nav {
|
||||
padding: 6px 0;
|
||||
}
|
||||
nav .git-icon i {
|
||||
font-size: 150%;
|
||||
}
|
||||
nav .responsive {
|
||||
display: flex;
|
||||
}
|
||||
nav ul.responsive-hidden {
|
||||
display: none;
|
||||
}
|
||||
nav a.responsive {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
span.modalbg.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.modalbg {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
span.modalbg div {
|
||||
width: 60%;
|
||||
margin: 100px auto;
|
||||
padding: 16px;
|
||||
|
||||
color: global.$text-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
background-color: #ffffffbb;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
animation-name: modal-animate-in;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes modal-animate-in {
|
||||
from {
|
||||
transform: translate(0px, -300px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(0px, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span.modalbg div button.close {
|
||||
float: right;
|
||||
width: min-content;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 200%;
|
||||
color: global.$text-color;
|
||||
}
|
||||
|
||||
span.modalbg div ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span.modalbg div ul li {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
span.modalbg div ul li a {
|
||||
color: global.$text-color;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
span.modalbg div {
|
||||
background-color: #000000bb;
|
||||
}
|
||||
}
|
||||
|
||||
spacer {
|
||||
display: block;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
div.panel {
|
||||
color: global.$text-color;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
main div.heading {
|
||||
color: global.$text-color;
|
||||
font-size: 300%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main span.name-title {
|
||||
display: block;
|
||||
color: global.$text-color;
|
||||
font-size: 550%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main div.hero {
|
||||
width: 60%;
|
||||
margin: 16px auto 16px auto;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main div.heading {
|
||||
font-size: 250%;
|
||||
}
|
||||
main div.hero {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
main div.hero h1 a {
|
||||
color: global.$text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p.justify {
|
||||
text-align: justify;
|
||||
text-justify: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main div.hero p.justify {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
main div.hero ul {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main img.banner {
|
||||
display: block;
|
||||
width: 70%;
|
||||
margin: 32px auto 32px auto;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 16px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
main img.banner {
|
||||
width: 95%;
|
||||
border-radius: 12px;
|
||||
margin: 24px auto 24px auto;
|
||||
}
|
||||
main div.hero p.justify {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.linktree {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
padding-left: 8px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
ul.linktree {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.linktree li {
|
||||
margin: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.linktree li a {
|
||||
/* Pill button shape */
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
|
||||
background-color: #4c5053;
|
||||
padding: 8px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 2px 2px 4px #00000066;
|
||||
transition-duration: 0.5s;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.linktree li a:hover {
|
||||
cursor: pointer;
|
||||
background-color: #383c3f;
|
||||
}
|
||||
|
||||
div.double-linktree {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.double-linktree ul.linktree {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.videolist {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.videolist li {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
ul.videolist li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.videolist li a img {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
ul.videolist li a span {
|
||||
display: block;
|
||||
color: global.$text-color;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
img.pixelart {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: solid 1px global.$text-color;
|
||||
width: 95%;
|
||||
padding: 4px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: global.$text-color;
|
||||
padding: 4px 10%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
footer p {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
93
src/style/studios.scss
Normal file
93
src/style/studios.scss
Normal file
@ -0,0 +1,93 @@
|
||||
@use "global.scss";
|
||||
|
||||
div.no-margin nav {
|
||||
margin: 0 auto; /* Remove navbar bottom margin */
|
||||
}
|
||||
|
||||
div.cs-title {
|
||||
background-image: url("/img/colormatic_banner.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.cs-title h1 {
|
||||
color: white;
|
||||
background-color: #00000088;
|
||||
padding: 28px 38px;
|
||||
border-radius: 16px;
|
||||
font-size: 300%;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
div.project-grid-container {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
div.project-grid-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
div.cs-title {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.cs-title h1 {
|
||||
font-size: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box {
|
||||
flex: 1;
|
||||
color: #383c3f;
|
||||
margin: 16px;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: global.$text-color;
|
||||
min-width: 40%;
|
||||
max-width: 50%;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box h1 a {
|
||||
color: global.$text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box div.project-grid-box-contents {
|
||||
/* Yes, this absurdly long element selector is a joke */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box img {
|
||||
max-width: 150px;
|
||||
max-height: 100px;
|
||||
margin: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
div.project-grid-container div.project-grid-box {
|
||||
min-width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
div.project-grid-container div.project-grid-box img {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
109
src/style/video.scss
Normal file
109
src/style/video.scss
Normal file
@ -0,0 +1,109 @@
|
||||
@use "global.scss";
|
||||
|
||||
div.video.container {
|
||||
display: flex;
|
||||
color: global.$text-color;
|
||||
width: 90%;
|
||||
margin: 16px auto 16px auto;
|
||||
border: solid 1px #00000033;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
padding: 16px;
|
||||
background-color: #ffffff22;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
div.video.container video#videoplayer {
|
||||
flex-grow: 1;
|
||||
border-radius: 12px;
|
||||
height: auto;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
div.video.container div.videoobjects {
|
||||
display: grid;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
div.video.container div.videodetails h1#videotitle {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
div.dropdown-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: #21afff;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
border-radius: 50px;
|
||||
transition-duration: 0.35s;
|
||||
font-size: 120%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown:hover {
|
||||
box-shadow: 1px 1px 8px #00000088;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
min-width: 160px;
|
||||
background-color: #edeeee;
|
||||
box-shadow: 1px 1px 8px #00000033;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown:hover div.dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li:hover {
|
||||
background-color: #dcdfdf;
|
||||
}
|
||||
|
||||
div.video.container div.download-dropdown div.dropdown-content ul li a {
|
||||
text-decoration: none;
|
||||
color: global.$text-color;
|
||||
}
|
||||
|
||||
@media screen and (max-width: global.$mobile-width) {
|
||||
div.video.container {
|
||||
display: block;
|
||||
}
|
||||
div.video.container video#videoplayer {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
div.video.container div.download-dropdown {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
div.video.container div.download-dropdown div.dropdown-content {
|
||||
background-color: #444444;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user