Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@AiGptCode
AiGptCode authored May 19, 2024
1 parent c992c05 commit 5f827e5
Showing 1 changed file with 217 additions and 39 deletions.
256 changes: 217 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,240 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Configuration Profile Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Add Bootstrap CSS CDN -->
<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>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to right, #333, #555);
color: #fff;
}
.container {
max-width: 800px;
margin-top: 50px;
padding: 30px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
h1 {
text-align: center;
margin-bottom: 50px;
color: #fff;
font-weight: 300;
text-shadow: 2px 2px #000;
}
label {
font-weight: 500;
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.5);
padding: 10px;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
margin-bottom: 20px;
}
button {
background-color: #f00;
color: #fff;
border-radius: 10px;
padding: 10px 20px;
border: none;
cursor: pointer;
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: #f30;
}
/* Add responsive styles for mobile devices */
@media only screen and (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 24px;
}
label {
font-size: 14px;
}
input, select, textarea {
font-size: 14px;
}
button {
font-size: 14px;
}
}
</style>
<!-- Add custom fonts from Google Fonts -->
<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">
</head>
<body>
<div class="container">
<h1>Configuration Profile Generator</h1>
<!-- Add form for configuration generator -->
<form id="config-form">
<!-- Carrier -->
<label for="carrier">Carrier:</label>
<select id="carrier" name="carrier">
<option value="">-- Select a carrier --</option>
<option value="mcinet">MCI</option>
<option value="irancell">Irancell</option>
<option value="rightel">RighTel</option>
</select>

<!-- APN -->
<label for="apn">APN:</label>
<input type="text" id="apn" name="apn">

<!-- APN Option -->
<label for="apn_option">APN Option:</label>
<select id="apn_option" name="apn_option">
<option value="">-- Select an APN option --</option>
<option value="hamrahaval">Hamrahaval</option>
<option value="irancell">Irancell</option>
<option value="rightel">RighTel</option>
</select>
<div class="mb-3">
<label for="apn" class="form-label apn">APN:</label>
<div id="apn-inputs">
<select id="apn" class="form-select">
<option value="">Automatic</option>
<option value="mcinet" data-carrier="mcinet">MCI</option>
<option value="irancell" data-carrier="irancell">Irancell</option>
<option value="rightel" data-carrier="rightel">RighTel</option>
</select>
<div class="form-text">Select the APN (Access Point Name) for your carrier. The default option is "Automatic", which will automatically select the APN based on your carrier.</div>
</div>
<div class="form-check">
<input type="checkbox" id="apn-toggle" class="form-check-input">
<label for="apn-toggle" class="form-check-label">Include APN in profile</label>
</div>
</div>

<!-- VPN -->
<label for="vpn_server">VPN Server:</label>
<input type="text" id="vpn_server" name="vpn_server">
<div class="mb-3">
<label for="vpn_server" class="form-label vpn">VPN Server (optional):</label>
<div id="vpn-inputs">
<input type="text" id="vpn_server" class="form-control">
<div class="form-text">Enter the hostname or IP address of your VPN server if you want to use a VPN connection. Leave this field blank if you don't want to use a VPN.</div>

<label for="vpn_username">VPN Username:</label>
<input type="text" id="vpn_username" name="vpn_username">
<label for="vpn_username" class="form-label vpn">VPN Username (optional):</label>
<input type="text" id="vpn_username" class="form-control">
<div class="form-text">Enter your VPN username if you want to use a VPN connection. Leave this field blank if you don't want to use a VPN.</div>

<label for="vpn_password">VPN Password:</label>
<input type="password" id="vpn_password" name="vpn_password">
<label for="vpn_password" class="form-label vpn">VPN Password (optional):</label>
<input type="password" id="vpn_password" class="form-control">
<div class="form-text">Enter your VPN password if you want to use a VPN connection. Leave this field blank if you don't want to use a VPN.</div>
</div>
<div class="form-check">
<input type="checkbox" id="vpn-toggle" class="form-check-input">
<label for="vpn-toggle" class="form-check-label">Include VPN in profile</label>
</div>
</div>

