big changes - WIP
This commit is contained in:
parent
82828ddef5
commit
e943309306
GPG key ID:
854F554AFF0A96D1
|
|
@ -8,6 +8,7 @@
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.23.1",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
BIN
public/firesharelogo.png
Normal file
BIN
public/firesharelogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
75
public/lemmylogo.svg
Normal file
75
public/lemmylogo.svg
Normal 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
BIN
public/ollamalogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
7
src/About.js
Normal file
7
src/About.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
const AboutPage = () => {
|
||||||
|
return(
|
||||||
|
<div></div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AboutPage;
|
||||||
45
src/App.css
45
src/App.css
|
|
@ -14,31 +14,41 @@
|
||||||
animation: Welcome-spin 10s infinite ease-in-out alternate;
|
animation: Welcome-spin 10s infinite ease-in-out alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.BunnyLogo,
|
.HeaderName {
|
||||||
.MemosLogo,
|
font-size: x-large;
|
||||||
.OwncastLogo,
|
user-select: none;
|
||||||
.PhotonLogo {
|
}
|
||||||
width: 115px;
|
|
||||||
height: 115px;
|
.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;
|
user-select: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
object-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.PubP {
|
.PubP {
|
||||||
color: #111111;
|
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
object-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.LogoBoxesPub {
|
.LogoBoxesPub {
|
||||||
width: 150px;
|
height: 75px;
|
||||||
height: 150px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: left;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LogoBoxesPub {
|
.LogoBoxesPub {
|
||||||
|
|
@ -47,7 +57,7 @@
|
||||||
|
|
||||||
.LogoBoxesPub:hover {
|
.LogoBoxesPub:hover {
|
||||||
transform: scale(1.1) /*rotate(360deg)*/;
|
transform: scale(1.1) /*rotate(360deg)*/;
|
||||||
animation: LogoHoverAnim 0.5s ease-in-out;
|
animation: LogoHoverAnim 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.TextButt {
|
.TextButt {
|
||||||
|
|
@ -71,6 +81,14 @@
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.UpdatesTitle {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.UpdatesContent {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
.TailP {
|
.TailP {
|
||||||
color: #111111;
|
color: #111111;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
@ -81,7 +99,6 @@
|
||||||
.SubHeaders {
|
.SubHeaders {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
object-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.LogoBoxesTail {
|
.LogoBoxesTail {
|
||||||
|
|
|
||||||
16
src/App.js
16
src/App.js
|
|
@ -1,21 +1,25 @@
|
||||||
//import logo from './logo.svg';
|
//import logo from './logo.svg';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
|
|
||||||
import TopBar from './TopBar';
|
import TopBar from './TopBar';
|
||||||
import BottomBar from './BottomBar';
|
import BottomBar from './BottomBar';
|
||||||
|
import StreamEmbed from './Embed';
|
||||||
|
import AboutPage from './About';
|
||||||
//import SideBar from './SideBar';
|
//import SideBar from './SideBar';
|
||||||
|
|
||||||
import Home from './Home';
|
import Home from './Home';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="body">
|
<div className="body">
|
||||||
<Home />
|
<Home/>
|
||||||
<TopBar />
|
<TopBar/>
|
||||||
<BottomBar />
|
<AboutPage/>
|
||||||
|
<StreamEmbed/>
|
||||||
|
<BottomBar/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
51
src/Embed.js
Normal file
51
src/Embed.js
Normal 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
10
src/FilePage.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
58
src/Home.js
58
src/Home.js
|
|
@ -19,47 +19,35 @@ function Home() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-screen h-screen overflow-hidden MainBG">
|
<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">
|
<div className="flex flex-col backdrop-brightness-75 backdrop-blur-md justify-center text-secondary rounded-md min-w-fit">
|
||||||
<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>
|
<p className="text-xl self-center justify-start mb-2 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">
|
<div className="backdrop-grayscale flex-col self-center">
|
||||||
<img className="MemosLogo" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
|
<div className="flex-col align-middle h-auto">
|
||||||
<p className="PubP">Memos</p>
|
<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>
|
||||||
<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">
|
<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="PhotonLogo" draggable="false" src={process.env.PUBLIC_URL + "/photonlogo.png"} alt="Lemmy"></img>
|
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/lemmylogo.svg"} alt="Lemmy"></img>
|
||||||
<p className="PubP">Lemmy</p>
|
<p className="self-center ml-2 mr-2 PubP">Lemmy</p>
|
||||||
</a>
|
</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">
|
<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="OwncastLogo" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
|
<img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
|
||||||
<p className="PubP">Owncast</p>
|
<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>
|
</a>
|
||||||
</div>
|
</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">_># </p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 mr-4 w-80">
|
|
||||||
<p className="Versions">{Versions}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,35 @@
|
||||||
const TopBar = () => {
|
const TopBar = () => {
|
||||||
return (
|
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">
|
shadow-md justify-center items-center space-x-2">
|
||||||
<div className="topbar-clickables">
|
<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="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"/>
|
<img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="BunnyLogo">
|
<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"/>
|
<img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex ml-40">
|
||||||
<div className="flex items-center TextButt">
|
<p className="mr-20 top-1 left-28 fixed HeaderName">Zoey's Bits</p>
|
||||||
<div className="TopButton">
|
<div className="">
|
||||||
<p className="text-lg mx-4 TextButt">Projects</p>
|
<button className="mx-3 HeaderButt">News</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-px bg-black h-8 TextButt"></div>
|
<div className="">
|
||||||
<div className="TopButton">
|
<button className="mx-3 HeaderButt">Projects</button>
|
||||||
<p className="text-lg mx-4 TextButt">Rants</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-px bg-black h-8 TextButt"></div>
|
<div className="">
|
||||||
<div className="TopButton">
|
<button className="mx-3 HeaderButt">About</button>
|
||||||
<p className="text-lg mx-4">About</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="fixed right-0 mr-6">
|
<div className="fixed right-0 mr-6">
|
||||||
<div className="DarkModeButton">
|
<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">
|
<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>
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue