From 1bc1f58b8f0ab8cba0940159cd763e82bbb43b32 Mon Sep 17 00:00:00 2001 From: Filip Rojek Date: Thu, 9 Nov 2023 01:36:43 +0100 Subject: [PATCH] frontend updates --- frontend/css/_general.css | 28 ++++- frontend/css/add.css | 9 ++ frontend/css/home.css | 9 ++ frontend/css/md-add.css | 10 ++ frontend/css/modal.css | 37 ++++++ frontend/css/nav.css | 19 ++- frontend/img/icons/beer.svg | 1 + frontend/img/icons/close.svg | 1 + frontend/img/icons/delete.svg | 1 + frontend/img/icons/expand_more.svg | 1 + frontend/img/icons/home.svg | 1 + frontend/img/icons/login.svg | 1 + frontend/img/icons/logout.svg | 1 + frontend/img/icons/menu.svg | 1 + frontend/img/icons/plus.svg | 1 + frontend/img/icons/refresh.svg | 1 + frontend/img/icons/search.svg | 1 + frontend/img/icons/settings.svg | 1 + frontend/img/icons/star.svg | 1 + frontend/img/icons/user.svg | 95 +++++++++++++++ frontend/index.php | 113 +++++++++++++++--- frontend/js/general.js | 15 +++ frontend/js/modal.js | 16 +++ frontend/js/nav.js | 21 ++++ frontend/libs/Router.php | 6 + .../add_beer.php => beer_add/beer_add.php} | 7 +- frontend/pages/home/home.php | 16 ++- .../review_add.php} | 0 28 files changed, 388 insertions(+), 26 deletions(-) create mode 100644 frontend/css/md-add.css create mode 100644 frontend/css/modal.css create mode 100644 frontend/img/icons/beer.svg create mode 100644 frontend/img/icons/close.svg create mode 100644 frontend/img/icons/delete.svg create mode 100644 frontend/img/icons/expand_more.svg create mode 100644 frontend/img/icons/home.svg create mode 100644 frontend/img/icons/login.svg create mode 100644 frontend/img/icons/logout.svg create mode 100644 frontend/img/icons/menu.svg create mode 100644 frontend/img/icons/plus.svg create mode 100644 frontend/img/icons/refresh.svg create mode 100644 frontend/img/icons/search.svg create mode 100644 frontend/img/icons/settings.svg create mode 100644 frontend/img/icons/star.svg create mode 100644 frontend/img/icons/user.svg create mode 100644 frontend/js/general.js create mode 100644 frontend/js/modal.js create mode 100644 frontend/js/nav.js rename frontend/pages/{add_beer/add_beer.php => beer_add/beer_add.php} (94%) rename frontend/pages/{add_review/add_review.php => review_add/review_add.php} (100%) diff --git a/frontend/css/_general.css b/frontend/css/_general.css index dad5870..b27ebf0 100644 --- a/frontend/css/_general.css +++ b/frontend/css/_general.css @@ -1,4 +1,4 @@ -*{ +* { padding: 0; margin: 0; box-sizing: border-box; @@ -6,7 +6,6 @@ body { font-family: OpenSans; - padding: 0 0.5rem; } .flex { @@ -23,6 +22,31 @@ body { flex-direction: column; } +.f-center { + justify-content: center; + align-items: center; +} + footer { display: none; } + +.main-wrapper { + padding: 0 0.5rem; +} + +.hidden { + display: none; +} + +.abs-center { + position: absolute; + transform: translateX(-50%) translateY(-50%); + left: 50%; + top: 50%; +} + +.tmpsqrt { + padding: 5rem 2.5rem; + background: red; +} \ No newline at end of file diff --git a/frontend/css/add.css b/frontend/css/add.css index 64754c4..098658d 100644 --- a/frontend/css/add.css +++ b/frontend/css/add.css @@ -9,3 +9,12 @@ flex-direction: column; } +form { + padding: 1rem; +} +input { + margin: 0.3rem 0; +} +input[type="file"] { + font-size: 17px; +} diff --git a/frontend/css/home.css b/frontend/css/home.css index 8abc90a..c14229e 100644 --- a/frontend/css/home.css +++ b/frontend/css/home.css @@ -1,3 +1,12 @@ .main-wrapper h1 { text-align: center; } + +.card-wrapper { + display: flex; + flex-wrap: wrap; + gap: 2rem; +} +.card { + width: 15rem; +} diff --git a/frontend/css/md-add.css b/frontend/css/md-add.css new file mode 100644 index 0000000..220c476 --- /dev/null +++ b/frontend/css/md-add.css @@ -0,0 +1,10 @@ +.select-box { + padding: 4rem; + /*border: 5px solid red;*/ + cursor: pointer; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} + +#md-add-tree .f-row.f-center{ + gap: 2rem; +} diff --git a/frontend/css/modal.css b/frontend/css/modal.css new file mode 100644 index 0000000..227154f --- /dev/null +++ b/frontend/css/modal.css @@ -0,0 +1,37 @@ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + + + position: relative; + 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-duration: 0.4s +} + +.md-active { + display: block; +} + +/* Add Animation */ +@keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} +} diff --git a/frontend/css/nav.css b/frontend/css/nav.css index 2933369..9b315fd 100644 --- a/frontend/css/nav.css +++ b/frontend/css/nav.css @@ -1,8 +1,25 @@ .nav-wrapper { justify-content: space-between; - padding: 1rem 0.5rem; + padding: 0.5rem; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + margin-bottom: 1rem; } a { color: black; } + +.nav-2 { + gap: 1rem; +} +.nav-item { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.nav-user img { + width: 3rem; +} + diff --git a/frontend/img/icons/beer.svg b/frontend/img/icons/beer.svg new file mode 100644 index 0000000..edcbdba --- /dev/null +++ b/frontend/img/icons/beer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/close.svg b/frontend/img/icons/close.svg new file mode 100644 index 0000000..5a60c58 --- /dev/null +++ b/frontend/img/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/delete.svg b/frontend/img/icons/delete.svg new file mode 100644 index 0000000..560d174 --- /dev/null +++ b/frontend/img/icons/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/expand_more.svg b/frontend/img/icons/expand_more.svg new file mode 100644 index 0000000..0c8f273 --- /dev/null +++ b/frontend/img/icons/expand_more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/home.svg b/frontend/img/icons/home.svg new file mode 100644 index 0000000..d700dde --- /dev/null +++ b/frontend/img/icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/login.svg b/frontend/img/icons/login.svg new file mode 100644 index 0000000..49c0f54 --- /dev/null +++ b/frontend/img/icons/login.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/logout.svg b/frontend/img/icons/logout.svg new file mode 100644 index 0000000..4881453 --- /dev/null +++ b/frontend/img/icons/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/menu.svg b/frontend/img/icons/menu.svg new file mode 100644 index 0000000..2f427e9 --- /dev/null +++ b/frontend/img/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/plus.svg b/frontend/img/icons/plus.svg new file mode 100644 index 0000000..f8bc930 --- /dev/null +++ b/frontend/img/icons/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/refresh.svg b/frontend/img/icons/refresh.svg new file mode 100644 index 0000000..a7a6bc8 --- /dev/null +++ b/frontend/img/icons/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/search.svg b/frontend/img/icons/search.svg new file mode 100644 index 0000000..ef0d052 --- /dev/null +++ b/frontend/img/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/settings.svg b/frontend/img/icons/settings.svg new file mode 100644 index 0000000..817c782 --- /dev/null +++ b/frontend/img/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/star.svg b/frontend/img/icons/star.svg new file mode 100644 index 0000000..1736e08 --- /dev/null +++ b/frontend/img/icons/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/img/icons/user.svg b/frontend/img/icons/user.svg new file mode 100644 index 0000000..953374a --- /dev/null +++ b/frontend/img/icons/user.svg @@ -0,0 +1,95 @@ + +image/svg+xml \ No newline at end of file diff --git a/frontend/index.php b/frontend/index.php index 8d132b0..19125dd 100644 --- a/frontend/index.php +++ b/frontend/index.php @@ -1,14 +1,14 @@ DeguApp - - - - + - + + + + + + + + + +
-
- DeguApp +
+ + degu app home + Degu App +
-
+
- Přihlásit se - Registrace + + - Přidat pivo - Přidat recenzi +
+ +
+
+ add beer or review +
+
+ user icon + Test Testovic +
@@ -53,15 +74,73 @@ route('GET', '/', 'home'); - $R->route('GET', '/add', 'add'); + $R->route('GET', '/beer/add', 'beer_add'); + $R->route('GET', '/review/add', 'review_add'); $R->route('GET', '/login', 'login'); $R->route('GET', '/signup', 'signup'); - $R->route('POST', '/contact/send', 'contact'); + if(!$LOGGEDIN && $R->getUrl() == '/') { + // show login page + } + $R = null; ?> + + + + + + + + + + + + + +