<!-- Proxy -->
<label for="proxy_server">Proxy Server:</label>
<input type="text" id="proxy_server" name="proxy_server">
<div class="mb-3">
<label for="proxy_server" class="form-label proxy">Proxy Server (optional):</label>
<div id="proxy-inputs">
<input type="text" id="proxy_server" class="form-control">
<div class="form-text">Enter the hostname or IP address of your proxy server if you want to use a proxy connection. Leave this field blank if you don't want to use a proxy.</div>

<label for="proxy_port">Proxy Port:</label>
<input type="number" id="proxy_port" name="proxy_port">
<label for="proxy_port" class="form-label proxy">Proxy Port (optional):</label>
<input type="text" id="proxy_port" class="form-control">
<div class="form-text">Enter the port number of your proxy server if you want to use a proxy connection. Leave this field blank if you don't want to use a proxy.</div>
</div>
<div class="form-check">
<input type="checkbox" id="proxy-toggle" class="form-check-input">
<label for="proxy-toggle" class="form-check-label">Include Proxy in profile</label>
</div>
</div>

<!-- DNS -->
<label for="dns_server">DNS Server:</label>
<input type="text" id="dns_server" name="dns_server">
<div class="mb-3">
<label for="dns_server" class="form-label dns">DNS Server (optional):</label>
<div id="dns-inputs">
<input type="text" id="dns_server" class="form-control" value="8.8.8.8">
<div class="form-text">Enter the hostname or IP address of your DNS server if you want to use a custom DNS server. Leave this field blank to use the default DNS server for your carrier.</div>
</div>
<div class="form-check">
<input type="checkbox" id="dns-toggle" class="form-check-input">
<label for="dns-toggle" class="form-check-label">Include DNS in profile</label>
</div>
</div>

<!-- Cloudflare -->
<label for="cloudflare_domain">Cloudflare Domain:</label>
<input type="text" id="cloudflare_domain" name="cloudflare_domain">
<div class="mb-3">
<label for="cloudflare_domain" class="form-label cloudflare">Cloudflare Domain (optional):</label>
<div id="cloudflare-inputs">
<input type="text" id="cloudflare_domain" class="form-control">
<div class="form-text">Enter the domain name for your Cloudflare account if you want to use Cloudflare's DNS servers. Leave this field blank if you don't want to use Cloudflare's DNS servers.</div>
</div>
<div class="form-check">
<input type="checkbox" id="cloudflare-toggle" class="form-check-input">
<label for="cloudflare-toggle" class="form-check-label">Include Cloudflare in profile</label>
</div>
</div>

<!-- Additional options -->
<div class="mb-3 form-check">
<input type="checkbox" id="enable_vpn" class="form-check-input">
<label for="enable_vpn" class="form-check-label">Enable VPN by default</label>
<div class="form-text">Check this box if you want the VPN connection to be enabled by default when you install the configuration profile. Leave this box unchecked if you want to manually enable the VPN connection.</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" id="enable_proxy" class="form-check-input">
<label for="enable_proxy" class="form-check-label">Enable proxy by default</label>
<div class="form-text">Check this box if you want the proxy connection to be enabled by default when you install the configuration profile. Leave this box unchecked if you want to manually enable the proxy connection.</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" id="remove_configuration" class="form-check-input">
<label for="remove_configuration" class="form-check-label">Remove configuration profile after uninstalling</label>
<div class="form-text">Check this box if you want the configuration profile to be removed from your device when you uninstall the app. Leave this box unchecked if you want the configuration profile to remain on your device after uninstalling the app.</div>
</div>

<button type="submit">Generate Configuration Profile</button>
<button type="submit" class="btn btn-primary">Generate Configuration Profile</button>
</form>
</div>
<script src="script.js"></script>

<!-- 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 custom JavaScript -->
<script>
// ...
</script>
</body>
</html>

0 comments on commit 5f827e5

Please sign in to comment.