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 94b6077 commit 550ad74
Showing 1 changed file with 49 additions and 34 deletions.
83 changes: 49 additions & 34 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,62 +8,59 @@
<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: #333;
color: #fff;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin-top: 50px;
padding: 30px;
background-color: #444;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 50px;
color: #fff;
color: #333;
font-weight: 300;
}
label {
font-weight: 500;
display: block;
margin-bottom: 5px;
}
.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;
color: #333;
}
input, select, textarea {
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
padding: 10px;
font-size: 14px;
background-color: #555;
color: #fff;
}
button {
background-color: #f00;
background-color: #333;
color: #fff;
border-radius: 10px;
padding: 10px 20px;
Expand All @@ -74,7 +71,7 @@
font-weight: 500;
}
button:hover {
background-color: #f30;
background-color: #555;
}
/* Add responsive styles for mobile devices */
@media only screen and (max-width: 600px) {
Expand All @@ -99,8 +96,26 @@
<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 -->
Expand Down

0 comments on commit 550ad74

Please sign in to comment.