wysrodkowanie div post

css/style.css

@@ -89,5 +89,4 @@ body {
 
 .car-image img {
     width: 150px;
-}
-
+}

css/style2.css

@@ -0,0 +1,96 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f8f8;
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    background-color: #800040;
+    color: #ffffff;
+    padding: 20px;
+    text-align: center;
+    font-size: 2em;
+}
+
+.nav {
+    display: flex;
+    justify-content: center;
+    background-color: #d40054;
+    padding: 10px;
+}
+
+.nav img {
+    width: 50px;
+    height: 50px;
+    margin: 0 20px;
+    cursor: pointer;
+}
+
+.main-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+    background-color: #fff1f4;
+}
+
+.form-container {
+    text-align: center;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+.form-container h2 {
+    color: #6b8e23;
+    font-size: 1.5em;
+}
+
+.form-container label {
+    display: block;
+    margin: 10px 0 5px;
+    color: #333;
+}
+
+.form-container input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.form-container input[type="submit"] {
+    background-color: #800040;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.footer {
+    background-color: #800040;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.car-image {
+    margin-left: 30px;
+}
+
+.car-image img {
+    width: 150px;
+}
+
+.post {
+    text-align: center;
+}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Całodobowa stacja paliw</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/style2.css">
     
     <script type="module" src="js/script.js"></script>
 
@@ -31,10 +31,11 @@
                     
                     <label id="cena">Calculate ...</label>
 
-                    <label for="liters">Ile litrów?</label>
-                    <input type="text" id="liters" name="liters">
-                    
-                    <input type="submit" value="OBLICZ">
+                    Ile litrow?</br>
+                    <input id = "ile_litrow"></input></br>
+                    <input id = "oblicz" type="button" value="OBLICZ">
+
+                    <p id="wynik"></p>
                 </form>
 
         </div>
@@ -43,9 +44,20 @@
         </div>
     </div>
 
+    <div class="post">
+        <h2>Dodaj rodzaj paliwa</h2>
+        Nazwa:</br>
+        <input id="name" type="text" placeholder="nazwa"></br></br>
+        Cena:</br>
+        <input id="price" type="number" placeholder = "cena"></br></br>
+        <button id = "button_dodaj">Dodaj</button>
+    </div>
+
     <div class="footer">
         Stronę opracował: 000000000000
     </div>
+
+    <script src="js/post.js"></script>
 </body>
 </html>
 

js/post.js

@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    button_dodaj = document.getElementById("button_dodaj")
+    
+    button_dodaj.addEventListener("click", () => {
+
+        data = {
+            nazwa: document.getElementById("name").value,
+            cena: document.getElementById("price").value
+        }
+        fetch("php/post.php", {
+            method: "POST",
+            headers: {
+                "Content-Type":"application/json",
+            }, 
+            body: JSON.stringify(data)
+        })
+        .then(response => response.json)
+        .then(data => {
+            console.log("Succes", data)
+            window.location.reload()
+        })
+        
+    })
+
+})

js/script.js

@@ -4,6 +4,7 @@ const cena = document.getElementById("cena");
 
 let usersData = [];
 
+
 document.addEventListener('DOMContentLoaded', function() {
     fetch('php/gget.php')
         .then(response => response.json())
@@ -40,3 +41,15 @@ fuelType.addEventListener('change', function() {
     }
 });
 
+document.getElementById("oblicz").addEventListener("click", () => {
+    const ile_litrow = document.getElementById("ile_litrow").value
+    const cena_paliwa = document.getElementById("cena").innerHTML
+    console.log(ile_litrow)
+    console.log(cena_paliwa)
+
+    const wynik = ile_litrow * cena_paliwa
+
+    console.log(wynik)
+
+    document.getElementById("wynik").innerHTML = wynik
+})

php/gget.php

@@ -1,6 +1,6 @@
 <?php
 
-$polaczenie = mysqli_connect("172.19.0.2", "root", "secret", "db");
+$polaczenie = mysqli_connect("localhost", "root", "", "db");
 
 $kwerenda = mysqli_query($polaczenie, "SELECT * FROM paliwa ORDER BY id DESC LIMIT 3;");
 

php/post.php

@@ -0,0 +1,20 @@
+<?php
+
+$dbhost = "localhost";
+$dbuser = "root";
+$dbpass = "";
+$dbname = "db";
+
+$con = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
+
+$rawData = file_get_contents('php://input');
+
+$data = json_decode($rawData, true);
+
+$kw = "INSERT INTO paliwa (nazwa, cena) VALUES ('{$data['nazwa']}', {$data['cena']} );";
+
+echo json_encode($kw);
+
+$ans = mysqli_query($con, $kw);
+
+?>

token.txt

@@ -0,0 +1 @@
+03abdf5412e60673d79cd8929fdd18a8bbb631b3