Skip to content

Instantly share code, notes, and snippets.

@sachahjkl

sachahjkl/index.html

Last active July 10, 2024 11:46
Show Gist options
  • Save sachahjkl/f1ce7dfd8f095c46856ec73d31c19069 to your computer and use it in GitHub Desktop.
Save sachahjkl/f1ce7dfd8f095c46856ec73d31c19069 to your computer and use it in GitHub Desktop.
Download ZIP
Lossless Scaling HTML (Tailwind)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lossless Scaling</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: "#da373d",
},
},
},
};
</script>
<style>
:root {
color-scheme: dark;
}
</style>
</head>
<body class="flex flex-row bg-black overflow-hidden dark text-white">
<aside class="bg-neutral-800 max-h-screen text-white flex flex-col">
<h1 class="bg-black p-4 text-xl">Game Profiles</h1>
<div class="flex flex-col grow">
<ul
id="profile-list"
class="flex flex-col grow h-0 overflow-y-auto max-w-[45ch]"
>
<li class="bg-neutral-700 px-4 py-3 hover:bg-neutral-600">Default</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Child of Light
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Lego Marvel Super Heroes
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Dragon Ball Xenoverse
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Do-Don-Pachi Dai-Fukkatsu Black Label
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Dark Void
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Dance Paradise
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Kingdoms of Amalur: Reckoning
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Chivalry: Medieval Warfare
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Crystal Defenders
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Just Dance: Greatest Hits
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Dream Club Zero
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Batman: Arkham Origins
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
11eyes CrossOver
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Feeding Frenzy 2: Shipwreck Showdown
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Fighting Vipers
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Bodycount
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Guitar Hero: Metallica
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Hydrophobia
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
The Gunstringer
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Geometry Wars 3: Dimensions Evolved
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
007: Quantum of Solace
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Dance Central
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
"Adventure Time: Explore the Dungeon Because I Dont Know!"
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Anomaly: Warzone Earth
</li>
<li class="bg-neutral-800 px-4 py-3 hover:bg-neutral-700">
Earthworm Jim HD
</li>
</ul>
<div id="profile-buttons" class="my-2 flex gap-1 mx-3">
<button
onclick="alert('TODO: add')"
class="flex items-center gap-2 px-6 py-2 rounded hover:bg-neutral-700 active:bg-neutral-600 transition"
>
<svg
class="w-6 h-6 inline-block stroke-white"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12H20M12 4V20"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Add
</button>
<button
onclick="if(JSON.parse(this.dataset['enabled'])) alert('TODO: edit')"
data-enabled="true"
class="flex items-cente gap-2 px-6 py-2 rounded opacity-50 active:bg-neutral-600 hover:bg-neutral-700 transition"
>
<svg
class="w-6 h-6 inline-block stroke-white"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M14.3601 4.07866L15.2869 3.15178C16.8226 1.61607 19.3125 1.61607 20.8482 3.15178C22.3839 4.68748 22.3839 7.17735 20.8482 8.71306L19.9213 9.63993M14.3601 4.07866C14.3601 4.07866 14.4759 6.04828 16.2138 7.78618C17.9517 9.52407 19.9213 9.63993 19.9213 9.63993M14.3601 4.07866L5.83882 12.5999C5.26166 13.1771 4.97308 13.4656 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.32181 19.8021M19.9213 9.63993L11.4001 18.1612C10.8229 18.7383 10.5344 19.0269 10.2162 19.2751C9.84082 19.5679 9.43469 19.8189 9.00498 20.0237C8.6407 20.1973 8.25352 20.3263 7.47918 20.5844L4.19792 21.6782M4.19792 21.6782L3.39584 21.9456C3.01478 22.0726 2.59466 21.9734 2.31063 21.6894C2.0266 21.4053 1.92743 20.9852 2.05445 20.6042L2.32181 19.8021M4.19792 21.6782L2.32181 19.8021"
stroke-width="1.5"
></path>
</g>
</svg>
Edit
</button>
<button
onclick="alert('TODO: more')"
class="flex items-cente gap-2 px-6 py-2 rounded active:bg-neutral-600 hover:bg-neutral-700 transition"
>
<svg
class="w-6 h-6 inline-block stroke-white"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="#000000"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="miter"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<line
x1="5.99"
y1="12"
x2="6"
y2="12"
stroke-linecap="round"
stroke-width="2"
></line>
<line
x1="11.99"
y1="12"
x2="12"
y2="12"
stroke-linecap="round"
stroke-width="2"
></line>
<line
x1="17.99"
y1="12"
x2="18"
y2="12"
stroke-linecap="round"
stroke-width="2"
></line>
</g>
</svg>
</button>
</div>
</div>
</aside>
<main class="bg-black flex flex-grow flex-col h-screen overflow-hidden">
<header class="p-2 flex gap-1 items-center justify-end mx-3">
<button
type="button"
onclick="alert('TODO: manual')"
class="p-2 px-4 place-items-center flex gap-2 hover:bg-neutral-900 active:bg-neutral-800 rounded transition text-white"
>
<svg
class="w-6 h-6 inline-block fill-white"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
clip-rule="evenodd"
d="M5.5 2C4.5 2 4 2.94772 4 3.5V24.5C4 25.5 5 26 5.5 26H22.5C23.0523 26 24 25.5 24 24.5V10C24 9.5 24 9 23.5 8.5L17.5 2.5C17 2 16.5 2 16.1716 2H5.5ZM6 5C6 4.44772 6.44772 4 7 4H15V9.5C15 10.0523 15.4477 10.5 16 10.5H22V23C22 23.5523 21.5523 24 21 24H7C6.44772 24 6 23.5523 6 23V5ZM20.6716 8.5L17 4.82843V8.5H20.6716Z"
fill-rule="evenodd"
></path>
</g>
</svg>
Manual
</button>
<svg
class="w-6 h-6 inline-block stroke-neutral-500"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g id="Interface / Line_Xl">
<path
id="Vector"
d="M12 21V3"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</g>
</svg>
<button
type="button"
onclick="alert('TODO: settings')"
class="p-2 px-4 place-items-center flex gap-2 hover:bg-neutral-900 active:bg-neutral-800 rounded transition text-white"
>
<svg
class="w-6 h-6 inline-block stroke-white"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
stroke-linejoin="round"
stroke-width="2"
d="M13.905 3.379A.5.5 0 0114.39 3h3.22a.5.5 0 01.485.379l.689 2.757a.515.515 0 00.341.362c.383.126.755.274 1.115.443a.515.515 0 00.449-.003l2.767-1.383a.5.5 0 01.577.093l2.319 2.319a.5.5 0 01.093.577l-1.383 2.767a.515.515 0 00-.003.449c.127.271.243.549.346.833.053.148.17.265.319.315l2.934.978a.5.5 0 01.342.474v3.28a.5.5 0 01-.342.474l-2.934.978a.515.515 0 00-.32.315 9.937 9.937 0 01-.345.833.515.515 0 00.003.449l1.383 2.767a.5.5 0 01-.093.577l-2.319 2.319a.5.5 0 01-.577.093l-2.767-1.383a.515.515 0 00-.449-.003c-.271.127-.549.243-.833.346a.515.515 0 00-.315.319l-.978 2.934a.5.5 0 01-.474.342h-3.28a.5.5 0 01-.474-.342l-.978-2.934a.515.515 0 00-.315-.32 9.95 9.95 0 01-1.101-.475.515.515 0 00-.498.014l-2.437 1.463a.5.5 0 01-.611-.075l-2.277-2.277a.5.5 0 01-.075-.61l1.463-2.438a.515.515 0 00.014-.498 9.938 9.938 0 01-.573-1.383.515.515 0 00-.362-.341l-2.757-.69A.5.5 0 013 17.61v-3.22a.5.5 0 01.379-.485l2.757-.689a.515.515 0 00.362-.341c.157-.478.35-.94.573-1.383a.515.515 0 00-.014-.498L5.594 8.557a.5.5 0 01.075-.611l2.277-2.277a.5.5 0 01.61-.075l2.438 1.463c.152.091.34.094.498.014a9.938 9.938 0 011.382-.573.515.515 0 00.342-.362l.69-2.757z"
></path>
<circle
cx="16"
cy="16"
r="5"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
></circle>
</g>
</svg>
Settings
</button>
<svg
class="w-6 h-6 inline-block stroke-neutral-500"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g id="Interface / Line_Xl">
<path
id="Vector"
d="M12 21V3"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</g>
</svg>
<button
type="button"
onclick="alert('TODO: scale')"
class="px-8 py-2 bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-500 rounded-sm transition text-white"
>
Scale
</button>
</header>
<div
id="settings-panels"
class="ml-3 mt-4 px-6 pb-6 grow flex flex-row gap-8 overflow-x-auto"
>
<div class="min-w-fit">
<h1 class="text-xl mb-5">Scaling Mode</h1>
<div
id="scaling-inputs"
class="flex flex-col gap-3 flex-wrap items-baseline"
>
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-mode"
id="scaling-mode"
>
<option value="0">Auto</option>
<option value="1">Scale to Fill</option>
<option value="2">Scale to Fit Width</option>
<option value="3">Scale to Fill Width</option>
</select>
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-type"
id="scaling-type"
>
<option value="0">Aspect Ratio</option>
<option value="1">Width</option>
<option value="2">Height</option>
</select>
</div>
</div>
<div class="min-w-fit px-16">
<h1 class="text-xl mb-5">Scaling Type</h1>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-type"
id="scaling-type"
>
<option value="0">Off</option>
<option value="1">AMD FSR</option>
<option value="2">NVIDIA Image Scaling</option>
<option value="3">Integer</option>
</select>
<label for="sharpness">Sharpness</label>
<input
class="min-w-[200px] bg-neutral-800 text-white"
type="range"
name="sharpness"
id="sharpness"
min="0"
max="100"
value="50"
/>
<label for="optimized-version">Optimized Version</label>
<!-- make the ckecbox look like a switch -->
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="optimized-version"
id="optimized-version"
checked="checked"
/>
On
</span>
</div>
</div>
<div class="min-w-fit px-16 overflow-y-auto space-y-4">
<details open>
<summary class="text-xl mb-5">Frame Generation</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-mode"
id="scaling-mode"
>
<option value="0">Auto</option>
<option value="1">Scale to Fill</option>
<option value="2">Scale to Fit Width</option>
<option value="3">Scale to Fill Width</option>
</select>
<label for="mode" class="text-white">Mode</label>
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="mode"
id="mode"
>
<option value="0">X2</option>
<option value="1">X3</option>
</select>
<label for="performance" class="text-white">Performance</label>
<span class="flex gap-3">
<input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="performance"
id="performance"
checked=""
/>
Off
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
</div>
<div class="min-w-fit px-16 overflow-y-auto space-y-4">
<details open>
<summary class="text-xl mb-5">Frame Generation</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-mode"
id="scaling-mode"
>
<option value="0">Auto</option>
<option value="1">Scale to Fill</option>
<option value="2">Scale to Fit Width</option>
<option value="3">Scale to Fill Width</option>
</select>
<label for="mode" class="text-white">Mode</label>
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="mode"
id="mode"
>
<option value="0">X2</option>
<option value="1">X3</option>
</select>
<label for="performance" class="text-white">Performance</label>
<span class="flex gap-3">
<input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="performance"
id="performance"
checked=""
/>
Off
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
</div>
<div class="min-w-fit px-16 overflow-y-auto space-y-4">
<details open>
<summary class="text-xl mb-5">Frame Generation</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="scaling-mode"
id="scaling-mode"
>
<option value="0">Auto</option>
<option value="1">Scale to Fill</option>
<option value="2">Scale to Fit Width</option>
<option value="3">Scale to Fill Width</option>
</select>
<label for="mode" class="text-white">Mode</label>
<select
class="border-2 rounded border-neutral-400 text-md py-1 px-2 min-w-[200px] bg-black"
name="mode"
id="mode"
>
<option value="0">X2</option>
<option value="1">X3</option>
</select>
<label for="performance" class="text-white">Performance</label>
<span class="flex gap-3">
<input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="performance"
id="performance"
checked=""
/>
Off
</span>
</div>
</details>
<details open>
<summary class="text-xl mb-5">Cursor</summary>
<div class="flex flex-col gap-3 flex-wrap items-baseline">
<label for="clip-cursor" class="text-white">Clip Cursor</label>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="clip-cursor"
id="clip-cursor"
checked="checked"
/>
On
</span>
<label for="adjust-cursor-speed" class="text-white"
>Adjust Cursor Speed</label
>
<span class="flex gap-3"
><input
class="bg-neutral-800 text-white inline-block"
type="checkbox"
name="adjust-cursor-speed"
id="adjust-cursor-speed"
checked=""
/>
Off
<label for="cursor-speed" class="text-white"
>Cursor Speed</label
>
</span>
</div>
</details>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment