Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update index.html #949

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #949

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 133 additions & 93 deletions solutions/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="/_vercel/insights/script.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css"
/>
<title>Vercel HTML Starter</title>
<meta
name="description"
content="High-performance HTML based website template."
/>
</head>
<body>
<h1>Vercel HTML Starter</h1>
<p>
This template is a simple, but powerful single
<code>index.html</code> file deployed to
<a href="https://vercel.com">Vercel</a>. When your site is deployed, all
static assets (like HTML, JavaScript, CSS, images, and more) are deployed
globally to every
<a href="https://vercel.com/docs/concepts/edge-network/overview"
>Vercel Edge Network</a
>
region.
</p>
<h2>Simple, privacy-friendly analytics</h2>
<p>
Want to understand your visitor traffic? Vercel Analytics gives you
first-party, privacy-friendly traffic analytics for your HTML site. This
template is already configured using the following script:
</p>
<pre><code>&lt;script defer src="/_vercel/insights/script.js"&gt;&lt;/script&gt;</code></pre>
<p>
Learn more about
<a href="https://vercel.com/analytics">Vercel Analytics</a>.
</p>
<h2>Integrated with git</h2>
<p>
Deploying updates to your site is as simple as
<code>git push</code> thanks to Vercel's advanced
<a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
Support for GitHub, GitLab, Bitbucket is zero-configuration, and with the
flexible Vercel CLI and API, you can integrate with any tool possible.
</p>
<p>
Learn more about
<a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
</p>
<h2>Fast <code>gzip</code> compression</h2>
<p>
To help ensure the smallest possible file sizes for your static assets,
the Vercel Edge Network compresses files by default using
<code>gzip</code>. You can also optionally use
<code>brotli</code> compressesion if you prefer.
</p>
<p>
Learn more about
<a href="https://vercel.com/docs/concepts/edge-network/compression"
>compression</a
>.
</p>
<h2>Advanced routing configuration</h2>
<p>
Vercel gives you a variety of ways to configure the routing of your
website. For example, adding redirects, rewrites, or headers to your page.
While you can use <code>vercel.json</code> to define these through JSON,
you can also express your routing configuration as code using
<a href="https://vercel.com/docs/concepts/functions/edge-middleware"
>Vercel Edge Middleware</a
>.
</p>
<p>
Middleware runs before the
<a href="https://vercel.com/docs/concepts/edge-network/caching"
>Vercel Edge Network Cache</a
>, so you can configure routing exactly as your application needs. For
example, this template uses <code>middleware.js</code> defined in the root
of the repository to add additional security headers to the site:
</p>
<pre><code>referrer-policy: origin-when-cross-origin
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-content-type-options: nosniff
x-dns-prefetch-control: on
x-frame-options: DENY</code></pre>
<p>
Learn more about
<a href="https://vercel.com/docs/concepts/functions/edge-middleware"
>Vercel Edge Middleware</a
>.
</p>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Reader</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
h1 {
color: #333;
}
input[type="file"], input[type="text"] {
display: block;
margin: 10px auto;
font-size: 16px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
input[type="submit"], button {
background-color: #5051F9;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
margin-top: 10px;
}
input[type="submit"]:hover, button:hover {
background-color: #3e3ec7;
}
input[type="submit"]:active, button:active {
background-color: #2c2c9f;
}
button {
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>QR Code Reader</h1>
<form id="qr-form" enctype="multipart/form-data" action="http://api.qrserver.com/v1/read-qr-code/" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<input name="file" type="file" accept="image/*" required />
<input type="submit" value="Read QR code" />
</form>

<div id="output-fields" style="display:none;">
<input type="text" id="macid" name="macid" placeholder="MAC ID" readonly />
<input type="text" id="deviceid" name="deviceid" placeholder="Device ID" readonly />
<input type="text" id="gsmimei" name="gsmimei" placeholder="GSM IMEI" readonly />
<input type="text" id="sensorid" name="sensorid" placeholder="SENSOR ID" readonly />
<input type="text" id="simno" name="simno" placeholder="SIM NO" readonly />
<button id="submit-data">Submit Data</button>
</div>
</div>

<script>
document.getElementById('qr-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting the default way

const formData = new FormData(this);

fetch('http://api.qrserver.com/v1/read-qr-code/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const parsedData = data[0].symbol[0].data;
const macid = parsedData.match(/MAC ID\s*:\s*([^\s]+)/)[1];
const deviceid = parsedData.match(/Device ID\s*:\s*([^\s]+)/)[1];
const gsmimei = parsedData.match(/GSM IMEI\s*:\s*([^\s]+)/)[1];
const sensorid = parsedData.match(/SENSOR ID\s*:\s*([^\s]+)/)[1];
const simno = parsedData.match(/SIM NO\s*:\s*([^\s]+)/)[1];

document.getElementById('macid').value = macid;
document.getElementById('deviceid').value = deviceid;
document.getElementById('gsmimei').value = gsmimei;
document.getElementById('sensorid').value = sensorid;
document.getElementById('simno').value = simno;

document.getElementById('output-fields').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
});
});

document.getElementById('submit-data').addEventListener('click', function() {
const dataToSend = {
macid: document.getElementById('macid').value,
deviceid: document.getElementById('deviceid').value,
gsmimei: document.getElementById('gsmimei').value,
sensorid: document.getElementById('sensorid').value,
simno: document.getElementById('simno').value
};

fetch('YOUR_BACKEND_ENDPOINT_URL', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(result => {
alert('Data submitted successfully!');
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>