big changes - WIP

This commit is contained in:
Zoey 2024-06-12 21:33:58 +02:00
parent 82828ddef5
commit e943309306
Signed by: SailorZoop
GPG key ID: 854F554AFF0A96D1
12 changed files with 226 additions and 82 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

BIN
public/firesharelogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

75
public/lemmylogo.svg Normal file
View file

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="62.920513mm"
height="41.44083mm"
viewBox="0 0 951.2393 626.50705"
version="1.1"
id="svg8"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300"
enable-background="new">
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-36.380379,-256.78621)"
style="display:inline">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 167.03908,270.78735 c -0.94784,-0.002 -1.8939,0.004 -2.83789,0.0215 -4.31538,0.0778 -8.58934,0.3593 -12.8125,0.8457 -33.78522,3.89116 -64.215716,21.86394 -82.871086,53.27344 -18.27982,30.77718 -22.77749,64.66635 -13.46094,96.06837 9.31655,31.40203 31.88488,59.93174 65.296886,82.5332 0.20163,0.13618 0.40678,0.26709 0.61523,0.39258 28.65434,17.27768 57.18167,28.93179 87.74218,34.95508 -0.74566,12.61339 -0.72532,25.5717 0.082,38.84375 2.43989,40.10943 16.60718,77.03742 38.0957,109.67187 l -77.00781,31.4375 c -8.30605,3.25932 -12.34178,12.68234 -8.96967,20.94324 3.37211,8.2609 12.84919,12.16798 21.06342,8.68371 l 84.69727,-34.57617 c 15.70675,18.72702 33.75346,35.68305 53.12109,50.57032 0.74013,0.56891 1.4904,1.12236 2.23437,1.68554 l -49.61132,65.69141 c -5.45446,7.0474 -4.10058,17.19288 3.01098,22.5634 7.11156,5.37052 17.24028,3.89649 22.52612,-3.27824 l 50.38672,-66.71876 c 27.68572,17.53469 57.07524,31.20388 86.07227,40.25196 14.88153,27.28008 43.96965,44.64648 77.58789,44.64648 33.93762,0 63.04252,-18.68693 77.80082,-45.4375 28.7072,-9.21295 57.7527,-22.93196 85.1484,-40.40234 l 51.0977,67.66016 c 5.2858,7.17473 15.4145,8.64876 22.5261,3.27824 7.1115,-5.37052 8.4654,-15.516 3.011,-22.5634 l -50.3614,-66.68555 c 0.334,-0.25394 0.6727,-0.50077 1.0059,-0.75586 19.1376,-14.64919 37.0259,-31.28581 52.7031,-49.63476 l 82.5625,33.70507 c 8.2143,3.48427 17.6913,-0.42281 21.0634,-8.68371 3.3722,-8.2609 -0.6636,-17.68392 -8.9696,-20.94324 l -74.5391,-30.42773 c 22.1722,-32.82971 37.0383,-70.03397 40.1426,-110.46094 1.0253,-13.35251 1.2292,-26.42535 0.6387,-39.17578 30.3557,-6.05408 58.7164,-17.66833 87.2011,-34.84375 0.2085,-0.12549 0.4136,-0.2564 0.6153,-0.39258 33.412,-22.60147 55.9803,-51.13117 65.2968,-82.5332 9.3166,-31.40202 4.8189,-65.29118 -13.4609,-96.06837 -18.6553,-31.40951 -49.0859,-49.38228 -82.8711,-53.27344 -4.2231,-0.4864 -8.4971,-0.76791 -12.8125,-0.8457 -30.2077,-0.54448 -62.4407,8.82427 -93.4316,26.71484 -22.7976,13.16063 -43.3521,33.31423 -59.4375,55.30469 -44.9968,-25.75094 -103.5444,-40.25065 -175.4785,-41.43945 -6.4522,-0.10663 -13.0125,-0.10696 -19.67974,0.002 -80.18875,1.30929 -144.38284,16.5086 -192.87109,43.9922 -0.11914,-0.19111 -0.24287,-0.37932 -0.37109,-0.56446 -16.29,-22.764 -37.41085,-43.73706 -60.89649,-57.29493 -30.02247,-17.33149 -61.21051,-26.66489 -90.59375,-26.73633 z"
id="path817-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccssccccccscccccscccscccscccccsccscccssccscscccscc"
inkscape:label="white-border"
sodipodi:insensitive="true" />
<path
id="path1087"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 716.85595,362.96478 c 15.29075,-21.36763 35.36198,-41.10921 56.50979,-53.31749 66.66377,-38.48393 137.02617,-33.22172 170.08018,22.43043 33.09493,55.72093 14.98656,117.48866 -47.64399,159.85496 -31.95554,19.26819 -62.93318,30.92309 -97.22892,35.54473 M 307.14407,362.96478 C 291.85332,341.59715 271.78209,321.85557 250.63429,309.64729 183.97051,271.16336 113.60811,276.42557 80.554051,332.07772 47.459131,387.79865 65.56752,449.56638 128.19809,491.93268 c 31.95554,19.26819 62.93319,30.92309 97.22893,35.54473"
inkscape:connector-curvature="0"
inkscape:label="ears"
sodipodi:insensitive="true" />
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 801.23205,576.8699 C 812.73478,427.06971 720.58431,321.98291 511.99999,325.38859 303.41568,328.79426 213.71393,428.0311 222.76794,576.8699 c 8.64289,142.08048 176.80223,246.40388 288.12038,246.40388 111.31815,0 279.45076,-104.5447 290.34373,-246.40388 z"
id="path969"
inkscape:connector-curvature="0"
sodipodi:nodetypes="szszs"
inkscape:label="head"
sodipodi:insensitive="true" />
<path
id="path1084"
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 610.4991,644.28932 c 0,23.11198 18.70595,41.84795 41.78091,41.84795 23.07495,0 41.7809,-18.73597 41.7809,-41.84795 0,-23.112 -18.70594,-41.84796 -41.7809,-41.84796 -23.07496,0 -41.78091,18.73596 -41.78091,41.84796 z m -280.56002,0 c 0,23.32492 18.87829,42.23352 42.16586,42.23352 23.28755,0 42.16585,-18.9086 42.16585,-42.23352 0,-23.32494 -18.87829,-42.23353 -42.16585,-42.23353 -23.28757,0 -42.16586,18.90859 -42.16586,42.23353 z"
inkscape:connector-curvature="0"
inkscape:label="eyes"
sodipodi:nodetypes="ssssssssss"
sodipodi:insensitive="true" />
<path
id="path1008"
style="display:inline;opacity:1;fill:none;stroke:#000000;stroke-width:32;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 339.72919,769.2467 -54.54422,72.22481 m 399.08582,-72.22481 54.54423,72.22481 M 263.68341,697.82002 175.92752,733.64353 m 579.85765,-35.82351 87.7559,35.82351"
inkscape:connector-curvature="0"
inkscape:label="whiskers"
sodipodi:nodetypes="cccccccc"
sodipodi:insensitive="true" />
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 512.00082,713.08977 c -45.86417,0 -75.13006,31.84485 -74.14159,71.10084 1.07048,42.51275 32.46865,71.10323 74.14159,71.10323 41.67296,0 74.05118,-32.99608 74.14161,-71.10323 0.0932,-39.26839 -28.27742,-71.10084 -74.14161,-71.10084 z"
id="path1115"
inkscape:connector-curvature="0"
inkscape:label="nose"
sodipodi:nodetypes="zszsz"
sodipodi:insensitive="true" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8 KiB

