kdj_singlish
Version:
KDJ Singlish is an app which created to help people to type in sinhala without making any mistakes. This will save your time and fix all the issues you are getting when you type. Just use it and let me know the issues.
773 lines (660 loc) • 38.8 kB
Plain Text
<!--
VERSION 1.1
** Shortcut keys for copy unicode and font texts added
** UI/UX Enhanced.
** Spelling mistakes fixed.
** Portable Version released.
** Speed optimized
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./../css/bootstrap.min.css">
<link rel="stylesheet" href="./../css/all.css">
<link rel="stylesheet" href="./../css/style.css">
<link rel="stylesheet" href="./../css/sinhala.min.css">
<link rel="stylesheet" href="./../css/animate.css">
<link rel="stylesheet" href="./../css/photon.min.css">
<link rel="stylesheet" href="./../node_modules/xel/themes/material.css">
<script src="./../node_modules/xel/xel.min.js"></script>
<title>KDJ Singlish | By KDJ Guru | Official Version</title>
<style>
form.form #fmabaya_textarea {
font-family: FMAbhaya;
}
</style>
</head>
<body class="app">
<audio id="tick" src="sounds/tick.mp3">
</audio>
<!-- <nav class="navbar drag-enab fixed-top navbar-light bg-faded justify-content-between flex-nowrap flex-row" style="box-shadow: -2px -1px 20px 0px #00000040;">
<div class="container-fluid">
<a class="navbar-brand animated bounceIn faster" href="#">
<img src="../img/icon.png" width="30" height="30" alt=""> <small> KDJ Singlish</small>
</a>
<ul class="nav navbar-nav flex-row float-right">
<li class="nav-item animated bounceInRight" id="minimize"><a class="nav-link pr-3" href="#"><i class="fa fa-window-minimize"></i></a></li>
<li class="nav-item animated bounceInRight" id="maximize"><a class="nav-link pr-3" href="#"><i class="fa fa-window-maximize"></i></a></li>
<li class="nav-item animated bounceInRight" id="close"><a class="nav-link" href="#"><i class="fa fa-window-close"></i></a></li>
</ul>
</div>
</nav> -->
<div class="window">
<header class="toolbar toolbar-header"
style="z-index:1000;background:white; border:none; box-shadow: 1px 2px 7px #abababbf;">
<div class="toolbar-actions">
<h1 class="title">
<img src="../img/icon.png" width="30" height="30" alt=""> KDJ Singlish
</h1>
<div style=" padding-left:30px;">
<div class="btn-group">
<button data-toggle="tooltip" title="Home" class="btn btn-default active">
<span class="icon icon-home"></span>
</button>
<button data-toggle="tooltip" title="Decrease Font Size" class="btn btn-default" onclick="resizeText(-1)">
<span class="icon icon-minus-squared"></span>
</button>
<button data-toggle="tooltip" title="Increase Font Size" class="btn btn-default" onclick="resizeText(1)">
<span class="icon icon-plus-squared"></span>
</button>
<button data-toggle="tooltip" title="Save for After Use" class="btn btn-default" id="save">
<span class="icon icon-box"></span>
Save
</button>
<button data-toggle="tooltip" title="Load Any Text Document" class="btn btn-default" id="load">
<span class="icon icon-folder"></span>
Open
</button>
</div>
</div>
<style>
.actionButtons button {
margin: 0 4px;
}
</style>
<div style="margin-top:-21px; padding:0 10px 35px 10px;" class="actionButtons">
<button id="close" class="btn btn-default pull-right">
<span class="icon icon-cancel"></span>
</button>
<button id="maximize" class="btn btn-default pull-right">
<span class="icon icon-resize-full"></span>
</button>
<button id="minimize" class="btn btn-default pull-right">
<span class="icon icon-minus"></span>
</button>
</div>
</div>
</header>
<x-notification id="notification" timeout="1500"></x-notification>
<x-notification id="notification_long" timeout="5500"></x-notification>
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar" style="width:50%; background:white;box-shadow: 0px 0px 2px #b1b1b1bf;">
<nav class="nav-group">
<br>
<x-button disabled class="nav-group-item active">
<span class="icon icon-keyboard"></span>
Typing Area
</span>
<dialog></dialog>
</x-button>
<style>
h2{
color:black;
font-size:22px;
margin-bottom:2px;
}
</style>
<x-button class="nav-group-item">
<span class="icon icon-help"></span>
Help
</span>
<dialog>
<header style="text-align:center;">
<h2>KDJ Singlish - Key Map</h2>
<p>අකුරු සියල්ල නිවැරදිව ඉගෙන ගැනීමට</p>
</header>
<main>
<style>
.keymap{
margin-top:-30px;
}
.keymap .col{
border:2px solid black;
margin:1px;
font-size:15px;
text-align:center;
}
</style>
<p>
<div class="container keymap" style="font-weight:800;">
<div class="row">
<div class="col-md-12">
<div class="row">
<h5>වවන කිහිපයක්</h5>
<div class="col-md-12">
awashYa: අවශ්ය<br>
sura\nganaawii: සුරංගනාවී
<br>
sanndhahaa: සඳහා
</div>
</div>
<br>
<div class="row">
<div class="col">ක් <br>k</div>
<div class="col">ක <br>ka</div>
<div class="col">කා <br>kaa</div>
<div class="col">කැ <br>kA</div>
<div class="col">කෑ <br> kAa</div>
<div class="col">කි <br>ki</div>
<div class="w-100"></div>
<div class="col">කී <br>kie</div>
<div class="col">කු <br>ku</div>
<div class="col">කූ <br>kuu</div>
<div class="col">කෙ <br>ke</div>
<div class="col">කේ <br>kei/kee</div>
<div class="col">කො <br>ko</div>
<div class="w-100"></div>
<div class="col">කෝ <br>koe</div>
<div class="col">කෞ <br>kau</div>
<div class="col">ක්ර <br>kra</div>
<div class="col">ක්රා <br>kraa</div>
<div class="col">ක්රැ <br>krA</div>
<div class="col">ක්රෑ <br>krAa</div>
<div class="w-100"></div>
<div class="col">ක්රි <br>kri</div>
<div class="col">ක්රී <br>krie</div>
<div class="col">කෘ <br>kru</div>
<div class="col">කෲ <br>kruu</div>
<div class="col">ක්රෙ <br>kre</div>
<div class="col">ක්රේ <br>krei</div>
<div class="w-100"></div>
<div class="col">ක්රො <br>kro</div>
<div class="col">ක්රෝ <br>kroe</div>
<div class="col">ර්ක <br>\rka</div>
<div class="col">ක්ය <br>kYa</div>
<div class="col">කෛ <br>kI</div>
<div class="col"></div>
</div>
<br>
<br>
<div class="row">
<div class="col">අ <br>a</div>
<div class="col">ආ <br>aa</div>
<div class="col">ඇ <br>A</div>
<div class="col">ඈ <br>Aa ae</div>
<div class="col">ඉ <br>i</div>
<div class="col">ඊ <br>ee ie</div>
<div class="w-100"></div>
<div class="col">එ <br>e</div>
<div class="col">ඒ <br>ea</div>
<div class="col">ඔ <br>o</div>
<div class="col">ඕ <br>oo / oe</div>
<div class="col">උ <br>u</div>
<div class="col">ඌ <br>uu</div>
</div>
<br>
<br>
<div class="row">
<div class="col">ක <br>ka</div>
<div class="col">ඛ <br>kha</div>
<div class="col">ග <br>ga</div>
<div class="col">ඝ <br>gha G</div>
<div class="col">ච <br>cha</div>
<div class="col">ඡ <br>Cha</div>
<div class="w-100"></div>
<div class="col">ජ <br>ja</div>
<div class="col">ට <br>ta</div>
<div class="col">ඨ <br>Ta</div>
<div class="col">ඩ <br>da</div>
<div class="col">ඪ <br>Da</div>
<div class="col">ත <br>tha</div>
<div class="w-100"></div>
<div class="col">ථ <br>Tha</div>
<div class="col">ද <br>dha</div>
<div class="col">ධ <br>Dha</div>
<div class="col">න <br>na</div>
<div class="col">ණ <br>Na</div>
<div class="col">බ <br>ba</div>
<div class="w-100"></div>
<div class="col">ම <br>ma</div>
<div class="col">ය <br>ya</div>
<div class="col">ර <br>ra</div>
<div class="col">ල<br> la</div>
<div class="col">ව <br>wa</div>
<div class="col">ස<br> sa</div>
<div class="w-100"></div>
<div class="col">හ <br>ha</div>
<div class="col">ළ <br>La</div>
<div class="col">භ <br>bha</div>
<div class="col">ඹ <br>Ba</div>
<div class="col">ශ <br>sha</div>
<div class="col">ෂ <br>Sha</div>
<div class="w-100"></div>
<div class="col">ෆ <br>fa</div>
<div class="col">ඥ <br>GNa</div>
<div class="col">ඤ <br>KNa</div>
<div class="col">ඣ <br>q</div>
<div class="col">ළු <br>Lu</div>
<div class="col">ළූ <br>Luu</div>
<div class="w-100"></div>
<div class="col">අං <br>a\n</div>
<div class="col">අඃ<br> a\h</div>
<div class="col">ඬ <br>\N</div>
<div class="col">ඍ<br> \R</div>
<div class="col">ඬ <br>nnda</div>
<div class="col">ඳ <br>nndha</div>
<div class="w-100"></div>
<div class="col">ඟ <br>nnga</div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</p>
</main>
<!-- <footer>
<x-button id="disagree-button">
<x-label>Disagree</x-label>
</x-button>
<x-button toggled id="agree-button">
<x-label>Agree</x-label>
</x-button>
</footer> -->
</dialog>
</x-button>
<x-button class="nav-group-item">
<span class="icon icon-user"></span>
About
</span>
<dialog>
<header style="text-align:center;">
<h5>KDJ Singlish - Developer</h5>
<p>Kavidu Dilshan Jayakody <small>www.kdjguru.com</small></p>
</header>
<main>
<center>
<img class="img_circle" width="240px;" src="../img/pro.jpg" alt="" width="100%"
style="border-radius:100%;">
</center>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col text-left">
<br>
Hello, I'm Kavidu Dilshan Jayakody. Thank You For <br>Using one
of My Applications. Please let me know if you got any<br>
issues or If you have any suggessions to make this better.
<br>In
future, you will get updates. I hope, this tool will be very
helpful<br> for all of you.
<br>
<br>
</div>
<br>
<p>Email: kdjayakodypro@gmail.com</p>
<p>Facebook Profile: <a href="https://facebook.com/kavindudj"
target="_blank">www.facebook.com/kavindudj</a></p>
<p>Facebook Page: <a href="https://facebook.com/kdjguruofficial"
target="_blank">www.facebook.com/kdjguruofficial</a></p>
<p>Phone: 076 723 3595 (WhatsApp)</p>
<br>
<br>
</div>
</div>
</div>
</div>
</main>
</dialog>
</x-button>
<x-button class="nav-group-item">
<span class="icon icon-cog"></span>
Settings
</span>
<dialog>
<div class="container" style="padding-top:10px;">
<header style="text-align:center;">
<h5>KDJ Singlish - Settings</h5>
<p>Use this section to get a better experience</small></p>
</header>
<main style="padding:30px;">
<h4><b>Show/Hide Textareas</b></h4>
<div class="checkbox">
<label>
<input type="checkbox" id="hideUnicode" checked
onclick="hideUnicode();">
Unicode
Textarea
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked id="hideFont" onclick="hideFont();">
Font
Textarea
</label>
</div>
<h4><b>Suggession Library</b></h4>
<div class="form-check">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio"
value="offline">
Offline Library
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio"
value="online">
Online Library
</label>
</div>
<h4><b>Mute Sounds</b></h4>
<div class="checkbox">
<label>
<input checked type="checkbox" id="muteTickSound" onclick="muteTickSound();">
Tik Sound
</label>
</div>
</main>
<!-- add lib -->
<!-- <h4><b>Add Words<small style="font-size:12px;"> | Make your words list to easy
suggessions.</small></b></h4>
<div class="row">
<input id="inputSuggessions" class="form-control" placeholder="Type your keyword here"
style="width:60%!important;"></input>
<x-button onclick="pushSuggessions();" role="button" aria-disabled="false"
tabindex="0">
<x-label>Add Now</x-label>
<x-notification tabindex="0">Sample notification text</x-notification>
</x-button>
<x-button onclick="pushSuggessions();" role="button" aria-disabled="false"
tabindex="0">
<x-label>Show All</x-label>
<x-notification tabindex="0">Sample notification text</x-notification>
</x-button>
</center>
</div>
<p id="pText"></p> -->
</div>
</dialog>
</x-button>
<x-button class="nav-group-item">
<span class="icon icon-cloud"></span>
Updates
</span>
<dialog>
<header style="text-align:center;">
<br>
<br>
<br>
<h5>KDJ Singlish - Updates</h5>
</header>
<script>
const ipcRenderer = require('electron').ipcRenderer;
// wait for an updateReady message
ipcRenderer.on('updateReady', function (event, text) {
// changes the text of the button
var container = document.getElementById('ready');
container.innerHTML = "Youa have an update!";
})
</script>
<br>
<center>
<div class="container">
Version: <span id="version">v1.0.4</span><br>
<!-- the button onClick sends a quitAndInstall message to the electron main process -->
<button style="background:red; color:white; padding:10px 20px; border:0px;"
id="ready" onClick="ipcRenderer.send('quitAndInstall')">No updates
ready</button>
</div>
<br>
<p>If you have an update, it will be installed automatically. <br>If you didn't get
it yet,
just use the above button.</p>
</center>
</dialog>
</x-button>
<br>
<hr>
<center>
<h5> Word Suggessions<br><small>ටයිප් කරන අතරතුර දිස්වේ</small></h5>
</center>
<span>
<div id="suggest" style="display:none;"></div>
<br>
</span>
<hr>
<br>
</nav>
</div>
<div class="pane">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form name="convert_form" class="form">
<div class="row" style="padding:45px 10px;">
<div class="col" id="typeArea">
<span class="TableText"><b>Type in Singlish<span class="sintype"> (මැසේජ්
කොටන විදිහට)</span></b></span>
<br />
<!-- suggestion area -->
<textarea class="form-control animated zoomIn" onkeyup="convert();"
autocomplete="off" onselect="convert();" onclick="convert();"
name="input_textarea" id="input_textarea"
placeholder="Type your text here | Press CTRL + U to copy Unicode Text OR Press Ctrl + F to copy font Text while typing."></textarea>
<br />
</div>
<div class="col" id="unicodeArea">
<span class="TableText" style="margin-bottom:10px;"><b>In Sinhala
Unicode</b>
<!-- <small> | Ctrl + C to Copy</small> -->
<a class="btn btn-dark btn-sm text-white"
style="position:absolute; right:15px;" id="btnCopyUni" data-toggle="tooltip" title="මෙහි Font වර්ගය වෙනස් කිරීමට නොහැක.">Copy
Unicode</a>
</span>
<br />
<!-- Text Area 01 -->
<div class="copy-to-clipboard unicodeCopy">
<textarea class="form-control animated zoomIn"
placeholder="Press Ctrl + U to Copy This Text"
class="form-control animated zoomIn" id="unicode_textarea"
name="unicode_textarea" readonly></textarea>
</div>
<br />
</div>
<div class="col" id="fontArea">
<span class="TableText"><b>In Sinhala Font</b>
<!-- <small> | Ctrl + X to Copy</small> -->
<a class="btn btn-dark btn-sm text-white" data-toggle="tooltip" title="මෙහි Font වර්ගය වෙනස් කිරීමට හැක." id="btnCopyFont"
style="position:absolute; right:15px;">Copy
Font</a></span>
<br />
<!-- Text Area 02 -->
<div class="copy-to-clipboard abayaCopy">
<textarea placeholder="lkafg%da,a lS tl iu. t*a wl=r Tnkak'"
class="form-control animated zoomIn" id="fmabaya_textarea"
name="fmabaya_textarea" readonly></textarea>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
dialog {
width: 40vw;
height: 70vh;
right: 0;
left: auto;
top: auto;
color: black;
background: white;
border-radius: 0 15px 15px 0;
opacity: 1;
border: 1px solid white;
padding: 10px 20px;
overflow: scroll;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0);
}
</style>
<!-- <footer class="toolbar toolbar-footer">
<h1 class="title">Footer</h1>
</footer> -->
<nav class="navbar fixed-bottom navbar-light bg-light" style="border-bottom:#ed1c24 5px solid;">
<span class="navbar-text">
<div style="position: absolute; right: 40px;">
</div>
<div>Developed By Kavidu Dilshan Jayakody<span> | Update:
v1.0.4</span></div>
</span>
<span class="pull-right">
<center>
Words: <span id="wordCount">0</span>
| Characters: <span id="charCountNoSpace">0</span>
<div class='copied'></div>
</center>
</span>
</nav>
</div>
</body>
<script>
window.$ = window.jQuery = require('./../js/jquery.min.js');
</script>
<script src="./../js/propper.min.js"></script>
<script src="./../js/bootstrap.min.js"></script>
<script src="./../js/sin/dictionary.js"></script>
<script src="./../js/sin/suggest.js"></script>
<script src="./../js/main.js"></script>
<script src="./../js/sin/sinhala.js"></script>
<script>
$(document).ready(function () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
});
</script>
<script>
const {
dialog
} = require("electron").remote;
const fs = require('fs');
// var timeoutId;
// $('#input_textarea').on('input propertychange change', function() {
// console.log('Textarea Change');
// clearTimeout(timeoutId);
// timeoutId = setTimeout(function() {
// // Runs 1 second (1000 ms) after the last change
// saveToDB();
// }, 1000);
// });
// function saveToDB()
// {
// console.log('Saving to the db');
// form = $('#input_textarea');
// $.ajax({
// url: "../json/main.js",
// type: "POST",
// beforeSend: function(xhr) {
// // Let them know we are saving
// },
// success: function(data) {
// var jqObj = jQuery(data); // You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
// // Now show them we saved and when we did
// var d = new Date();
// },
// });
// }
// This is just so we don't go anywhere
// and still save if you submit the form
$('.contact-form').submit(function(e) {
saveToDB();
e.preventDefault();
});
document.addEventListener('DOMContentLoaded', function () {
var btnLoad = document.getElementById('load'),
btnSave = document.getElementById('save'),
note = document.getElementById('input_textarea');
btnLoad.addEventListener('click', function () {
dialog.showOpenDialog({
filters: [
{
name: 'Text Document',
extensions: ['txt']
}
]
}, function (filePaths) {
if (filePaths === undefined) {
return;
}
var filePath = filePaths[0];
try {
note.value = fs.readFileSync(filePath, 'utf-8');
console.log('Loaded file:' + filePath)
} catch (err) {
console.log('Error reading the file: ' + JSON.stringify(err));
}
});
});
btnSave.addEventListener('click', function () {
dialog.showSaveDialog({
filters: [
{
name: 'Text Document',
extensions: ['txt']
}
]
}, function (filePath) {
if (filePath === undefined) {
return;
}
fs.writeFile(filePath, note.value, function (err) {
if (err === undefined) {
dialog.showMessageBox({
message: 'The file has been saved!',
buttons: ['OK']
});
console.log('messagesaved')
} else {
dialog.showErrorBox('File save error', err.message);
}
});
});
});
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
require('../renderer.js');
require('../functions.js');
</script>
</html>