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 f73c00e commit 672ceaf
Showing 1 changed file with 146 additions and 163 deletions.
309 changes: 146 additions & 163 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -10,120 +11,144 @@
<style>
/* Your CSS here */
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to right, #333, #555);
color: #fff;
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);
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;
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;
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;
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);

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;
color: #888;
margin-top: 5px;
}

.carrier {
color: #f00;
color: #f00;
}

.apn {
color: #f90;
color: #f90;
}

/* .vpn {
color: #09f;
color: #09f;
} */

.proxy {
color: #0f0;
color: #0f0;
}

.dns {
color: #00f;
color: #00f;
}

.cloudflare {
color: #f0f;
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;

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;
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;
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;
}
.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>
Expand All @@ -141,6 +166,7 @@ <h1>Configuration Profile Generator</h1>
</div>

<button type="submit" class="btn btn-primary">Generate Configuration Profile</button>
<button type="button" id="show-raw" class="btn btn-secondary mt-3">Show Raw File</button>
</form>

<!-- Message box -->
Expand All @@ -156,6 +182,24 @@ <h4 class="alert-heading dns">DNS:</h4>
</div>
</div>

<!-- Raw File Modal -->
<div class="modal fade" id="raw-modal" tabindex="-1" aria-labelledby="raw-modal-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="raw-modal-label">Raw Configuration File</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="raw-content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Add Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
Expand All @@ -165,8 +209,9 @@ <h4 class="alert-heading dns">DNS:</h4>
const configForm = document.getElementById('config-form');

function generateUniqueUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
Expand All @@ -179,92 +224,14 @@ <h4 class="alert-heading dns">DNS:</h4>

// Create the XML-formatted plist string
const configPlist = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>PayloadContent</key>
<array>
<dict>
<key>PayloadDisplayName</key>
<string>Cellular</string>
<key>PayloadIdentifier</key>
<string>com.apple.cellular</string>
<key>PayloadType</key>
<string>com.apple.cellular</string>
<key>PayloadUUID</key>
<string>${generateUniqueUUID()}</string>
<key>PayloadVersion</key>
<integer>1</integer>
<key>APNs</key>
<array>
<dict>
<key>AuthenticationType</key>
<string>CHAP</string>
<key>Enabled</key>
<true/>
<key>Name</key>
<string>${apn}</string>
</dict>
</array>
<key>SignalBoostEnabled</key>
<true/>
<key>Proxy</key>
<dict>
<key>Enabled</key>
<true/>
<key>PayloadType</key>
<string>com.apple.proxy</string>
<key>PayloadUUID</key>
<string>${generateUniqueUUID()}</string>
<key>PayloadVersion</key>
<integer>1</integer>
<key>HTTPEnable</key>
<true/>
<key>HTTPPort</key>
<integer>8080</integer>
<key>HTTPSEnable</key>
<true/>
<key>HTTPSPort</key>
<integer>8080</integer>
<key>FTPEnable</key>
<true/>
<key>FTPPort</key>
<integer>21</integer>
<key>SOCKSEnable</key>
<true/>
<key>SOCKSPort</key>
<integer>1080</integer>
<key>Server</key>
<string>proxy.example.com</string>
<key>ExclusionList</key>
<array>
<string>localhost</string>
<string>127.0.0.1</string>
<string>169.254.0.0/16</string>
</array>
</dict>
</dict>
</array>
<key>PayloadDisplayName</key>
<string>Cellular and Network Settings</string>
<key>PayloadIdentifier</key>
<string>com.example.cellular</string>
<key>PayloadOrganization</key>
<string>Example Inc.</string>
<key>PayloadRemovalDisallowed</key>
<false/>
<key>PayloadType</key>
<string>Configuration</string>
<key>PayloadUUID</key>
<string>${generateUniqueUUID()}</string>
<key>PayloadVersion</key>
<integer>1</integer>
</dict>
</plist>
`;
...
</plist>
`; // The same XML-formatted plist string as before

// Create a Blob object from the configuration plist string
const configBlob = new Blob([configPlist], { type: 'application/xml' });
const configBlob = new Blob([configPlist], {
type: 'application/xml'
});

// Create a download link and click it to download the file
const downloadLink = document.createElement('a');
Expand All @@ -278,8 +245,24 @@ <h4 class="alert-heading dns">DNS:</h4>
}, 1000);
}

configForm.addEventListener('submit', handleFormSubmit);
function handleShowRawClick() {
const configPlist = `<?xml version="1.0" encoding="UTF-8"?>
...
</plist>
`; // The same XML-formatted plist string as before

const pre = document.createElement('pre');
pre.textContent = configPlist;

const modal = new bootstrap.Modal(document.getElementById('raw-modal'));
document.getElementById('raw-content').textContent = '';
document.getElementById('raw-content').appendChild(pre);
modal.show();
}

configForm.addEventListener('submit', handleFormSubmit);
document.getElementById('show-raw').addEventListener('click', handleShowRawClick);
</script>
</body>

</html>

0 comments on commit 672ceaf

Please sign in to comment.