Scribd
Upload
13 views4 pages

Texto

The document outlines the design and structure of a user interface for the 'Zenith Tool UI', featuring a profile section, controls for various functionalities, and a footer. It includes styles for layout, colors, and elements such as checkboxes and sliders. The UI is designed to be visually appealing and user-friendly, with a focus on functionality for the user 'KrixXIT'.

Uploaded by

fr9wx9d4jh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views4 pages

Texto

The document outlines the design and structure of a user interface for the 'Zenith Tool UI', featuring a profile section, controls for various functionalities, and a footer. It includes styles for layout, colors, and elements such as checkboxes and sliders. The UI is designed to be visually appealing and user-friendly, with a focus on functionality for the user 'KrixXIT'.

Uploaded by

fr9wx9d4jh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<html lang="en"><head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zenith Tool UI</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #101010;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.wrapper {
width: 90%;
max-width: 1000px;
background: #1c1c1c;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
}

/* Header style */
.header {
background: linear-gradient(135deg, #3b3b3b, #4a4a4a);
padding: 20px;
text-align: center;
color: #fff;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
}

/* Profile Section */
.profile-section {
display: flex;
justify-content: center;
padding: 30px;
background: #2c2c2c;
border-top: 2px solid #444;
}

.profile-section img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid #fff;
}
.profile-section .user-info {
margin-left: 20px;
color: #fff;
}

.profile-section .user-info p {
font-size: 18px;
margin-bottom: 8px;
}

.profile-section .user-info .status {


color: lime;
}

/* Controls Section */
.controls-section {
background: #242424;
padding: 20px;
flex-grow: 1;
overflow-y: auto;
}

.control-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.control-group label {
color: #ddd;
font-size: 16px;
}

.control-group input[type="checkbox"] {
transform: scale(1.3);
}

.slider-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.slider-container input[type="range"] {
width: 70%;
background: #333;
border-radius: 5px;
outline: none;
height: 6px;
}

.slider-container input[type="range"]:focus {
background: #444;
}

.footer {
background: #333;
padding: 10px;
text-align: center;
color: #aaa;
font-size: 14px;
}

.footer a {
color: #bbb;
text-decoration: none;
}
</style>
</head>
<body>

<div class="wrapper">
<div class="header">
Zenith Tool UI
</div>

<!-- Profile Section -->


<div class="profile-section">
<img
src="https://media-hosting.imagekit.io//89c6ac8caa7245fc/IMG_0887_Original.jpeg?
Expires=1832358849&amp;Key-Pair-
Id=K2ZIVPTIP2VGHC&amp;Signature=VZ7T3cT5~Tuh~qhGenBgxnqqiy-
drbNaoN4e8h7U0aZyLO7p8c4w8R3PbGFS6bMHhCoZon866YDkqLfI9DJZjaVPpyfV0pYjXfz~6iyW6jPnS9
FZnAeLdzkCpQLYctw5zdJNcdPLbspnjSmugaJ3URh7QxFFmAhYvWKFfrZ9Tfdh-
4N4lOlFLLnj1GzN1Yvlmhs91-LV4G4PwzCKxE2CA-TIk0-
ZEO9tiaLPWYUol03EDr2ALFQcNTFTEfhCPojK6rfAM8rof41eb~8Ambnh2okWTbtRK-
HyhgymjD7mIwpSqw-WylernuwkZHoh6pyrGHAmVy~-ACuuqexBG3FgQg__" alt="User Avatar">
<div class="user-info">
<p><strong>User:</strong> KrixXIT</p>
<p><strong>Expired:</strong> 30 days</p>
<p><strong>Status:</strong> <span class="status">online</span></p>
</div>
</div>

<!-- Controls Section -->


<div class="controls-section">
<div class="control-group">
<label for="xera-xiters">Zenith XITERS</label>
<input type="checkbox" id="xera-xiters">
</div>
<div class="control-group">
<label for="xera-aimbot">Zenith AIMBOT</label>
<input type="checkbox" id="xera-aimbot">
</div>
<div class="control-group">
<label for="xera-aimlock">Zenith AIMLOCK</label>
<input type="checkbox" id="xera-aimlock">
</div>

<div class="slider-container">
<label for="aim-pov">AIM POV:</label>
<input type="range" id="aim-pov" min="0" max="100">
</div>
<div class="slider-container">
<label for="dpi">DPI:</label>
<input type="range" id="dpi" min="0" max="100">
</div>

<div class="control-group">
<label><input type="checkbox"> Secure servers</label>
<label><input type="checkbox"> Bypass</label>
</div>
<div class="control-group">
<label><input type="checkbox"> Anti Detected</label>
<label><input type="checkbox"> 80% Recoil</label>
</div>
</div>

<!-- Footer -->


<div class="footer">
<p>Made by <a href="#">KrixXIT</a></p>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
console.log("UI loaded successfully!");
});
</script>

</body></html>

You might also like