<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java to B4X Converter</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
text-align: center;
padding: 30px;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 600px;
}
.input-section, .output-section {
padding: 30px;
display: flex;
flex-direction: column;
}
.input-section {
border-right: 2px solid #e5e7eb;
background: #f9fafb;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
color: #374151;
display: flex;
align-items: center;
gap: 10px;
}
.icon {
width: 24px;
height: 24px;
fill: #4f46e5;
}
.file-input-area {
position: relative;
border: 3px dashed #d1d5db;
border-radius: 12px;
padding: 40px 20px;
text-align: center;
transition: all 0.3s ease;
background: white;
margin-bottom: 20px;
}
.file-input-area:hover {
border-color: #4f46e5;
background: #faf5ff;
}
.file-input-area.dragover {
border-color: #4f46e5;
background: #faf5ff;
transform: scale(1.02);
}
.file-input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.textarea-container {
flex: 1;
position: relative;
}
.code-textarea {
width: 100%;
height: 400px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
padding: 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
resize: vertical;
transition: border-color 0.3s ease;
background: white;
}
.code-textarea:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.controls {
display: flex;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.btn-primary {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 2px solid #e5e7eb;
}
.btn-secondary:hover {
background: #e5e7eb;
transform: translateY(-1px);
}
.btn-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.output-area {
background: #1f2937;
color: #f9fafb;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.6;
padding: 20px;
border-radius: 12px;
height: 400px;
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.syntax-highlight {
color: #60a5fa;
}
.keyword {
color: #f472b6;
font-weight: bold;
}
.string {
color: #34d399;
}
.comment {
color: #9ca3af;
font-style: italic;
}
.status {
padding: 15px;
border-radius: 8px;
margin: 15px 0;
font-weight: 500;
}
.status.success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.status.error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.progress-bar {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
margin: 15px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4f46e5, #7c3aed);
width: 0%;
transition: width 0.5s ease;
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.input-section {
border-right: none;
border-bottom: 2px solid #e5e7eb;
}
.header h1 {
font-size: 2rem;
}
.controls {
justify-content: center;
}
}
.feature-list {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.feature-list h4 {
color: #0369a1;
margin-bottom: 10px;
}
.feature-list ul {
list-style: none;
padding-left: 0;
}
.feature-list li {
padding: 5px 0;
color: #0c4a6e;
}
.feature-list li:before {
content: "✓ ";
color: #10b981;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔧 Java to B4X Converter</h1>
<p>แปลงโค้ด Java เป็น B4A/B4J/B4i (.bas) อย่างง่ายดาย</p>
</div>
<div class="main-content">
<div class="input-section">
<h2 class="section-title">
<svg class="icon" viewBox="0 0 24 24">
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
</svg>
Java Input
</h2>
<div class="file-input-area" id="fileDropArea">
<input type="file" class="file-input" id="fileInput" accept=".java">
<div>
<svg width="48" height="48" viewBox="0 0 24 24" fill="#9ca3af">
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
</svg>
<p style="margin: 10px 0; color: #6b7280; font-weight: 500;">ลากไฟล์ .java มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</p>
<p style="color: #9ca3af; font-size: 14px;">รองรับไฟล์ .java เท่านั้น</p>
</div>
</div>
<div class="textarea-container">
<textarea
class="code-textarea"
id="javaInput"
placeholder="หรือวางโค้ด Java ที่นี่...
ตัวอย่าง:
public class MainActivity {
private String message = "Hello World";
public void onCreate() {
System.out.println(message);
}
private void showToast(String text) {
// Show toast message
}
}"></textarea>
</div>
<div class="feature-list">
<h4>🎯 ฟีเจอร์ที่รองรับ:</h4>
<ul>
<li>แปลง Class เป็น B4X Module</li>
<li>แปลง Method เป็น Sub</li>
<li>แปลง Data Types</li>
<li>แปลง Access Modifiers</li>
<li>จัดการ Import Statements</li>
<li>แปลง Comments</li>
</ul>
</div>
</div>
<div class="output-section">
<h2 class="section-title">
<svg class="icon" viewBox="0 0 24 24">
<path d="M17,9H7V7H17M17,13H7V11H17M14,17H7V15H14M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z"/>
</svg>
B4X Output (.bas)
</h2>
<div class="controls">
<button class="btn btn-primary" id="convertBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"/>
</svg>
แปลงโค้ด
</button>
<button class="btn btn-secondary" id="clearBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
</svg>
ล้างข้อมูล
</button>
<button class="btn btn-success" id="downloadBtn" style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
</svg>
ดาวน์โหลด .bas
</button>
</div>
<div class="progress-bar" id="progressBar" style="display: none;">
<div class="progress-fill" id="progressFill"></div>
</div>
<div id="status"></div>
<div class="output-area" id="output">รอการแปลงโค้ด...</div>
</div>
</div>
</div>
<script>
class JavaToB4XConverter {
constructor() {
this.setupEventListeners();
this.javaKeywords = ['public', 'private', 'protected', 'static', 'final', 'abstract', 'class', 'interface', 'extends', 'implements'];
this.b4xKeywords = ['Public', 'Private', 'Sub', 'End Sub', 'Dim', 'As', 'String', 'Int', 'Boolean'];
}
setupEventListeners() {
const fileInput = document.getElementById('fileInput');
const fileDropArea = document.getElementById('fileDropArea');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const downloadBtn = document.getElementById('downloadBtn');
const javaInput = document.getElementById('javaInput');
// File drag and drop
fileDropArea.addEventListener('dragover', (e) => {
e.preventDefault();
fileDropArea.classList.add('dragover');
});
fileDropArea.addEventListener('dragleave', () => {
fileDropArea.classList.remove('dragover');
});
fileDropArea.addEventListener('drop', (e) => {
e.preventDefault();
fileDropArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
this.handleFile(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
this.handleFile(e.target.files[0]);
}
});
convertBtn.addEventListener('click', () => this.convertCode());
clearBtn.addEventListener('click', () => this.clearAll());
downloadBtn.addEventListener('click', () => this.downloadFile());
// Auto convert on input change
javaInput.addEventListener('input', () => {
if (javaInput.value.trim()) {
convertBtn.style.background = 'linear-gradient(135deg, #10b981, #059669)';
}
});
}
handleFile(file) {
if (!file.name.endsWith('.java')) {
this.showStatus('กรุณาเลือกไฟล์ .java เท่านั้น', 'error');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('javaInput').value = e.target.result;
this.showStatus(`โหลดไฟล์ ${file.name} สำเร็จ`, 'success');
};
reader.readAsText(file);
}
convertCode() {
const javaCode = document.getElementById('javaInput').value.trim();
if (!javaCode) {
this.showStatus('กรุณาใส่โค้ด Java หรือเลือกไฟล์', 'error');
return;
}
this.showProgress();
setTimeout(() => {
try {
const b4xCode = this.performConversion(javaCode);
this.displayResult(b4xCode);
this.showStatus('แปลงโค้ดสำเร็จ! 🎉', 'success');
document.getElementById('downloadBtn').style.display = 'flex';
} catch (error) {
this.showStatus(`เกิดข้อผิดพลาด: ${error.message}`, 'error');
}
this.hideProgress();
}, 1000);
}
performConversion(javaCode) {
let b4xCode = javaCode;
// Convert package declaration
b4xCode = b4xCode.replace(/package\s+[^;]+;/g, "'Package declaration removed - not needed in B4X");
// Convert imports
b4xCode = b4xCode.replace(/import\s+[^;]+;/g, (match) => {
return `'${match} - Check B4X libraries`;
});
// Convert class declaration
b4xCode = b4xCode.replace(/public\s+class\s+(\w+)(\s+extends\s+\w+)?(\s+implements\s+[\w,\s]+)?\s*\{/,
(match, className) => {
return `'B4X Module: ${className}\n'#Region Module Attributes\n'#End Region\n\nSub Process_Globals\n 'These global variables will be declared once when the application starts.\nEnd Sub\n\nSub Globals\n 'These global variables will be redeclared each time the activity is created.\nEnd Sub\n\nSub Activity_Create(FirstTime As Boolean)\n 'Initialize module\nEnd Sub`;
});
// Convert methods
b4xCode = b4xCode.replace(/(\w+)\s+(\w+)\s*\([^)]*\)\s*\{/g, (match, returnType, methodName) => {
const b4xReturnType = this.convertDataType(returnType);
if (returnType === 'void') {
return `Sub ${methodName}`;
} else {
return `Sub ${methodName} As ${b4xReturnType}`;
}
});
// Convert variable declarations
b4xCode = b4xCode.replace(/(\w+)\s+(\w+)\s*=\s*([^;]+);/g, (match, type, varName, value) => {
const b4xType = this.convertDataType(type);
return `Dim ${varName} As ${b4xType} = ${value}`;
});
b4xCode = b4xCode.replace(/(\w+)\s+(\w+);/g, (match, type, varName) => {
const b4xType = this.convertDataType(type);
return `Dim ${varName} As ${b4xType}`;
});
// Convert System.out.println to Log
b4xCode = b4xCode.replace(/System\.out\.println\s*\(/g, 'Log(');
// Convert access modifiers
b4xCode = b4xCode.replace(/private\s+/g, 'Private ');
b4xCode = b4xCode.replace(/public\s+/g, 'Public ');
b4xCode = b4xCode.replace(/protected\s+/g, 'Private ');
// Convert closing braces to End Sub
b4xCode = b4xCode.replace(/\s*\}\s*$/gm, '\nEnd Sub');
b4xCode = b4xCode.replace(/\s*\}\s*(?=\n|$)/g, '\nEnd Sub');
// Convert comments
b4xCode = b4xCode.replace(/\/\//g, "'");
b4xCode = b4xCode.replace(/\/\*([^*]|\*[^/])*\*\//g, (match) => {
return match.replace(/\/\*/g, "'").replace(/\*\//g, "").replace(/\*/g, "'");
});
// Clean up extra braces and semicolons
b4xCode = b4xCode.replace(/[{}]/g, '');
b4xCode = b4xCode.replace(/;$/gm, '');
// Add B4X header
const header = `'B4X Module converted from Java
'Generated by Java to B4X Converter
'Date: ${new Date().toLocaleString('th-TH')}
'
'Note: This is an automated conversion. Please review and test the code.
'Some Java features may need manual adjustment for B4X compatibility.
`;
return header + b4xCode;
}
convertDataType(javaType) {
const typeMap = {
'String': 'String',
'int': 'Int',
'Integer': 'Int',
'boolean': 'Boolean',
'Boolean': 'Boolean',
'double': 'Double',
'Double': 'Double',
'float': 'Float',
'Float': 'Float',
'long': 'Long',
'Long': 'Long',
'byte': 'Byte',
'Byte': 'Byte',
'char': 'Char',
'Character': 'Char',
'void': 'Void',
'Object': 'Object'
};
return typeMap[javaType] || javaType;
}
displayResult(code) {
const output = document.getElementById('output');
const highlightedCode = this.highlightSyntax(code);
output.innerHTML = highlightedCode;
}
highlightSyntax(code) {
let highlighted = code;
// Highlight B4X keywords
this.b4xKeywords.forEach(keyword => {
const regex = new RegExp(`\\b${keyword}\\b`, 'g');
highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`);
});
// Highlight strings
highlighted = highlighted.replace(/"([^"]*)"/g, '<span class="string">"$1"</span>');
// Highlight comments
highlighted = highlighted.replace(/'([^\n]*)/g, '<span class="comment">\'$1</span>');
return highlighted;
}
showProgress() {
const progressBar = document.getElementById('progressBar');
const progressFill = document.getElementById('progressFill');
progressBar.style.display = 'block';
progressFill.style.width = '0%';
setTimeout(() => progressFill.style.width = '30%', 100);
setTimeout(() => progressFill.style.width = '60%', 300);
setTimeout(() => progressFill.style.width = '90%', 600);
setTimeout(() => progressFill.style.width = '100%', 900);
}
hideProgress() {
setTimeout(() => {
document.getElementById('progressBar').style.display = 'none';
}, 500);
}
showStatus(message, type) {
const status = document.getElementById('status');
status.className = `status ${type}`;
status.textContent = message;
status.style.display = 'block';
if (type === 'success') {
setTimeout(() => {
status.style.display = 'none';
}, 3000);
}
}
clearAll() {
document.getElementById('javaInput').value = '';
document.getElementById('output').textContent = 'รอการแปลงโค้ด...';
document.getElementById('status').style.display = 'none';
document.getElementById('downloadBtn').style.display = 'none';
document.getElementById('fileInput').value = '';
}
downloadFile() {
const output = document.getElementById('output');
const content = output.textContent;
if (!content || content === 'รอการแปลงโค้ด...') {
this.showStatus('ไม่มีโค้ดให้ดาวน์โหลด', 'error');
return;
}
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `converted_${new Date().getTime()}.bas`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
this.showStatus('ดาวน์โหลดไฟล์สำเร็จ! 📁', 'success');
}
}
// Initialize converter when page loads
document.addEventListener('DOMContentLoaded', () => {
new JavaToB4XConverter();
});
</script>
</body>
</html>