Update Demo_Password_Change.html

This commit is contained in:
Zarcolio
2024-01-29 16:23:39 +01:00
committed by GitHub
parent c15e6368b2
commit d0b550eb01
@@ -15,12 +15,18 @@
align-items: center;
height: 100vh;
}
.container-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
margin: 10px; /* Add some spacing between the containers */
}
h1 {
text-align: center;
@@ -37,7 +43,7 @@
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
padding-left: 10px; /* Add equal padding on the left and right */
padding-left: 10px;
padding-right: 10px;
}
button {
@@ -61,21 +67,38 @@
.error {
color: #ff0000;
}
/* Visually appealing text */
.appealing-text {
text-align: left;
font-size: 18px;
font-weight: bold;
color: #ff0000;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Change Password</h1>
<form onsubmit="return validateForm()">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" name="newPassword" required>
<br>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<br>
<button type="submit">Change Password</button>
</form>
<div id="message" class="message"></div>
<div class="container-wrapper">
<div class="container">
<!-- Visually appealing text -->
<div class="appealing-text"></br>Imagine an unlocked computer. This computer is logged on to an online service. And this service allows changing passwords without the current one.</div>
</div>
<div class="container">
<!-- Rest of your HTML content -->
<h1>Change Password</h1>
<form onsubmit="return validateForm()">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" name="newPassword" required>
<br>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<br>
<button type="submit">Change Password</button>
</form>
<div id="message" class="message"></div>
</div>
</div>
<script>