minangscript
Version:
Modern programming language with Minangkabau philosophy. Features native arrays (kumpulan), objects (benda), web development support, and comprehensive algorithm examples. Ready for web applications, data structures, and algorithmic programming.
201 lines (170 loc) • 5.14 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MinangScript Todo App</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f7fa;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.input-section {
display: flex;
margin-bottom: 20px;
gap: 10px;
}
#todoInput {
flex: 1;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
}
#todoInput:focus {
outline: none;
border-color: #4CAF50;
}
#addTodo {
background: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
#addTodo:hover {
background: #45a049;
}
.stats {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
}
#counter {
font-weight: bold;
color: #333;
}
#clearCompleted {
background: #ff4757;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
#clearCompleted:hover {
background: #ff3742;
}
#todoList {
list-style: none;
}
#todoList li {
display: flex;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
transition: background-color 0.2s;
}
#todoList li:hover {
background: #f8f9fa;
}
#todoList li.completed {
opacity: 0.6;
}
#todoList li.completed span {
text-decoration: line-through;
}
#todoList input[type="checkbox"] {
margin-right: 12px;
transform: scale(1.2);
}
#todoList span {
flex: 1;
font-size: 16px;
}
.delete {
background: #ff4757;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.delete:hover {
background: #ff3742;
}
.empty-state {
text-align: center;
color: #666;
font-style: italic;
padding: 40px;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 MinangScript Todo App</h1>
<div class="input-section">
<input type="text" id="todoInput" placeholder="Tambahkan todo baru..." maxlength="100">
<button id="addTodo">Tambah</button>
</div>
<div class="stats">
<div id="counter">0/0 selesai</div>
<button id="clearCompleted">Hapus Selesai</button>
</div>
<ul id="todoList">
<li class="empty-state">Belum ada todo. Tambahkan yang pertama!</li>
</ul>
</div>
<!-- MinangScript Runtime -->
<script src="../src/runtime/MinangRuntime.js"></script>
<script src="../src/lexer/MinangLexer.js"></script>
<script src="../src/parser/MinangParser.js"></script>
<script>
// Load and execute MinangScript
async function loadMinangScript(url) {
try {
const response = await fetch(url);
const code = await response.text();
const lexer = new MinangLexer();
const parser = new MinangParser();
const runtime = new MinangRuntime();
const tokens = lexer.tokenize(code);
const ast = parser.parse(tokens);
runtime.execute(ast);
} catch (error) {
console.error('MinangScript Error:', error);
}
}
document.addEventListener('DOMContentLoaded', () => {
loadMinangScript('web-todo.minang');
});
</script>
</body>
</html>