diff --git a/client/public/index.html b/client/public/index.html index 3ddf7fe..41c570c 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -3,15 +3,26 @@ - Lean 4 Game + Lean Game Server +
- \ No newline at end of file + diff --git a/client/src/assets/bg.jpg b/client/src/assets/bg.jpg new file mode 100644 index 0000000..8b45383 Binary files /dev/null and b/client/src/assets/bg.jpg differ diff --git a/client/src/components/LandingPage.css b/client/src/components/LandingPage.css index 134d310..d5b199e 100644 --- a/client/src/components/LandingPage.css +++ b/client/src/components/LandingPage.css @@ -5,25 +5,32 @@ font-style: normal; } */ -.landing-page { - position: relative; - margin: 20px; +body { + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -.short-description p, .info p { - margin-block-start: 0; - margin-block-end: 0; +a { + text-decoration: none; +} + +@viewport { + width: device-width ; + zoom: 1.0 ; } +/* .landing-page { + position: relative; + margin: 20px; +} */ + + + /* p { margin-top: 10px; margin-bottom: 10px; } -h1 { - margin-top: 20px; - margin-bottom: 20px; -} + h2 { margin-top: 40px; @@ -43,9 +50,9 @@ h2 { display: grid; grid-gap: 25px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - /* padding-left: 20px; */ - /* padding-right: 20px; */ - padding-top: 20px; + padding-left: 20px; + padding-right: 20px; + padding-top: 60px; padding-bottom: 80px; } @@ -58,6 +65,7 @@ h2 { display: flex; flex-direction: column; justify-content: space-between; + justify-self: center; } .image { @@ -76,11 +84,17 @@ div.image { margin-right: 10px; } +.short-description p, .info p { + margin-block-start: 0; + margin-block-end: 0; + +} + .short-description { padding-top: 5px; padding-bottom: 5px; + height: 105px; } - .game-stats { display: block; } @@ -106,8 +120,85 @@ div.image { text-align: right; } +header { + border: 1px solid green; + background-repeat: none; + background-size: 100% 100%; + background-position: center; +} + +#main-title { + padding: 20px; + align-items: center; + display: flex; + flex-direction: column; +} + +#main-title h1 { + font-weight: bolder; + color: rgb(255, 255, 255); + font-size: calc(1.425rem + 2.1vw); + text-align: center; +} + +#main-title p { + color: rgb(255, 255, 255); + font-size: 1.25rem; + font-weight: bold; + text-align: center; + max-width: 600px; +} + +#main-title a { + color: rgb(255, 255, 255); + text-decoration: underline dotted; +} + +#main-title a:hover { + color: rgb(218, 218, 218); +} + +#main-title i { + font-style: italic; +} + +header nav { + display: flex; + justify-content: flex-end; + padding: 8px; + background-color: rgba(0, 133, 162, .7); +} + +footer { + background-color: rgba(0, 133, 162, 1); + display: flex; + justify-content: flex-end; + padding: 20px; +} + +footer .link { + color: white; + cursor: pointer; +} + .github-link { - position: absolute; - top : 0; - right: 0; + height: 24px; /* TODO: why do I need that? s*/ +} + + +.landing-page > section { + padding: 40px; +} + +.landing-page > section h2 { + font-size: calc(1.325rem + 0.9vw); + font-weight: bolder; +} + +.landing-page > section:nth-of-type(odd) { + background-color: rgb(248, 249, 250) +} + +.landing-page > section:nth-of-type(even) { + background-color: rgb(255, 255, 255) } diff --git a/client/src/components/LandingPage.tsx b/client/src/components/LandingPage.tsx index 78a7b82..1979812 100644 --- a/client/src/components/LandingPage.tsx +++ b/client/src/components/LandingPage.tsx @@ -9,9 +9,10 @@ import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import './LandingPage.css' -import PrivacyPolicy from './PrivacyPolicy' +import {PrivacyPolicyPopup} from './PrivacyPolicy' import coverRobo from '../assets/covers/formaloversum.png' +import bgImage from '../assets/bg.jpg' const flag = { 'Dutch': '🇳🇱', @@ -24,13 +25,14 @@ const flag = { function GithubIcon({url='https://github.com'}) { return
- -
+ } function GameTile({ @@ -84,11 +86,25 @@ function LandingPage() { const navigate = useNavigate(); - return
+ const [impressum, setImpressum] = React.useState(false); + const openImpressum = () => setImpressum(true); + const closeImpressum = () => setImpressum(false); + -

Lean Game Server

-

Welcome to the Lean Game Server where you can find interactive learning - games about Lean.

+ return
+
+ +
+

Lean Game Server

+

+ This server hosts learning games for the + proof assistant Lean (lean4) and + its mathematical library Mathlib. +

+
+
@@ -100,8 +116,7 @@ function LandingPage() { Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an. (Das Spiel befindet sich noch in der Entstehungsphase.) - -Das Spiel wurde im Rahmen des Projekts [ADAM](https://hhu-adam.github.io) an der HHU in Düsseldorf entwickelt." +" image={coverRobo} language="German" /> @@ -119,23 +134,48 @@ This is a good first introduction to Lean!" language="English" />
-

Adding new games

-

- If you consider writing your own game, you should use - the NNG Github Repo as - a template. -

-

- There will be an option to load and run games through the server - directly by specifying a URL, but this is still in development. -

-

- To add games to this page, you should get in contact as - games will need to be added manually. -

- - - +
+

Development notes

+

+ As this server runs lean on our university machines, it has a capacity of ca. 15-25 + games running simultaneously. We hope to address this limitation in the further future. +

+

+ Most things about the games and infrastructure is still in development. Feel free to + write Github Issues about + any problems you experience! +

+
+
+

Adding new games

+

+ If you consider writing your own game, you should use + the NNG Github Repo as + a template. +

+

+ There will be an option to load and run games through the server + directly by specifying a URL, but this is still in development. +

+

+ To add games to this page, you should get in contact as + games will need to be added manually. +

+
+
+

Funding

+

+ This Server has been developed as part of the + project ADAM : Anticipating the Digital Age of Mathematics at + Heinrich-Heine-Universität in Düsseldorf. +

+
+ + + {/* */}
diff --git a/client/src/components/PrivacyPolicy.tsx b/client/src/components/PrivacyPolicy.tsx index 73880f2..228d297 100644 --- a/client/src/components/PrivacyPolicy.tsx +++ b/client/src/components/PrivacyPolicy.tsx @@ -2,6 +2,39 @@ import { faShield } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react' +function PrivacyPolicyPopup ({handleClose}) { + return
+
+
+
+

Privacy Policy & Impressum

+ +

Our server collects metadata (such as IP address, browser, operating system) + and the data that the user enters into the editor. The data is used to + compute the Lean output and display it to the user. The information will be stored + as long as the user stays on our website and will be deleted immediately afterwards. + We keep logs to improve our software, but the contained data is anonymized.

+ +

We do not use cookies, but your game progress is stored in the browser + as site data. Your game progress is not saved on the server; if you delete + your browser storage, it is completely gone. +

+ +

Our server is located in Germany.

+ +

Contact information:
+ Jon Eugster
+ Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf
+ Universitätsstr. 1
+ 40225 Düsseldorf
+ Germany
+ Contact Details + +

+
+
+} + const PrivacyPolicy: React.FC = () => { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); @@ -15,38 +48,14 @@ const PrivacyPolicy: React.FC = () => {

notes

{open? -
-
-
-
-

Privacy Policy & Impressum

- -

Our server collects metadata (such as IP address, browser, operating system) - and the data that the user enters into the editor. The data is used to - compute the Lean output and display it to the user. The information will be stored - as long as the user stays on our website and will be deleted immediately afterwards. - We keep logs to improve our software, but the contained data is anonymized.

- -

We do not use cookies, but your game progress is stored in the browser - as site data. Your game progress is not saved on the server; if you delete - your browser storage, it is completely gone. -

- -

Our server is located in Germany.

- -

Contact information:
- Jon Eugster
- Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf
- Universitätsstr. 1
- 40225 Düsseldorf
- Germany
- Contact Details - -

-
-
: null} + : null} ) } -export default PrivacyPolicy +// export default PrivacyPolicy + +export { + PrivacyPolicy, + PrivacyPolicyPopup, +} diff --git a/client/src/components/Welcome.tsx b/client/src/components/Welcome.tsx index a69d37f..846068c 100644 --- a/client/src/components/Welcome.tsx +++ b/client/src/components/Welcome.tsx @@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import Split from 'react-split' -import PrivacyPolicy from './PrivacyPolicy'; +import {PrivacyPolicy} from './PrivacyPolicy'; cytoscape.use( klay ); diff --git a/client/src/components/welcome.css b/client/src/components/welcome.css index 8e457a2..5a57721 100644 --- a/client/src/components/welcome.css +++ b/client/src/components/welcome.css @@ -143,8 +143,10 @@ svg .world-title { top: 50%; left: 50%; transform: translate(-50%, -50%); - min-width: 50%; + min-width: max(50%, 300px); max-width: 60ch; + max-height: 80%; + overflow: scroll; background: #fff; z-index: 3; padding: 2em;