Update index.html
Browse files- index.html +72 -18
index.html
CHANGED
|
@@ -1,19 +1,73 @@
|
|
| 1 |
-
<!
|
| 2 |
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<title>Web NFC Reader</title>
|
| 5 |
+
<style>
|
| 6 |
+
body {
|
| 7 |
+
font-family: sans-serif;
|
| 8 |
+
}
|
| 9 |
+
#status {
|
| 10 |
+
margin-top: 10px;
|
| 11 |
+
font-weight: bold;
|
| 12 |
+
}
|
| 13 |
+
#nfcData {
|
| 14 |
+
margin-top: 10px;
|
| 15 |
+
border: 1px solid #ccc;
|
| 16 |
+
padding: 10px;
|
| 17 |
+
white-space: pre-wrap;
|
| 18 |
+
}
|
| 19 |
+
</style>
|
| 20 |
+
</head>
|
| 21 |
+
<body>
|
| 22 |
+
<h1>Web NFC Reader</h1>
|
| 23 |
+
<p>Поднесите NFC-карту к устройству.</p>
|
| 24 |
+
<button id="startButton">Начать сканирование NFC</button>
|
| 25 |
+
<p id="status"></p>
|
| 26 |
+
<div id="nfcData"></div>
|
| 27 |
+
|
| 28 |
+
<script>
|
| 29 |
+
const startButton = document.getElementById('startButton');
|
| 30 |
+
const statusDiv = document.getElementById('status');
|
| 31 |
+
const nfcDataDiv = document.getElementById('nfcData');
|
| 32 |
+
|
| 33 |
+
startButton.addEventListener('click', async () => {
|
| 34 |
+
statusDiv.textContent = 'Сканирование... Пожалуйста, поднесите карту.';
|
| 35 |
+
nfcDataDiv.textContent = '';
|
| 36 |
+
|
| 37 |
+
if ('NDEFReader' in window) {
|
| 38 |
+
try {
|
| 39 |
+
const ndef = new NDEFReader();
|
| 40 |
+
await ndef.scan();
|
| 41 |
+
|
| 42 |
+
ndef.onreadingerror = () => {
|
| 43 |
+
statusDiv.textContent = 'Ошибка чтения. Попробуйте еще раз.';
|
| 44 |
+
};
|
| 45 |
+
|
| 46 |
+
ndef.onreading = event => {
|
| 47 |
+
const { message, serialNumber } = event;
|
| 48 |
+
statusDiv.textContent = 'Карта успешно считана!';
|
| 49 |
+
let dataString = `Серийный номер: ${serialNumber || 'Недоступен'}\n`;
|
| 50 |
+
|
| 51 |
+
for (const record of message.records) {
|
| 52 |
+
dataString += `\nТип записи: ${record.recordType}\n`;
|
| 53 |
+
if (record.recordType === 'text') {
|
| 54 |
+
const textDecoder = new TextDecoder('utf-8');
|
| 55 |
+
dataString += `Данные (текст): ${textDecoder.decode(record.data)}\n`;
|
| 56 |
+
} else if (record.recordType === 'uri') {
|
| 57 |
+
dataString += `Данные (URI): ${record.data.buffer ? new TextDecoder('utf-8').decode(record.data) : 'Не декодируется'}\n`;
|
| 58 |
+
} else {
|
| 59 |
+
dataString += `Данные (другой тип): ${record.data ? Array.from(new Uint8Array(record.data.buffer)).map(b => b.toString(16).padStart(2, '0')).join(' ') : 'Нет данных'}\n`;
|
| 60 |
+
}
|
| 61 |
+
}
|
| 62 |
+
nfcDataDiv.textContent = dataString;
|
| 63 |
+
};
|
| 64 |
+
} catch (error) {
|
| 65 |
+
statusDiv.textContent = `Ошибка сканирования: ${error}`;
|
| 66 |
+
}
|
| 67 |
+
} else {
|
| 68 |
+
statusDiv.textContent = 'Web NFC API не поддерживается в вашем браузере.';
|
| 69 |
+
}
|
| 70 |
+
});
|
| 71 |
+
</script>
|
| 72 |
+
</body>
|
| 73 |
+
</html>
|