BIN
public/ollamalogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

7
src/About.js Normal file
View file

@ -0,0 +1,7 @@
const AboutPage = () => {
return(
<div></div>
);
}
export default AboutPage;

View file

@ -14,31 +14,41 @@
animation: Welcome-spin 10s infinite ease-in-out alternate;
}
.BunnyLogo,
.MemosLogo,
.OwncastLogo,
.PhotonLogo {
width: 115px;
height: 115px;
.HeaderName {
font-size: x-large;
user-select: none;
}
.HeaderButt {
font-size: large;
user-select: none;
}
.HeaderButt:hover {
transform:scale(1.1);
animation: LogoHoverAnime 0.1s ease-in-out;
text-shadow: black;
}
.Logos {
width: 60px;
height: 60px;
user-select: none;
pointer-events: none;
object-position: center;
}
.PubP {
color: #111111;
font-size: larger;
user-select: none;
pointer-events: none;
object-position: center;
}
.LogoBoxesPub {
width: 150px;
height: 150px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
align-items: left;
margin-top: 10px;
}
.LogoBoxesPub {
@ -47,7 +57,7 @@
.LogoBoxesPub:hover {
transform: scale(1.1) /*rotate(360deg)*/;
animation: LogoHoverAnim 0.5s ease-in-out;
animation: LogoHoverAnim 0.1s ease-in-out;
}
.TextButt {
@ -71,6 +81,14 @@
object-position: center;
}
.UpdatesTitle {
font-size: x-large;
}
.UpdatesContent {
font-size: large;
}
.TailP {
color: #111111;
user-select: none;
@ -81,7 +99,6 @@
.SubHeaders {
user-select: none;
pointer-events: none;
object-position: center;
}
.LogoBoxesTail {

View file

@ -1,21 +1,25 @@
//import logo from './logo.svg';
import React from 'react';
import './App.css';
import TopBar from './TopBar';
import BottomBar from './BottomBar';
import StreamEmbed from './Embed';
import AboutPage from './About';
//import SideBar from './SideBar';
import Home from './Home';
function App() {
return (
<div className="body">
<Home />
<TopBar />
<BottomBar />
<Home/>
<TopBar/>
<AboutPage/>
<StreamEmbed/>
<BottomBar/>
</div>
);
}

51
src/Embed.js Normal file
View file

@ -0,0 +1,51 @@
import React, { useState, useEffect } from 'react';
const StreamEmbed = () => {
const [isLive, setIsLive] = useState(false);
const checkStream = async () => {
const owncastURL = "https://cast.li-yo.ts.net";
const statusAPI = `${owncastURL}/api/status`;
try {
const response = await fetch(statusAPI);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Check if the stream is live
setIsLive(data.online);
} catch (error) {
console.error("Error checking stream status:", error);
}
};
useEffect(() => {
// Check the stream status when the component mounts
checkStream();
// Optionally, you can set an interval to check the stream status periodically
const intervalId = setInterval(checkStream, 60000); // Check every 60 seconds
// Cleanup interval on component unmount
return () => clearInterval(intervalId);
}, []);
return (
<>
{isLive && (
<div className="fixed overflow-hidden bottom-0 right-0 mb-20 mr-16 rounded-md">
<iframe
className="overflow-hidden"
src="https://cast.li-yo.ts.net/embed/video?initiallyMuted=true"
title="Zoey's Emporium"
height="280"
width="384"
referrerPolicy="origin"
allowFullScreen
></iframe>
</div>
)}
</>
);
};
export default StreamEmbed;

10
src/FilePage.js Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
function FilePage() {
return (
<div>
<h1>File Page</h1>
<p>This is the content of the new page.</p>
</div>
);
}

View file

@ -19,47 +19,35 @@ function Home() {
return (
<div className="flex w-screen h-screen overflow-hidden MainBG">
<div className="flex flex-col mt-20 items-center justify-center text-secondary top-14 bottom-8 w-screen overflow-hidden">
<p className="text-4xl mb-16 shadow-2xl WelcomeText">Welcome, fellow traveller!</p>
<p className="text-2xl mb-5 shadow-2xl SubHeaders">Public Services.</p>
<div className="flex justify-center align-middle h-auto">
<a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="MemosLogo" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
<p className="PubP">Memos</p>
<div className="flex flex-col backdrop-brightness-75 backdrop-blur-md justify-center text-secondary rounded-md min-w-fit">
<p className="text-xl self-center justify-start mb-2 shadow-2xl SubHeaders">Public Services.</p>
<div className="backdrop-grayscale flex-col self-center">
<div className="flex-col align-middle h-auto">
<a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
<p className="self-center ml-2 mr-2 PubP">Memos</p>
</a>
<a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="PhotonLogo" draggable="false" src={process.env.PUBLIC_URL + "/photonlogo.png"} alt="Lemmy"></img>
<p className="PubP">Lemmy</p>
<a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/lemmylogo.svg"} alt="Lemmy"></img>
<p className="self-center ml-2 mr-2 PubP">Lemmy</p>
</a>
<a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="OwncastLogo" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
<p className="PubP">Owncast</p>
<a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
<p className="self-center ml-2 mr-2 PubP">Owncast</p>
</a>
<a href="https://clips.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/firesharelogo.png"} alt="Owncast"></img>
<p className="self-center ml-2 mr-2 PubP">Fireshare</p>
</a>
</div>
<p className="text-2xl mt-5 mb-5 shadow-2xl SubHeaders">Tailscale</p>
<div className="flex justify-center align-middle mb-20">
<a href="http://daughter:4020/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="ForgejoLogo" draggable="false" src={process.env.PUBLIC_URL + "/forgejologo.svg"} alt="Forgejo"></img>
<p className="TailP">Forgejo</p>
</a>
<a href="http://daughter:4008" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="JellyfinLogo" draggable="false" src={process.env.PUBLIC_URL + "/jellyfinlogo.svg"} alt="Jellyfin"></img>
<p className="TailP">Jellyfin</p>
</a>
<a href="http://daughter:4033" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="GraphiteLogo" draggable="false" src={process.env.PUBLIC_URL + "/graphitelogo.svg"} alt="Graphite"></img>
<p className="TailP">Graphite</p>
</a>
</div>
<div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-0 overflow-hidden VersionBox">
<div className="flex">
<div className="flex-row mt-1">
<p className="ml-2 mr-2">_&gt;# </p>
</div>
<div className="mt-1 mr-4 w-80">
<p className="Versions">{Versions}</p>
</div>
</div>
<div className="flex flex-col backdrop-brightness-75 justify-center text-secondary rounded-md ml-5 mr-5 mt-16 mb-12 w-screen overflow-auto">
<div className="flex justify-center top-0">
<p className="fixed top-0 mt-2 UpdatesTitle">Lorem Ipsum PERRRRKELE</p>
<p className="fixed top-0 ml-6 mt-12 UpdatesContent">Lorem Ipsum PERRRRKELE, PS Vittuoa, butts and cakes. WIP</p>
</div>
</div>
</div>

View file

@ -1,44 +1,35 @@
const TopBar = () => {
return (
<div className="fixed top-0 left-0 h-14 w-screen flex flex-row bg-primary text-secondary
<div className="fixed top-0 left-0 h-12 w-screen flex flex-row bg-primary text-secondary
shadow-md justify-center items-center space-x-2">
<div className="topbar-clickables">
<div className="center left-0 flex justify-center items-center overflow-visible">
<div className="flex items-center justify-center overflow-hidden">
<div className="Teardrop">
<div className="fixed mt-14 top-0 left-0 w-60">
<div className="fixed mt-12 top-0 left-0 w-60">
<img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/>
</div>
</div>
<div className="BunnyLogo">
<div className="fixed top-1 left-0 ml-6">
<div className="fixed top-0 left-0 ml-3">
<img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
</div>
</div>
<div className="flex items-center TextButt">
<div className="TopButton">
<p className="text-lg mx-4 TextButt">Projects</p>
<div className="flex ml-40">
<p className="mr-20 top-1 left-28 fixed HeaderName">Zoey's Bits</p>
<div className="">
<button className="mx-3 HeaderButt">News</button>
</div>
<div className="w-px bg-black h-8 TextButt"></div>
<div className="TopButton">
<p className="text-lg mx-4 TextButt">Rants</p>
<div className="">
<button className="mx-3 HeaderButt">Projects</button>
</div>
<div className="w-px bg-black h-8 TextButt"></div>
<div className="TopButton">
<p className="text-lg mx-4">About</p>
<div className="">
<button className="mx-3 HeaderButt">About</button>
</div>
</div>
<div className="fixed right-0 mr-6">
<div className="DarkModeButton">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
<title>Popup Title</title>
<desc>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</desc>
</svg>
</div>
</div>