pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 Wiki Activity

Updates on svelte app
Some checks failed
ci/woodpecker/push/build Pipeline failed
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-10 18:27:36 +02:00
parent 49acadf772
commit a823c7504f
5 changed files with 220 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/app.html
View file

@ -1,12 +1,58 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<style>
:root {
--footer-height: calc(68px + 20px + 20px);
--accent-color: #213c8b;
--pianello-red: #de0e1b;
--pianello-yellow: #f6ae04;
--pianello-blue: #213c8b;
--card-background-color: #f9f4f1;
}
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fff;
font-family: 'Roboto-Regular';
display: grid;
place-items: center;
grid-template-rows: var(--footer-height) auto var(--footer-height);
}
header,
main,
footer {
height: 100%;
width: 100%;
display: grid;
place-items: center;
}
.bold {
font-weight: bold;
}
</style>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

1
frontend/src/routes/+layout.svelte Normal file
View file

@ -0,0 +1 @@
<slot></slot>

131
frontend/src/routes/+page.svelte
View file

@ -1,2 +1,129 @@
<h1>Welcome to SvelteKit</h1> <script>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> import BottomAppBar from './components/BottomAppBar.svelte';
</script>
<header>
<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
</header>
<main>
<div id="route-cards">
<div class="route-card">
<div class="route-card-left">
<img src="/images/app-bar-logo.png" alt="logo" />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">naturalistici</div>
</div>
</div>
<div class="route-card-right" />
</div>
<div class="route-card">
<div class="route-card-left">
<img src="/images/app-bar-logo.png" alt='logo' />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">storici</div>
</div>
</div>
<div class="route-card-right" />
</div>
<div class="route-card">
<div class="route-card-left">
<img src="/images/app-bar-logo.png" alt='logo' />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">tradizionalistici</div>
</div>
</div>
<div class="route-card-right" />
</div>
</div>
</main>
<footer>
<BottomAppBar />
</footer>
<style>
#welcome-message {
font-size: 18px;
}
#route-cards {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.route-card {
flex: 1;
--route-card-radius: 45px;
border-radius: var(--route-card-radius);
box-shadow: 0 0 27px #ccc;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
display: flex;
background-color: var(--card-background-color);
}
.route-card > * {
flex: 1;
}
.route-card-left {
flex: 0 1 20%;
border-top-left-radius: var(--route-card-radius);
border-bottom-left-radius: var(--route-card-radius);
display: grid;
place-items: center;
}
.route-card-left img {
display: block;
width: 80%;
height: auto;
}
.route-card-right {
flex: 0 1 20%;
border-top-right-radius: var(--route-card-radius);
border-bottom-right-radius: var(--route-card-radius);
background-image: url('../../static/images/test-1.jpg');
background-position: center;
background-size: cover;
}
#route-cards .route-card:nth-child(1) .route-card-left {
background-color: var(--pianello-red);
}
#route-cards .route-card:nth-child(2) .route-card-left {
background-color: var(--pianello-yellow);
}
#route-cards .route-card:nth-child(3) .route-card-left {
background-color: var(--pianello-blue);
}
.route-card .name {
display: grid;
height: 100%;
align-content: center;
padding: 20px;
font-size: 20px;
}
.route-card .name > * {
flex: 1;
}
</style>

34
frontend/src/routes/components/BottomAppBar.svelte Normal file
View file

@ -0,0 +1,34 @@
<div id="container">
<div>
<img src="/images/home-icon.png" alt="home" />
</div>
<div>
<img src="/images/routes-icon.png" alt="possible routes" />
</div>
<div>
<img src="/images/settings-icon.png" alt="settings" />
</div>
</div>
<style>
#container {
display: flex;
height: 68px;
width: 90%;
border-radius: 90px;
box-shadow: 0 0 50px #ccc;
background-color: var(--card-background-color);
}
#container > div {
flex: 1;
display: grid;
place-items: center;
}
img {
display: block;
height: 32px;
width: auto;
}
</style>

BIN
frontend/static/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB