<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<style>
body, html {
height: 100%; /* Full height to cover the entire page */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
background: url('resources/images/login.jpg') no-repeat center center fixed;
background-size: cover; /* Ensure the background covers the entire page */
}
.form-container {
position: absolute;
top: 3500%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Fine-tune the centering */
width: 445px; /* Width of the form */
height: 500px;
padding: 33px; /* Internal padding */
background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for the form */
border-radius: 10px; /* Rounded borders */
}
.ui-inputfield, .ui-button {
width: 100%; /* Inputs and buttons occupy full container width */
margin-bottom: 10px; /* Space between fields */
}
.ui-input-icon-left i {
margin-right: 5px; /* Space between icon and input text */
}
.ui-button {
background-color: #007bff; /* Blue color for the button */
color: white;
}
.ui-button:hover {
background-color: #0056b3; /* Darker blue on hover */
}
</style>
</h:head>
<h:body>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
</html>