diff options
54 files changed, 2497 insertions, 72 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..1c9ee72 --- /dev/null +++ b/.DS_Store @@ -1 +1,5 @@ -./backend/serviceAccountKey.json +db.db +.env +config.yaml +private_key.pem +public_key.pem diff --git a/backend/__pycache__/main.cpython-314.pyc b/backend/__pycache__/main.cpython-314.pyc Binary files differindex 35af45c..f65235c 100644 --- a/backend/__pycache__/main.cpython-314.pyc +++ b/backend/__pycache__/main.cpython-314.pyc diff --git a/backend/__pycache__/notif.cpython-314.pyc b/backend/__pycache__/notif.cpython-314.pyc Binary files differnew file mode 100644 index 0000000..e05be83 --- /dev/null +++ b/backend/__pycache__/notif.cpython-314.pyc diff --git a/backend/db.db-journal b/backend/db.db-journal Binary files differindex b0fb71e..e58d84d 100644 --- a/backend/db.db-journal +++ b/backend/db.db-journal diff --git a/backend/main.py b/backend/main.py index 8b8a3d1..e242389 100644 --- a/backend/main.py +++ b/backend/main.py @@ -1,13 +1,27 @@ import fastapi from fastapi.middleware.cors import CORSMiddleware +from fastapi.responses import PlainTextResponse +from apscheduler.schedulers.background import BackgroundScheduler +import onesignal +from onesignal.model.rate_limit_error import RateLimitError +from onesignal.model.generic_error import GenericError +from onesignal.model.notification import Notification +from onesignal.model.create_notification_success_response import CreateNotificationSuccessResponse +from onesignal.api import default_api import sqlite3 from typing import Annotated import datetime +from zoneinfo import ZoneInfo from pydantic import BaseModel -from apscheduler.schedulers.background import BackgroundScheduler -import firebase_admin -from firebase_admin import credentials +import secrets +from enum import Enum, IntEnum +from dotenv import load_dotenv +from os import getenv +import yaml +import notif # import notif.py +import bcrypt +# ## API, db, and scheduler initialisation app = fastapi.FastAPI(title="Victoria Hall LaundryWeb", description="LaundryWeb Backend API", version="0.1") conn = sqlite3.connect("db.db", check_same_thread=False) cursor = conn.cursor() @@ -15,15 +29,16 @@ cursor = conn.cursor() scheduler = BackgroundScheduler() scheduler.start() -firebase_app = firebase_admin.initialize_app(credentials.Certificate("serviceAccountKey.json")) - origins = [ "http://localhost", + "http://localhost:8081", "http://localhost:998", "http://localhost:5173", "http://127.0.0.1", "http://127.0.0.1:998", "http://127.0.0.1:5173", + "https://laundryweb.altafcreator.com", + "https://backend.laundryweb.altafcreator.com" ] app.add_middleware( @@ -37,49 +52,545 @@ app.add_middleware( cursor.execute(""" CREATE TABLE IF NOT EXISTS timers ( timer_id INTEGER PRIMARY KEY, - user_id VARCHAR(16) NOT NULL, + user_id VARCHAR(64) NOT NULL, start_time TEXT NOT NULL, - duration INT NOT NULL, + end_time TEXT NOT NULL, block INT NOT NULL, machine INT NOT NULL, - status TEXT NOT NULL CHECK(status IN ('Running', 'Finished')) + status TEXT NOT NULL CHECK(status IN ('RUNNING', 'FINISHED')), + subscription_id TEXT NOT NULL +);""") # block is either 1 or 2, machine (1-4), odd is dryer, even is machine. + +cursor.execute(""" +CREATE TABLE IF NOT EXISTS admin_cookies ( + cookie VARCHAR(64) PRIMARY KEY ); - """) # block is either 1 or 2, machine (1-4), odd is dryer, even is machine. +""") + +cursor.execute("DELETE FROM admin_cookies;") + +class RowIndices(IntEnum): + TIMER_ID = 0, + USER_ID = 1, + START_TIME = 2, + END_TIME = 3, + BLOCK = 4, + MACHINE = 5, + STATUS = 6, + SUBSCRIPTION_ID = 7 + + +# ## yaml configuration initialisation + +qr_uri = {} + +stream = open("config.yaml", 'r') +yaml_dict = yaml.load(stream, yaml.Loader) + +# inverting the key-value pair for the dict to act as a map +# easy matching for the users' scanned obscure uri and the supposed +for k, v in yaml_dict["qr_uri"]["h1"].items(): + qr_uri[v] = f"h1-{k}" +for k, v in yaml_dict["qr_uri"]["h2"].items(): + qr_uri[v] = f"h2-{k}" + +print("config.yaml loaded, qr_uri:") +for k, v in qr_uri.items(): + print(k, v) + + +# ## onesignal initialisation +load_dotenv() + +onesignal_configuration = onesignal.Configuration( + rest_api_key=getenv("REST_API_KEY"), + organization_api_key=getenv("ORGANIZATION_API_KEY"), +) + +api_client = onesignal.ApiClient(onesignal_configuration) +api_instance = default_api.DefaultApi(api_client) +ONESIGNAL_APP_ID = "83901cc7-d964-475a-90ec-9f854df4ba52" + + +# ## class / data struct definitions class RequestData(BaseModel): duration: int + machine_id: str + + +class InformationRequestData(BaseModel): + machine_id: str + + +class BlockRequestData(BaseModel): + block: int + + +class FinishRequestData(BaseModel): + id: int + + +class OverrideMachineData(BaseModel): block: int - machine: int + machine_id: int + disabled: bool + + +class Status(Enum): + EMPTY = 0, + FINISHED = 1, + RUNNING = 2, + OUTOFSERVICE = 3, + + +class PlaintextPasswordData(BaseModel): + password: str + + +URI_TO_MACHINES = { + "h1-status": [1, None], + "h1-dryer1": [1, 1], + "h1-washer1": [1, 2], + "h1-dryer2": [1, 3], + "h1-washer2": [1, 4], + "h2-status": [2, None], + "h2-dryer1": [2, 1], + "h2-washer1": [2, 2], + "h2-dryer2": [2, 3], + "h2-washer2": [2, 4], +} + +TZ = "Asia/Jakarta" + +# ## global vars for user-end + +machine_status = [[Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name], + [Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name]] +machine_times = [[None, None, None, None], + [None, None, None, None]] +machine_endings = [[None, None, None, None], + [None, None, None, None]] + + +# ## some non-api endpoint method definitions + +# this method checks for any entry, and starts the previously-terminated schedules +# useful if you're restarting the server +def restart_terminated_schedules(): + cursor.execute("SELECT * FROM timers;") + out = cursor.fetchall() + print("unfinished timers: " + str(len(out))) + + for row in out: + print(row) + end_date = datetime.datetime.fromisoformat(row[RowIndices.END_TIME]) + now = datetime.datetime.now(ZoneInfo(TZ)) + timer_id = row[RowIndices.TIMER_ID] + + if now > end_date: + print("unfinished timer was long gone", timer_id) + scheduler.add_job(final_timer_finished, 'date', run_date=(now + datetime.timedelta(seconds=1)), id=str(timer_id), args=[timer_id]) + elif now + datetime.timedelta(minutes=5) > end_date: + print("unfinished timer ends in less than five mins", timer_id) + scheduler.add_job(final_timer_finished, 'date', run_date=end_date, id=str(timer_id), args=[timer_id]) + else: + print("unfinished timer scheduler started", timer_id) + scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date - datetime.timedelta(minutes=5), id=str(timer_id), args=[timer_id]) + + print("setting internal array information") + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.RUNNING.name + machine_times[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = row[2] + machine_endings[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = row[3] + + print(machine_status, machine_times, machine_endings) def reminder_timer_finished(timer_id): + print("timer almost finished", timer_id) + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (timer_id,)) + out = cursor.fetchall() + print(out) + + scheduler.add_job(final_timer_finished, 'date', run_date=out[0][RowIndices.END_TIME], id=str(timer_id), args=[timer_id]) + + notif.send_notification( + out[0][RowIndices.SUBSCRIPTION_ID], + { + "title": "Laundry Reminder", + "body": "Your laundry is almost finished.", + } + ) + +def final_timer_finished(timer_id): print("timer finished!1", timer_id) - cursor.execute(f"DELETE FROM timers WHERE timer_id = {timer_id}") + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (timer_id,)) + out = cursor.fetchall() -def final_timer_finished(): - pass + for row in out: + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.FINISHED.name + notif.send_notification( + out[0][RowIndices.SUBSCRIPTION_ID], + { + "title": "Laundry Finished", + "body": "Your laundry is finished! Please collect your laundry.", + "requireInteraction": True, + "timerId": timer_id, + } + ) -@app.post("/start") -def start_new_timer(data: RequestData, session_key: Annotated[str | None, fastapi.Cookie()] = None): - if session_key: +# sec min hrs days +COOKIE_MAX_AGE = 60 * 60 * 24 * 30 # 30 days + + +def create_session(response: fastapi.Response): + cookie = secrets.token_hex(32) + response.set_cookie(key="session_key", value=cookie, secure=True, max_age=COOKIE_MAX_AGE) + return cookie + + +def authenticate_block(response: fastapi.Response, machine_id: str = None, block: int = None): + if machine_id: + blk = URI_TO_MACHINES[qr_uri[machine_id]][0] + response.set_cookie(key="auth_block", value=blk, secure=True, max_age=COOKIE_MAX_AGE) + return blk + elif block: + blk = block + response.set_cookie(key="auth_block", value=blk, secure=True, max_age=COOKIE_MAX_AGE) + return block + else: + return "FAIL" + + +# ## beginning + +print("Hello, world!") +restart_terminated_schedules() + + +# ## api endpoints + +# --- starting new timer +# eugh. too complex. TODO: refactor perhaps +# it's so complex even the linter is complaining +@app.post("/start", response_class=PlainTextResponse) +def start_new_timer(data: RequestData, response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None, auth_block: Annotated[str | None, fastapi.Cookie()] = None, subscription_endpoint: Annotated[str | None, fastapi.Cookie()] = None): + now = datetime.datetime.now(ZoneInfo(TZ)) + try: + if not session_key: + print("no session key, creating.") + session_key = create_session(response) + except Exception as exception: + print("err @ key creation //", exception) + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return "something went wrong during session key creation" + + try: + block = URI_TO_MACHINES[qr_uri[data.machine_id]][0] + machine = URI_TO_MACHINES[qr_uri[data.machine_id]][1] + except KeyError: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "invalid uri; you are unauthorised" + + if auth_block: + if str(auth_block) != str(block): + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "mismatch in block authentication cookie and requested block machine. forbidden." + else: + authenticate_block(response, machine_id=data.machine_id) + + if not subscription_endpoint: + print("user is not subscribed to notif") + response.status_code = fastapi.status = fastapi.status.HTTP_401_UNAUTHORIZED + return "a notification subscription is required to start a timer" + + try: print("session key valid", session_key) - cursor.execute(f""" - INSERT INTO timers (user_id, start_time, duration, block, machine, status) - VALUES ('{session_key}', '{datetime.datetime.now().isoformat()}', {data.block}, {data.machine}, {data.duration}, 'Running') - """) + end_date = now + datetime.timedelta(minutes=(data.duration * 30)) + cursor.execute(""" + INSERT INTO timers (user_id, start_time, end_time, block, machine, status, subscription_id) + VALUES (?, ?, ?, ?, ?, ?, ?)""", (session_key, now.isoformat(), end_date.isoformat(), block, machine, 'RUNNING', subscription_endpoint,)) conn.commit() - cursor.execute(f"SELECT * FROM timers WHERE user_id = {session_key}") + cursor.execute("SELECT * FROM timers WHERE end_time = ?;", (end_date.isoformat(),)) out = cursor.fetchall() + for row in out: print(row) - end_date = datetime.datetime.now() + datetime.timedelta(seconds=data.duration) timer_id = str(out[len(out) - 1][0]) print("timer id", timer_id) + except Exception as exception: + print("err @ sql stuff //", exception) + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return "something went wrong during sql stuff" + + try: + scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date - datetime.timedelta(minutes=5), id=timer_id, args=[timer_id]) + except Exception as exception: + print("err @ scheduler //", exception) + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return "something went wrong during scheduler stuff" + + try: + machine_status[block - 1][machine - 1] = Status.RUNNING.name + machine_times[block - 1][machine - 1] = now.isoformat() + machine_endings[block - 1][machine - 1] = end_date + except Exception as exception: + print("err @ machine_status //", exception) + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return "something went wrong during machine_status setting somehow" + + # HTTP 200 + return "all good bro timer started" + + +# --- check whether user has laundry or not +@app.post("/check", response_class=PlainTextResponse) +def check_status(response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None): + if not session_key: + print("no session key, creating.") + session_key = create_session(response) + + cursor.execute("SELECT * FROM timers WHERE user_id = ?", (session_key,)) + out = cursor.fetchall() + + for row in out: + print(row) + + if len(out) > 0: + return "you got laundry" + else: + return "no got laundry" + + +# --- fetch machine status for block +@app.post("/status") +def get_machine_status(response: fastapi.Response, auth_block: Annotated[str | None, fastapi.Cookie()] = None): + if auth_block: + block = int(auth_block) - 1 + return [machine_status[block], machine_times[block], machine_endings[block]] + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "block cookie needed. unauthorised" + + +# --- get laundr(y/ies) information of user +@app.post("/laundry") +def get_laundry_info(response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None, auth_block: Annotated[str | None, fastapi.Cookie()] = None): + if session_key: + result = [] + + cursor.execute("SELECT * FROM timers WHERE user_id = ?", (session_key,)) + out = cursor.fetchall() + + for row in out: + curr_timer = { + "end_time": 0, + "start_time": 0, + "machine": 0, + "status": "RUNNING", + "id": -1, + } + curr_timer["end_time"] = row[RowIndices.END_TIME] + curr_timer["start_time"] = row[RowIndices.START_TIME] + curr_timer["machine"] = row[RowIndices.MACHINE] + curr_timer["status"] = row[RowIndices.STATUS] + curr_timer["id"] = row[RowIndices.TIMER_ID] + + result.append(curr_timer) + + return result + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "you got no session key cookie how am i supposed to identify you" + + +# --- finish one's laundry +@app.post("/finish", response_class=PlainTextResponse) +def finish_laundry(data: FinishRequestData, response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None): + if session_key: + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (data.id,)) + row = cursor.fetchall()[0] + + if datetime.datetime.now(ZoneInfo(TZ)) < datetime.datetime.fromisoformat(row[RowIndices.END_TIME]): + response.status_code = fastapi.status.HTTP_400_BAD_REQUEST + return "timer has not finished yet" + + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.EMPTY.name + machine_times[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = None + machine_endings[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = None + + cursor.execute("DELETE FROM timers WHERE timer_id = ?", (row[0],)) + conn.commit() + + print(f"timer of id {data.id} has been finished by {session_key}") + + return "laundry finished" + + if session_key != row[1]: + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "session key mismatch with timer id, dubious!" + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "you got no session key, cannot" + + +# --- get information from uri search query +@app.post("/info") +def uri_to_information(data: InformationRequestData, response: fastapi.Response, auth_block: Annotated[str | None, fastapi.Cookie()] = None): + info = None + try: + if len(data.machine_id) > 0: + info = URI_TO_MACHINES[qr_uri[data.machine_id]] + except KeyError: + response.status_code = fastapi.status.HTTP_404_NOT_FOUND + return "INVALID machine ID/URI" + + print(auth_block) + if auth_block: + if info: + if str(auth_block) != str(info[0]): + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "UNAUTHORISED to view information of block " + str(info[0]) + else: + info = [auth_block, None] + else: + if info: + authenticate_block(response, block=info[0]) + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "NO INFORMATION PROVIDED. NO AUTH COOKIE." + + return {"block": info[0], "machine": info[1]} + + +# #### NOTIFICATION API END POINTS #### + + +# --- subscribe +@app.post("/notifsubscribe", response_class=PlainTextResponse) +def notif_subscribe(data: notif.PushSubscriptionData, response: fastapi.Response): + try: + endpoint = notif.subscribe(data) + response.set_cookie(key="subscription_endpoint", value=endpoint, max_age=COOKIE_MAX_AGE, domain="laundryweb.altafcreator.com", samesite="none", secure=True, path="/") + response.status_code = fastapi.status.HTTP_200_OK + return "subscription saved." + except Exception as err: + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return f"error, failed to save subscription {err}" + + +# #### ADMIN PANEL API END POINTS #### + +# ## ADMIN PANEL SCHEDULER METHODS ## + + +def delete_cookie_scheduler(cookie): + pass + + +def authenticate_admin_check(cookie): + cursor.execute("SELECT * FROM admin_cookies WHERE cookie = ?", (cookie,)) + rows = cursor.fetchall() + + return len(rows) > 0 + + +# --- admin login +@app.post("/admin_login", response_class=PlainTextResponse) +def admin_login(data: PlaintextPasswordData, response: fastapi.Response): + print(data.password) + + pwd = data.password.encode('utf-8') + stored_hash_pwd = getenv("ADMIN_PASSWORD_HASH").encode('utf-8') + + if bcrypt.checkpw(pwd, stored_hash_pwd): + response.status_code = fastapi.status.HTTP_202_ACCEPTED + + auth_cookie_str = secrets.token_hex(32) + AUTH_MAX_AGE = 60 * 10 # 10 minutes + response.set_cookie(key="admin_auth", value=auth_cookie_str, secure=True, max_age=AUTH_MAX_AGE, domain="backend.laundryweb.altafcreator.com", samesite="none") + cursor.execute("""INSERT INTO admin_cookies (cookie) VALUES (?);""", (auth_cookie_str,)) + conn.commit() + cursor.execute("SELECT * FROM admin_cookies") + print(cursor.fetchall()) + + now = datetime.datetime.now(ZoneInfo(TZ)) + end_date = now + datetime.timedelta(seconds=(AUTH_MAX_AGE)) + scheduler.add_job(delete_cookie_scheduler, 'date', run_date=end_date, args=[auth_cookie_str]) + + return "hi admin you are Authenticated!!!11" + + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "Forbidden." + + +# --- admin auth check +@app.post("/admin_check", response_class=PlainTextResponse) +def admin_check(response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + print("admin check request, ", admin_auth) + + if authenticate_admin_check(admin_auth): + response.status_code = fastapi.status.HTTP_202_ACCEPTED + return "Authorised." + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Get out." + + +# --- override each machine status +@app.post("/override_status", response_class=PlainTextResponse) +def override_status(data: OverrideMachineData, response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Unauthorised." + + if authenticate_admin_check(admin_auth): + if (data.disabled): + machine_status[data.block - 1][data.machine_id - 1] = Status.OUTOFSERVICE.name + else: + cursor.execute("SELECT * FROM timers WHERE ((block = ?) AND (machine = ?))", (data.block, data.machine_id)) + rows = cursor.fetchall() + + if len(rows) > 0: + machine_status[data.block - 1][data.machine_id - 1] = Status.RUNNING.name + else: + machine_status[data.block - 1][data.machine_id - 1] = Status.EMPTY.name + + response.status_code = fastapi.status.HTTP_200_OK + return "Set!" + + print("set machine", data.machine_id, "of block", data.block, ".", machine_status) + else: + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "Forbidden." + + +# --- change admin password +@app.post("/admin_change_password", response_class=PlainTextResponse) +def admin_change_password(data: PlaintextPasswordData, response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Unauthorised." + + if authenticate_admin_check(admin_auth): + pass + else: + pass + + +# --- get all blocks machine status for admin +@app.post("/admin_machine_status") +def admin_machine_status(response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return """{"reply": "Unauthorised."}""" - scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date, id=timer_id, args=[timer_id]) + if authenticate_admin_check(admin_auth): + return machine_status else: - print("no session key") + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return """{"reply": "Forbidden."}""" diff --git a/backend/notif.py b/backend/notif.py new file mode 100644 index 0000000..eb25793 --- /dev/null +++ b/backend/notif.py @@ -0,0 +1,76 @@ +from pydantic import BaseModel +import sqlite3 +from pywebpush import webpush +from dotenv import load_dotenv +from os import getenv +import json + +class PushSubscriptionData(BaseModel): + endpoint: str + keys: object + + +conn = sqlite3.connect("db.db", check_same_thread=False) +cursor = conn.cursor() + +load_dotenv() + +PRIVATE_VAPID_KEY = getenv("PRIVATE_VAPID_KEY") + +cursor.execute(""" +CREATE TABLE IF NOT EXISTS subscriptions ( + endpoint TEXT PRIMARY KEY, + keys_p256dh TEXT NOT NULL, + keys_auth TEXT NOT NULL +);""") + + +# --- subscribe +def subscribe(data: PushSubscriptionData): + cursor.execute("SELECT * FROM subscriptions WHERE endpoint = ?", (data.endpoint,)) + result = cursor.fetchall() + + if len(result) > 0: + return data.endpoint + + cursor.execute(""" + INSERT INTO subscriptions (endpoint, keys_p256dh, keys_auth) + VALUES (?, ?, ?)""", (data.endpoint, data.keys["p256dh"], data.keys["auth"])) + conn.commit() + + cursor.execute("SELECT * FROM subscriptions") + result = cursor.fetchall() + + for row in result: + print(row) + + return data.endpoint + + +# --- send notification +# ---- not used yet +def send_notification(endpoint: str, notification_payload: object): + cursor.execute(f"""SELECT * FROM subscriptions WHERE endpoint = \"{endpoint}\"""") + row = cursor.fetchall()[0] + print(row) + + subscription_info = { + "endpoint": endpoint, + "keys": { + "p256dh": row[1], + "auth": row[2], + }, + } + + try: + webpush( + subscription_info=subscription_info, + data=json.dumps(notification_payload), + vapid_private_key=PRIVATE_VAPID_KEY, + vapid_claims={ + "sub": "mailto:dev@altafcreator.com", + }, + headers={"Urgency": "high"} + ) + except Exception as exception: + print(exception) diff --git a/backend/notif_test.py b/backend/notif_test.py new file mode 100644 index 0000000..b6f843e --- /dev/null +++ b/backend/notif_test.py @@ -0,0 +1,14 @@ +import notif + +endpoint_to_test = "https://fcm.googleapis.com/fcm/send/f4Cw12WAYnE:APA91bHOZvh8HkExsem20UK_5uhzgCu0dEo01YV8G8-9hFBjEdsk1M49JVLD7Z51BDP7gxn_UAXVwvmYxIWajwQ9VyTS3ghNQzx92jex-isbz5IvzcpI0QOxaVnmoURLtK-qYt36ebic" +endpoint_to_test = "https://fcm.googleapis.com/preprod/wp/dP2ULA5s2Fk:APA91bE6toPxR5LbakAronwoI2QfdSe6NIEAzVBoIq0Q5jUF8hkFskAT_PyHYwwUiJpJgF8xcCr_8CEzE83YTsUGZWyvcI53DiwjkDD4IK1UseK2bX-WaXVRRXBLM5wTHCKs1ZfG2rME" + +notif.send_notification( + endpoint_to_test, + { + "title": "Test Notification", + "body": "Hello, world pls work", + "requireInteraction": True, + "timerId": 0, + } +) diff --git a/backend/serviceAccountKey.json b/backend/serviceAccountKey.json deleted file mode 100644 index e2f09e2..0000000 --- a/backend/serviceAccountKey.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "type": "service_account", - "project_id": "victoria-hall-laundryweb-cm", - "private_key_id": "597c9fc3dafbaf9a99fa51776fc0e78f7bde9e7d", - "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDeEuAMyzZHDFOS\n4PPYMpTJtGyos14X2m7Tv5p+0ndJF8mb8g2yWGsq13wXebcXWzSwg98Dy0TBFsKN\njP+iXZ0KN7upG5LEW/M7sKl2oIC/IgnCvnrNqYHrK6BCKJ87jhxVoz5b/WE9yg+8\nVzBMDXKJaaZBVVV3p+UVQydiRd9qDYClRgU4wzGK3/B6hSYFmK66YslAUp/roERM\nkF3F+YRrli5iSvzf9+oyrv5W5SMQ5qdmhh2daNEFWyev9psOmKxVZ8iYi/tQdyrj\nlCX6ggcoJSDwKIbglasqscwwIV28PXDqLWKOvLa3lshaG7lZECra0ucTz+yv9KKx\nY+lJBkiLAgMBAAECggEAaN3J7lCxt1gzSOswStoL17n7C6jz2Fi+OADFMHkrehkh\nC6KAZEULikYKY72Gv6FCns4O7Gg69eFNCvHXr3D8XNxXojISmuX+1KOGSq3dTiSB\nLnSrYd3XK1nFCijLlKB1cd0t79uVZUu7JYmYlXlOKmR47WYh/2iJrYIyIV50c0u+\nRdtMQN4bIY2X9inlSd5IAeW9P6SCeHwaLGCJtKGbZ2d9Akseyi8r4yyzt2U2e8Cz\nAsY3qVlcdxqCY7BprhFbgOg/F6ahtLbZgEZBDqEjFBXUO78oTd1erKcqwq2hu+DB\n7D7JndCRGbJUGtX3HDNq79zxsCPMO7TrArAGZg0sBQKBgQD/nyTN7wqgshbYnTVh\nF3r9nw3NC3iuyo2EnVXDj6IC0EIxc9FzvuqDt7MaoN2PrvFEqfELX6AOYSQFdM4o\nWPz32jrmYiLpIUBfGwsedSF9PC1rwF/V2EKsVlpOJhM3ff0q+NNrCXOCcrO6S6ci\nYzEGu6nK/L8gVZgK3zxLF+ATjwKBgQDeZwUcVhBmEQRocuvnsPwapg+V3YZp6Oe+\nvdxHhfIOqXyTXokUBNL/tqyrMxduHgOsa50FcJQlt2T2CCEUKOZie2aW8h9jgzmK\nYy8H1hgqJ3PuVWod0pADmR6BucvewG7SYtJloi3FQoNwjPnpQPgs5nPOXn/NYPDd\nMZwsxNFNRQKBgQD4gt2jH7wzUjAH036rr8owe8tNBtQDCoTe4p8YirE1DwbrUO/W\nGUuhVpxXTQFZyPhiitz+866FjEcazt4GN81noNAWXl4WS+9rBr2elL1EJZb65IHH\nQoI/TYxp4XZZQrE4b8QKkZusvJqiiR4pvklRhGykHWgqpUw1daYGU2XTXQKBgQCS\no2RoQYrAcVnxsExA0J34yCMgkhZNAIbEahSyh+uIpVGBLWS+cUvZ1M1Wd/Jr5ZhQ\neAfpDUhw8dG8srF0xF7a8jg7MFtn1p760tiwlwYJzUeQDntQPIQ+CxhlOmbkcQbg\n6s2Eu4DoPinB7QHePLslh7E1kXM8rD1D6rDph7/k7QKBgA/mv928mWQ2WgcFEhZ3\nvKVFZgynklAHlby/RDyLETkvPwp3a54vWR1aeFhy39qcx6R6LsDkPbHUvaLPodHv\n+URzuZYr/bmVCqPbCDfXZ5A1OaUZDonwID6rJ7RLbo6VykEREQI0q7atLOInC6za\n/+9sIal321qEzmAKpEhvuUbi\n-----END PRIVATE KEY-----\n", - "client_email": "firebase-adminsdk-fbsvc@victoria-hall-laundryweb-cm.iam.gserviceaccount.com", - "client_id": "102261899996446059087", - "auth_uri": "https://accounts.google.com/o/oauth2/auth", - "token_uri": "https://oauth2.googleapis.com/token", - "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", - "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-fbsvc%40victoria-hall-laundryweb-cm.iam.gserviceaccount.com", - "universe_domain": "googleapis.com" -} diff --git a/frontend/.DS_Store b/frontend/.DS_Store Binary files differnew file mode 100644 index 0000000..1f6bb54 --- /dev/null +++ b/frontend/.DS_Store diff --git a/frontend/OneSignalSDKWorker.js b/frontend/OneSignalSDKWorker.js deleted file mode 100644 index 067cf4d..0000000 --- a/frontend/OneSignalSDKWorker.js +++ /dev/null @@ -1 +0,0 @@ -importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
\ No newline at end of file diff --git a/frontend/admin/admin-style.css b/frontend/admin/admin-style.css new file mode 100644 index 0000000..9c866ff --- /dev/null +++ b/frontend/admin/admin-style.css @@ -0,0 +1,53 @@ +#unauthorised { + +} + +#authorised { + +} + +.admin-machine-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: lightgrey; + gap: 16px; + padding: 16px; + width: fit-content; + max-width: 100%; + box-sizing: border-box; +} + +.admin-machine-container > div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.admin-machine-container > div > img { + width: 128px; +} + +.admin-machine-container > div > span { + text-align: center; + font-weight: 600; +} + +.admin-machine-container > h2 { + writing-mode: vertical-lr; + transform: rotate(180deg); + margin: 0; + height: fit-content; +} + +#passwordFeedback { + display: none; + color: red; +} + +.blocks-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 16px; +} diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js new file mode 100644 index 0000000..ff1c463 --- /dev/null +++ b/frontend/admin/admin.js @@ -0,0 +1,110 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +async function login() { + const field = document.getElementById("pwfield"); + + const response = await fetch(`${API_URL}/admin_login`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"password": "${field.value}"}`, + }); + + if (response.status == 202) window.location.href = "./panel.html"; + else document.getElementById("passwordFeedback").style.display = "inherit"; +} + +async function checkLoginStatus() { + const response = await fetch(`${API_URL}/admin_check`, { + method: "POST", + credentials: "include" + }); + + return response.status == 202; +} + +async function autoLogin() { + if (await checkLoginStatus()) { + window.location.href = "./panel.html"; + } +} + +async function panelLoginCheck() { + const msg = document.getElementById("unauthorised"); + const authDiv = document.getElementById("authorised"); + + if (await checkLoginStatus()) { + msg.style.display = "none"; + authDiv.style.display = "inherit"; + return true; + } else { + msg.style.display = "inherit"; + authDiv.style.display = "none"; + return false; + } +} + +async function syncMachineStatus() { + const response = await fetch(`${API_URL}/admin_machine_status`, { + method: "POST", + credentials: "include", + }); + const data = await response.json(); + + for (let b = 0; b < data.length; b++) { + for (let m = 0; m < data[b].length; m++) { + const img = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()+"img"); + const dropdown = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()); + + if (data[b][m] != "OUTOFSERVICE") { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_off.png"; + } else { + img.src = "/assets/img/washer_off.png"; + } + dropdown.selectedIndex = 0; + } else { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_down.png"; + } else { + img.src = "/assets/img/washer_down.png"; + } + dropdown.selectedIndex = 1; + } + } + } +} + +async function overrideMachineStatus(block, machine) { + const img = document.getElementById("h"+block.toString()+"m"+machine.toString()+"img"); + const dropdown = document.getElementById("h"+block.toString()+"m"+machine.toString()); + + const response = await fetch(`${API_URL}/override_status`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"block": ${block}, "machine_id": ${machine}, "disabled": ${dropdown.selectedIndex == 1}}`, + }); + + if (response.status != 200) { + return; + } + + if (dropdown.selectedIndex == 1) { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_down.png"; + } else { + img.src = "/assets/img/dryer_down.png"; + } + } else { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_off.png"; + } else { + img.src = "/assets/img/dryer_off.png"; + } + } +} diff --git a/frontend/admin/index.html b/frontend/admin/index.html new file mode 100644 index 0000000..76df357 --- /dev/null +++ b/frontend/admin/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel Log In</h1> + <input type="password" id="pwfield"> <button onclick="login()">Log In</button> + <p id="passwordFeedback">Invalid password.</p> + <script src="./admin.js"></script> + <script> + autoLogin(); + </script> +</body> +</html> diff --git a/frontend/admin/panel.html b/frontend/admin/panel.html new file mode 100644 index 0000000..4813c06 --- /dev/null +++ b/frontend/admin/panel.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel</h1> + <p id="unauthorised">You are unauthorised.</p> + <!-- even if you make this div visible, you won't be able to do anything if you are unauthorised --> + <div id="authorised"> + <div class="blocks-container"> + <div class="admin-machine-container" style="background-color: lightyellow;"> + <h2>Block H2</h2> + <div> + <span>Dryer 1</span> + <img id="h2m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m1" name="" onchange="overrideMachineStatus(2, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h2m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m2" name="" onchange="overrideMachineStatus(2, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h2m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m3" name="" onchange="overrideMachineStatus(2, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h2m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m4" name="" onchange="overrideMachineStatus(2, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + <div class="admin-machine-container" style="background-color: skyblue;"> + <h2>Block H1</h2> + <div> + <span>Dryer 1</span> + <img id="h1m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m1" name="" onchange="overrideMachineStatus(1, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h1m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m2" name="" onchange="overrideMachineStatus(1, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h1m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m3" name="" onchange="overrideMachineStatus(1, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h1m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m4" name="" onchange="overrideMachineStatus(1, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + </div> + </div> + <script src="admin.js"></script> + <script> + (async () => { + if (await panelLoginCheck()) { + syncMachineStatus(); + } + })(); + </script> +</body> +</html> diff --git a/frontend/assets/.DS_Store b/frontend/assets/.DS_Store Binary files differnew file mode 100644 index 0000000..64959d9 --- /dev/null +++ b/frontend/assets/.DS_Store diff --git a/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..43ed4f5 --- /dev/null +++ b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf diff --git a/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..e31b51e --- /dev/null +++ b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf diff --git a/backend/db.db b/frontend/assets/icons/.DS_Store Binary files differindex 20ded47..5008ddf 100644 --- a/backend/db.db +++ b/frontend/assets/icons/.DS_Store diff --git a/frontend/assets/icons/1024.png b/frontend/assets/icons/1024.png Binary files differnew file mode 100644 index 0000000..7063453 --- /dev/null +++ b/frontend/assets/icons/1024.png diff --git a/frontend/assets/icons/192.png b/frontend/assets/icons/192.png Binary files differnew file mode 100644 index 0000000..80c8f46 --- /dev/null +++ b/frontend/assets/icons/192.png diff --git a/frontend/assets/icons/512.png b/frontend/assets/icons/512.png Binary files differnew file mode 100644 index 0000000..195b42b --- /dev/null +++ b/frontend/assets/icons/512.png diff --git a/frontend/assets/icons/logo.svg b/frontend/assets/icons/logo.svg new file mode 100644 index 0000000..e7e1c2b --- /dev/null +++ b/frontend/assets/icons/logo.svg @@ -0,0 +1,176 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo.svg" + inkscape:export-filename="192.png" + inkscape:export-xdpi="18" + inkscape:export-ydpi="18" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.43446384" + inkscape:cx="339.49891" + inkscape:cy="407.39869" + inkscape:current-layer="g5" /> + <defs + id="defs1"> + <meshgradient + inkscape:collect="always" + id="meshgradient15678" + gradientUnits="userSpaceOnUse" + x="165.22603" + y="170.67172" + gradientTransform="translate(-151.95082,25.498289)"> + <meshrow + id="meshrow42263"> + <meshpatch + id="meshpatch42263"> + <stop + path="c -2.84217e-14,32.2929 -26.1786,58.4715 -58.4715,58.4715" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42263" /> + <stop + path="l 4.21082e-05,-58.4734" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42264" /> + <stop + path="l -4.21082e-05,0.00263432" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42265" /> + <stop + path="l 58.4715,-0.00070466" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42266" /> + </meshpatch> + <meshpatch + id="meshpatch42266"> + <stop + path="c -32.2929,0 -58.4715,-26.1786 -58.4715,-58.4715" + id="stop42267" /> + <stop + path="l 58.4715,-0.00192966" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42268" /> + <stop + path="l 0,0" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42269" /> + </meshpatch> + <meshpatch + id="meshpatch42269"> + <stop + path="c 0,-32.2929 26.1786,-58.4715 58.4715,-58.4715" + id="stop42270" /> + <stop + path="l 4.15649e-05,58.4715" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42271" /> + <stop + path="l 5.43348e-07,-0.00192966" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42272" /> + </meshpatch> + <meshpatch + id="meshpatch42272"> + <stop + path="c 32.2929,0 58.4715,26.1784 58.4715,58.4713" + id="stop42273" /> + <stop + path="l -58.4715,0.0002" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42274" /> + <stop + path="l 4.15649e-05,0" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42275" /> + </meshpatch> + </meshrow> + </meshgradient> + </defs> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <rect + style="opacity:1;fill:#e8deb6;fill-opacity:1;stroke:none;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="rect42288" + width="270.93332" + height="270.93332" + x="-28.712095" + y="7.7178087" + ry="19.067522" /> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 32.351323,85.692322 H 181.15782 c 6.29198,0 6.06569,-0.226285 6.06569,6.065692 V 244.29376 c 0,6.29198 -5.06538,11.35736 -11.35736,11.35736 H 37.64299 c -6.291977,0 -11.357359,-5.06538 -11.357359,-11.35736 V 91.758014 c 0,-6.291977 -0.226285,-6.065692 6.065692,-6.065692 z" + sodipodi:nodetypes="sssssssss" /> + <circle + style="display:none;fill:url(#meshgradient15678);fill-opacity:1;stroke:none;stroke-width:48.916;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="path5" + cy="196.17001" + cx="-45.196255" + r="58.471458" + transform="rotate(-45)" /> + <circle + style="fill:none;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="path2" + cx="106.75457" + cy="170.67172" + r="54.53896" /> + <path + id="rect3" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 37.642993,30.717831 H 175.86615 c 6.29198,0 11.35736,5.065383 11.35736,11.35736 v 24.93158 c 0,6.291977 0.22629,6.065692 -6.06569,6.065692 H 32.351326 c -6.291977,0 -6.065692,0.226285 -6.065692,-6.065692 v -24.93158 c 0,-6.291977 5.065382,-11.35736 11.357359,-11.35736 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:#000000;fill-opacity:0;stroke:#666a83;stroke-width:3.665;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="40.208775" + height="17.323994" + x="86.650185" + y="43.235077" + ry="8.6619968" /> + <circle + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="170.67172" + r="54.53896" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#798aa2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,131.02162 v 39.6501 l 29.24515,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/icons/transparent_1024.png b/frontend/assets/icons/transparent_1024.png Binary files differnew file mode 100644 index 0000000..5e2e557 --- /dev/null +++ b/frontend/assets/icons/transparent_1024.png diff --git a/frontend/assets/icons/transparent_logo.svg b/frontend/assets/icons/transparent_logo.svg new file mode 100644 index 0000000..063bdf4 --- /dev/null +++ b/frontend/assets/icons/transparent_logo.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo_to_ico.svg" + inkscape:export-filename="transparent_1024.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.61372381" + inkscape:cx="510.00139" + inkscape:cy="374.76141" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 22.618924,78.171998 H 190.89022 c 7.11501,0 6.85912,-0.255885 6.85912,6.859122 v 172.48835 c 0,7.11501 -5.72797,12.84297 -12.84298,12.84297 H 28.602773 c -7.115005,0 -12.84297,-5.72796 -12.84297,-12.84297 V 85.03112 c 0,-7.115007 -0.255885,-6.859122 6.859121,-6.859122 z" + sodipodi:nodetypes="sssssssss" /> + <path + id="rect3" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 28.602776,16.006507 H 184.90636 c 7.11501,0 12.84298,5.727967 12.84298,12.842972 v 28.192784 c 0,7.115005 0.25589,6.859121 -6.85912,6.859121 H 22.618928 c -7.115007,0 -6.859122,0.255884 -6.859122,-6.859121 V 28.849479 c 0,-7.115005 5.727965,-12.842972 12.84297,-12.842972 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:#000000;fill-opacity:0;stroke:#666a83;stroke-width:4.14441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="45.468327" + height="19.590078" + x="84.020409" + y="30.161087" + ry="9.7950392" /> + <circle + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="174.26723" + r="61.672989" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#798aa2;stroke-width:5.65403;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,129.43064 v 44.83657 l 33.07059,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/icons/transparent_text_logo.svg b/frontend/assets/icons/transparent_text_logo.svg new file mode 100644 index 0000000..5740452 --- /dev/null +++ b/frontend/assets/icons/transparent_text_logo.svg @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="721.48175" + height="994.95959" + viewBox="0 0 190.89204 263.24972" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="transparent_text_logo.svg" + inkscape:export-filename="transparent_1024.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.61372381" + inkscape:cx="358.46744" + inkscape:cy="360.09683" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-40.020643,-3.8418031)"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 22.618924,78.171998 H 190.89022 c 7.11501,0 6.85912,-0.255885 6.85912,6.859122 v 172.48835 c 0,7.11501 -5.72797,12.84297 -12.84298,12.84297 H 28.602773 c -7.115005,0 -12.84297,-5.72796 -12.84297,-12.84297 V 85.03112 c 0,-7.115007 -0.255885,-6.859122 6.859121,-6.859122 z" + sodipodi:nodetypes="sssssssss" /> + <path + id="rect3" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 28.602776,16.006507 H 184.90636 c 7.11501,0 12.84298,5.727967 12.84298,12.842972 v 28.192784 c 0,7.115005 0.25589,6.859121 -6.85912,6.859121 H 22.618928 c -7.115007,0 -6.859122,0.255884 -6.859122,-6.859121 V 28.849479 c 0,-7.115005 5.727965,-12.842972 12.84297,-12.842972 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:4.14441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="45.468327" + height="19.590078" + x="84.020409" + y="30.161087" + ry="9.7950392" /> + <circle + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="174.26723" + r="61.672989" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:5.65403;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,129.43064 v 44.83657 l 33.07059,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/img/.DS_Store b/frontend/assets/img/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/frontend/assets/img/.DS_Store diff --git a/frontend/assets/img/dryer_clothes.png b/frontend/assets/img/dryer_clothes.png Binary files differnew file mode 100644 index 0000000..babfc36 --- /dev/null +++ b/frontend/assets/img/dryer_clothes.png diff --git a/frontend/assets/img/dryer_down.png b/frontend/assets/img/dryer_down.png Binary files differnew file mode 100644 index 0000000..8c81b25 --- /dev/null +++ b/frontend/assets/img/dryer_down.png diff --git a/frontend/assets/img/dryer_off.png b/frontend/assets/img/dryer_off.png Binary files differnew file mode 100644 index 0000000..9919a01 --- /dev/null +++ b/frontend/assets/img/dryer_off.png diff --git a/frontend/assets/img/dryer_on.png b/frontend/assets/img/dryer_on.png Binary files differnew file mode 100644 index 0000000..7851dd5 --- /dev/null +++ b/frontend/assets/img/dryer_on.png diff --git a/frontend/assets/img/step1.png b/frontend/assets/img/step1.png Binary files differnew file mode 100644 index 0000000..4277a06 --- /dev/null +++ b/frontend/assets/img/step1.png diff --git a/frontend/assets/img/step2.png b/frontend/assets/img/step2.png Binary files differnew file mode 100644 index 0000000..7e24b63 --- /dev/null +++ b/frontend/assets/img/step2.png diff --git a/frontend/assets/img/step3.png b/frontend/assets/img/step3.png Binary files differnew file mode 100644 index 0000000..cbf88e8 --- /dev/null +++ b/frontend/assets/img/step3.png diff --git a/frontend/assets/img/step4.png b/frontend/assets/img/step4.png Binary files differnew file mode 100644 index 0000000..4a6801a --- /dev/null +++ b/frontend/assets/img/step4.png diff --git a/frontend/assets/img/washer_clothes.png b/frontend/assets/img/washer_clothes.png Binary files differnew file mode 100644 index 0000000..b16688a --- /dev/null +++ b/frontend/assets/img/washer_clothes.png diff --git a/frontend/assets/img/washer_down.png b/frontend/assets/img/washer_down.png Binary files differnew file mode 100644 index 0000000..89334b0 --- /dev/null +++ b/frontend/assets/img/washer_down.png diff --git a/frontend/assets/img/washer_off.png b/frontend/assets/img/washer_off.png Binary files differnew file mode 100644 index 0000000..0be7233 --- /dev/null +++ b/frontend/assets/img/washer_off.png diff --git a/frontend/assets/img/washer_on.png b/frontend/assets/img/washer_on.png Binary files differnew file mode 100644 index 0000000..7b811a4 --- /dev/null +++ b/frontend/assets/img/washer_on.png diff --git a/frontend/favicon.ico b/frontend/favicon.ico Binary files differnew file mode 100644 index 0000000..41044ea --- /dev/null +++ b/frontend/favicon.ico diff --git a/frontend/index.html b/frontend/index.html index 5217c41..fd7a1e9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,21 +2,28 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <link rel="icon" type="image/svg+xml" href="/vite.svg" /> + <link rel="stylesheet" href="./style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>frontend</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> </head> <body> - <button id="notbtn"></button> - <script src="main.js"></script> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div class="section-container no-pad"> + <span>Loading...</span> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/index.js"></script> </body> </html> diff --git a/frontend/index.js b/frontend/index.js new file mode 100644 index 0000000..12f1e97 --- /dev/null +++ b/frontend/index.js @@ -0,0 +1,14 @@ +(async () => { + const timers = await fetchTimers(); + if (Array.isArray(timers[1]) && timers[1].length > 0) { + window.location.href = './timer/'; + } else { + const urlCookie = await cookieStore.get("last_used_url"); + + if (urlCookie && urlCookie != null && urlCookie != "null") { + window.location.href = `./start/?machine=${urlCookie.value}`; + } else { + window.location.href = './status/' + } + } +})(); diff --git a/frontend/ios_popup.js b/frontend/ios_popup.js new file mode 100644 index 0000000..0b700ed --- /dev/null +++ b/frontend/ios_popup.js @@ -0,0 +1,9 @@ +(async () => { +const cookie = await cookieStore.get("subscription_endpoint"); + +if (navigator.userAgent.match(/iPhone|iPad|iPod/i) + && !window.matchMedia('(display-mode: standalone)').matches + && !cookie) { + openPopup(); +} +})(); diff --git a/frontend/main.js b/frontend/main.js index 46341d6..cfacc86 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -1,23 +1,376 @@ -const btn = document.getElementById("notbtn") -btn.addEventListener("click", () => requestPermission()) -function requestPermission() { - console.log("Requesting permission..."); - OneSignal.Notifications.requestPermission(); +// --- begin, important constants +const data = { + duration: 1, // will be multiplied by 30 + machine_id: "", } -document.cookie = "session_key=0" +const API_URL = "https://backend.laundryweb.altafcreator.com" -const data = { - duration: 2, - block: 1, - machine: 2, -} - -fetch("http://localhost:8000/start", { - credentials: "include", - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify(data) -}); +const PUBLIC_VAPID_KEY = "BCvVfKfWBtHKtzdakJfhYy604yTn0_FgZxy2sNtxcQm6YyC3qdzBBuCJLbVcG6pmbz_CZLa0I44Z-b5UVBbegGw" + +// --- REGISTER SERVICE WORKERS +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js', { + scope: '/', + }); +} + +// --- subscribe +async function subscribe() { + if (!('serviceWorker' in navigator)) { + alert("err: no service worker"); + return; + } + + console.log(await Notification.requestPermission()); + + const registration = await navigator.serviceWorker.ready; + + try { + const subscription = await registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY), + }); + + console.log(subscription); + + console.log("sw regis pass, write to db"); + + const db_reply = await fetch(`${API_URL}/notifsubscribe`, { + method: 'POST', + credentials: "include", + body: JSON.stringify(subscription), + headers: { + "Content-Type": "application/json", + }, + }); + + console.log(db_reply) + + return db_reply.ok; + } catch (e) { + console.log("ERR in regis, ", e); + return false; + } + +} + +/// copied from somewhere +const urlBase64ToUint8Array = (base64String) => { + const padding = '='.repeat((4 - base64String.length % 4) % 4); + const base64 = (base64String + padding) + .replace(/\-/g, '+') + .replace(/_/g, '/'); + + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + return outputArray; +}; + +// --- check machine status +// returns a 2d array representing machines +// []: root array +// []: block +// enum: machine status +async function checkMachineStatus() { + const response = await fetch(`${API_URL}/status`, { + method: "POST", + credentials: "include", + }); + return await response.json(); +} + +// --- timer duration +const minField = document.getElementById("min-field"); +const decBtn = document.getElementById("decTime"); +function increaseTime() { + data.duration += 1; + minField.innerText = (30 * data.duration).toString() + " minutes"; + decBtn.disabled = false; +} + +function decreaseTime() { + data.duration -= 1; + data.duration = Math.max(data.duration, 1); + if (data.duration == 1) { + decBtn.disabled = true; + } + minField.innerText = (30 * data.duration).toString() + " minutes"; +} + +// --- starting a timer +async function start() { + fetch(`${API_URL}/start`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(data) + }).then(response => response.text()) + .then(data => { + console.log(data); + if (data == "all good bro timer started") { + window.location.href = "/timer/"; + } + cookieStore.delete("last_used_url"); + }); +} + +// --- information loading + cookie setting (from server) +async function information(urlParam = null) { + const urlCookie = await cookieStore.get("last_used_url"); + + const response = await fetch(`${API_URL}/info`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ "machine_id": urlParam ? urlParam : "" }), + }); + + const json = await response.json(); + + if (json["block"]) { + document.getElementById("logo-id").innerText = "H" + json["block"]; + } else { + document.getElementById("logo-id").innerText = "H?"; + } + + return Promise.resolve(json); +} + + +// ------ page specific ----- +// wait WHY THE FUCK ARE THESE HERE THEN? + +// ---- machine status page + +const STATUS_INTERVAL = 30 + +// --- machines visual +async function startUpdateMachines() { + const urlParams = new URLSearchParams(window.location.search); + + await information(urlParams.get("machine")); + console.log("info done") + + updateMachines(); + + while (true) { + await delay(STATUS_INTERVAL * 1000); + + await updateMachines(); + } +} + +async function updateMachines() { + // less disgusting. + const types = ["dryer", "washer"]; + const ns = [1, 2]; + + const machineImgs = []; + const machineTxts = []; + const machineDetailImgs = []; + const machineDetailTitles = []; + const machineDetailDescs = []; + + for (const n of ns) { + for (const t of types) { + machineImgs.push(document.getElementById(`${t}${n}-img`)); + machineTxts.push(document.getElementById(`${t}${n}-span`)); + machineDetailImgs.push(document.getElementById(`detail-${t[0]}${n}-img`)); + machineDetailTitles.push(document.getElementById(`detail-${t[0]}${n}-title`)); + machineDetailDescs.push(document.getElementById(`detail-${t[0]}${n}-desc`)); + } + } + + console.log(machineDetailImgs); + console.log(machineDetailTitles); + console.log(machineDetailDescs); + + const status = await checkMachineStatus(); + console.log(status); + + for (let i = 0; i < status[0].length; i++) { + if (status[0][i] == "RUNNING") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Timing might differ due to heavy load or excess suds." + } else { + machineImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + } + const now = Date.now(); + const end = Date.parse(status[2][i]); + const minsLeft = Math.ceil((end - now) / 60000).toString(); + machineTxts[i].innerHTML = minsLeft + " min(s) left"; + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = minsLeft + " minute(s) left" + } else if (status[0][i] == "OUTOFSERVICE") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_down.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_down.png"; + } + machineTxts[i].innerHTML = "Down" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Out of Service" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "This machine is currently out of service, and is unavailable to use." + } else if (status[0][i] == "FINISHED") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_clothes.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_clothes.png"; + } + machineTxts[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Clothes may not be collected yet." + } else { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_off.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_off.png"; + } + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "" + machineTxts[i].innerHTML = "Idle" + } + } + + console.log("done"); +} + +// --- current timers +async function startLoadTimers() { + information(); + + const timersData = await fetchTimers(); + + if (timersData[0] != 200) { + console.error(timersData[0].toString() + " from backend: " + timersData[1]); + return; + } + + const timers = timersData[1]; + + const container = document.getElementById("timer-container") + if (timers.length > 0) container.innerHTML = ''; + + const textList = [] + const progList = [] + const startTimestamps = [] + const endTimestamps = [] + + for (let i = 0; i < timers.length; i++) { + container.innerHTML += ` + <div class="section-container no-pad" id="timer-${timers[i]["id"]}"> + <h1>Timer #${(i + 1).toString()}</h1> + <div class="machine-container"> + <div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-washer ${timers[i]["machine"] == 2 ? "machine-selected" : ""}"> + <span>Washer 1</span> + <img src="/assets/img/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-dryer ${timers[i]["machine"] == 3 ? "machine-selected" : ""}"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-washer ${timers[i]["machine"] == 4 ? "machine-selected" : ""}"> + <span>Washer 2</span> + <img src="/assets/img/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt=""> + </div> + </div> + <div class="timer-container"> + <span id="timer-txt-${i}">15:00</span> + <div class="prog-container"> + <div class="prog" id="timer-prog-${i}"></div> + </div> + </div> + <button class="button bg-1" disabled id="timer-btn-${i}">I have collected my laundry!</button> + </div> + ` + + textList.push(`timer-txt-${i}`); + progList.push(`timer-prog-${i}`); + endTimestamps.push(Date.parse(timers[i]["end_time"])); + startTimestamps.push(Date.parse(timers[i]["start_time"])); + } + + for (let i = 0; i < timers.length; i++) { // html rebuilds everytime innerHTML is modified + document.getElementById(`timer-btn-${i}`).addEventListener("click", function () { + finishLaundryTimer(timers[i]["id"]); + }); + console.log("added!"); + } + + console.log(textList); + console.log(progList); + console.log(endTimestamps); + console.log(startTimestamps); + + while (true) { + for (let i = 0; i < textList.length; i++) { + const text = document.getElementById(textList[i]); + text.innerText = ""; + const timeRemaining = Math.max(Math.round((endTimestamps[i] - Date.now()) / 1000), 0); + const hours = Math.floor(timeRemaining / 3600); + const minutes = Math.floor(timeRemaining / 60) % 60; + const seconds = timeRemaining % 60; + if (hours > 0) text.innerText += hours.toString().padStart(2, '0') + ':'; + text.innerText += minutes.toString().padStart(2, '0') + ':'; + text.innerText += seconds.toString().padStart(2, '0'); + + const prog = document.getElementById(progList[i]); + const totalTime = endTimestamps[0] - startTimestamps[0]; + prog.style.width = ((timeRemaining / (totalTime / 1000)) * 100).toString() + "%"; + + if (timeRemaining <= 0) { + document.getElementById(`timer-btn-${i}`).disabled = false; + } + } + await delay(1000); + } +} + +async function fetchTimers() { + const response = await fetch(`${API_URL}/laundry`, { + method: "POST", + credentials: "include", + }); + return [response.status, await response.json()]; +} + +// --- finish / collect timer / laundry +async function finishLaundryTimer(timerId) { + console.log("finishing timer! w/ id "+timerId.toString()); + const response = await fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + if (await response.text() == "laundry finished") { + window.location.reload(); + } +} + +const delay = (durationMs) => { + return new Promise(resolve => setTimeout(resolve, durationMs)); +} diff --git a/frontend/manifest.json b/frontend/manifest.json new file mode 100644 index 0000000..4bbf313 --- /dev/null +++ b/frontend/manifest.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://json.schemastore.org/web-manifest-combined.json", + "name": "LaundryWeb", + "icons": [ + { + "src": "/assets/icons/512.png", + "type": "image/png", + "sizes": "512x512" + }, + { + "src": "/assets/icons/192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "/assets/icons/1024.png", + "type": "image/png", + "sizes": "1024x1024" + } + ], + "start_url": "/", + "display": "standalone", + "theme_color": "#93B6B1", + "background_color": "#FFFFFF" +} diff --git a/frontend/permissionrequest.js b/frontend/permissionrequest.js new file mode 100644 index 0000000..1a90109 --- /dev/null +++ b/frontend/permissionrequest.js @@ -0,0 +1,25 @@ +const notif = document.getElementById("notif-panel"); +const notbtn = document.getElementById("notbtn"); + +(async function () { + cookie = await cookieStore.get("subscription_endpoint"); + if (cookie) { + notif.style.display = "none"; + } +})(); + +notbtn.addEventListener("click", () => requestPermission()); +async function requestPermission() { + const sub_result = await subscribe(); + + if (!sub_result) { + return; + } + + notif.style.display = "none"; + + // this is disgusting + if (typeof startbtn !== 'undefined') { + startbtn.disabled = false; + } +} diff --git a/frontend/popup.js b/frontend/popup.js new file mode 100644 index 0000000..b7adf0a --- /dev/null +++ b/frontend/popup.js @@ -0,0 +1,12 @@ +const popupCloseBtn = document.getElementById("close-popup"); +const popupMaster = document.getElementById("popup-master") + +popupCloseBtn.addEventListener("mousedown", () => closePopup()); + +function closePopup() { + popupMaster.style.display = "none"; +} + +function openPopup() { + popupMaster.style.display = "flex"; +} diff --git a/frontend/start.js b/frontend/start.js new file mode 100644 index 0000000..82e23aa --- /dev/null +++ b/frontend/start.js @@ -0,0 +1,63 @@ +const startbtn = document.getElementById("startbtn"); + +const urlParams = new URLSearchParams(window.location.search); +data.machine_id = urlParams.get('machine'); +console.log(urlParams); + +startUpdateMachines(); + +(async () => { + const timers = await fetchTimers(); + + console.log("timers: (start.js) " + timers); + + const existingPanel = document.getElementById("existing-laundry-panel"); + const existingText = document.getElementById("existing-laundry-text"); + + if (Array.isArray(timers[1]) && timers[1].length > 0) { + existingPanel.style.display = 'inherit'; + if (timers[1].length == 1) { + existingText.innerText = "You currently have another ongoing laundry. You are creating a new timer."; + } else { + existingText.innerText = "You currently have other ongoing laundries. You are creating a new timer."; + } + } + + const info = await information(data.machine_id); + + const machine = await info["machine"]; + + console.log(`machine is ${machine}`); + + const divs = [ + document.getElementById("dryer1"), + document.getElementById("washer1"), + document.getElementById("dryer2"), + document.getElementById("washer2"), + ] + + divs[machine - 1].classList.add("machine-selected"); + + cookie = await cookieStore.get("subscription_endpoint"); + + if (cookie) { + startbtn.disabled = false; + } +})(); + +startbtn.addEventListener("click", () => { + start(); +}); + +function rememberUrl() { + machineId = urlParams.get('machine'); + minutesDelta = 5; + expirationDate = new Date(new Date().getTime() + minutesDelta * 60000);; + cookieStore.set({ + expires: expirationDate, + name: "last_used_url", + value: machineId, + url: "https://laundryweb.altafcreator.com", + secure: true, + }) +} diff --git a/frontend/start/index.html b/frontend/start/index.html new file mode 100644 index 0000000..bcfd1a6 --- /dev/null +++ b/frontend/start/index.html @@ -0,0 +1,103 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div class="section-container row bg-dark" id="existing-laundry-panel" style="display: none;"> + <div class="flex-center-container"> + <span class="icon" style="font-weight: 900; font-family: monospace;">i</span> + </div> + <div class="flex"> + <span id="existing-laundry-text">You currently have (an)other laundry(ies) ongoing. You are creating a new timer.</span> + <button id="cancelbtn" class="button bg-darker" onclick="window.location.href = '/timer/'">Cancel</button> + </div> + </div> + <div class="section-container no-pad" style="opacity: .5;"> + <h1>Selected Machine</h1> + <div class="machine-container"> + <div class="txtcol-dryer" id="dryer1"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> + <span id="dryer1-span"></span> + </div> + <div class="txtcol-washer" id="washer1"> + <span>Washer 1</span> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> + <span id="washer1-span"></span> + </div> + <div class="txtcol-dryer" id="dryer2"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> + <span id="dryer2-span"></span> + </div> + <div class="txtcol-washer" id="washer2"> + <span>Washer 2</span> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> + <span id="washer2-span"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Duration</h1> + <div class="input-field"> + <button class="button bg-3" onclick="decreaseTime()" id="decTime" disabled>-</button> + <span id="min-field">30 minutes</span> + <button class="button bg-3" onclick="increaseTime()" id="incTime">+</button> + </div> + </div> + <div class="section-container no-pad"> + <h1>Start</h1> + <div class="section-container row bg-red" id="notif-panel"> + <div class="flex-center-container"> + <span class="icon">🔔</span> + </div> + <div> + <span>Please allow this website to send you notifications to remind you about your laundry. That's like, the whole point of this website.</span> + <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> + </div> + </div> + <button class="button bg-1" id="startbtn" disabled>Start</button> + </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/start.js"></script> + <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> + <script> + rememberUrl(); + </script> + </body> +</html> diff --git a/frontend/status.js b/frontend/status.js new file mode 100644 index 0000000..5f55fe8 --- /dev/null +++ b/frontend/status.js @@ -0,0 +1,7 @@ +startUpdateMachines(); + +(async () => { + const urlParams = new URLSearchParams(window.location.search); + const inf = await information(urlParams.get("machine")); + document.getElementById("status-title").innerHTML = `Machine Status for H${inf ? inf.block : '?'}` +})(); diff --git a/frontend/status/index.html b/frontend/status/index.html new file mode 100644 index 0000000..46c50ed --- /dev/null +++ b/frontend/status/index.html @@ -0,0 +1,132 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <style> + .machine-container > div > img { + padding: 6px; + } + </style> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" onclick="window.location.href = '/timer/'">Timer</button> + <button class="button button-tab bg-3" disabled>Status</button> + </div> + <div class="section-container row bg-red" id="notif-panel"> + <div class="flex-center-container"> + <span class="icon">🔔</span> + </div> + <div> + <span>Please allow this website to send you notifications to remind you about your laundry. That's like, the whole point of this website.</span> + <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> + </div> + </div> + <div class="section-container no-pad"> + <h1 id="status-title">Machine Status for H?</h1> + <div class="machine-container"> + <div class="txtcol-dryer" id="dryer1"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> + <span id="dryer1-span"></span> + </div> + <div class="txtcol-washer" id="washer1"> + <span>Washer 1</span> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> + <span id="washer1-span"></span> + </div> + <div class="txtcol-dryer" id="dryer2"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> + <span id="dryer2-span"></span> + </div> + <div class="txtcol-washer" id="washer2"> + <span>Washer 2</span> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> + <span id="washer2-span"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Dryer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d1-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d1-title">Idle</span> + <span id="detail-d1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w1-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w1-title">Idle</span> + <span id="detail-w1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Dryer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d2-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d2-title">Idle</span> + <span id="detail-d2-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w2-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w2-title">Idle</span> + <span id="detail-w2-desc"></span> + </div> + </div> + </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/status.js"></script> + <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> + </body> +</html> diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..37e66e8 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,389 @@ +@font-face { + font-family: "Interesting"; + src: + url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype"), + url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"); +} + +:root { + --col-1: #93B6B1; + --col-2: #E8DEB6; + --col-3: #B3C9AA; + --darkcol-1: #656A85; + --darkcol-2: #798AA2; + --col-red-bg: #FFD0D0; + --col-red-fg: #A33939; + --col-washer: var(--darkcol-1); + --col-dryer: var(--darkcol-2); +} + +body { + margin: 0; + display: flex; + align-items: center; + flex-direction: column; + gap: 16px; + padding: 16px; + font-family: "Interesting", sans-serif; + padding-bottom: 64px; +} + +.section-container { + border-radius: 32px; + padding: 24px; + max-width: 512px; + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; +} + +.section-container > span { + align-self: center; +} + +.section-container > div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.section-container > h1 { + margin: 0; +} + +.no-pad { + padding: 0; +} + +.row { + flex-direction: row !important; +} + +.col { + flex-direction: column !important; +} + +.flex-container { + display: flex; + gap: 16px !important; +} + +.flex-center-container { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-center-container-jus { + display: flex; + justify-content: center; +} + +.flex { + flex: 1; +} + +.button { + width: 100%; + height: 48px; + border-radius: 48px; + border: none; + cursor: pointer; + color: black; +} + +.button:hover:not(:disabled) { + box-shadow: inset 0 0 0 3px #00000033; +} + +.button:active:not(:disabled) { + opacity: .5; +} + +.button:disabled { + cursor: default !important; + color: black !important; + opacity: .5; +} + +.button-tab:not(:disabled) { + background-color: transparent; +} + +.button-tab:disabled { + opacity: 1 !important; +} + +.button-tab:hover { + background-color: var(--col-3); +} + +.bg-1 { + background-color: var(--col-1); +} + +.bg-2 { + background-color: var(--col-2); +} + +.bg-3 { + background-color: var(--col-3); +} + +.bg-red { + background-color: var(--col-red-bg); +} + +.bg-redder { + background-color: var(--col-red-fg); + color: white; +} + +.bg-dark { + background-color: var(--darkcol-2); + color: white; +} + +.bg-darker { + background-color: var(--darkcol-1); + color: white; +} + +.txtcol-washer { + color: var(--col-washer); +} + +.txtcol-dryer { + color: var(--col-dryer); +} + +.icon { + margin: 16px; + margin-left: 0; + font-size: 3rem; +} + +.machine-container { + display: flex; + flex-direction: row !important; + width: 100%; +} + +.machine-container > div { + flex: 1; +} + +.machine-container > div > span { + text-align: center; + width: 100%; + display: block; + height: 1rem; +} + +.machine-container > div > img { + width: 100%; + display: block; + padding: 11px; + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 6px; + border-radius: 16px; + overflow: visible; +} + +.machine-selected { + font-weight: bold; +} + +.machine-selected > img { + background-color: var(--col-2); +} + +.input-field { + display: flex; + flex-direction: row !important; + flex-wrap: nowrap; + background-color: var(--col-2); + width: 272px; + margin-left: auto; + margin-right: auto; + padding: 8px; + box-sizing: border-box; + align-items: center; + border-radius: 36px; +} + +.input-field > span { + flex: 1; + text-align: center; +} + +.input-field > button { + height: 48px; + width: 56px; + border-radius: 64px; +} + +.timer-container { + height: 124px; + background-color: var(--col-2); + position: relative; + border-radius: 32px; + overflow: hidden; +} + +.timer-container > span { + font-weight: bolder; + font-size: 4.1rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, calc(-50% - 8px)); +} + +.timer-container > .prog-container { + position: absolute; + bottom: 0; +} + +.prog-container { + width: 100%; + height: 16px; + background: #00000011; +} + +.prog { + height: 100%; + width: 50%; + background-color: var(--col-1); +} + +.credits-container { + opacity: .5; + font-size: .9rem; + text-align: center; +} + +a { + color: black; +} + +.feedback { + position: fixed; + bottom: 0; + padding: 12px; + padding-bottom: 12px; + background-color: var(--darkcol-1); + color: white; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + text-decoration: none; + right: 16px; + box-shadow: 0 0 8px #00000033; + transition: .3s padding-bottom, .3s background-color; +} + +.feedback:hover { + padding-bottom: 20px; + background-color: var(--darkcol-2); +} + +.big-text { + font-size: 1.5rem; +} + +.master-popup-container { + z-index: 1234567; + background-color: rgba(0, 0, 0, 0.25); + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + backdrop-filter: blur(6px); + padding: 16px; + padding-top: 64px; + padding-bottom: 64px; + box-sizing: border-box; + display: flex; + align-items: center; + display: none; +} + +.master-popup-container > button { + z-index: 1; + width: 100%; + height: 100%; + position: fixed; + left: 0; + top: 0; + opacity: 0; +} + +.popup-container { + z-index: 2; + background-color: white; + width: 100%; + max-height: 100%; + overflow-y: auto; + position: relative; + padding: 24px; + border-radius: 32px; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); +} + +.popup-container > img { + margin-left: auto; + margin-right: auto; + display: block; + height: 192px; +} + +#logo-id { + font-size: 4rem; + margin: 0; + font-weight: 900; +} + +#logo { + font-size: 2rem; +} + +#icon { + background-image: url("/assets/icons/transparent_text_logo.svg"); + background-size: contain; + background-repeat: no-repeat; + height: 3.2rem; + margin-bottom: .5rem; + display: block; +} + +button { + font-family: "Interesting", sans-serif; + font-size: 1rem; +} + +hr { + opacity: .25; +} + +@media only screen and (max-width: 512px) { + .txtcol-washer > span { + font-size: .8rem; + } + + .txtcol-washer > img { + padding: 8px; + } + + .txtcol-dryer > span { + font-size: .8rem; + } + + .txtcol-dryer > img { + padding: 8px; + } +} diff --git a/frontend/sw.js b/frontend/sw.js new file mode 100644 index 0000000..dd9a495 --- /dev/null +++ b/frontend/sw.js @@ -0,0 +1,47 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +self.addEventListener('push', (e) => { + console.log(e.data); + const received_data = e.data.json(); + console.log(received_data); + if (received_data.requireInteraction) { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + requireInteraction: received_data.requireInteraction, + actions: [ + { + title: "I've collected my laundry!", + action: "collect", + } + ], + data: {timerId: received_data.timerId}, + }); + } else { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + }); + } +}); + +self.addEventListener("notificationclick", (event) => { + if (event.action === "collect") { + console.log(event); + timerId = event.notification.data.timerId; + console.log("finishing timer! w/ id "+timerId); + fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + clients.openWindow("/timer/"); + event.notification.close(); + } else { + clients.openWindow("/timer/"); + event.notification.close(); + } +}); diff --git a/frontend/timer/index.html b/frontend/timer/index.html new file mode 100644 index 0000000..724ebe8 --- /dev/null +++ b/frontend/timer/index.html @@ -0,0 +1,32 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div id="timer-container" class="section-container no-pad"> + <img src="/assets/img/washer_off.png" alt="" style="width: 2rem; margin-top: 3rem; margin-right: auto; margin-left: auto; opacity: .5;"> + <span style="opacity: .5; margin-top: .5rem; margin-bottom: 2rem; display: block;">You currently don't have any laundry.</span> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script> + startLoadTimers(); + </script> + </body> +</html> |
