EXAMPLE FILE SAMPLE
sample.htm
PASTIKAN CTRL-A utk LABELLING NOTE-NOTE yg akan dilakukan Transfer Data
PASTIKAN KLIK "OPEN DOC" pada ARAH JAM 7 LAYAR
SETELAH FILE DOC DIBUKA
KONVERSI AKA SAVE dgn FORMAT .HTML
Generate System Report
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>System Report Generator</title>
<style>
body { font-family: 'Google Sans', sans-serif; padding: 40px; background: #f4f4f4; }
.controls { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 30px; }
/* Medium-Purple Theme Button Styling */
.gold-button {
display: inline-block;
background: linear-gradient(135deg, #d1c4e9, #b39ddb, mediumpurple);
border: 1px solid #7b1fa2;
color: #ffffff;
padding: 15px 30px;
margin: 5px;
border-radius: 25px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
font-weight: 700;
cursor: pointer;
text-align: center;
transition: transform 0.2s;
}
.gold-button:hover {
transform: scale(1.05);
background: mediumpurple;
}
#output { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.export-btn { margin-top: 20px; padding: 12px 25px; background: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer; display: none; }
</style>
</head>
<body>
<div class="controls">
<h2>Generate System Report</h2>
<input type="file" id="fileInput" accept=".html, .htm">
<button id="generateBtn" style="padding: 10px 20px; cursor: pointer;">Generate Report</button>
<button id="exportBtn" class="export-btn">Export Report HTML</button>
</div>
<div>EXAMPLE FILE SAMPLE
</div>
<a href="https://drive.google.com/file/d/18q375U19eV6t222vVLc0JCJjph0-3JAe/view?usp=sharing" target="_blank">sample.htm</a>
<div id="output"></div>
<script>
let uploadedDoc = null;
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const parser = new DOMParser();
uploadedDoc = parser.parseFromString(e.target.result, 'text/html');
alert("File loaded successfully.");
};
reader.readAsText(file);
});
document.getElementById('generateBtn').addEventListener('click', function() {
if (!uploadedDoc) return alert("Please select a file first!");
const output = document.getElementById('output');
output.innerHTML = '';
const headings = uploadedDoc.querySelectorAll('h1, h2, h3');
headings.forEach(heading => {
const btn = document.createElement('div');
btn.className = 'gold-button';
btn.innerText = heading.innerText;
output.appendChild(btn);
});
if (headings.length > 0) {
document.getElementById('exportBtn').style.display = 'inline-block';
}
});
document.getElementById('exportBtn').addEventListener('click', function() {
const outputContent = document.getElementById('output').innerHTML;
const fullHtml = `
<html>
<head><style>
.gold-button { display: inline-block; background: linear-gradient(135deg, #d1c4e9, #b39ddb, mediumpurple); border: 1px solid #7b1fa2; color: #ffffff; padding: 15px 30px; margin: 5px; border-radius: 25px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); font-weight: 700; text-align: center; }
</style></head>
<body><div style="display: flex; flex-wrap: wrap; gap: 15px;">${outputContent}</div></body>
</html>`;
const blob = new Blob([fullHtml], {type: 'text/html'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'generated-report.html';
link.click();
});
</script>
</body>
</html>
Comments
Post a Comment