~~~~~~~~ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Code_Handwriting_App</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #000000;
color: #00FF00;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
h1 {
margin: 20px;
color: #00FF00;
text-align: center;
}
#editor {
flex-grow: 1;
width: 100%;
border: none;
padding: 20px;
box-sizing: border-box;
background-color: #000000;
color: #00FF00;
font-family: 'Courier New', monospace;
font-size: 18px;
resize: none;
spellcheck: false;
}
#editor:focus {
outline: none;
}
</style>
</head>
<body>
<h1>Code Memo App</h1>
<textarea id="editor" placeholder="Write your code here..."></textarea>
<script>
document.getElementById('editor').addEventListener('keydown', function(e) {
if (e.key === 'Tab') {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
this.selectionStart = this.selectionEnd = start + 3;
}
});
</script>
</body>
</html>
~~~~~~~~~~~~~~package.json
{
"name": "code-memo-app",
"version": "1.0.0",
"description": "A simple code memo app",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"build": {
"appId": "com.example.codememoapp",
"win": {
"target": "nsis",
"icon": "icon.ico"
},
"extraResources": [
{
"from": "node_modules/7zip-bin",
"to": "7zip-bin",
"filter": ["**/*"]
}
]
},
"devDependencies": {
"electron": "^latest",
"electron-builder": "^latest"
},
"dependencies": {}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
~~~~~~~~~~~preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
});
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency]);
}
});
