mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-12 23:36:00 +00:00
landingpage and other things
This commit is contained in:
parent
121654c9fc
commit
94965a161c
96
package-lock.json
generated
96
package-lock.json
generated
@ -12,13 +12,15 @@
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"axios": "^1.6.5",
|
||||
"date-fns": "^3.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-rnd": "^10.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"utopia-ui": "^3.0.0-alpha.77"
|
||||
"utopia-ui": "^3.0.0-alpha.89"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react": "^18.2.60",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
@ -1965,20 +1967,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.21.7",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.21.7.tgz",
|
||||
"integrity": "sha512-z0NSWFsM75esVmkxeuDWeyo9Wv4CZ/WsLMZgu1Zz164S6Oc/57NMia88dTu/d51wdVowMTAcDMQgRmiWmyPMxQ==",
|
||||
"version": "5.24.1",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.24.1.tgz",
|
||||
"integrity": "sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.21.7",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.21.7.tgz",
|
||||
"integrity": "sha512-Op9nVL/L0Lg+aSPFSGbrymu6d3tzUoZ+FZ+rRIZpu5HkGasflqzhsXkL26Sa+MEwLyox7Q1erSFwNIRO3TYjXQ==",
|
||||
"version": "5.24.1",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.24.1.tgz",
|
||||
"integrity": "sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.21.7"
|
||||
"@tanstack/query-core": "5.24.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@ -2001,9 +2003,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree-jsx": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.4.tgz",
|
||||
"integrity": "sha512-5idy3hvI9lAMqsyilBM+N+boaCf1MgoefbDxN6KEO5aK17TOHwFAYT9sjxzeKAiIWRUBgLxmZ9mPcnzZXtTcRQ==",
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
|
||||
"integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
@ -2053,8 +2055,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.6",
|
||||
"license": "MIT",
|
||||
"version": "18.2.60",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.60.tgz",
|
||||
"integrity": "sha512-dfiPj9+k20jJrLGOu9Nf6eqxm2EyJRrq2NvwOFsfbb7sFExZ9WELPs67UImHj3Ayxg8ruTtKtNnbjaF8olPq0A==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@ -2919,6 +2922,15 @@
|
||||
"url": "https://opencollective.com/daisyui"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
|
||||
"integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"license": "MIT",
|
||||
@ -3528,6 +3540,11 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-memoize": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
|
||||
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
|
||||
},
|
||||
"node_modules/fastparse": {
|
||||
"version": "1.1.2",
|
||||
"dev": true,
|
||||
@ -5794,6 +5811,18 @@
|
||||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/re-resizable": {
|
||||
"version": "6.9.6",
|
||||
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.6.tgz",
|
||||
"integrity": "sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==",
|
||||
"dependencies": {
|
||||
"fast-memoize": "^2.5.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"license": "MIT",
|
||||
@ -5824,6 +5853,19 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-draggable": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
|
||||
"integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
|
||||
"dependencies": {
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0",
|
||||
"react-dom": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-image-crop": {
|
||||
"version": "10.1.8",
|
||||
"resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
|
||||
@ -5897,6 +5939,25 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-rnd": {
|
||||
"version": "10.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.1.tgz",
|
||||
"integrity": "sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==",
|
||||
"dependencies": {
|
||||
"re-resizable": "6.9.6",
|
||||
"react-draggable": "4.4.5",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0",
|
||||
"react-dom": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-rnd/node_modules/tslib": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.16.0",
|
||||
"license": "MIT",
|
||||
@ -7168,14 +7229,15 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/utopia-ui": {
|
||||
"version": "3.0.0-alpha.77",
|
||||
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.77.tgz",
|
||||
"integrity": "sha512-w+NeAZEKySDDjEDsKpaJho4tEBS5BGcJShnFal4VFzYlvsJ5Zrg/meqjJ5Vlpt8WmdsoHNGrgiAmF7stYqG9+w==",
|
||||
"version": "3.0.0-alpha.89",
|
||||
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.89.tgz",
|
||||
"integrity": "sha512-/3KLLY/HcKWSLuJpmkx4bB5aOPycfC56ZJGAuvUBxOCGlY74a/FvI3yMLTVeDWtj9rkCOXPS/PA79YpHeomGcA==",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@tanstack/react-query": "^5.17.8",
|
||||
"@types/offscreencanvas": "^2019.7.1",
|
||||
"axios": "^1.6.5",
|
||||
"date-fns": "^3.3.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.locatecontrol": "^0.79.0",
|
||||
"prop-types": "^15.8.1",
|
||||
|
||||
@ -14,13 +14,15 @@
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"axios": "^1.6.5",
|
||||
"date-fns": "^3.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-rnd": "^10.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"utopia-ui": "^3.0.0-alpha.77"
|
||||
"utopia-ui": "^3.0.0-alpha.89"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react": "^18.2.60",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
|
||||
BIN
public/bg1.webp
Normal file
BIN
public/bg1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 682 KiB |
22
src/App.css
22
src/App.css
@ -7,3 +7,25 @@
|
||||
height: calc(100dvh - 64px);
|
||||
}
|
||||
|
||||
.fadeable-div {
|
||||
transition: opacity 1000ms ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.div-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.movable-div {
|
||||
transition: transform 600ms ease;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.move-out-right {
|
||||
transform: translateX(100vw); /* Verschiebt das Div um die Breite des Viewports */
|
||||
}
|
||||
|
||||
|
||||
.move-out-left {
|
||||
transform: translateX(-100vw); /* Verschiebt das Div um die Breite des Viewports */
|
||||
}
|
||||
25
src/App.tsx
25
src/App.tsx
@ -1,17 +1,29 @@
|
||||
import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayProfile, OverlayProfileSettings, OverlayUserSettings } from 'utopia-ui'
|
||||
import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayProfile, OverlayProfileSettings, OverlayUserSettings, ItemsIndexPage, ItemViewPage } from 'utopia-ui'
|
||||
import { bottomRoutes, routes } from './routes/sidebar'
|
||||
import { Route, Routes } from 'react-router-dom'
|
||||
import MapContainer from "./pages/MapContainer"
|
||||
import './App.css'
|
||||
import Concept from './pages/Concept'
|
||||
import { userApi } from './api/userApi'
|
||||
import Projects from './pages/Projects'
|
||||
import { ProjectView } from './pages/ProjectView'
|
||||
import { assetsApi } from './api/assetsApi'
|
||||
import { ModalContent } from './ModalContent'
|
||||
import { Calendar } from './pages/Calendar'
|
||||
import { MoonCalendar } from 'utopia-ui'
|
||||
import { Landingpage } from './pages/Landingpage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Project } from './api/directus'
|
||||
import { itemsApi } from './api/itemsApi'
|
||||
|
||||
function App() {
|
||||
|
||||
const [questsApi, setQuestsApi] = useState<itemsApi<Project>>();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setQuestsApi(new itemsApi<Project>('quests',undefined, undefined, {"status":{"_eq": "published"}}));
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="App overflow-x-hidden">
|
||||
@ -33,10 +45,13 @@ function App() {
|
||||
<Route path="profile/*" element={<OverlayProfile/>} />
|
||||
<Route path="profile-settings" element={<OverlayProfileSettings/>} />
|
||||
<Route path="user-settings" element={<OverlayUserSettings />} />
|
||||
<Route path="calendar" element={<Calendar/>} />
|
||||
<Route path="moon-calendar" element={<MoonCalendar/>} />
|
||||
<Route path="landingpage" element={<Landingpage/>} />
|
||||
</Route>
|
||||
<Route path="/concept" element={<Concept/>} />
|
||||
<Route path="/projects" element={<Projects/>} />
|
||||
<Route path="/projects/*" element={<ProjectView/>} />
|
||||
<Route path="/quests" element={<ItemsIndexPage api={questsApi!} breadcrumbs={[{ name: "Home", path: "/" }, { name: "Quests", path: "/quests/" }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} url={'/quests/'} parameterField={'id'} itemSymbolField={'symbol'}/>} />
|
||||
<Route path="/quests/*" element={<ItemViewPage api={questsApi!} parents={[{ name: "Quests", path: "/quests/" }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} itemSymbolField={'symbol'}/>} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</AppShell>
|
||||
|
||||
102
src/pages/Calendar.tsx
Normal file
102
src/pages/Calendar.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
add,
|
||||
eachDayOfInterval,
|
||||
endOfMonth,
|
||||
endOfWeek,
|
||||
format,
|
||||
getDay,
|
||||
isSameMonth,
|
||||
isToday,
|
||||
parse,
|
||||
startOfToday,
|
||||
startOfWeek,
|
||||
} from "date-fns";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import { MapOverlayPage } from 'utopia-ui';
|
||||
|
||||
|
||||
export const Calendar = () => {
|
||||
const today = startOfToday();
|
||||
const days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
|
||||
const colStartClasses = [
|
||||
"",
|
||||
"col-start-2",
|
||||
"col-start-3",
|
||||
"col-start-4",
|
||||
"col-start-5",
|
||||
"col-start-6",
|
||||
"col-start-7",
|
||||
];
|
||||
|
||||
const [currMonth, setCurrMonth] = useState(() => format(today, "MMM-yyyy"));
|
||||
let firstDayOfMonth = parse(currMonth, "MMM-yyyy", new Date());
|
||||
|
||||
const daysInMonth = eachDayOfInterval({
|
||||
start: startOfWeek(firstDayOfMonth),
|
||||
end: endOfWeek(endOfMonth(firstDayOfMonth)),
|
||||
});
|
||||
|
||||
const getPrevMonth = (event: React.MouseEvent<SVGSVGElement>) => {
|
||||
event.preventDefault();
|
||||
const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 });
|
||||
setCurrMonth(format(firstDayOfPrevMonth, "MMM-yyyy"));
|
||||
};
|
||||
|
||||
const getNextMonth = (event: React.MouseEvent<SVGSVGElement>) => {
|
||||
event.preventDefault();
|
||||
const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 });
|
||||
setCurrMonth(format(firstDayOfNextMonth, "MMM-yyyy"));
|
||||
};
|
||||
|
||||
return (
|
||||
<MapOverlayPage backdrop className='tw-max-h-[calc(100dvh-96px)] tw-h-fit md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] max-w-lg'>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-semibold text-xl">
|
||||
{format(firstDayOfMonth, "MMMM yyyy")}
|
||||
</p>
|
||||
<div className="flex items-center justify-evenly gap-6 sm:gap-12">
|
||||
<ChevronLeftIcon
|
||||
className="w-6 h-6 cursor-pointer"
|
||||
onClick={getPrevMonth}
|
||||
/>
|
||||
<ChevronRightIcon
|
||||
className="w-6 h-6 cursor-pointer"
|
||||
onClick={getNextMonth}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-6" />
|
||||
<div className="grid grid-cols-7 gap-6 sm:gap-12 place-items-center">
|
||||
{days.map((day, idx) => {
|
||||
return (
|
||||
<div key={idx} className="font-semibold">
|
||||
{capitalizeFirstLetter(day)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-4 sm:gap-12 mt-8 place-items-center">
|
||||
{daysInMonth.map((day, idx) => {
|
||||
return (
|
||||
<div key={idx} className={colStartClasses[getDay(day)]}>
|
||||
<p
|
||||
className={`cursor-pointer flex items-center justify-center font-semibold h-8 w-8 rounded-full hover:text-white ${
|
||||
isSameMonth(day, today) ? "text-current" : "text-gray-500"
|
||||
} ${!isToday(day) && "hover:bg-primary-content"} ${
|
||||
isToday(day) && "bg-primary !text-white"
|
||||
}`}
|
||||
>
|
||||
{format(day, "d")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</MapOverlayPage>
|
||||
);
|
||||
}
|
||||
|
||||
const capitalizeFirstLetter = (string: string) => {
|
||||
return string
|
||||
}
|
||||
199
src/pages/Landingpage.tsx
Normal file
199
src/pages/Landingpage.tsx
Normal file
@ -0,0 +1,199 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { MapOverlayPage } from 'utopia-ui'
|
||||
import { itemsApi } from '../api/itemsApi';
|
||||
|
||||
export const Landingpage = () => {
|
||||
|
||||
const [isLandingpageVisible, setIsLandingpageVisible] = useState(true);
|
||||
const [isBoxVisible, setIsBoxVisible] = useState(true);
|
||||
const [isPhoneVisible, setIsPhoneVisible] = useState(true);
|
||||
|
||||
const [featuresApi, setFeaturesApi] = useState<itemsApi<any>>();
|
||||
const [features, setFeatures] = useState<any[]>();
|
||||
|
||||
|
||||
const [teamApi, setTeamApi] = useState<itemsApi<any>>();
|
||||
const [team, setTeam] = useState<any[]>();
|
||||
|
||||
const loadFeatures = async () => {
|
||||
const items = await featuresApi?.getItems();
|
||||
setFeatures(items as any);
|
||||
}
|
||||
|
||||
const loadTeam = async () => {
|
||||
const items = await teamApi?.getItems();
|
||||
setTeam(items as any);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setFeaturesApi(new itemsApi<any>('features',undefined, undefined, {"status":{"_eq": "published"}}));
|
||||
setTeamApi(new itemsApi<any>('team'));
|
||||
loadTeam();
|
||||
loadFeatures();
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadFeatures();
|
||||
}, [featuresApi])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
loadTeam();
|
||||
}, [teamApi])
|
||||
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const startGame = () => {
|
||||
setTimeout(() => {
|
||||
setIsBoxVisible(false)
|
||||
}, 200
|
||||
)
|
||||
setTimeout(() => {
|
||||
setIsPhoneVisible(false)
|
||||
}, 200
|
||||
)
|
||||
setTimeout(() => {
|
||||
setIsLandingpageVisible(false)
|
||||
}, 500
|
||||
)
|
||||
setTimeout(() => {
|
||||
navigate("/")
|
||||
}, 1500
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<MapOverlayPage className={`!rounded-none overflow-y-auto !p-0 fadeable-div flex-none ${isLandingpageVisible ? '' : 'div-hidden'}`} card={false}>
|
||||
<div className="hero min-h-full text-base">
|
||||
<div className="hero-content text-center flex flex-col place-items-center p-0" >
|
||||
<div className='bg-no-repeat bg-center w-full' style={{ backgroundImage: "url(bg1.webp)" }}>
|
||||
<div className='min-h-screen flex flex-row items-center justify-center '>
|
||||
|
||||
|
||||
|
||||
<div className={`max-w-md text-center bg-black p-8 m-8 bg-opacity-50 text-white backdrop-blur-sm rounded-xl movable-div ${isBoxVisible ? '' : 'move-out-left'}`}>
|
||||
<h1 className="text-5xl font-bold">Utopia Game</h1>
|
||||
<p className="py-6">ist mehr als nur ein Spiel. Es ist eine Bewegung, die darauf abzielt, die Spieler aus ihren virtuellen Welten zu befreien und sie zu inspirieren, das echte Leben zu erkunden, Fähigkeiten zu entwickeln und die Welt um sie herum zu gestalten. Bist du bereit, Teil dieser Revolution zu werden? </p>
|
||||
<div className="btn !text-white btn-primary" onClick={startGame}>Play ▶</div>
|
||||
</div>
|
||||
|
||||
<div className={`mockup-phone m-8 hidden lg:block movable-div ${isPhoneVisible ? '' : 'move-out-right'}`}>
|
||||
<div className="camera"></div>
|
||||
<div className="display">my-8
|
||||
<div className="artboard artboard-demo phone-1">
|
||||
<iframe src="/" height={568} width={320}></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section className="min-h-[50em] p-8 flex h-full items-center justify-center">
|
||||
<ul className="my-8 grid gap-y-8 gap-x-12 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{
|
||||
features?.map((item, idx) => (
|
||||
<li key={idx} className="space-y-3">
|
||||
<div className="w-12tw-card tw-card-body h-12 mx-auto !bg-transparent text-indigo-600 rounded-full flex items-center justify-center text-5xl">
|
||||
{item.symbol}
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold">
|
||||
{item.heading}
|
||||
</h4>
|
||||
<p>
|
||||
{item.text}
|
||||
</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="py-14 min-h-[40em] p-8 flex h-full items-center justify-center mb-28">
|
||||
<div className="max-w-screen-xl mx-auto text-center">
|
||||
<div className="max-w-xl mx-auto">
|
||||
<h3 className="text-3xl font-semibold sm:text-4xl">
|
||||
Meet our team
|
||||
</h3>
|
||||
<p className="mt-3">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<ul className="grid gap-8 sm:grid-cols-2 md:grid-cols-3">
|
||||
{
|
||||
team?.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<div className="w-24 h-24 mx-auto">
|
||||
<img
|
||||
src={`https://api.utopia-lab.org/assets/${item.image}`}
|
||||
className="w-full h-full rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<h4 className="font-semibold sm:text-lg">{item.name}</h4>
|
||||
<p className="text-indigo-600">{item.role}</p>
|
||||
<p className="mt-2">{item.text}</p>
|
||||
<div className="mt-4 flex justify-center gap-4">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer className="text-gray-500 bg-base-200 px-4 py-5 w-full mx-auto md:px-8 text-base">
|
||||
|
||||
<div className="mt-8 items-center justify-center flex">
|
||||
|
||||
<div className="mt-6 sm:mt-0">
|
||||
<ul className="flex items-center space-x-4">
|
||||
|
||||
|
||||
<li className="w-8 h-8 border-current bg-white rounded-full flex items-center justify-center">
|
||||
<a href="https://t.me/UtopiaMap">
|
||||
<svg stroke="currentColor" fill="#1d93d2" strokeWidth="0" viewBox="0 0 512 512" height="1.4rem" width="1.4rem" xmlns="http://www.w3.org/2000/svg"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="w-8 h-8 border-current bg-white rounded-full flex items-center justify-center">
|
||||
<a href="mailto:hello@utopia-lab.org">
|
||||
<svg stroke="currentColor" fill="#333" strokeWidth="0" viewBox="0 0 24 24" height="1.25rem" width="1.25rem" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"></path></svg> </a>
|
||||
</li>
|
||||
|
||||
<li className="w-8 h-8 border-current bg-white rounded-full flex items-center justify-center">
|
||||
<a href="https://twitter.com/UtopiaMapGame/" className='text-white'>
|
||||
<svg className="svg-icon w-[1.4rem] h-[1.4rem] text-[#1d93d2]" viewBox="0 0 20 20">
|
||||
<path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 flex item s-center justify-center">
|
||||
|
||||
© 2024
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</MapOverlayPage>
|
||||
)
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { permissionsApi } from '../api/permissionsApi';
|
||||
import { Place, Event, Tag } from '../api/directus';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {CalendarDaysIcon, MapPinIcon, UserIcon} from '@heroicons/react/20/solid'
|
||||
// import { refiBcnApi } from '../api/refiBcnApi';
|
||||
import { refiBcnApi } from '../api/refiBcnApi';
|
||||
|
||||
function MapContainer() {
|
||||
|
||||
@ -14,6 +14,7 @@ function MapContainer() {
|
||||
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
|
||||
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
|
||||
const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>();
|
||||
const [refiApi, setRefiApi] = useState<refiBcnApi>();
|
||||
|
||||
|
||||
|
||||
@ -25,6 +26,7 @@ function MapContainer() {
|
||||
setUpdatesApiInstance(new itemsApi('updates',"b4dd8b6b-80e8-4173-9682-4a5755e7b9cb", undefined, {"latest":{"_eq": true}}));
|
||||
setTagsApi(new itemsApi<Tag>('tags', undefined, "8bf681a4-1b8d-44ba-afba-c6dbf79a769f"));
|
||||
setPermissionsApiInstance(new permissionsApi());
|
||||
setRefiApi(new refiBcnApi('refi'));
|
||||
|
||||
}, []);
|
||||
|
||||
@ -94,8 +96,8 @@ function MapContainer() {
|
||||
</div>
|
||||
</ItemForm>
|
||||
</Layer>
|
||||
{/** <Layer name='ReFi-BCN' menuIcon={MapPinIcon} menuText='add new place' menuColor='#2E7D32' markerIcon='circle-solid' markerShape='circle' markerDefaultColor='#818583' itemTextField='description' itemLatitudeField='geolocation.lat' itemLongitudeField='geolocation.lon' api={refiApi}> </Layer>
|
||||
*/}
|
||||
<Layer name='ReFi-BCN' menuIcon={MapPinIcon} menuText='add new place' menuColor='#2E7D32' markerIcon='circle-solid' markerShape='circle' markerDefaultColor='#818583' itemTextField='description' itemLatitudeField='geolocation.lat' itemLongitudeField='geolocation.lon' api={refiApi}> </Layer>
|
||||
|
||||
<Tags api={tagsApi}></Tags>
|
||||
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
|
||||
</UtopiaMap>
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { CardPage } from "utopia-ui";
|
||||
import { readUserApi } from "../api/readUserApi";
|
||||
import { UserItem } from "utopia-ui/dist/types";
|
||||
|
||||
export const ProfileView = () => {
|
||||
|
||||
const [userApi, setUserApi] = useState<readUserApi>();
|
||||
const [user, setUser] = useState<UserItem>();
|
||||
|
||||
let location = useLocation();
|
||||
|
||||
|
||||
const loadProject = async () => {
|
||||
const user: unknown = await userApi?.getItem(location.pathname.split("/")[2]);
|
||||
setUser(user as UserItem);
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setUserApi(new readUserApi());
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadProject();
|
||||
}, [userApi])
|
||||
|
||||
return (
|
||||
<CardPage title={user?.first_name} hideTitle={true} parent={{ name: 'Profiles', url: "/profiles" }}>
|
||||
{user &&
|
||||
<>
|
||||
<div className="flex flex-row">
|
||||
|
||||
<p className="text-4xl">{user.avatar && <img className='h-20 rounded-full inline' src={`https://api.utopia-lab.org/assets/${user.avatar} : ''}`}></img> } {user?.first_name}</p>
|
||||
|
||||
</div>
|
||||
<p className='text-sm mt-8 mb-2 whitespace-pre-wrap '>{user?.description}</p>
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
</CardPage>
|
||||
)
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { itemsApi } from "../api/itemsApi";
|
||||
import { Project } from '../api/directus'
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { CardPage } from "utopia-ui";
|
||||
|
||||
export const ProjectView = () => {
|
||||
|
||||
const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
|
||||
const [project, setProject] = useState<Project>();
|
||||
|
||||
let location = useLocation();
|
||||
|
||||
|
||||
const loadProject = async () => {
|
||||
const project: unknown = await projectsApi?.getItem(location.pathname.split("/")[2]);
|
||||
setProject(project as Project);
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setProjectsApi(new itemsApi<Project>('projects'));
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadProject();
|
||||
}, [projectsApi])
|
||||
|
||||
return (
|
||||
<CardPage title={project?.name || ""} parent={{name: 'Projects',url: "/projects"}}>
|
||||
{project &&
|
||||
<>
|
||||
<img className='h-36' src={`https://api.utopia-lab.org/assets/${project?.picture} : ''}`}></img>
|
||||
<p className='font-bold text-sm mb-2 mt-2'>{project?.subname}</p>
|
||||
<p className='text-sm mb-2'>{project?.text}</p>
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
</CardPage>
|
||||
)
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import { TitleCard } from 'utopia-ui'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { itemsApi } from '../api/itemsApi'
|
||||
import { Project } from '../api/directus'
|
||||
|
||||
|
||||
|
||||
|
||||
export default function Projects() {
|
||||
|
||||
|
||||
const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
|
||||
const [projects, setProjects] = useState<Project[]>();
|
||||
|
||||
const loadProjects = async () => {
|
||||
const projects = await projectsApi?.getItems();
|
||||
setProjects(projects as any);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setProjectsApi(new itemsApi<Project>('projects'));
|
||||
loadProjects();
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadProjects();
|
||||
}, [projectsApi])
|
||||
|
||||
return (
|
||||
<main className="flex-1 overflow-y-auto pt-2 px-6 bg-base-200 min-w-80 flex justify-center" >
|
||||
<div className=' w-full xl:max-w-6xl'>
|
||||
<div className="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li><Link to={'/'} >Home</Link></li>
|
||||
<li><Link to={'/projects'} >Projects</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
{/**
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-2 ">
|
||||
<TextInput defaultValue='' placeholder='🔍 Search' containerStyle='lg:col-span-2' updateFormValue={(val) => { setSearch(val) }}></TextInput>
|
||||
<SelectBox updateFormValue={() => { }} placeholder="Type" containerStyle=' hidden md:grid' defaultValue='PLACEHOLDER' options={[{ name: "local", value: "local" }, { name: "project", value: "project" }]} />
|
||||
</div>
|
||||
<div className="divider" ></div>
|
||||
|
||||
*/}
|
||||
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 ">
|
||||
{
|
||||
projects?.map((i, k) => {
|
||||
return (
|
||||
<Link key={k} to={'/projects/' + i.id}>
|
||||
<TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}>
|
||||
<img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}`}></img>
|
||||
<p className='font-bold text-sm mb-2 mt-2'>{i.subname}</p>
|
||||
|
||||
<p className='text-sm mb-2'>{i.text}</p>
|
||||
{/**
|
||||
* <div className='flex justify-between text-gray-500 '>
|
||||
<div className='flex'><UsersIcon className=' h-6 w-6' /> 2</div>
|
||||
<div className='flex'><MapPinIcon className='h-6 w-6' /> 5</div>
|
||||
<div className='flex'><CalendarIcon className='h-6 w-6' /> 9</div>
|
||||
</div>
|
||||
|
||||
*/}
|
||||
|
||||
|
||||
</TitleCard>
|
||||
</Link>
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
import { BookOpenIcon, RectangleGroupIcon, MapIcon } from '@heroicons/react/24/outline'
|
||||
import { BookOpenIcon, CheckBadgeIcon, MapIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
//const iconClasses = `h-6 w-6`
|
||||
//const submenuIconClasses = `h-5 w-5`
|
||||
@ -12,9 +12,9 @@ export const routes = [
|
||||
name: 'Map',
|
||||
},
|
||||
{
|
||||
path: '/projects', // url
|
||||
icon: <RectangleGroupIcon style={{width: 24 }}/>, // icon component
|
||||
name: 'Projects', // name that appear in Sidebar
|
||||
path: '/quests', // url
|
||||
icon: <CheckBadgeIcon style={{width: 24 }}/>, // icon component
|
||||
name: 'Quests', // name that appear in Sidebar
|
||||
}/**
|
||||
{
|
||||
path: '/people', // url
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
export default {
|
||||
content: ["./src/**/*.{html,js,jsx,tsx,ts}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
// that is animation class
|
||||
animation: {
|
||||
fade: 'fadeOut 1s ease-in-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("daisyui")],
|
||||
daisyui: {
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src", "../utopia-ui/src/Components/Templates/CardPage.tsx"],
|
||||
"include": ["src", "../utopia-ui/src/Components/Templates/CardPage.tsx", "../../workspace/utopia-ui/src/Components/Templates/MoonCalendar.tsx", "../../workspace/utopia-ui/src/Components/Templates/ItemIndexPage.tsx"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user