<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" rel="stylesheet"> <div class="nav-side-menu"> <div class="brand">Safe Conduct v1.0</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fas fa-tachometer-alt fa-lg"></i> Home </a> </li> <li> <a href="#"> <i class="fas fa-inbox fa-lg"></i> Safe Conducts </a> </li> <li> <a href="#"> <i class="fas fa-user-tie fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> <li> <a href="#"> <i class="fas fa-globe fa-lg"></i> Information </a> </li> </ul> </div> </div> <div class="container"> <h2 class="">&nbsp</h2> <div class="row "> <div class="col-12 col-md-8 col-lg-6 pb-5"> <div class="card border-primary rounded-0"> <!--Form with header--> <form action="#" th:action="@{/citizen-view-sc}" th:object="${user}" method="post"> <div class="card-header p-0"> <div class="bg-info text-white text-center py-2"> <h3><i class="fa fa-envelope"></i><p data-th-text="#{label.general.draftsc.title}"> Verify the details below</p></h3> <p class="m-0" data-th-text="#{label.general.draftsc.subtitle}">It's important that the information is accurate</p> </div> </div> <div class="card-body p-3"> <!-- add --> <div class="form-group"> <div class="input-group-text text-center" data-th-text="#{label.general.advice}">General Advice</div> </div> </div> <div class="card-body p-3"> <div class="form-group"> <div class="input-group-text text-center" data-th-text="#{label.general.citizen.information}">Citizen Information</div> </div> <!--Body--> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.name}">Name</div> </div> <input type="text" class="form-control" id="name" name="name" th:field="${safeConduct.citizenName}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.surname1}">Surname 1</div> </div> <input type="text" class="form-control" id="citizenSurname1" name="citizenSurname1" th:field="${safeConduct.CitizenSurname1}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.surname2}">Surname 2</div> </div> <input type="text" class="form-control" id="citizenSurname2" name="citizenSurname2" th:field="${safeConduct.CitizenSurname2}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.idcard}">Id Card</div> </div> <input type="text" class="form-control" id="citizenPhysicalId" name="citizenPhysicalId" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.city}">City</div> </div> <input type="text" class="form-control" id="citizenCity" name="citizenCity" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.citizen.province}">Province</div> </div> <input type="text" class="form-control" id="citizenProvince" name="citizenProvince" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <!-- div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">E-mail</div> </div> <input type="text" class="form-control" id="email" name="email" th:field="${safeConduct.email}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">GSM</div> </div> <input type="text" class="form-control" id="gsm" name="gsm" th:field="${safeConduct.gsm}" readonly></input> </div> </div --> </div> <div class="card-body p-3"> <div class="form-group"> <div class="input-group-text text-center" data-th-text="#{label.general.destination.address}">Destination Address</div> </div> <!--Body--> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.destination.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.destination.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.destination.city}">City</div> </div> <input type="text" class="form-control" id="citizenCity" name="citizenCity" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.destination.province}">Province</div> </div> <input type="text" class="form-control" id="citizenProvince" name="citizenProvince" th:field="${safeConduct.citizenPhysicalId}" readonly></input> </div> </div> </div> <div class="card-body p-3"> <div class="form-group"> <div class="input-group-text text-center" data-th-text="#{label.general.company}">Company Information</div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.name}">Company Name</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.reasonCompany}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.shift}">Shift</div> </div> <input type="text" class="form-control" id="companyShift" name="companyShift" th:field="${safeConduct.companyShift}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.addressReasonStreet}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.address}">Address</div> </div> <input type="text" class="form-control" id="citizenAddress2" name="citizenAddress2" th:field="${safeConduct.addressReasonStreetNo}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.city}">City</div> </div> <input type="text" class="form-control" id="citizenCity" name="citizenCity" th:field="${safeConduct.addressReasonTown}" readonly></input> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text" data-th-text="#{label.company.province}">Province</div> </div> <input type="text" class="form-control" id="citizenProvince" name="citizenProvince" th:field="${safeConduct.addressReasonProvince}" readonly></input> </div> </div> <div class="text-center"> <input type="submit" value="Enviar" class="btn btn-info btn-block rounded-0 py-2"></input> </div> </div> </div> </form> <!--Form with header--> </div> </div> </div>

@charset "ISO-8859-1"; @import url("https://use.fontawesome.com/releases/v5.0.11/css/all.css"); .Button { height: 50px; position: relative; background: #ccc; padding-top: 10px; padding-bottom: 10px; padding-left: 0px; left: 0px; right: 0px; width: 100%; overflow: hidden; } .nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color:rgb(23, 162, 184); position: fixed; top: 0px; padding-left: 0px; height: 100%; width: 17%; color: #e1ffff; } .nav-side-menu .brand { background-color: rgb(23, 162, 184); line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: 'Font Awesome 5 Free'; content: "\f13a"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; font-weight: 900; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: 'Font Awesome 5 Free'; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; font-weight: 900; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #84a3c6; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; }