antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

some css fixes

Browse Source
This commit is contained in:
Anton 2024-01-01 21:08:45 +01:00
parent 1e16a1406a
commit eaa7eea7f5
2 changed files with 59 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/fear2.svg
View File

@ -34,15 +34,15 @@
inkscape:pagecheckerboard="0" inkscape:pagecheckerboard="0"
inkscape:document-units="pt" inkscape:document-units="pt"
showgrid="false" showgrid="false"
inkscape:zoom="0.13385319" inkscape:zoom="0.189297"
inkscape:cx="-571.52168" inkscape:cx="800.32966"
inkscape:cy="395.9562" inkscape:cy="697.31693"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1013" inkscape:window-height="1013"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="0" inkscape:window-y="0"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="layer2" inkscape:current-layer="layer3"
fit-margin-top="0" fit-margin-top="0"
fit-margin-left="0" fit-margin-left="0"
fit-margin-right="0" fit-margin-right="0"
@ -51,6 +51,19 @@
id="metadata2"> id="metadata2">
Created by potrace 1.15, written by Peter Selinger 2001-2017 Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata> </metadata>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Layer 3">
<rect
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:30.7797;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:0.988235"
id="rect865"
width="1195.2804"
height="650.43323"
x="229.13701"
y="359.35092"
ry="3.011488" />
</g>
<g <g
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer2" id="layer2"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

85
src/ModalContent.tsx
View File

@ -8,19 +8,18 @@ type ChapterProps = {
export function Welcome1({ clickAction }: ChapterProps) { export function Welcome1({ clickAction }: ChapterProps) {
return ( return (
<> <>
<h3 className="tw-font-bold tw-text-lg">Welcome, glad you are here!</h3> <h3 className="font-bold text-lg">Welcome, glad you are here!</h3>
<img className="tw-float-right tw-w-32 tw-m-2" src="/earth.svg"></img> <img className="float-right w-32 m-2" src="/earth.svg"></img>
<p className="tw-py-3"> <p className="py-3">
In the 21st century, humanity is at a special point in its history. In the 21st century, humanity is at a special point in its history.
</p> </p>
<p className="tw-py-1"> <p className="py-1">
On the one hand, the people of Planet Earth are facing a multitude of fundamental crises. On the one hand, the people of Planet Earth are facing a multitude of fundamental crises.
</p> </p>
<p className="tw-py-1"> <p className="py-1">
On the other hand, we have all the knowledge and technology to heal the planet and live in harmony with Mother Earth. </p> On the other hand, we have all the knowledge and technology to heal the planet and live in harmony with Mother Earth. </p>
<div className="tw-modal-action"> <div className="grid">
<label className="tw-btn" onClick={() => clickAction!()}>Next</label> <label className="btn place-self-end mt-4" onClick={() => clickAction!()}>Next</label>
</div> </div>
</> </>
) )
@ -29,21 +28,21 @@ export function Welcome1({ clickAction }: ChapterProps) {
export function Welcome2({ clickAction }: ChapterProps) { export function Welcome2({ clickAction }: ChapterProps) {
return ( return (
<> <>
<h3 className="tw-font-bold tw-text-lg"> Hypnosis and Disillusion </h3> <h3 className="font-bold text-lg"> Hypnosis and Disillusion </h3>
<p className="tw-py-3">
Most people are still stuck in old ways of thinking and living. </p>
<img className="tw-float-right tw-w-32 tw-mx-4 tw-my-2" src="/fear2.svg"></img>
<p className="tw-py-1"> <p className="py-3">
Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information. Most people are still stuck in old ways of thinking and living. </p>
<img className="float-right w-32 mx-4 my-2" src="/fear2.svg"></img>
<p className="py-1">
Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information.
</p> </p>
<p className="tw-py-1"> <p className="py-1">
From an early age, they are trained to do alienated work and consume unhealthy and meaningless products. From an early age, they are trained to do alienated work and consume unhealthy and meaningless products.
</p> </p>
<div className="tw-modal-action"> <div className="grid">
<label className="tw-btn" onClick={() => clickAction!()}>next</label> <button className="btn place-self-end mt-4" onClick={() => clickAction!()}>next</button>
</div> </div>
</> </>
) )
@ -52,19 +51,19 @@ export function Welcome2({ clickAction }: ChapterProps) {
export function Welcome3({ clickAction }: ChapterProps) { export function Welcome3({ clickAction }: ChapterProps) {
return ( return (
<> <>
<h3 className="tw-font-bold tw-text-lg">But Consciousness is rising </h3> <h3 className="font-bold text-lg">But Consciousness is rising </h3>
<p className="tw-py-3"> <p className="py-3">
More and more people are waking up to what's really happening. </p> More and more people are waking up to what's really happening. </p>
<p className="tw-py-1"> <p className="py-1">
They are in the process of understanding the potential that is within themselves and within the whole mankind. They are in the process of understanding the potential that is within themselves and within the whole mankind.
</p> </p>
<img className="tw-float-left tw-w-32 tw-mx-4" src="/camp3.svg"></img> <img className="float-left w-32 mx-4" src="/camp3.svg"></img>
<p className="tw-py-1"> <p className="py-1">
Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted. Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted.
</p> </p>
<div className="tw-modal-action"> <div className="grid">
<label className="tw-btn" onClick={() => clickAction!()}>next</label> <label className="btn place-self-end mt-4" onClick={() => clickAction!()}>next</label>
</div> </div>
</> </>
) )
@ -73,16 +72,16 @@ export function Welcome3({ clickAction }: ChapterProps) {
export function Welcome4({ clickAction }: ChapterProps) { export function Welcome4({ clickAction }: ChapterProps) {
return ( return (
<> <>
<h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3> <h3 className="font-bold text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
<ul className='tw-flex-row tw-pl-4 tw-mt-4'> <ul className='flex-row pl-4 mt-4'>
<li>🥕 Essen & Trinken</li> <li>🥕 Essen & Trinken</li>
<li>🏡 Wohn- & Lebensraum</li> <li>🏡 Wohn- & Lebensraum</li>
<li>💬 Kommunikation</li> <li>💬 Kommunikation</li>
<li>💡 Energie</li> <li>💡 Energie</li>
<li>🚐 Mobilität</li> <li>🚐 Mobilität</li>
</ul> </ul>
<div className="tw-modal-action"> <div className="grid">
<button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button> <button className="btn btn-neutral place-self-end" onClick={() => clickAction!()}>Ich mach mit</button>
</div> </div>
</> </>
) )
@ -96,7 +95,7 @@ export const ModalContent = () => {
const [chapter, setChapter] = useState<number>(1); const [chapter, setChapter] = useState<number>(1);
//const setQuestsOpen = useSetQuestOpen() //const setQuestsOpen = useSetQuestOpen()
const ActiveChapter = () => { const ActiveChapter = () => {
@ -107,19 +106,19 @@ export const ModalContent = () => {
return <Welcome2 clickAction={() => { setChapter(3) }} /> return <Welcome2 clickAction={() => { setChapter(3) }} />
case 3: case 3:
return <Welcome3 clickAction={() => { return <Welcome3 clickAction={() => {
close(); close();
setTimeout(() => { setTimeout(() => {
// setQuestsOpen(true); // setQuestsOpen(true);
setChapter(1); setChapter(1);
}, 1000); }, 1000);
}} /> }} />
default: return <></> default: return <></>
}; };
}; };
return ( return (
<ActiveChapter/> <ActiveChapter />
) )
} }