Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
AiGptCode authored May 17, 2024
1 parent 550ad74 commit 2d89628
Showing 1 changed file with 58 additions and 50 deletions.
108 changes: 58 additions & 50 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,59 +8,80 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1L_dstPt3HV5HzF6Gvk/e3s4Wz6iJgD/+ub3o" crossorigin="anonymous">
<!-- Add custom CSS styles -->
<style>
/* Added 3D effect to the container */
.container {
transform: perspective(600px) rotateY(10deg);
transition: transform 0.5s ease;
}
.container:hover {
transform: perspective(600px) rotateY(-10deg);
}
/* Added animation to the h1 tag */
h1 {
animation: fadeIn 2s ease-in-out both;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Previous styles */
body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
background: linear-gradient(to right, #333, #555);
color: #fff;
}
.container {
max-width: 800px;
margin-top: 50px;
padding: 30px;
background-color: #fff;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
h1 {
text-align: center;
margin-bottom: 50px;
color: #333;
color: #fff;
font-weight: 300;
text-shadow: 2px 2px #000;
}
label {
font-weight: 500;
color: #333;
display: block;
margin-bottom: 5px;
position: relative;
}
label::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transition: transform 0.3s ease-out;
}
label:hover::before, input:focus + label::before, select:focus + label::before, textarea:focus + label::before {
transform: scaleX(1);
}
.form-text {
color: #888;
margin-top: 5px;
}
.carrier {
color: #f00;
}
.apn {
color: #f90;
}
.vpn {
color: #09f;
}
.proxy {
color: #0f0;
}
.dns {
color: #00f;
}
.cloudflare {
color: #f0f;
}
input, select, textarea {
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
padding: 10px;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
margin-bottom: 20px;
}
button {
background-color: #333;
background-color: #f00;
color: #fff;
border-radius: 10px;
padding: 10px 20px;
Expand All @@ -69,9 +90,14 @@
transition: background-color 0.3s ease;
font-size: 14px;
font-weight: 500;
margin-top: 20px;
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
button:hover {
background-color: #555;
background-color: #f30;
}
/* Add responsive styles for mobile devices */
@media only screen and (max-width: 600px) {
Expand All @@ -96,32 +122,14 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- Add AOS library for animations on scroll -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK+3W+pPWXo5H/MILvTsgcJwgKLXQVgS6vhIMf3CduodZ9CuTlXWhs+lF7Ei1EC1hKlNf/7ls3f4ODGmMwdww==" crossorigin="anonymous" />
</head>
<body>
<div class="container" data-aos="fade-up">
<h1>Configuration Profile Generator</h1>
<!-- Add form for configuration generator -->
<form>
<!-- Previous form fields -->
</form>
<!-- Add Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gybBud7TlRbs/ic4AwGcFZOxg5DpPt8EgeUIgIwzjWfXQKWA4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<!-- Add AOS library for animations on scroll -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-300+zG6cpeMf4JNljs/5cyWp2k23PkOUlW3cG5Ksb8PkH5r4uP8rT6mw2boOcJ2S5Ty3tXoVvGzF6s9xmMzDw==" crossorigin="anonymous"></script>
<script>
AOS.init();
</script>
</body>
</html>
<div class="container">
<h1>Configuration Profile Generator</h1>
<!-- Add form for configuration generator -->
<form>
<div class="mb-3">
<label for="carrier" class="form-label carrier carrier">Carrier:</label>
<label for="carrier" class="form-label carrier">Carrier:</label>
<select id="carrier" class="form-select">
<option value="mcinet">MCI</option>
<option value="irancell">Irancell</option>
Expand Down

0 comments on commit 2d89628

Please sign in to comment.