Facebook
From drzwi od kibla, 6 Years ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 425
  1. <!doctype html>
  2. <html lang="pl">
  3.         <meta charset="utf-8">
  4.         <title>Dodaj ogłoszenie</title>
  5.         <style>
  6.                 *{margin:0;padding:0; box-sizing:border-box; font-family:Verdana; }
  7.                 #panel_lewy{float:left; width:45%; height:600px; background-color:#BAD2CF; padding: 15px;}
  8.                 #panel_prawy{float:left; width:55%; height: 600px; background-color:#88AFAA; padding:15px;}
  9.                 footer{clear:both; color:white;padding:10px;background-color:black; text-align:center;}
  10.                 table, th,tr,td{border: 2px solid #88AFAA; margin-bottom:35px; text-align:center; border-collapse:collapse; margin: 0 auto;}
  11.                 th{padding:5px; background-color:black; color:white;}
  12.                 td{padding:5px;}
  13.                 tr:nth-child(even) {background-color:#279e7c;}
  14.                 tr:nth-child(odd) {background-color:#a24be5;}
  15.                 #banner{background-color:black; color:white; text-align:center; padding:10px}
  16.                 ol li{margin-left:15px}
  17.                 h2{margin:15px 0;}
  18.                 input[type=text] {margin:5px auto;}
  19.                 input[type=button] {padding:5px; border-radius:5px; cursor:pointer; border:2px solid black; background-color:#88AFAA; color:black; padding:5px 25px; margin: 0 auto;}
  20.         </style>
  21.        
  22.         <script>
  23.                 function round(value, decimal){
  24.                         return Number(Math.round(value + "e"+decimal)+"e-"+decimal);
  25.                 }
  26.         </script>
  27.  
  28. </head>
  29.         <header>
  30.                 <div id="banner">
  31.                         <h1>Portal ogłoszeniowy</h1>
  32.                 </div>
  33.         </header>
  34.         <main>
  35.                 <div id="panel_lewy">
  36.                         <h2>Kategorie</h2>
  37.                         <ol>
  38.                                 <li>Książki</li>
  39.                                 <li>Muzyka</li>
  40.                                 <li>Filmy</li>
  41.                         </ol>
  42.                         <h2>Podkategorie</h2>
  43.                         <ol>
  44.                                 <li>Romans</li>
  45.                                 <li>Biografia</li>
  46.                                 <li>Kryminał</li>
  47.                                 <li>Komiks</li>
  48.                         </ol>
  49.                 </div>
  50.                 <div id="panel_prawy">
  51.                         <table>
  52.                                 <thead>
  53.                                         <tr>
  54.                                                 <th>Liczba ogłoszeń</th>
  55.                                                 <th>Cena ogłoszenia</th>
  56.                                                 <th>Bonus</th>
  57.                                         </tr>
  58.                                 </thead>
  59.                                 <tbody>
  60.                                         <tr>
  61.                                                 <td>1-10</td>
  62.                                                 <td>1 PLN</td>
  63.                                                 <td rowspan="3">Subskrypcja newslettera to upust 0,20 PLN na ogłoszenie</td>
  64.                                         </tr>
  65.                                         <tr>
  66.                                                 <td>11-50</td>
  67.                                                 <td>0,80 PLN</td>
  68.                                         </tr>
  69.                                        
  70.                                         <tr>
  71.                                                 <td>51 i więcej</td>
  72.                                                 <td>0,60 PLN</td>
  73.                                         </tr>
  74.                                         </tbody>
  75.                         </table>
  76.                        
  77.                                 <input type="number" id="liczba_ogłoszeń">
  78.                                 <input type="checkbox" id="subskrypcja"><br><br>
  79.                                 <input type="button" id="button" value="oblicz" onclick="oblicz()"><br><br>
  80.                
  81.                        
  82.                         <p id="wynik"></p>
  83.                 <script>
  84.                         var wynik_div = document.getElementById('wynik');
  85.                         function oblicz(){
  86.                                 var liczba = document.getElementById("liczba_ogłoszeń").value;
  87.                                 var upust = document.getElementById("subskrypcja");
  88.                        
  89.                        
  90.                                 if(liczba >= 1 && liczba <= 10){
  91.                                         if(upust.checked){
  92.                                                 var cena = (liczba*1)-(liczba*0.20);
  93.                                         }else{
  94.                                                 var cena = liczba*1;
  95.                                         }
  96.                                 }else if(liczba>=11 && liczba <= 50){
  97.                                         if(upust.checked){
  98.                                                 var cena = (liczba*0.80) - (liczba*0.20);
  99.                                         } else {
  100.                                                 var cena = liczba*0.80;
  101.                                         }
  102.                                 }else {
  103.                                         if(upust.checked){
  104.                                                 var cena = (liczba*0.60)-(liczba*0.20);
  105.                                         } else {
  106.                                                 var cena= liczba*0.60;
  107.                                         }
  108.                                 }
  109.                                
  110.                                 wynik_div.innerHTML = Math.round(cena*100)/100;
  111.                         }
  112.                        
  113.                        
  114.                 </script>
  115.                 </div>
  116.         </main>
  117.         <footer>
  118.                 &copy; INCOGNITO
  119.         </footer>
  120. </body>
  121. </html>