Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update UI #64

Merged
merged 1 commit into from
Sep 2, 2024
Merged

update UI #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
document.addEventListener('DOMContentLoaded', async function () {
const about = async () => {
const response = await fetch('/about')
response.headers.forEach((value, name) => {
if (name === 'expresso') {
document.querySelector('i').innerHTML = value
document.getElementById('version').innerHTML = value
}
})

Expand All @@ -24,4 +24,35 @@ document.addEventListener('DOMContentLoaded', async function () {
const creator = document.getElementById('creator')
creator.innerText = data?.creator?.name
creator.href = data?.creator?.github
})
creator.target = '_blank'

document.querySelectorAll('.github').forEach(element => {
element.href = data?.repository
element.target = '_blank'
})
}

const contributors = async () => {
const response = await fetch(
'https://api.github.com/repos/coding-cpp/expresso/contributors'
)
const data = await response.json()

const contributorsList = document.querySelector('ul')
data.forEach(contributor => {
// for (let i = 0; i < 100; i++) {
const listItem = document.createElement('li')
const a = document.createElement('a')
const img = document.createElement('img')
a.href = contributor.html_url
a.target = '_blank'
img.src = contributor.avatar_url
a.appendChild(img)
listItem.appendChild(a)
contributorsList.appendChild(listItem)
// }
})
}

document.addEventListener('DOMContentLoaded', about)
document.addEventListener('DOMContentLoaded', contributors)
85 changes: 63 additions & 22 deletions assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,71 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expresso</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>
<script src="app.js"></script>
</head>
<body>
<div>Hi !!!!!!!</div>
<div>
This is an example of a static file served via
<a href="https://github.com/coding-cpp/expresso" target="_blank"
>expresso</a
>, a backend framework written in pure C++ 20 without the use of any
external libraries at all (well, obviously except for the standard c++
library).
</div>
<div>Expresso version running: <i></i></div>
<section>
<p>Submodules used (also developed by me btw :)</p>
<br />
<ol></ol>
</section>
<div>
Made by: <span><a id="creator"></a></span>
</div>
<div>Since you're here, enjoy an AI generated coffee, on me:</div>
<div>
<img width="100%" src="/coffee.png" alt="AI generated coffee" />
</div>
<nav>
<span>Expresso</span>
<span>
<a class="github" style="margin-right: 10px"
><i class="fa-brands fa-github"></i
></a>
<a href="https://hub.docker.com/r/jadit19/expresso" target="_blank">
<i class="fa-brands fa-docker"></i>
</a>
</span>
</nav>

<article>
<section id="left">
<div id="intro">
<h1>Introduction</h1>
<p>
If you are seeing this, it means you have successfully set up
<a class="github">expresso</a> on your machine. First of all, let me
thank you for either using, testing, contributing and/or supporting
this project.
</p>
<p>
<a class="github">Expresso</a>
is a backend framework written in pure C++ 20 without the use of any
external dependencies at all (well, obviously except for the
standard c++ library included with any c++ compiler now-a-days)
</p>
</div>

<div id="details">
<h1>Details</h1>
<p>
<a class="github">Expresso</a> version running: <i id="version"></i>
</p>
<p>Submodules used:</p>
<ol></ol>
<p></p>
</div>

<div id="contributors">
<h1>Contributors</h1>
<p>Special thanks to the following contributors:</p>
<ul></ul>
</div>
</section>

<section id="right">
<div id="image">
<h1>Image</h1>
<p>Since you are here, enjoy an AI generated coffee on me:</p>
<img width="100%" src="/coffee.png" style="padding: 0px !important" />
</div>
</section>
</article>

<footer>
<p>&copy; <a id="creator"></a></p>
</footer>
</body>
</html>
130 changes: 116 additions & 14 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,136 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
--white: #f0f0f0;
--bg-color: #FFEAC5;
--code-color: #FFDBB5;
--primary-color: #6C4E31;
--accent-color: #603F26;
--href-color: #003F8A;
}

* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}

html {
height: 100%;
body {
width: 100%;
background-color: var(--bg-color);
}

body {
max-width: 400px;
height: 100%;
nav, footer {
padding: 12px;
background-color: var(--accent-color);
color: var(--white);
font-weight: bold;
display: flex;
justify-content: space-between;
}

nav {
font-size: 30px;
}

a {
text-decoration: none;
color: inherit;
}

article {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

flex-direction: row;
height: calc(100vh - 102px);
overflow: auto;
margin: 0 auto;
padding: 0 20px;
}

body > * {
padding: 10px 0px;
section {
padding: 20px;
}

a {
section#left {
width: 70%;
}

section#right {
width: 30%;
}

div {
padding-bottom: 10px;
}

div > * {
padding-left: 20px;
}

div h1 {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--primary-color);
}

div p {
margin: 5px 0px;
padding-bottom: 10px;
}

div a {
text-decoration: none;
color: blue;
color:var(--href-color);
}

div ol {
margin-left: 30px;
}

div ol li {
margin-bottom: 2px;
padding-left: 5px;
}

div ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}

div ul li {
list-style-type: none;
}

div ul li a {
border: none !important;
}

div ul li a img {
width: 60px;
aspect-ratio: 1/1;
border-radius: 50%;
}

footer {
display: flex;
justify-content: center;
}

@media (max-width: 768px) {
article {
flex-direction: column;
}

section#left {
width: 100% !important;
}

section#right {
width: 100% !important;
padding-top: 0px !important;
}

}
Loading