css landing page

2023-05-04 14:54:43 +02:00
parent eaf0d13c2f
commit f17d56d7e5
7 changed files with 235 additions and 82 deletions
@@ -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>
@@ -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;
 }

-.github-link {
-  position: absolute;
-  top : 0;
-  right: 0;
+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 {
+  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>
+    <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>

-    <GithubIcon url="https://github.com/leanprover-community/lean4game"/>
-    <PrivacyPolicy/>
+    {/* <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;