phc
/
lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css landing page

Browse Source
pull/68/head
Jon Eugster 3 years ago
parent eaf0d13c2f
commit f17d56d7e5
7 changed files with 235 additions and 82 deletions
Show Stats Download Patch File Download Diff File

15
client/public/index.html
Unescape Escape View File

@ -3,13 +3,24 @@
<head> <head>
<meta charset="UTF-8" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<noscript> <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> </noscript>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>

BIN
client/src/assets/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 623 KiB

125
client/src/components/LandingPage.css
Unescape Escape View File

@ -5,25 +5,32 @@
font-style: normal; font-style: normal;
} */ } */
.landing-page { body {
position: relative; 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";
margin: 20px;
} }
.short-description p, .info p { a {
margin-block-start: 0; text-decoration: none;
margin-block-end: 0; }
@viewport {
width: device-width ;
zoom: 1.0 ;
} }
/* .landing-page {
position: relative;
margin: 20px;
} */
/* p { /* p {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 {
margin-top: 20px;
margin-bottom: 20px;
}
h2 { h2 {
margin-top: 40px; margin-top: 40px;
@ -43,9 +50,9 @@ h2 {
display: grid; display: grid;
grid-gap: 25px; grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* padding-left: 20px; */ padding-left: 20px;
/* padding-right: 20px; */ padding-right: 20px;
padding-top: 20px; padding-top: 60px;
padding-bottom: 80px; padding-bottom: 80px;
} }
@ -58,6 +65,7 @@ h2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
justify-self: center;
} }
.image { .image {
@ -76,11 +84,17 @@ div.image {
margin-right: 10px; margin-right: 10px;
} }
.short-description p, .info p {
margin-block-start: 0;
margin-block-end: 0;
}
.short-description { .short-description {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
height: 105px;
} }
.game-stats { .game-stats {
display: block; display: block;
} }
@ -106,8 +120,85 @@ div.image {
text-align: right; 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 { .github-link {
position: absolute; height: 24px; /* TODO: why do I need that? s*/
top : 0; }
right: 0;
.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)
} }

64
client/src/components/LandingPage.tsx
Unescape Escape View File

@ -9,9 +9,10 @@ import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css'; import '@fontsource/roboto/700.css';
import './LandingPage.css' import './LandingPage.css'
import PrivacyPolicy from './PrivacyPolicy' import {PrivacyPolicyPopup} from './PrivacyPolicy'
import coverRobo from '../assets/covers/formaloversum.png' import coverRobo from '../assets/covers/formaloversum.png'
import bgImage from '../assets/bg.jpg'
const flag = { const flag = {
'Dutch': '🇳🇱', 'Dutch': '🇳🇱',
@ -24,13 +25,14 @@ const flag = {
function GithubIcon({url='https://github.com'}) { function GithubIcon({url='https://github.com'}) {
return <div className="github-link"> return <div className="github-link">
<a target="_blank" href={url} <a title="view the Lean game server on Github" href={url}>
title="View the lean game server on github"> <svg height="24
<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"> " 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> <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> </svg>
</a> </a>
</div> </div>
} }
function GameTile({ function GameTile({
@ -84,11 +86,25 @@ function LandingPage() {
const navigate = useNavigate(); const navigate = useNavigate();
return <div className="landing-page"> const [impressum, setImpressum] = React.useState(false);
const openImpressum = () => setImpressum(true);
const closeImpressum = () => setImpressum(false);
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> <h1>Lean Game Server</h1>
<p>Welcome to the Lean Game Server where you can find interactive learning <p>
games about <a target="_blank" href="https://leanprover-community.github.io/">Lean</a>.</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"> <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. 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 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} image={coverRobo}
language="German" language="German"
/> />
@ -119,6 +134,19 @@ This is a good first introduction to Lean!"
language="English" language="English"
/> />
</div> </div>
<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> <h2>Adding new games</h2>
<p> <p>
If you consider writing your own game, you should use If you consider writing your own game, you should use
@ -133,9 +161,21 @@ This is a good first introduction to Lean!"
To add games to this page, you should get in contact as To add games to this page, you should get in contact as
games will need to be added manually. games will need to be added manually.
</p> </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>
<GithubIcon url="https://github.com/leanprover-community/lean4game"/> {/* <PrivacyPolicy/> */}
<PrivacyPolicy/>
</div> </div>

41
client/src/components/PrivacyPolicy.tsx
Unescape Escape View File

@ -2,20 +2,8 @@ import { faShield } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react' import * as React from 'react'
const PrivacyPolicy: React.FC = () => { function PrivacyPolicyPopup ({handleClose}) {
const [open, setOpen] = React.useState(false); return <div className="modal-wrapper">
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<span>
<div className="privacy" onClick={handleOpen} title="Privacy Policy &amp; Impressum">
<FontAwesomeIcon icon={faShield} />
<p className="p1">legal</p>
<p className="p2">notes</p>
</div>
{open?
<div className="modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} /> <div className="modal-backdrop" onClick={handleClose} />
<div className="modal"> <div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div> <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
@ -44,9 +32,30 @@ const PrivacyPolicy: React.FC = () => {
</p> </p>
</div> </div>
</div> : null} </div>
}
const PrivacyPolicy: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<span>
<div className="privacy" onClick={handleOpen} title="Privacy Policy &amp; Impressum">
<FontAwesomeIcon icon={faShield} />
<p className="p1">legal</p>
<p className="p2">notes</p>
</div>
{open?
<PrivacyPolicyPopup handleClose={handleClose} />: null}
</span> </span>
) )
} }
export default PrivacyPolicy // export default PrivacyPolicy
export {
PrivacyPolicy,
PrivacyPolicyPopup,
}

2
client/src/components/Welcome.tsx
Unescape Escape View File

@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Split from 'react-split' import Split from 'react-split'
import PrivacyPolicy from './PrivacyPolicy'; import {PrivacyPolicy} from './PrivacyPolicy';
cytoscape.use( klay ); cytoscape.use( klay );

4
client/src/components/welcome.css
Unescape Escape View File

@ -143,8 +143,10 @@ svg .world-title {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-width: 50%; min-width: max(50%, 300px);
max-width: 60ch; max-width: 60ch;
max-height: 80%;
overflow: scroll;
background: #fff; background: #fff;
z-index: 3; z-index: 3;
padding: 2em; padding: 2em;

Write Preview
Loading…
Cancel
Save