Skip to content
Snippets Groups Projects
Commit a0ed7646 authored by Janis Daniel Dähne's avatar Janis Daniel Dähne
Browse files

- started better/public about site

parent 56656f62
No related branches found
No related tags found
No related merge requests found
Showing
with 15664 additions and 61 deletions
footer {
height: 300px;
background-color: #3b3e42;
color: #919191;
}
.title-section {
margin: 0 auto;
text-align: center;
padding-top: 2em;
}
.logo {
border-radius: 150px;
width: 300px;
height: 300px;
margin: auto;
}
.page-title {
font-size: 30px;
font-weight: bold;
margin-top: 0;
margin-bottom: 1em;
}
.section-divider {
width: 80%;
border-bottom: 1px solid #d4d4d5;
height: 2px;
margin: 2em auto;
}
.about-title-long {
margin-top: 2em;
font-size: 1em;
}
.about-big-letter {
font-weight: bold;
}
.about-letters {
color: #909090;
}
.mar-right {
margin-right: 0.5em;
}
.about-description {
margin-top: 2em;
font-size: 1.1em;
}
.section {
background-color: #269ad5;
}
.section:nth-child(2n) {
background-color: #ffbf61;
}
.section {
padding: 3rem 1.5rem;
}
.section h2.section-title {
padding: 1em;
margin: 0 !important;
}
.section .section-content {
padding: 0 1em;
}
.section .section-footer {
margin-top: 3em;
font-style: italic;
}
.wanted-feature {
display: flex;
}
.wanted-feature i {
margin: auto 0;
}
.wanted-feature > div {
padding: 0 1em;
}
.wanted-feature > div p {
font-weight: bold;
font-size: 1.3em;
margin-bottom: 0.5em;
}
.statistics .item .stat-number {
font-size: 3em;
text-align: center;
font-weight: 200;
}
.statistics .item div {
text-align: center;
font-size: 1.5em;
}
.contact .contact-card {
display: flex;
}
.contact .contact-card .img {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border-radius: 50%;
}
.contact .contact-card .data {
padding: 1em 1em 0 1em;
}
.contact .contact-card .data .name {
margin-bottom: 1em;
font-weight: bold;
}
......@@ -14,98 +14,433 @@
<link rel="icon" type="image/png" href="favicon.png" sizes="180x180">
<link rel="apple-touch-icon" sizes="180x180" href="favicon.png">
<link rel="stylesheet" href="/static/semantic.min.css">
<!-- <link rel="stylesheet" href="/static/semantic.min.css">-->
<link rel="stylesheet" href="dependencies/bulma_0_7_5.css">
<link rel="stylesheet" href="dependencies/bulma-extensions.min.css">
<link rel="stylesheet" href="dependencies/fontawesome-free-5.9.0-web/css/all.css">
<link rel="stylesheet" href="about.css">
<style>
body {
background-color: #e9ecee;
margin: 0;
}
.centered-site {
margin: 0 auto;
text-align: center;
padding: 2em;
}
</style>
.logo {
border-radius: 150px;
width: 300px;
height: 300px;
margin: auto;
}
</head>
<body>
.page-title {
font-size: 30px;
font-weight: bold;
margin-top: 0;
margin-bottom: 1em;
}
<div>
.section-divider {
width: 80%;
border-bottom: 1px solid #d4d4d5;
height: 2px;
margin: 2em auto;
}
<div class="title-section">
<div class="logo">
<img src="imgs/about_icon.png" alt="yapex logo"/>
</div>
.about-title-long {
margin-top: 2em;
font-size: 1em;
}
<h1 class="page-title">
YAPEX
</h1>
.about-big-letter {
font-weight: bold;
}
<div class="about-title-long">
<span class="about-big-letter">Y</span><span class="about-letters mar-right">et</span>
.about-letters {
color: #909090;
}
<span class="about-big-letter">A</span><span class="about-letters mar-right">nother</span>
.mar-right {
margin-right: 0.5em;
}
<span class="about-big-letter">P</span><span class="about-letters mar-right">ractical</span>
.about-description {
margin-top: 2em;
font-size: 1.1em;
}
<span class="about-big-letter">EX</span><span class="about-letters mar-right">ercise</span>
</style>
<span class="about-letters">Platform</span>
</div>
</head>
<body>
<div class="about-description">
<span>YAPEX is a system for programming language independent, automatic testing and assessment of exercises</span>
</div>
</div>
<div class="section-divider"></div>
<div class="section">
<h2 class="title is-2 section-title">Projektziele</h2>
<div class="section-content">
<div class="centered-site">
- erleichtern von übungen
- eine aufgabe, mehrere freigaben --> lösungen getrennt nach freigaben anzeigen
- aufgabenstellung & editor in einer oberfläche
- weboberfläche, kein installer zeug
- alle arbeiten auf gleicher umgebung (windows vs linux)
<div class="logo">
<img src="about_icon.png" alt="yapex logo"/>
- plattform zum üben für studierende
- eigene projekte
- kopie der lösungen auch nachträglich bearbeitbar
- erleichtern der kontrolle/bewertung von programmieraufgaben
- automatische tests (black-box, regex, dateivergleich)
- modern (technisch auf einem guten/modernen stand)
- react & redux, typescript, webpack frontend
- asp core im backend
</div>
</div>
<h1 class="page-title">
YAPEX
</h1>
<div class="section">
<h2 class="title is-2 section-title">Key Features</h2>
<div class="about-title-long">
<span class="about-big-letter">Y</span><span class="about-letters mar-right">et</span>
<div class="section-content">
- aufgabenstellung in
- markdown mit code syntax highlighting, mathe formeln
- fertiges pdf einfügen
<span class="about-big-letter">A</span><span class="about-letters mar-right">nother</span>
- studenten dateien vorgeben (templates)
<span class="about-big-letter">P</span><span class="about-letters mar-right">ractical</span>
- aufgaben freigeben
- automatisch oder manuell
- bearbeitungszeit begrenzen
<span class="about-big-letter">EX</span><span class="about-letters mar-right">ercise</span>
- studenten können nachträglich kopie ihrer lösung bearbeiten
- sprachunabhängige black-box tests
-
<span class="about-letters">Platform</span>
</div>
</div>
<div class="about-description">
<span>YAPEX is a system for programming language independent, automatic testing and assessment of exercises</span>
<div class="section">
<h2 class="title is-2 section-title">Noch umzusetzen / gewünschte Erweiterungen</h2>
<div class="section-content">
<div class="columns wanted-features">
<div class="column wanted-feature">
<i class="fas fa-users fa-5x"></i>
<div>
<p>Gruppen beim Lösen von Aufgaben</p>
<div class="content">
Aufgaben können aktuell nur von einem Nutzern allein gelöst werden.
In einigen Modulen/Veranstaltungen?? sind die Aufgaben aber optional in Gruppen zu lösen.
Dazu sollte es den Nutzern auch ermöglicht werden, kollaborativ zu arbeiten.
</div>
</div>
</div>
<div class="column wanted-feature">
<i class="fas fa-bug fa-5x"></i>
<div>
<p>Tests</p>
<div class="content">
Tests für das Frontend und das Backend.
Im Frontend würde sich Testcafe oder Cypress anbieten,
im Backend Unit Tests.
</div>
</div>
</div>
<div class="column wanted-feature">
<i class="fas fa-toolbox fa-5x"></i>
<div>
<p>Kleinere Features</p>
<div class="content">
Es gibt noch viele kleine Features, welche noch auf eine Umsetzung warten.
</div>
</div>
</div>
</div>
<div class="section-footer">
Interess? Dann melde dich bei einem <a href="#contact-ref">Ansprechpartner <i class="fas fa-chevron-down"></i></a>
</div>
</div>
</div>
<div class="section-divider"></div>
<div class="section">
<h2 class="title is-2 section-title">Timeline/Ereignisse</h2>
<div class="section-content">
<div class="timeline is-centered ">
<header class="timeline-header">
<span class="tag is-medium is-primary">Heute</span>
</header>
<!-- <div class="timeline-item">-->
<!-- <div class="timeline-marker is-danger is-icon">-->
<!-- </div>-->
<!-- <div class="timeline-content">-->
<!-- <p class="heading">WS 2018</p>-->
<!-- <p>Eingesetzt in den Übungen im Modul Objektorientierte Programmierung an der-->
<!-- <a href="https://www.uni-halle.de" target="_blank">MLU</a>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- https://wikiki.github.io/components/timeline/ -->
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">SS 2019</p>
<p>Eingesetzt in den Übungen im Modul Datenstrukturen und effiziente Algorithmen an der
<a href="https://www.uni-halle.de" target="_blank">MLU <i class="fas fa-external-link-alt"></i></a>
</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2019</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2018</p>
<p>Probeklausur mit ILIAS und YAPEX
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2018</p>
<p>Eingesetzt in den Übungen im Modul Objektorientierte Programmierung an der
<a href="https://www.uni-halle.de" target="_blank">MLU <i class="fas fa-external-link-alt"></i></a>
</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2018</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2017</p>
<p>Probeklausur mit ILIAS und YAPEX
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2017</p>
<p>Eingesetzt in den Übungen im Modul Objektorientierte Programmierung an der
<a href="https://www.uni-halle.de" target="_blank">MLU <i class="fas fa-external-link-alt"></i></a>
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">SS 2017</p>
<p>Oberfläche komplett überarbeitet</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-primary">2017</span>
</header>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2016</p>
<p>Eingesetzt in den Übungen im Modul Objektorientierte Programmierung an der
<a href="https://www.uni-halle.de" target="_blank">MLU <i class="fas fa-external-link-alt"></i></a>
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker is-danger is-icon">
</div>
<div class="timeline-content">
<p class="heading">WS 2016</p>
<p>Erstellt im Zuge der Bachelorarbeit von Janis Dähne</p>
</div>
</div>
<header class="timeline-header">
<span class="tag is-medium is-primary">2016</span>
</header>
</div>
</div>
</div>
<div class="section">
<h2 class="title is-2 section-title">Ein paar Zahlen/Statistik</h2>
<div class="section-content statistics columns">
<div class="item column is">
<div class="stat-number">
<i class="fas fa-user"></i>
669
</div>
<div>
Registrierte Nutzer
</div>
</div>
<div class="item column is">
<div class="stat-number">
<i class="fas fa-cubes"></i>
150
</div>
<div>
Erstellte Aufgaben
</div>
</div>
<div class="item column is">
<div class="stat-number">
<i class="fas fa-pen"></i>
33
</div>
<div>
Aufgaben zum freien Üben
</div>
</div>
<div class="item column is">
<div class="stat-number">
<i class="fas fa-archive"></i>
45
</div>
<div>
Projekte von Nutzern
</div>
</div>
<!-- total releases, total submissions? total tags? -->
</div>
<div class="section-footer">
Daten erhoben am 26.06.19
</div>
</div>
<div class="section">
<h2 id="contact-ref" class="title is-2 section-title">
Das Team/Ansprechpartner
</h2>
<div class="section-content contact">
<div class="columns">
<div class="column contact-card">
<div class="img">
</div>
<div class="data">
<div class="name">
Janis Dähne
</div>
<div class="description">
initial idea, initiator, programming
</div>
</div>
</div>
<div class="column contact-card">
<div class="img">
</div>
<div class="data">
<div class="name">
Steffen Schiele
</div>
<div class="description">
initiator, testing, feature ideas
</div>
</div>
</div>
<div class="column contact-card">
<div class="img">
</div>
<div class="data">
<div class="name">
Annett Thüring
</div>
<div class="description">
initiator, testing, feature ideas
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
//e.g. https://www.jetbrains.com/
footer {
height 300px
background-color #3b3e42
color rgb(145, 145, 145)
}
.title-section {
margin 0 auto
text-align center
padding-top 2em
}
.logo {
border-radius: 150px
width 300px
height 300px
margin auto
}
.page-title {
font-size 30px
font-weight bold
margin-top 0
margin-bottom 1em
}
.section-divider {
width 80%
border-bottom 1px solid #d4d4d5
height 2px
margin 2em auto
}
.about-title-long {
margin-top 2em
font-size 1em
}
.about-big-letter {
font-weight bold
}
.about-letters {
color #909090
}
.mar-right {
margin-right 0.5em
}
.about-description {
margin-top 2em
font-size 1.1em
}
.section {
background-color #269ad5
}
.section:nth-child(2n) {
background-color #ffbf61
}
.section{
padding: 3rem 1.5rem;
h2.section-title {
padding 1em
margin 0 !important
}
.section-content {
padding 0 1em
}
.section-footer {
margin-top 3em
font-style italic
}
}
.wanted-feature {
display flex
i {
margin auto 0
}
> div {
padding 0 1em
p {
//text-align center
font-weight bold
font-size 1.3em
margin-bottom 0.5em
}
.content {
}
}
}
.statistics {
.item {
.stat-number {
font-size 3em
text-align center
font-weight 200
}
div {
text-align center
font-size 1.5em
}
}
}
.contact {
.contact-card {
display flex
.img {
width 100px
height 100px
background-color whitesmoke
border-radius 50%
}
.data {
padding 1em 1em 0 1em
.name {
margin-bottom 1em
font-weight bold
}
.description {
}
}
}
}
Source diff could not be displayed: it is too large. Options to address this: view the blob.
This diff is collapsed.
This diff is collapsed.
File added
File added
File added
static_pages/about/imgs/about_icon.png

29.5 KiB

- change font
......@@ -3,7 +3,8 @@
"module": "commonjs",
"noImplicitAny": true,
"target": "es5",
"allowJs": true
"allowJs": true,
"strict": true
},
"include": [
"./**/*"
......@@ -12,4 +13,4 @@
"node_modules",
"node_modules/@types/react/index.d.ts"
]
}
\ No newline at end of file
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment