kevin/deguapp
1
0
Fork 0
forked from fr/deguapp
Code Pull Requests Activity

update

Browse Source
This commit is contained in:
Filip Rojek 2023-11-09 17:37:21 +01:00
parent 1bc1f58b8f
commit e8fe008117
10 changed files with 123 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.env
db_data/

19
docker-compose.yaml Normal file
View File

@ -0,0 +1,19 @@
version: '3.1'
services:
db:
image: mariadb
restart: always
environment:
MARIADB_ROOT_PASSWORD: 39In1bx7
volumes:
- ./db_data:/var/lib/mysql
phpmyadmin:
image: phpmyadmin
restart: always
ports:
- 8080:80
environment:
- PMA_ARBITRARY=1

6
frontend/css/_general.css
View File

@ -5,7 +5,11 @@
} }
body { body {
font-family: OpenSans; font-family: OpenSans Roboto sans-serif;
}
a {
text-decoration: none;
} }
.flex { .flex {

3
frontend/css/home.css
View File

@ -9,4 +9,7 @@
} }
.card { .card {
width: 15rem; width: 15rem;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: .5rem;
cursor: pointer;
} }

52
frontend/css/modal.css
View File

@ -9,6 +9,9 @@
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
animation-name: fadein;
animation-duration: 0.4s;
} }
/* Modal Content/Box */ /* Modal Content/Box */
@ -17,21 +20,58 @@
margin: 15% auto; /* 15% from the top and centered */ margin: 15% auto; /* 15% from the top and centered */
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
border-radius: 15px;
width: 80%; /* Could be more or less, depending on screen size */ width: 80%; /* Could be more or less, depending on screen size */
position: relative; position: relative;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop; animation-name: fadein;
animation-duration: 0.4s animation-duration: 0.4s;
}
.md-close {
position: relative;
left: 95%;
cursor: pointer;
} }
.md-active { .md-active {
display: block; display: block;
} }
/* Add Animation */
@keyframes animatetop { .md-active-mobile {
from {top: -300px; opacity: 0} display: block;
to {top: 0; opacity: 1} }
@media only screen and (min-width: 600px) {
.md-active {
display: none;
}
}
.modal-content h2 {
margin-bottom: 2rem;
}
.modal-content a {
text-decoration: none;
padding: 1rem 0rem;
width: 100%;
text-align: center;
}
.modal-content a:hover {
background-color: #888;
}
/* Add Animation */
@keyframes fadein {
from { opacity: 0}
to {opacity: 1}
}
@keyframes fadeout {
from { opacity: 1}
to {opacity: 0}
} }

22
frontend/css/nav.css
View File

@ -23,3 +23,25 @@ a {
width: 3rem; width: 3rem;
} }
@media only screen and (min-width: 600px) {
.nav-user-dropdown {
position: absolute;
right: .5rem;
top: 4rem;
background: white;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
height: 5rem;
width: 8rem;
display: flex !important;
flex-direction: column;
gap: .5rem;
visibility: hidden;
}
}
.nav-user-dropdown {
display: none;
}
.visible {
visibility: visible;
}

17
frontend/index.php
View File

@ -31,9 +31,9 @@
<link rel="stylesheet" href="/css/home.css"> <link rel="stylesheet" href="/css/home.css">
<link rel="stylesheet" href="/css/md-add.css"> <link rel="stylesheet" href="/css/md-add.css">
<link rel="stylesheet" href="/css/modal.css"> <link rel="stylesheet" href="/css/modal.css">
<script defer src="/js/general.js"></script> <script src="/js/general.js"></script>
<script defer src="/js/modal.js"></script> <script src="/js/modal.js"></script>
<script defer src="/js/nav.js"></script> <script src="/js/nav.js"></script>
</head> </head>
<body> <body>
<header class="f-row nav-wrapper"> <header class="f-row nav-wrapper">
@ -66,6 +66,11 @@
<img src="/img/icons/user.svg" alt="user icon"> <img src="/img/icons/user.svg" alt="user icon">
<a href="#">Test Testovic</a> <a href="#">Test Testovic</a>
</div> </div>
<div class="nav-user-dropdown">
<a href="#">Můj účet</a>
<a href="#">Nastavení</a>
<a href="#">Odhlásit se</a>
</div>
<?php } ?> <?php } ?>
</div> </div>
</header> </header>
@ -109,8 +114,10 @@
<div class="modal-content"> <div class="modal-content">
<span class="md-close">&times;</span> <span class="md-close">&times;</span>
<div class="f-col f-center"> <div class="f-col f-center">
<h2>Hello User!<h2> <h2>Ahoj Pepo!</h2>
<a href="/logout">Logout</a> <a href="/my-account">Můj účet</a>
<a href="/settings">Nastavení</a>
<a href="/logout">Odhlásit se</a>
</div> </div>
</div> </div>
</section> </section>

3
frontend/js/modal.js
View File

@ -2,8 +2,7 @@
const close = qSA(".md-close") const close = qSA(".md-close")
close.forEach(one => { close.forEach(one => {
one.addEventListener("click", (el) => { one.addEventListener("click", (el) => {
const active = qS(".md-active") qS(".md-active").classList.remove("md-active")
active.classList.remove("md-active")
}) })
}) })

5
frontend/js/nav.js
View File

@ -15,7 +15,10 @@ function show_modal(selector, modal_selector = null) {
} }
show_modal(".nav-add", "#md-add-tree") show_modal(".nav-add", "#md-add-tree")
show_modal(".nav-user", "#md-user-tree")
show_modal("#nav-login", "#md-login") show_modal("#nav-login", "#md-login")
show_modal("#nav-signup", "#md-signup") show_modal("#nav-signup", "#md-signup")
show_modal(".nav-user", "#md-user-tree")
qS(".nav-user").addEventListener("click", () => {
qS(".nav-user-dropdown").classList.toggle("visible")
})

11
frontend/pages/home/home.php
View File

@ -2,12 +2,19 @@
<?php <?php
for ($i=0; $i < 8; $i++) { for ($i=0; $i < 8; $i++) {
?> ?>
<div class="card f-col"> <div class="card card-beer f-col">
<img width="200px" src="https://live.staticflickr.com/65535/49818361653_351771faae_h.jpg" alt="beer image"> <img width="200px" id="<?= $i ?>" src="https://live.staticflickr.com/65535/49818361653_351771faae_h.jpg" alt="beer image">
<h2>Beer Name</h2> <h2>Beer Name</h2>
<p>12 Degree</p> <p>12 Degree</p>
</div> </div>
<?php <?php
} ?> } ?>
<script>
qSA(".card-beer").forEach(el => {
el.addEventListener("click", (e) => {
window.location.href = "/beer/" + el.querySelector("img").id
})
});
</script>
</section> </section>