Untitled

 avatar
unknown
plain_text
2 years ago
13 kB
3
Indexable
<%-- 
    Document   : napraviHosting
    Created on : Feb 5, 2023, 11:30:32 PM
    Author     : PC
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="text-center">Novi Hosting</h1>
        <h3 class="text-center">Izaberite korisnika</h3>
        <div class="center-block mx-auto" style="text-align:center; width: 400px">
            <select class="form-select" aria-label="Default select example">
            <c:forEach items="${nalozi}" var="nal">
                <option value="${nal.id}">${nal.ime} ${nal.prezime}</option>
            </c:forEach>
            </select>
            <h3 class="text-center">Izaberite tip hostinga</h3>
            <input type="radio" name="tip" id="fizicka" value="F" onchange="provera()" checked>
            <label for="fizicka">Fizička mašina</label>
            <input type="radio" name="tip" id="virtuelna" value="V" onchange="provera()">
            <label for="virtuelna">Virtuelna mašina</label>
        </div>
        
        
        
        
        <section id="thumbnails">
            <div class="container mt-5">
                <div class="row mx-5 px-5">
                    <div id="period" class="col-md-7 center-block" style="text-align: center">
                        <h5>Period koriscenja</h5>
                        <div class="cekboks d-inline-block mx-2">
                            <input name ="period" type="radio" id="d1">
                            <p>1 mesec</p>
                            <p>cena: besplatno</p>
                            <p></p>
                        </div>
                        <div class="cekboks d-inline-block mx-2">
                            <input name="period" type="radio" id="d2" value="1000" checked>
                            <p>4 meseca</p>
                            <p>cena: 1000rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-2">
                            <input name="period" type="radio" id="d3" value="1500" >
                           <p>6 meseci</p>
                           <p>cena: 1500rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-2" value="2000">
                            <input name="period" type="radio" id="d4">
                            <p>12 meseci</p>
                            <p>cena: 2000rsd</p>
                        </div>
                    </div>
                    <div id="os" class="col-md-5 center-block" style="text-align: center">
                        <h5>Operativni sistem</h5>
                        <select name="os" class="form-select" aria-label="Default select example">
                            <option>Windows</option>
                            <option>Linux</option>
                        </select>
                    </div>
                </div>
                
                <div class="row mx-5">
                    <div id="procesor" class="col-md-12 center-block" style="text-align: center">
                        <h5>Odabir procesora</h5>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="procesor" type="radio" id="d1" checked>
                            <p>Standarno</p>
                            <p>besplatno</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="procesor" type="radio" id="d2">
                            <p>+1 procesora</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="procesor" type="radio" id="d3">
                           <p>+2 procesora</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="procesor" type="radio" id="d4">
                            <p>+4 procesora</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="procesor" type="radio" id="d4">
                            <p>+5 procesora</p>
                        </div>
                    </div>
                </div>
                
                <div class="row mx-5">
                    <div id="ram" class="col-md-12 center-block" style="text-align: center">
                        <h5>Odabir RAM-a</h5>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="ram" type="radio" id="d1" checked>
                            <p>Standarno</p>
                            <p>besplatno</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="ram" type="radio" id="d2">
                            <p>+1 procesor</p>
                            <p>300rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="ram" type="radio" id="d3">
                           <p>+2 procesora</p>
                           <p>600rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="ram" type="radio" id="d4">
                            <p>+3 procesora</p>
                            <p>800rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="ram" type="radio" id="d4">
                            <p>+4 procesora</p>
                            <p>1000rsd</p>
                        </div>
                    </div>
                </div>
                
                <div class="row mx-5">
                    <div id="disk" class="col-md-12 center-block" style="text-align: center">
                        <h5>Odabir kolicine diska</h5>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="disk" type="radio" id="d1" checked>
                            <p>Standarno</p>
                            <p>besplatno</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="disk" type="radio" id="d2">
                            <p>+1 disk</p>
                            <p>300rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="disk" type="radio" id="d3">
                           <p>+2 diska</p>
                           <p>600rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="disk" type="radio" id="d4">
                            <p>+3 diska</p>
                            <p>800rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="disk" type="radio" id="d4">
                            <p>+4 diska</p>
                            <p>1000rsd</p>
                        </div>
                    </div>
                </div>
                
                <div class="row mx-5">
                    <div id="protok" class="col-md-12 center-block" style="text-align: center">
                        <h5>Odabir protoka</h5>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="prtok" type="radio" id="d1" checked>
                            <p>Standarno</p>
                            <p>besplatno</p>
                            
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="protok" name="prootok" type="radio" id="d2">
                            <p>+10TB</p>
                            <p>300rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="protok" type="radio" id="d3">
                           <p>+20TB</p>
                           <p>600rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="protok" type="radio" id="d4">
                            <p>+30TB</p>
                            <p>800rsd</p>
                        </div>
                        <div class="cekboks d-inline-block mx-5">
                            <input name="protok" type="radio" id="d4">
                            <p>+40TB</p>
                            <p>1000rsd</p>
                        </div>
                    </div>
                </div>
                
            </div>
        </section>
        
        
        
        <script>
            let div = document.querySelector("#thumbnails");
            function provera(){
                div.innerHTML = "";
                if(document.querySelector("#fizicka").checked){
                div.innerHTML +=`
                    <div class="container">
                    <div class="row mt-5"> 
                    <div class="col-12 col-md-6 col-lg-4 pb-4"> 

                      <div class="card bg-secondary">
                        <div class="card-body text-center">
                          <h5 class="card-title">E3-1240v5</h5>
                          <p class="card-text">Intel Xeon e3-1240</p>
                          <p class="card-text">Min 16GB / Max 32GB RAM</p>
                          <p class="card-text">4x Disc drives</p>
                          <p class="card-text">500Gbps DDoS Protection</p>
                          <p class="card-text">RAID Software</p>
                          <form action="NapraviHosting" method="POST">
                              <button name="fmasina" value="1" type="submit" class="btn btn-outline-light">Kupi</button>
                          </form>
                        </div>
                      </div>

                    </div>
                    <div class="col-12 col-md-6 col-lg-4 pb-4"> 

                      <div class="card bg-secondary">
                        <div class="card-body text-center">
                          <h5 class="card-title">E4-2340v6</h5>
                          <p class="card-text">AMD Ryzen 5 5600X 3.7GHz (4.6GHz)</p>
                          <p class="card-text">Min 32GB / Max 64GB RAM</p>
                          <p class="card-text">6x Disc drives</p>
                          <p class="card-text">800Gbps DDoS Protection</p>
                          <p class="card-text">RAID Software</p>
                          <form action="NapraviHosting" method="POST">
                              <button name="fmasina" value="2" type="submit" class="btn btn-outline-light">Kupi</button>
                          </form>
                        </div>
                      </div>

                    </div>
                    <div class="col-12 col-md-6 col-lg-4 pb-4"> 

                      <div class="card bg-secondary">
                        <div class="card-body text-center">
                          <h5 class="card-title">E5-3450v7</h5>
                          <p class="card-text">INTEL Core i5-11600K 3.9GHz (4.90 GHz) </p>
                          <p class="card-text">Min 64GB / Max 128GB RAM</p>
                          <p class="card-text">8x Disc drives</p>
                          <p class="card-text">1000 Gbps DDoS Protection</p>
                          <p class="card-text">RAID Software</p>
                          <form action="NapraviHosting" method="POST">
                              <button name="fmasina" value="3" type="submit" class="btn btn-outline-light">Kupi</button>
                          </form>
                        </div>
                      </div>

                    </div>
                  </div>
                  </div>
                    `;
                }else if(document.querySelector("#virtuelna").checked){
                div.innerHTML +=`
                    <form action="NapraviKorisnika" method="POST">
                        <input name="ime" placeholder="Ime odgovornog lica"><br>
                        <input name="prezime" placeholder="Prezime odgovornog lica"><br>
                        <input name="adresa" placeholder="Adresa (Sedište firme)"><br>
                        <input name="naziv" placeholder="Naziv firme"><br>
                        <button type="submit">Napravi korisnika</button>
                    </form>
                    `;
                }
            }
        </script>
    </body>
</html>
Editor is loading...