css landing page

pull/68/head
Jon Eugster 3 years ago
parent eaf0d13c2f
commit f17d56d7e5

@ -3,15 +3,26 @@
<head>
<meta charset="UTF-8" />
<title>Lean 4 Game</title>
<title>Lean Game Server</title>
<style>
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";
}
</style>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
<div class="landing-page">
<h1>Lean Game Server</h1>
<p>
<i>You need to enable JavaScript to use the Lean Game Server, as it is built
using React.</i>
</p>
</div>
</noscript>
<script src="bundle.js"></script>
</body>
</html>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 623 KiB

@ -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)
}

@ -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 <div className="github-link">
<a target="_blank" href={url}
title="View the lean game server on github">
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true" className="octicon octicon-mark-github v-align-middle">
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
<a title="view the Lean game server on Github" href={url}>
<svg height="24
" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" className="">
<circle className="world-circle" cx="8" cy="8" r="8" fill="#fff"/>
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg>
</a>
</div>
</div>
}
function GameTile({
@ -84,11 +86,25 @@ function LandingPage() {
const navigate = useNavigate();
return <div className="landing-page">
const [impressum, setImpressum] = React.useState(false);
const openImpressum = () => setImpressum(true);
const closeImpressum = () => setImpressum(false);
<h1>Lean Game Server</h1>
<p>Welcome to the Lean Game Server where you can find interactive learning
games about <a target="_blank" href="https://leanprover-community.github.io/">Lean</a>.</p>
return <div className="landing-page">
<header style={{backgroundImage: `url(${bgImage})`}}>
<nav>
<GithubIcon url="https://github.com/leanprover-community/lean4game"/>
</nav>
<div id="main-title">
<h1>Lean Game Server</h1>
<p>
This server hosts learning games for the
proof assistant <a target="_blank" href="https://leanprover-community.github.io/">Lean</a> <i>(lean4)</i> and
its mathematical library <a target="_blank" href="https://github.com/leanprover-community/mathlib4">Mathlib</a>.
</p>
</div>
</header>
<div className="game-list">
@ -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"
/>
</div>
<h2>Adding new games</h2>
<p>
If you consider writing your own game, you should use
the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
a template.
</p>
<p>
There will be an option to load and run games through the server
directly by specifying a URL, but this is still in development.
</p>
<p>
To add games to this page, you should get in contact as
games will need to be added manually.
</p>
<GithubIcon url="https://github.com/leanprover-community/lean4game"/>
<PrivacyPolicy/>
<section>
<h2>Development notes</h2>
<p>
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.
</p>
<p>
Most things about the games and infrastructure is still in development. Feel free to
write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
any problems you experience!
</p>
</section>
<section>
<h2>Adding new games</h2>
<p>
If you consider writing your own game, you should use
the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
a template.
</p>
<p>
There will be an option to load and run games through the server
directly by specifying a URL, but this is still in development.
</p>
<p>
To add games to this page, you should get in contact as
games will need to be added manually.
</p>
</section>
<section>
<h2>Funding</h2>
<p>
This Server has been developed as part of the
project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
Heinrich-Heine-Universität in Düsseldorf.
</p>
</section>
<footer>
<a className="link" onClick={openImpressum}>Impressum</a>
{impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
</footer>
{/* <PrivacyPolicy/> */}
</div>

@ -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 <div className="modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Privacy Policy &amp; Impressum</h2>
<p>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.</p>
<p>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.
</p>
<p>Our server is located in Germany.</p>
<p><strong>Contact information:</strong><br />
Jon Eugster<br />
Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
Universitätsstr. 1<br />
40225 Düsseldorf<br />
Germany<br />
<a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
</p>
</div>
</div>
}
const PrivacyPolicy: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
@ -15,38 +48,14 @@ const PrivacyPolicy: React.FC = () => {
<p className="p2">notes</p>
</div>
{open?
<div className="modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Privacy Policy &amp; Impressum</h2>
<p>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.</p>
<p>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.
</p>
<p>Our server is located in Germany.</p>
<p><strong>Contact information:</strong><br />
Jon Eugster<br />
Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
Universitätsstr. 1<br />
40225 Düsseldorf<br />
Germany<br />
<a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
</p>
</div>
</div> : null}
<PrivacyPolicyPopup handleClose={handleClose} />: null}
</span>
)
}
export default PrivacyPolicy
// export default PrivacyPolicy
export {
PrivacyPolicy,
PrivacyPolicyPopup,
}

@ -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 );

@ -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;

Loading…
Cancel
Save