Merge pull request #60 from moevm/frontend-prototype-analysis

frontend prototype analysis
moevm · Dec 11, 2024 · e9431e1 · e9431e1
2 parents 4886309 + 4cbf543
commit e9431e1
Show file tree

Hide file tree

Showing 45 changed files with 4,652 additions and 2,192 deletions.
diff --git a/client/index.html b/client/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/plant.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+    <title>Little plant shop</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/client/main.css b/client/main.css
@@ -0,0 +1,173 @@
+.page-layout {
+    display: flex;
+}
+
+.inputs-start-page {
+    font-family: 'Century Gothic', sans-serif;
+    width: 100%;
+    border: 1px solid #EEECEC;
+    border-radius: 10px;
+    background-color: #EEECEC;
+    padding: 10px;
+    font-size: 14px;
+    color: black;
+    box-sizing: border-box;
+}
+
+.inputs-start-page::placeholder {
+    color: #7E7E7E;
+}
+
+.inputs-start-page:focus {
+    border-color: transparent;
+    outline: none;
+}
+
+.inputs {
+    font-family: 'Century Gothic', sans-serif;
+    width: 100%;
+    border: 1px solid #EEECEC;
+    border-radius: 10px;
+    background-color: #EEECEC;
+    padding: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: black;
+    box-sizing: border-box;
+}
+
+.inputs::placeholder {
+    color: #7E7E7E;
+}
+
+.inputs:focus {
+    border-color: transparent;
+    outline: none;
+}
+
+.inputs-labels {
+    font-family: 'Century Gothic', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 2%;
+}
+
+.checkbox-labels {
+    font-family: 'Century Gothic', sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+textarea {
+    width: 100%;
+    height: 60px;
+    border-radius: 10px;
+    border: 1px solid #EEECEC;
+    background-color: #EEECEC;
+    resize: none;
+}
+
+.green-button-white-text {
+    font-family: 'Century Gothic', sans-serif;
+    width: 100%;
+    font-size: 14px;
+    border: 2px solid #89A758;
+    font-weight: bold;
+    background-color: #89A758;
+    color: #fff;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.green-button-white-text:hover {
+    background-color: #77934a;
+}
+
+.white-button-green-text{
+    margin-top: 2%;
+    width: 100%;
+    font-family: 'Century Gothic', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    color: #89A758;
+    background-color: transparent;
+    border: 2px solid #89A758;
+    border-radius: 10px;
+    padding: 10px;
+    cursor: pointer;
+    align-items: center;
+    position: relative;
+}
+
+.white-button-green-text:hover {
+    color: #77934a;
+    border: 2px solid #77934a;
+}
+
+.logo {
+    width: 200px;
+    height: auto;
+    margin-left: 10%;
+}
+
+.sidebar {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.search-input {
+    font-family: 'Century Gothic', sans-serif;
+    width: 84%;
+    border: 2px solid #000000;
+    border-radius: 10px;
+    background-color: #FFFFFF;
+    padding: 10px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #000000;
+}
+
+.search-input::placeholder {
+    color: #7E7E7E;
+}
+
+.modal-header {
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+.clickable {
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.white-button-green-text-sale{
+    margin-top: 4%;
+    width: 100%;
+    font-family: 'Century Gothic', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    color: #89A758;
+    background-color: transparent;
+    border: 2px solid #89A758;
+    border-radius: 10px;
+    padding: 10px;
+    cursor: pointer;
+    align-items: center;
+    position: relative;
+}
+
+.white-button-green-text-sale:hover {
+    color: #77934a;
+    border: 2px solid #77934a;
+}
diff --git a/client/modal.css b/client/modal.css
@@ -0,0 +1,81 @@
+.modal-overlay {
+    font-family: 'Century Gothic', sans-serif;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    width: 70%;
+    max-width: 25%;
+    padding: 20px;
+    border-radius: 8px;
+    position: relative;
+    background-color: white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content-care {
+    max-height: 80vh;
+    overflow-y: auto;
+    width: 70%;
+    max-width: 40%;
+    padding: 20px;
+    border-radius: 8px;
+    position: relative;
+    background-color: white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.close-modal {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 20px;
+    border: none;
+    background: transparent;
+    color: #000;
+    cursor: pointer;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+.modal-header h2 {
+    font-size: 1.5em;
+    margin: 0;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: #333;
+}
+
+.modal-body p {
+    margin: 1px 0;
+    line-height: 1.2;
+    font-size: 14px;
+    color: black;
+}