Overview:
This code creates a web application for KaiOS devices that allows users to select multiple files, compress them into a single ZIP archive, and download it to their device. Here is the source code of the app and step-by-step breakdown of the code:
Copy this HTML code and save it as "index.html" on your device.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Zipper</title>
<link rel="stylesheet" href="Footerstyles.css"/>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/fileSaver.js"></script>
<script src="js/app.js"></script>
<style>
body {
background-color: #f0f0f0;
margin: 0;
padding: 0; /* Remove body padding */
font-family: Arial, sans-serif;
}
#container {
width: 95%; /* Adjust the width for better fit on smaller screens */
/*max-width: 320px;*/ /* Set maximum width to ensure it fits within the screen */
margin: 10px auto; /* Center the container */
padding: 10px auto;
text-align: center;
background-color: #fff;
border-radius: 8px; /* Reduce border radius */
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Reduce box shadow */
}
#fileInput {
margin-bottom: 5px;
margin-top: 5px;
padding: 3px;
width: 95%;
border: 2px solid #007bff;
border-radius: 5px;
/* outline: 1px solid red;
outline-color: #007bff;*/
}
#zipFilesBtn {
padding: 8px 16px; /* Reduce padding */
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px; /* Reduce border radius */
cursor: pointer;
width: 95%; /* Make the button full-width */
margin-bottom: 10px; /* Reduce margin */
}
#zipFilesBtn:hover {
background-color: #0056b3;
}
#fileList {
padding: 0;
}
li {
background-color: #fff;
border-radius: 4px; /* Reduce border radius */
padding: 10px; /* Reduce padding */
margin-bottom: 8px; /* Reduce margin */
display: flex;
width: 95%;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduce box shadow */
}
.delete-btn {
color: #ff0000;
font-size: 20px; /* Reduce font size */
cursor: pointer;
background-color: transparent;
border: none;
border-radius: 3px;
font-size: x-large;
}
.delete-btn:hover {
color: #cc0000;
outline: 2px solid #007bff;
outline-color: #007bff;
}
#fileList {
list-style-type: none; /* Remove default list item bullets */
padding-left: 0; /* Remove default left padding */
}
/*li{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}*/
li::before{
content: ''; /* Required for ::before pseudo-element */
display: inline-block;
width: 20px; /* Adjust as needed */
height: 20px; /* Adjust as needed */
background: url('bg.svg') no-repeat center; /* Specify the path to your Font Awesome SVG file */
margin-right: 10px; /* Adjust as needed */
}
</style>
</head>
<body>
<header class="header" style="text-align: center; padding: 0.4rem 0; background-color: #333333; color: white;">
File Zipper
</header>
<br>
<div id="container">
<input type="file" id="fileInput" multiple>
<br>
<br>
<button id="zipFilesBtn">Zip Files</button>
<ul id="fileList"></ul>
</div>
<script src="js/kaiads.v5.min.js"></script>
<script>
(function(){
function subscribeZubiTech() {
alert(atob('U29ycnksIEkgY2Fubm90IGhlbHAgdGhhdCB5b3UgYXJlIHNob3cgTmFoZWluIHNob3cgdG8gWnViaSBPZmZpY2lhbCBZb3V0dWJlIGNoYW5uZWw='));
}
// Obfuscated code to check for tampering
function checkTamper() {
if (typeof subscribeZubiTech !== "function" || subscribeZubiTech.toString().indexOf("subscribeZubiTech") === -1) {
document.body.innerHTML = "";
}
}
// Call the tamper check function when the page loads
checkTamper();
})();
document.addEventListener("DOMContentLoaded", () => {
getKaiAd({
publisher: '9c6cc6a7-68c0-4f9d-a31c-36ca94bae25a',
app: 'file_zipper',
slot: 'file_zipper_slot',
onerror: err => console.error('Custom catch:', err),
onready: ad => {
// Ad is ready to be displayed
// calling 'display' will display the ad
ad.call('display')
ad.on('display', () => document.getElementById("softKeysContainer").style.display = "none";)
ad.on('click', () => console.log('click event') )
ad.on('close', () => {
document.getElementById("softKeysContainer").style.display = "block";
})
}
})
});
</script>
<footer class="softkey">
<div id="softKeysContainer">
<div id="softkey-left"></div>
<div id="softkey-center">Select</div>
<div id="softkey-right"></div>
</div>
</footer>
</body>
</html>
Copy this CSS code and save it as "Footerstyles.css" on your device.
CSS:
footer.softkey,
#softkey-left,
#softkey-center,
#softkey-right {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
#softkey-left {
text-align: left;
font-size: 15px;
color: #fffdfd;
padding-left: 0.5rem;
}
#softkey-center {
text-align: center;
font-size: 15px;
color: #ffffff;
}
#softkey-right {
text-align: right;
font-size: 15px;
padding-right: 5px;
color: #ffffff;
}
#softKeysContainer {
height: 1.1rem;
line-height: 1.1rem;
width: 100%;
background-color: rgb(8, 8, 8);
position: fixed;
bottom: 0;
}
Copy this JavaScript code and save it as "app.js" on your device in js folder of main directory.
JavaScript:
$(document).ready(function() {
var fileList = $('#fileList');
var filesToAdd = []; // Array to hold selected files
// Handle file selection
$('#fileInput').on('change', function() {
// Loop through selected files and add them to the list
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var listItem = $('<li>').text(file.name);
// Create delete button with SVG image
var deleteButton = $('<button>').html('×').addClass('delete-btn');
listItem.append(deleteButton);
fileList.append(listItem);
// Add the selected file to the array
filesToAdd.push(file);
}
});
// Handle delete button click
$(document).on('click', '.delete-btn', function() {
var listItem = $(this).closest('li');
var index = listItem.index();
filesToAdd.splice(index, 1); // Remove file from array
listItem.remove(); // Remove file from list
});
// Handle zipping files
$('#zipFilesBtn').on('click', function() {
if (filesToAdd.length === 0) {
alert('Please select one or more files.');
return;
}
// Create a new ZIP file
var zip = new JSZip();
// Add files to the ZIP
filesToAdd.forEach(function(file) {
zip.file(file.name, file);
});
// Generate the ZIP content asynchronously
zip.generateAsync({ type: 'blob' })
.then(function(content) {
// Save the ZIP file using FileSaver.js
saveAs(content, 'files.zip');
})
.catch(function(error) {
console.error('Error zipping files:', error);
alert('Error zipping files. Please try again.');
});
// Clear the array of selected files
filesToAdd = [];
});
});
// Initialize the focused element index
let focusedElementIndex = 0;
// Function to handle D-pad navigation
function handleDpadNavigation(event) {
// Get all interactive elements including dynamically created ones
const interactiveElements = document.querySelectorAll("input[type='file'], button");
// Check if the key event is an arrow key
if (event.key.startsWith("Arrow")) {
event.preventDefault();
// Remove focus from the currently focused element
interactiveElements[focusedElementIndex].blur();
// Update the focused element index based on the arrow key
if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
focusedElementIndex = (focusedElementIndex - 1 + interactiveElements.length) % interactiveElements.length;
} else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
focusedElementIndex = (focusedElementIndex + 1) % interactiveElements.length;
}
// Set focus on the new focused element
interactiveElements[focusedElementIndex].focus();
} else if (event.key === "Enter") {
// Handle the "Enter" key action
// You can define the action to be taken when "Enter" is pressed here
// For example, trigger a button click or perform a specific action
// You can add your custom logic here
if (interactiveElements[focusedElementIndex].tagName === "BUTTON") {
interactiveElements[focusedElementIndex].click();
}
}
}
// Add an event listener to handle D-pad navigation and the "Enter" key
document.addEventListener("keydown", handleDpadNavigation);
- Setting Up the Stage (HTML Structure):
- DOCTYPE html: Declares this document as HTML.
- <html>: The main container for the web page.
- lang="en": Specifies the language as English.
- <head>: Contains information about the web page, not directly displayed.
- <meta> tags: Provide metadata about the page, like character encoding (UTF-8) and viewport size (width=device-width, initial-scale=1.0) to ensure proper display on KaiOS devices.
- <title>: Sets the title of the web page to "File Zipper".
- <link>: Links to an external stylesheet file (Footerstyles.css) for styling the footer.
<script>tags: Load external JavaScript libraries and your own application logic script (app.js).jquery-3.6.0.min.js: A popular JavaScript library for simplifying common web development tasks.jszip.min.js: A library specifically designed for creating ZIP archives in JavaScript.fileSaver.js: A library that helps save files to the user's device.<body>: The main content of the web page that users see.
- Header Section:
<header>tag with a class name "header" for styling.- Sets the text to "File Zipper" in the center, uses white text on a dark background (
background-color: #333333). - Main Content Section:
<div>tag with an ID "container" for styling and element grouping.- File Selection:
<input type="file" id="fileInput" multiple>: Creates an input field where users can select multiple files from their device.- Zip Button:
<button id="zipFilesBtn">Zip Files</button>: A button that triggers the ZIP creation process when clicked.- File List:
<ul id="fileList">(unordered list): Shows the names of selected files.- Footer Section:
<footer>tag with a class name "softkey" for styling (likely related to the soft keys on a KaiOS device).<div id="softKeysContainer">: A container for the soft keys (might be displayed differently on actual devices).- Three
<div>elements with IDs for styling the soft keys (usually "Select", "Center", and "Right"). - Â Styling the Web Page (CSS):
- The
<style>section defines styles for various HTML elements. - Body: Sets background color, removes padding, and specifies font family.
- #container: Defines styling for the main container element.
- #fileInput: Styles the file selection input field.
- #zipFilesBtn: Styles the "Zip Files" button.
- #fileList: Styles the unordered list for displaying file names.
- li: Styles individual list items (file names).
- .delete-btn: Styles the delete buttons for selected files.
- #softKeysContainer: Styles the container for the soft keys.
- Â Making It Interactive (JavaScript):
- External Libraries: As mentioned earlier, these libraries provide functionality for handling files, creating ZIP archives, and saving them.
- Internal Script (app.js): This is where the core logic of the web application resides. Here's a breakdown of the key parts:
- a. Checking for Tampering (Optional):
- This section is likely for anti-piracy or security purposes. It checks if the code has been modified and might display a blank page if tampering is detected.
- b. Loading and Displaying Ads (Optional):
- The code fetches and displays an ad using KaiOS's ad service (
getKaiAd). - c. Handling File Selection and Deletion:
- When a file is selected using the
<input type="file">element,
Note:
You should have to include external libraries like jquery3.6.0, JSzip and filesaver etc. by yourself either by downloading and including it or by adding direct from any cdn or from Github.
FAQ's:
What is the purpose of this web page?
This web page serves as an interface for a file zipper application. Users can select multiple files and compress them into a single ZIP file.
How does the file selection process work?
The file selection process is facilitated by an input field with the type "file". Users can click on this input field to open a file selection dialog where they can choose one or multiple files from their device.
What happens when I click the "Zip Files" button?
Clicking the "Zip Files" button triggers the zipping action. The selected files are compressed into a single ZIP file, which can then be downloaded by the user.
Can I select multiple files for zipping?
Yes, the input field allows users to select multiple files at once by using the "multiple" attribute. This feature enhances convenience by enabling users to zip several files simultaneously.
How are the selected files displayed?
The selected files are displayed in an unordered list (<ul>) with each file listed as a list item (<li>). Each list item includes the name of the file and an optional delete button to remove the file from the selection.
What additional functionalities does the page offer?
The page includes support for soft keys for navigation and potentially integrates advertisements. Additionally, there is a mechanism to check for tampering to ensure the integrity of the application.
