Attempting to save an edited image to my local computer using AngularJS - html

I am looking to save an image to my computer, so far I have the code below which displays an image with text inserted above. I'm unsure of how to save the image to my local machine, could someone help point me in the direction.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div ng-app= "myapp" ng-controller = "connection">
Enter The Text :
<input type="text" ng-model= "Username" name="Username">
<button ng-click="submit(Username)" >Save</button><br><br>
<div class="container">
<img src="DHONI.jpg" >
<div class="centered">{{Username}}</div>
</div>
</div>
<script>
var App = angular.module("myapp",[])
App.controller ('connection',function ($scope){
$scope.submit= submit;
function submit(Username){
$scope.name = Username;
}
});
</script>
</body>
</html>

You can achieve this by using canvas.Please replace {BASE64IMAGE} with your image as base64.
run the code in local system.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<style>
.ctn {
position: relative;
}
.u-name {
position: absolute;
top: 50%;
left: 25%;
}
</style>
<script>
var App = angular.module("myapp", [])
App.controller('connection', function ($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
var element = $("#ImageContent");
html2canvas(element, {
onrendered: function (canvas) {
console.log(canvas);
var imgageData = canvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#ImageDownload").attr("download", Username+".png").attr("href", newData);
document.getElementById('ImageDownload').click();
}
});
}
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username">
<button ng-click="submit(Username)" >Submit</button>
<br>
<div id="ImageContent">
<img src='data:image/jpeg;base64,/9j/7QBGUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA0cAm4ACKkgR29vZ2xlADhCSU0D7QAAAAAAEAAuAAAAAQABAC4AAAABAAH/4AAQSkZJRgABAQEALgAuAAD/2wBDAAQDAwMDAgQDAwMEBAQFBgoGBgUFBgwICQcKDgwPDg4MDQ0PERYTDxAVEQ0NExoTFRcYGRkZDxIbHRsYHRYYGRj/2wBDAQQEBAYFBgsGBgsYEA0QGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBj/wAARCAHfAnoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/90ABAKA/9oADAMBAAIRAxEAPwD7+ooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACigkAZJwKjM8IODNGD/vCgaTZJRTVkjY4V1P0NOoEFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFMmmht7d57iVIoo1LPJIwVVA6kk9BQNK+iH0V5R4q/aE8A+HzJbaZcTeIL1Mjy9PGYgfeY/Jj/AHd30rxrxL+0V4/1pmj0c2nh62OQBbKLibB9ZJBj8VUGvOr5rh6OnNd+Wv8AwD6nLeDM0x1pKnyRfWWn4fF+Fj61vL2z0+ze7v7uC1t05aaeQIi/UngV57rfx5+GOitJEuvnU50ODFpkLT5+jgbP/Hq+OtU1PUtbvvtmtajealcdpb2ZpmH03E4/CqueMV5FXPqj0pxS9df8j7bBeG2Ghri6zk+0Ukvvd2/wPpDVv2poAzpoHg2eQfwy6hdLF/44gb/0KuJ1H9o/4l3uVtX0TTV7G2s2d/zkdh/47XktFefUzPEz3m/lp+R9PhuEcow/w0E3/evL821+B2OofFf4lamT9p8basgPa1dbb/0WFrCuvE3ie9z9t8U+ILnPafU53H5F6y6K5ZVqkvik38z2aWBw1HSlSjH0SX5Ie8sspzLNLIf9uRm/mahMMROTEh+op9FZnUtNhFVUOVXafUcVZhv9QtiDbalfW5HQw3MkZH5MKr0ULTYUkpbm9beOPG9oR9m8a+JUC9FOqTuv5MxFdHYfG/4paeAE8VyXKj+G7topc/U7Q36159RW0MRVh8MmvmzirZXg62lWjGXrFP8AQ9t0z9p3xpbuo1bQ9D1BB1+ziS2Y/iWcfpXc6P8AtP8AhS5wmuaBq+mOTy8Wy5jH4ghv/Ha+WaK66ea4qH2r+v8AVzxMVwXlGI/5c8r7xbX4bfgfdegfE/wB4ndY9G8VafLMxwLeZzBKT7RyBWP4Cutr85mVXGHVWHowzXSeHvHvjTwpsXw/4m1CziTpbM4mh/79yAqPwANejRz57VYfd/k/8z5XHeGsdXg6/wApL/25f/In3rRXzT4Y/af1CFo7fxh4ejukyA15pjbHA9TE5wfwYfSva/CfxJ8FeNlC+H9dgmucZazlzFOvGT+7bDED1GR717GHx9CvpCWvbZnw2Z8NZjlt5V6T5f5lqvvW3zsdXRRRXYeCFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFVtQ1Gw0rTpdQ1S9t7K0hG6Se4kEaIPUseBXk3xB/aB8O+GHm0vw0sevashKsyNi1gP+3IPvEf3Vz3BK18z+KvGnifxrqQvfEurS3hU7orcfJBD/ALkY4B9zknuTXkYvN6VH3Ye9L8PvPtsj4HxmYJVcR+7pvv8AE/Rfq7eVz3/xn+0vpVkZLLwNpx1S4U4/tC8Ux2o/3VBDyd/7o9Ca8B8U+NvFXjS4MnibW7i+jzlbXPl26f7sS4X8Tk+9YFFfOYnHVsR8ctO3T+vU/WMp4cwGVpPD0/e/mesvv6fKwZ4x29KKKK4z3AooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACjjer/xIdysOCp9QexoooA9Q8HfHnx14WaO2v7oeIdOU8w6g585R/sTdf++w34V9FeB/jD4L8dFLWzvW0/VG/wCYbf7Y5WP+xglZB/ukn1Ar4loODjI6HIPcH1HpXpYXNa9DRvmXZ/5nyWccGZfmN5xj7OfeP6rZ/g/M/RiivkTwD8f/ABT4W8rT/EPm+IdKXC5lf/S4R/suf9YPZ+f9oV9PeFPGXhzxtoo1Tw3qUd3CCFkTBWSFv7roeVP169RkV9NhMwpYlWi7Psz8jzvhnG5Q71o3h0ktvn2fr8rm7RRRXcfPBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFeb/E/4waJ8PbVrGFV1LX5EzDYI3EQPR5j/AAL3A6t24yRlWrQoxc6jsjrwOBr46sqGGjzSfT9X2XmzrPFXi/w/4L0F9X8Q6hHawDIjTrJM39yNerN7D6nA5r5S+JHxs8R+Omm02wMujaA2V+yRuPNuV9ZnHYj+BePUtXD+JPE+u+LtffWfEWoPeXbDC54jhX+5GnRF9u/U5PNZFfKY7NamIvCGkfxfr/kftXDvBeGy21bEWnV/CPou/m9eyQAAKFUAKOAB0FFFFeSfahRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABV/Rdb1fw5rkWs6DqM2n38XCzwkZIznawOQynHKkEVQopptO6JnCM4uE1dPdPZn1l8Mfj3pXip4ND8VCDSdab5I5t2La7PbaT9xz/cPXsTnA9mr85yAylWAZT1Br274VfHq98OmDw/41nmvdHBCQ6i2XntB6Sd5Ixxz95R/eGAPosBnO1PEff8A5/5n5XxLwHZPE5YvWH/yP/yP3dEfVVFQ2t1a31lFeWVxFc20yCSKaFw6SKRkMpHBB9amr6NO5+WNNOzCiiigQUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRXg/wAavjX/AGIbjwd4Ouh/auCl9qEZyLL/AKZoe8pHU/wf73TnxOJhh4Oc3/wT0spynEZpiFh8Oter6Jd35f8ADLUufF/44Q+Fmn8MeEZIrjXQNlxdnDx2H4YIeT/Z6Dv/AHT8sXFxcXd5Nd3dxLc3M7mSaeZy7yMeSzE8k1ETkk5JJJJJOSSeSSe5or4zF4ypip809ui7H77keQ4bJ6PsqCvJ/FLq3+i7Lp5u7CiiiuQ9sKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooq5pelalretW2kaRZS3t/dPsht4hksepJ9FAySTwACTTSbdkTKUYRcpOyR6P8F/iP4m8L+LbLwzY2dzrWl6hOI/7LjILwsx+aWInhQBlmBIXGSSp5r7Frzr4U/CnTvh1opnnaO81+6QC7vQOFHB8qLPIQED3YjJ7Aei19plmHq0KPLVfy7H4BxdmeDzDHOpg4WS0cv5n3t+XV7vyKKKK9E+WCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoorzj4wfE6D4e+FPKsnjl1+/VksoTz5fHMzj+6vHH8RwPUjKtWjRg6k3ojrwOCrY6vHDUFeUtv8/Rbs5v44fF5vCts/hLwzcga7PGDcXC8/YY2HBH/TRgePQfN6Z+Us9cliSckscknuST1PvUtzc3F5ez3l3PJcXM8jTTTSnLyOxyWJ9STUVfE4zFzxVTnlt0XY/oTIcjo5PhlRp6yfxS7v8AyXRdPVsKKKK5D2wooooAKKKKACiiigAooooAKKKKACiiigAoopcGgBKKazov3pEH1YU3z4P+e0f/AH0KLjsySimCaE9Jo/8AvoU8EN90g/Q0A00FFFFAgooooAKKKKACiiigAooooAKKKuaVpWo63rVro+kWcl5f3TiOGCPqx9SegUdSx4ABJppNuyJlJQTlJ2SE0vS9R1rWrXSNIs5Ly/un8uC3jxlz9TwABkkngAEmvsf4U/CjTfh1oxuJzFe6/dIBd3oHCDr5UWRlUHGe7EZPQBV+FHwq074daIZ5zHea/dIBd3oBwo4Pkx56ID36seT2A9Fr6vLMsVBe1q/F+X/BPxXi7i6WYN4TCO1Fbv8Am/8Atey67vokUUUV7R8CFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBi+LfFOleDPCF54i1iUrbWy5CLjfK54VFHdmOAP8K+GfFHibVvGHiy78Ra1IGu7k/cQ/JDGPuxp/sgfmSSeSa7n43/ABHPjfxqdN0y43aDpTtHAUb5bmbo83uByq+2SPvV5dXx+a4729Tkg/dX4vv/AJH7pwXw6stw31msv3s1/wCAx6L1e7+S6BRRRXkn2wUUUUAFFFFABRRRQAUUUUAFFFFABRW14Y8JeI/GWqtp/hnSZtQlQjzXUhYof9+Q/Kv06nsDX0H4O/Zn0izWO78b6k+qT9TY2ZaG3U+hfh3/APHR7V14bA1sT/DWnfp/XoeJm3EWAypWxM/e/lWsvu6fOyPmzTtN1HWNQ+waRp93qN1/zws4Wmce5Cg4HueK9O0D9nb4i6wiTahFp2hwNjIvJjJNj1EcYI/AsDX1jpGiaPoGmrp+iaXaadar0htYljX6kAcn3q/Xu0Mipx1qyv6aH5zmHiPiajccHTUF3er/AES/E8J0n9l3wxAofXPEusX8g6pbCO2iP4bWb/x6u00/4H/CzTirJ4Rtblh/FeySXOfwdiP0r0KivSp4DDU/hgvz/M+SxPE2a4n+JiJfJ8q+6NkYFt4G8FWYAtPB+gwY6eVp8S/yWtFNF0eMYj0mxUeiwKP6VeorpVOK2R5U8TWm7zm382Zk3h3w/cgi40LTJQeoktUb+YrIvfhl8O9QQrd+B/D7k/xLYRo3/fSgH9a6qilKlCXxRT+RVPG4ik706kl6No8r1P8AZ4+GGoIRbaZe6W5/jsryQY+iuWX9K4TXP2W5FRpPDHi4yEfdg1aEc/WSID/0Cvo+iuWplmGqbwS9NPyPawvFubYZ+7Xb/wAXvfnc+HvEnwg+IvhYNJf+G5ru3XObrSybuPA74ADge7KK4dSrZ2sGwcHHY+hr9Ga47xd8LfBHjZXk1rRYlvGHF/a/ubgH13r97Ho2R7V5WIyHrRl8n/n/AMA+xy3xId1HH0vnH/5F/wCfyPhiivY/G/7PHivw8JL7w1IfEVgMkxIoS7jH+50k/wCA4J/u146QQ7oQQ6MUdWGCpHBBB6EeleFXw9ShLlqKx+j5fmeFzGn7XC1FJfivVbr5iUUUVid4UUVb0vS9R1rWrXSNIs5Ly/un8uC3j6u31PAAGSSeAASaaTbsiZSUE5Sdkg0vS9S1vWbbSNIspb2/un2Q28QyznGSfYAZJJ4ABJr7I+FPwp074daKZ7horzX7pMXd6oyqjOfKiyAQgIHXliMnsFPhT8KdN+HWimecx3mv3SAXd6Bwg6+VFnog9erEZPYD0Wvq8syxUF7Wr8X5f8E/FeLuLnmDeEwjtRW7/m/+17Lru+iRRRRXtHwIUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABXkHx/+ILeFfBI8PaXcbNX1hWj3IRut7fpJJ7E/cX3JI+7XrF7e2um6Zc6jfTLBa20TTTSv0RFBLMfYAE18H+OPFt5448eah4ku96rO+y2ibrDbqT5aexwST/tMx715Ob4v2FLkj8Uvy6n2vBGRrMMb7eqr06dm/N9F+r9LdTngAqhVGFAwAO1FFFfHn7qFFFFABRRRQAUUUUAFFFFABRRWjoehat4k8QW+iaHYyXl/OfkiTgKO7seiqO5NNJydluTOcacXObslq29kUER5JUiijeSSRgiRxqWZ2PQKo5JPoK97+HP7Od3qCw6v8QDJaWrYdNIhcrLIP8Aps68p/uqc+pB4r034X/BnRPAMEep33l6n4hZPnvGX5LfI5SAH7o7bj8x9h8o9Or6XA5Mo2niNX2/zPyXiPj2dRvD5Y7R6z6v/D2Xnv2sU9L0rTdE0mHS9Isbeys4V2xwQIEVR9B/PvVyiivfSSVkfmcpSnJyk7thRRRTJCiiigAooooAKKKKACiiigAooooAK4D4hfCLwt8QYWubqI6frAXbHqlsMP2wJF6SLwODyB0Irv6Kzq0oVY8lRXR1YPG18HVVbDzcZLqv61Xk9D4P8b+APEvgDWRZa/aDyZSfs99BloLgezfwt6oefqOa5ev0J1rRNJ8RaJPpGt6fBfWU67ZIZlyD7juCOoIwQeQQa+TfiD8C/EvhjxLbxeGbO713S76byrVkG6WBzyEm7Bcf8tDgYHOO/wArj8pnQfPS1j+KP2XhrjWjmC9hjGoVV12jL79n5fd2Xmml6XqOt61baRpFlLeX10/lwwRDJY9yfQAckngAEmvsf4U/CnTvh1oxuJ2jvNfukAu70A4ReD5MWeiAjOerEZPQBT4U/CjTvh1oxnuGivdfuUAu74DhRnPlRZGVQcZ7sRk9gPRa9TLMsVBe1q/F+X/BPjuLuLnmEnhMI7UVu/5v/tey67vokUUUV7R8CFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUjMqIWZgqgZJJwAKNgPPfizdWt54Xbwrcbmj1Bc3ARyrCIHjBHqwH/AHyQeDXyf4o8HX/hyQzgm605mwl0q4KeiuOx9+h/Sve9e1Vta8Q3WoknZI2Igf4UHCj8ufqTWawV42ikRXjcbWRxkMD1BHev5zzPjfEVM2q4im+ajeyj05Vs12b3+evQ/XOHKtTKaEaa1T1kvN/qtvkfOPSivQ/FXw7eEPqPhuJpYfvSWI5ZPeP+8P8AZ6+ma89xX2+XZnh8wpe1w8r911Xk1/SfQ/RcLi6WJhz03/mhKKKK7zpCiiigAooooAKKKtabp1/q+r2ulaXaPdXt1KIYIE6ux/kB1JPAAJPAoSvohSkopyk7JFzw34b1jxb4mttA0G1+0Xs+SNxwkSDrI7fwqP14AySBX2h8Ovhvonw68O/YtPAub+YA3moum17hh7ZO1BnhQcD3JJNf4XfDXT/hz4V+zKUudWugr396B/rGHRFzyEXJAH1J5Nd1X1+WZasOvaVPjf4H4dxdxXPM6jw2GdqK/wDJn3fl2XzetrFFFFeufDhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVy/j3VP7O8ISwxvtmuyIEx1weWP/AHyCPxFdRXk3xH1H7X4pSxU5js4wv/A2wT+m2vkOOs1/s7J6sou0p+4v+3t/ujdnrZLhvrGLinstX8v+DY46iiiv5iP0YASDkGuU8VeB7PXt99YeXZ6njJbGI5/ZwOh/2vzzXV0V14LHV8FVVahK0l+Pk+6NqGIqUJ89N2Z883tjd6dfyWV9bvBcRnDRv1+o9R7iq9e+a5oGm+IrAW2oxkOmfKuE+/Efb1HseK8c8Q+GdS8N3oivUEkDn9zdRj5JPb/Zb2P61+r5HxJQzJKnL3avbo/OP+W681qfZ5fmtPFLlek+3f0MaiiivpD1QooooACQFLMcKBkk9q+q/gD8MB4d0NfGeuWu3WdQi/0aKQc2lu2CBjs78E9wMDj5s+RfBD4fL448ffbNRh36LpBSe5VhxPKcmOL3HG5vYAH7wr7Kr6HJcFzP6xNen+Z+X8f8QOmv7MoPV6zfl0j8935W7sKKKK+lPyUKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigBksqQwPNI21EUsx9ABk14BfXb3+p3F9J96eVpSPTJzj8K9h8b3v2HwPelWw8yiBffccH9M14tX4f4r5hzYihgk9Ipyfq3Zfck/vPs+GKFqc6z6u33f8OFFFFfkZ9SFFFFABUdzb297ZSWd5BHPbyjDxSDIP+fWpKKcZOLUouzQ02ndHkvivwFc6OH1DSRJd6cMlkPzSwfXA+ZffqO/rXF9gQcg96+jwSpyDXC+Kvh9DfmTUfD6JBdn5pLTO2OU+q9lb9D7V+iZFxenbD4969Jf/ACX+f39z6fLs7vaniX8/8/8AP7+55VTkSWWRYreF55nYJHFGMtI5OFUD1JIFLLFLBO8E0bxyxna8bjDKfQivV/2evCI8RfFUaxdRb7LQ4xcnPIa4bKxD8MO/sUWv0bD0nXqRhHr/AFc9jMsfTwGFqYue0Vf17L5uy+Z9I/DbwZD4D+HFhoClXugDPeTL/wAtZ35c57gcKP8AZVa62iivvqdONOKhHZH81YnE1MTWlXqu8pNt+rCiiirMAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPP/ijd7bLTrEEYeRpmH+6MD/0I15rXYfEm4E3jJIQTiG2RSPclm/kRXH1/MHHWL+s55iJX0i1H/wFJP8AG5+kZLS9ng6a76/fqFFFFfJHqBRRRQAUUUUAFFFFAGH4l8Kad4mg3zH7PfouIrtRk4/usP4l/Udq9e+CHg2bwb8LIor0R/b9Qne9nZDuGDhYwD6eWqHHqTXC2Fo1/qttYocGeVYs+mTgn8BmvoCONIoUijUKiAKqjoAOgr9p8KliKqrSqSvThZRT6N6u3y6ba6dT5/ifNKqwsMDze63f7tl6Xd/VDqKKK/Yz4MKKKKACiiigAooooAKKKKACiiigAqG7vLSws3u766htbdMbpp3CIuTgZJ4HJA/Gpq85+O4DfADXQwBG614Iz/y9RV1YHDrE4mnQbtzSS+92McTVdGjOqlflTf3I67/hLfCv/QzaP/4Gx/8AxVH/AAlvhX/oZtH/APA2P/4qvhIww5/1Mf8A3yKPJh/54x/98iv0D/USj/z+f3L/ADPlv9Zqn/Ptff8A8A+7f+Et8K/9DNo//gbH/wDFUf8ACW+Ff+hm0f8A8DY//iq+EvJh/wCeMf8A3yKPJh/54x/98ij/AFEo/wDP5/cv8w/1mqf8+19//APu3/hLfCv/AEM2j/8AgbH/APFUf8Jb4V/6GbR//A2P/wCKr4S8mH/njH/3yKPJh/54x/8AfIo/1Eo/8/n9y/zD/Wap/wA+19//AAD7t/4S3wr/ANDNo/8A4Gx//FUf8Jb4V/6GbR//AANj/wDiq+EvJh/54x/98ijyYf8AnjH/AN8ij/USj/z+f3L/ADD/AFmqf8+19/8AwD7t/wCEt8K/9DNo/wD4Gx//ABVH/CW+Ff8AoZtH/wDA2P8A+Kr4S8mH/njH/wB8ijyYf+eMf/fIo/1Eo/8AP5/cv8w/1mqf8+19/wDwD7t/4S3wr/0M2j/+Bsf/AMVR/wAJb4V/6GbR/wDwNj/+Kr4S8mH/AJ4x/wDfIo8mH/njH/3yKP8AUSj/AM/n9y/zD/Wap/z7X3/8A+7f+Et8K/8AQzaP/wCBsf8A8VR/wlvhX/oZtH/8DY//AIqvhLyYf+eMf/fIo8mH/njH/wB8ij/USj/z+f3L/MP9Zqn/AD7X3/8AAPu3/hLfCv8A0M2j/wDgbH/8VR/wlvhX/oZtH/8AA2P/AOKr4S8mH/njH/3yKPJh/wCeMf8A3yKP9RKP/P5/cv8AMP8AWap/z7X3/wDAPu3/AIS3wr/0M2j/APgbH/8AFUf8Jb4V/wChm0f/AMDY/wD4qvhLyYf+eMf/AHyKPJh/54x/98ij/USj/wA/n9y/zD/Wap/z7X3/APAPu3/hLfCv/QzaP/4Gx/8AxVH/AAlvhX/oZtH/APA2P/4qvhLyYf8AnjH/AN8ijyYf+eMf/fIo/wBRKP8Az+f3L/MP9Zqn/Ptff/wD7t/4S3wr/wBDNo//AIGx/wDxVH/CW+Ff+hm0f/wNj/8Aiq+EvJh/54x/98ijyYf+eMf/AHyKP9RKP/P5/cv8w/1mqf8APtff/wAA+7f+Et8K/wDQzaP/AOBsf/xVH/CW+FAMnxNo/wD4Gx//ABVfCXkw/wDPGP8A75FNkt4XiZPJj+YEfdFH+olH/n8/uX+Yv9Zqn/Ptff8A8A/QeisPwZqX9sfDnQdVL72utPgmY+7RqT+ua3K/OatN05yhLdO33H10JqcVJdQooorMoKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPEPGFwLnxzqcgOQJRH/wB8qF/pWJV3WJPN8SajKOj3Urfm5qlX8h5tWdfHV6r+1OT+9s/VcNDkowiuiX5BRRRXnm4UUUUAFFFFABRRRQB1Pw+tPtXjeGQjK28TzHPrwo/9C/SvYa82+FsAN1qd0Ryqxxg/UsT/ACFek1/R3hrhVRySFS3xylL8eX/20/P+IqvPjHH+VJfr+oUUUV98eGFFFFABRRRQAUUUUAFFFFABRRRQAV518dv+SBa7/vWv/pVFXotedfHb/kgWu/71r/6VRV6WTf8AIww/+OP/AKUjjzD/AHWr/hl+TPkI9aKD1or90PzUKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACjvRRQB9f8AwOvBd/ArRBuy1v51ufbZK4A/LFeh14/+zfceb8KL2AkHyNVlQD0Bjjf+bGvYK/Ds9p+zzCvH+8397ufpGWz58JTfkvw0CiiivKO4KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPniZt9zI/8Aedm/M0ygcjNFfxpKXM7s/XLW0CiiikAUUUUAFFFFABRRRQB6l8MIgPDt7Njlrrb+SL/ia7iuN+Gf/IoTf9fb/wDoK12Vf1LwZFRyTCpfy/m2z81zd3xlT1CiiivpzzQooooAKKKKACiiigAooooAKKKKACvOvjt/yQLXf961/wDSqKvRa86+O3/JAtd/3rX/ANKoq9LJv+Rhh/8AHH/0pHHmH+61f8MvyZ8hHrRQetFfuh+ahRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAfRv7Mk+fDXiO0z92+jmx/vRKv/tOvda+f/wBmM/uvFK/7dqf0l/wr6Ar8Z4pjbNKy9P8A0lH6Fkrvgqfz/NhRRRXz56gUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAfOxG1ivoSP1pKsX0Zh1W6hPVJnT8mIqvX8bVYOnNwfR2P1uL5kmFFFFQMKKKKACiiigAooooA9W+GTA+E7le63bf+gJXaV5/8LZ82GpW39yVJP8AvpSP/Za9Ar+ouCKqqZHhpL+W33Nr9D82zmPLjai8/wA0gooor6o8wKKKKACiiigAooooAKKKKACiiigArzr47f8AJAtd/wB61/8ASqKvRa86+O3/ACQLXf8Aetf/AEqir0sm/wCRhh/8cf8A0pHHmH+61f8ADL8mfIR60UHrRX7ofmoUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH0D+zH93xUfe0/lLX0DXgP7Ma/6L4okx1ltlz9FkP8AWvfq/GuKv+RpV/7d/wDSUfoOSf7lT+f5sKKKK+ePVCiiigAooooAKKKKACiiigAooooAKKKKAP/Q+/qKKKACiiigAooooAKKKKACiiigAooooAKKKKAPCPEUTQ+L9URhg/a5G/BmLD9DWZXS+PrcwePLttuBMkco9/l2/wA1Nc1X8kZ7h3h8yxFF9JyX4ux+p4KftMPTl3S/IKKKK8o6QooooAKKKKACiiigDtvhlc+X4lurUnAmt9w9yrD+jGvVK8O8KXv2Dxnp1wThTMImz0w/y/1B/Cvca/oTwvxirZTKh1pya+T1/Ns+E4lo8mKU/wCZflp/kFFFFfpB88FFFFABRRRQAUUUUAFFFFABRRRQAV518dv+SBa7/vWv/pVFXotedfHb/kgWu/71r/6VRV6WTf8AIww/+OP/AKUjjzD/AHWr/hl+TPkI9aKD1or90PzUKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD6S/ZmtyvgvX7sj/WamIwfZYIz/wCzmvcK8k/Z0tjB8H5ZyCPtOpTyj3wFj/8AZK9br8T4jnz5lWfnb7tD9FymPLg6a8vz1CiiivFPRCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigDzH4oWpTWLC+7SwtF/3y2f/ZzXB16z8SbMz+Eo7pVBa2nVifRWyp/Ur+VeTV/NXiJg/q2eVZdJpSXzVn+KZ+h5DW9pg4rtdf18mFFFFfEHshRRRQAUUUUAFFFQXt7aabZPeX9wkECdWY9T6D1PsKqEJVJKEFdvZLdkVKkKUHUqNKK1beiS8yfJALBtuBnd6e9e6+G9atfEXhSx1mznjmjuI8l4zld4O1wD7MGH4V8ZeJPGF3rha0tg9rp//PP+OX/f9vYfjmvZv2avE6yabqvg2eT95bv9vtVJ/wCWbYWRR7K+D/20r938PMkxGUuc8TKzqJe72te1331ei279vyXNeMsLmeOhhMNG8Ff3n1fku2m71b6d/fKKKK/UxhRRRQAUUUUAFFFFABRRRQAUUUUAFed/HQM3wD10KrMd1twoJP8Ax9RdhXolFdODxH1bEU69r8rTt3s7mOIpe2pSpXtzJr70fn+Y5c/6ib/v03+FHly/88J/+/Tf4V+gFFfc/wCvn/UP/wCTf/anzf8Aqwv+fv4f8E/P/wAuX/nhP/36b/Cjy5f+eE//AH6b/Cv0Aoo/18/6h/8Ayb/7UP8AVj/p7+H/AAT8/wDy5f8AnhP/AN+m/wAKPLl/54T/APfpv8K/QCij/Xz/AKh//Jv/ALUP9WP+nv4f8E/P/wAuX/nhP/36b/Cjy5f+eE//AH6b/Cv0Aoo/18/6h/8Ayb/7UP8AVj/p7+H/AAT8/wDy5f8AnhP/AN+m/wAKPLl/54T/APfpv8K/QCij/Xz/AKh//Jv/ALUP9WP+nv4f8E/P/wAuX/nhP/36b/Cjy5f+eE//AH6b/Cv0Aoo/18/6h/8Ayb/7UP8AVj/p7+H/AAT8/wDy5f8AnhP/AN+m/wAKPLlAJMMoA6kxsAPxxX6AV5d+0Bq/9m/Bm4s1OJNSuYrRcHoM+Y3/AI7GR+NdeB4yli8RDDxoW5ml8W3n8PQwxPD6oUpVXU2V9v8AgnydRR3or7k+aCiiigAooooAKKKKACgdaKbKSIXKgltpwB60AfZHwYszZfArw6rLtM0DXP1ErtID+TCu8rO8P6d/Y/hLS9I4/wBDtIrfj/YQL/StGvwPHVvb4mpV/mk397ufqGGp+zowh2SX4BRRRXKbBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBQ1qxGp+Hb2wwC00LKuezY+U/nivBOe4we9fRVeH+LdO/szxjfW4XEbv50fGBtfnj6HI/Cvx7xYy69OhjorZuL+eq/J/efWcL4iznRfqvyf6GLRRRX4ofYBRRRQAUUAEnArkfEvjaDTd9hpJS4vBlXl6pCf/Zm9u3f0rvy7LMRmNZUMNG7/AAS7t9F/S1PMzXN8LlVB4jFz5Y9O7fZLq/8Ah3Zamxr3iPT/AA/bBrkmW5cZjtkPzN7n0Hv/ADrynWNa1DXL77Tfy5A/1cK8JGPYevv1qnPPPdXMlzcyvNNIcvI5yWNR1+08P8MYfKY8/wAVV7y7eUey893+B/P/ABPxhis7m6fwUVtHv5yfV+Wy6a6srd8GeKJ/BvjrTfEkW9ktZP8ASI05MkLDbIuO5wcj3ArCor6eMnFprc+Tp1JU5KcHZrVH6BW9xBd2cV3bSrLBMgkjkQ5DqRkEH0INSV4f+zv43XUPDsvgjUJv9L05TLZlzzLbk8qP9xjj/dZfQ17hX1FCqqsFNH6xgMZHF0I1o9fwfVBRRRWp1hRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFfNX7SWvi78X6T4bhcFLGBrqYA/8tJDhQfcKhP8AwOvpC6uYLKymvLqVYoIUaWSRuiKoySfYAV8L+Jtfm8VeMtT8STqytfzmVUbqkYAWNfwRVH4V9nwVgXVxcsQ1pBfi9Pyv+B89xFieSgqS3k/wX/BsZVFFFfqZ8UFFFFABRRRQAUUUUAFbvgrSv7c+JWgaSU3pPqEPmL6xo29x/wB8o1YVer/s9aN/aPxbk1R1Jj0qzeUHHSSX92v/AI75v5VwZpifq2Dq1u0Xb16fjY6sFR9tiIU+7X3dfwPquiiivwg/TAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACvPvidpha3s9YjX7hNvKR6HlT9Acj/gVeg1R1nTY9X0G602QgCZMBj/C3VT+BANeFxLlX9q5bWwiXvNXj/iWq/FW9Dty7FfVcRCr0T19HueB0U6SOSKVopUKSISrqeqkcEU2v5Raadmfp+4UyaaG3t3uLiVIoUG55HOAo9SaqatrFholj9q1CXaDwkajLyH0UV5Vr/iXUPEFx+/Pk2qnMdsh4Hux/iP+RX0mQcMYnNpc/wANJby/Rd3+C69j5HifjDC5JDk+Os9orp5y7L8X07rY8S+OJ7/zLDRmeC06NPyry/T+6v6n2rjgABgDAoor9qy3LMNl1FUMNGy692+7fV/0j+fs2zfFZrXeIxc7vp2S7JdF/TuwooorvPMCiiigDQ0PW9R8OeJLLXtJkCXtnJ5sec7XHRkbH8LAkH2NfbfhLxRpvjLwhZ+INKf9zcL80TEboXHDRt7g8fr0Ir4Ur0H4TfEiXwB4q2X0jtoN8wW9jAJ8huAJ1A54HDAckepAruwOJ9jLllsz3shzX6nV9nUfuS38n3/z/wCAfYtFMhmhubaO4t5UlhkUOkiHcrqRkEEdQRT6+gP0jcKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiis3xBruneGfDN7r2rSmO0tIzJIQMk9goHckkAD1IqoQlUkoQV29ETKSinKWyPKf2hvGQ0vwlF4Ps5SLzVRvuCpwY7ZTz/32w2+4D18y1reJvEWoeLPFt94h1Pi4u3yIwciFBwkY9lGB7nJ71k1+25Hliy7CRo/a3fq/8tvkfnWZYx4uu6nTZen9ahRRRXrnAFFFFABRRRQAUUUUAFfTn7OGhCy+Ht94hdMSardFUb1ihyi/+PmWvmRY5pnWG2jMk8jCOJB1Z2OFH4kivurwvoUPhnwXpegW+0pZWyQllGN7AfM34tk/jXxnG2M9lg44dPWb/Ba/nY+h4cw/PXdV7RX4v/gXNeiiivyw+1CiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPJfiHoxsPEg1CJMQXo3HHQSD735jB+ua8t8R+LrPQla2gC3V+RxED8sfu57fTqfbrX0R490C78SfD/AFHTNNn8jUTEXs5ePllA+Xk9M8qT2DE18PuJRNIJ1kWYOwlWT74cHDBs985zX5LmXAWHlm1TGVX+6k+ZRXd/Fd9r66d7aW1nPeNcVl+Dp4XDRtUatzvZJdl3t30XnfSa+v7zU75ry/naaduNx4AHoB2HtVeiivqYU404qEFZLRJaJH49UqTqzdSo25PVt6tvu2FFFFWQFFFFABRRRQAUdKKKAPZPgv8AFoeF5ovCniS4xokjYtbqQ8WLE/dY/wDPMnv/AAk+h4+oQQyhlIIPII71+fVeyfCX4zy+FxB4b8VTSTaJwlveHLPZf7Ld2i9O6+4+76mCxvJ+7qbdGfWZFnqopYbEv3ej7eT8vy9NvqKio4J4Lq1iubaaOaCVBJHLGwZXUjIYEcEEc5qSvaPuk7hRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFNkkjiiaWV1SNAWZ2OAoHUk9hQASSRwwvLK6xxoCzOxwFA6knsK+SvjD8S/8AhOvECadpUjf8I/YSZhPT7VKMgzf7uCQo9CT3wNf4v/GA+KfN8MeF52XRAdtzdqcG9P8AdU/88vX+99Ovjtfp3C3Drw1sZil7/RdvN+f5eu3xudZsq37ii/d6vv8A8D8/Tcooor7g+bCiiigAooooAKKKKACiijjqTgUAej/A/wANf8JD8XrS4ljLWukr9vlPbeOIh9dx3f8AADX13XlnwE8KnQPhemq3MW281pheNkcrDjES/wDfOW+rmvU6/HOKcf8AW8fJRfuw91fLf8b/ACsfoGS4X2GFV95a/wCX4BRRRXzh6wUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV8s/H/AMDf2B4yXxVYQhdO1d8TBRxHdYJJ+jgbvqreor6mrH8VeG9P8XeEL7w9qanyLqPbvH3o2HKuvupAI+lc+Koe2puPXoeZm2AWNw7p/aWq9f8Ag7HwjRWhrmi6j4c8R3mhatEI72zk8qTGdrd1dc9VYEEH0NZ9fNNNOzPy2UXFuMlZoKKKKQgooooAKKKKACiiigAooooA7/4c/FfXfh/cLabW1LQ2Yl9Pd8GIk8tCx+6f9n7p56E5r6q8K+MPD3jTRRqfh/UEuYxgSxkbZIWP8LoeVPX2OOCRzXwtV7SNZ1bw/rEeraJqE9hex8LPCeSP7rA8MvsQRXbhsdKj7r1R72V59VwVqc/eh26r0/y/I++KK8J8EftFafdiLT/HNqNPn+6NStlLW7+7ry0Z/Me617dY39jqenxX2m3tveWso3Rz28gkRx6hlJBr26VeFVXgz7zB5hQxkeajK/l1XyLFFFFbHYFFFFABRRRQAUUUUAFFFFABRRRQAUVHPPBa20lxczRwwxqWeSRgqqB1JJ4Arx3xt+0J4f0fzbDwhHHrt8OPtIbFpGf98cyf8B4P94VlVrQpK83Y5cXjaGEjz1pW/N+iPVNe8QaN4Y0SXV9d1CKys4+skh5Y9lUDlmPYAEmvln4mfF/VfHTSaTp6y6b4fDf6gn97d4PDSkdB32A49SeMcR4j8T674t1k6p4h1GW9uBkRhvljhH92NBwo/U9yayw2ev519LwZmuVvE8uKXLUv7jfw/wDAl2vp2s9/isfxBLF3pU/dh+L9f8haKMUV+zHkBRRRQAUUUUAFFFFABRRRQAV0vw/8JyeNviHp+gBWNqzefesP4bdCN/PbdkID6uK5okAEk4A5Jr6o+AnglvDvgVvEF/AU1LWNsoVxhorcf6tfbOS5/wB4A9K8TiDM1l+DlUT956R9X1+W/wDw56OV4P61iFB/CtX6f8E9YjjSKJYokVEQBVVRgADoAKdRRX4ofooUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAHj/AMdPhw3ibQB4n0a2L6xp0Z8yJBzdQdSvuy8sv/Ah3FfLAKsoZSCpGQR3FfoPXy18cfhkfDOsv4s0S2xot9L/AKTFGOLSdu+OyOfwDHHdRXkZhhf+Xsfn/mfGcSZV/wAxlJf4v8/8/v7nj1FFFeQfGBRRRQAUUUUAFFFFABRRRQAUUUUAGSK1/D/inxF4VvftXh3WbrTnJy6RNmKQ/wC3Gcq31IzWRRTTad0VCcoSUoOzXY998M/tK3MYjt/GGgCYdGvNLOD9TE5/PDfQV6z4f+KfgHxLtTTfEtms5x/o10fs8ufQK+CfwzXxTSMquu11Vh6MM13U8xqw0lqe/heJcXR0naa89/vX63P0Hor4N0jxL4j0AY0PX9T05f8Annb3Lqn/AHxnb+ldhYfHP4nWJG/X4L9R/DeWUR/VAp/WuyOaQfxRaPapcWUH/Eg16Wf+X5H2FRXy9b/tKeNI1AuNE0Kf3USxk/8AjzVcX9pzXwPm8HaYx9r5x/7TNarMaHf8DtjxLgHvJr5P9D6Vor5ok/aa8SMP3XhLSoz/ALV3I/8A7IKz7n9o/wAeSoVt9O0G29/JlkI/OQD9KHmNHv8AgKXEuBW0m/k/1sfU9BIAJJAA6k18b3vxr+J98GU+KTaoeqWlpCn6lSw/OuS1XX9e10/8TvXNS1Ef3bq6eRR9FJwPyrGWaQXwxZxVeLKC/h02/Wy/zPsbXfij4A8OFk1LxPYmYZ/0e2Y3EmfQrHkj8cV5X4j/AGlhteDwj4dYn+G71Rto/CJDk/iw+lfPaqqLhFVR6KMUtclTMastI6HjYnibF1dIWgvLf73/AJI3vEvjXxV4wn3+ItbubyPOVtgfLt19MRLhc+5yfesHNFFcMpOTu2eDUqTqS5pu77sKKKKRA9W9eRS9sio6cGwa/ROF+OquA5cLj250tk95R/zXluul9EbU6ttGOoo4PT8qK/asPiKWJpxrUZKUXs1szqTvqgooorYAooooAKKKsWFhfarq1tpemW7XN7dSCGCFTjex6c9h3J7AE9qUpKKu3oNJt2R2fwm8CHx149jhu4d+j2G24v8AI4cc7If+BEc/7Ib1FfY4AAwBgVy/w/8ABdn4E8EW+iW7LLcf627uQMefMfvN9OgA7ACuor8Z4izf+0sU5Q+COkf1fz/Kx+g5TgPqlG0vier/AMvkFFFFeAeoFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVW1CwstV0q403UbaO5tLmNopoZBlXRhgg/hVmihq4mk1Znxj8Tvhze/D3xN5KmS40a6Ymxu25I7+U5/vr6/xDn1A4evvHxH4d0nxV4budD1u1FxaXC4I6Mh7Mp7MDyDXxx4+8B6v8P/E39malme1my1lfgYW5QYzx/C4yAV/EcEV4GNwjpPmj8P5H53nmTPBy9rSX7t/h5enb7vXlaKKK4D54KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigBQcU8EHrjNR0V9Fw/xNi8lqXpPmpveL2fmuz8180y4VHEk6UUgb1pcV+9ZNnmEzej7bDS23T3j6r8ns+h1xkpK6CiiivYKEJCqWY4A5JNfTnwM+GT+H9OHi/X7bZq15Hi1gcc2kDAHkHpI3f0GBwdwrj/gj8K/7buYPGniK2zpcTb9PtZBkXTg/wCtYf3FI4H8R56Abvpevzzi3P074DDv/E//AG3/AD+7ufV5Fle2Jqr0X6/5ff2Ciiivzw+rCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArI8TeGdH8X+GrjQ9ctRPazc8HDxsOjof4WHY/zBIrXopNKSsyZwjOLjJXTPifx/wDDzWvh/r32TUA1zYTMfseoquEmH91v7sgA5Xv1GR05GvvfWtE0rxFok+ka1YxXllOu14pBkexB6gjqCOQeRXyd8TfhJq3gG4k1G0MuoeHmb5LvGZLbJwFmwMYyQA44PfBxnwsXgnS9+Hw/kfn2c5FLCN1qOtP8V/wPP7+55zRRRXnnzgUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABTg2P8KbSEhVLMQABkk9BXZgMfiMBWWIw03GS6/o+68noNScXdEvB5FesfCP4Ry+MbmPxB4igeLw9G2Y4WBVr8jsPSIHqf4ug4yat/Cj4KXPiJoPEfi+3kt9H4kt7F/lkvO4Zxj5Yj6dW9h1+nIYYre3jggiSKKNQiRooVVUDAAA6ADtX6pPjmvisCoxhyVXo30t3j1V/Pbo3uvsslyd1kq+IjZdF3835fn6bqiJFEscaKiKAqqowAB0AFOoor40+zCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACmyRxzQvDNGskbqVZHGQwPBBHcU6igD53+JPwBeLztb+H8OY8F5dGLdPUwMTx/1zP4EcLXgckckM8kE0bxSxMUkikUq6MOCrKeQR6Gv0ErhPH3wo8NePYjc3KGw1dVCx6lbqN+B0V16SL7HkdiK8vE5epe9S0fY+SzThqNS9XCaPt0fp2/L0PjSiur8afDrxT4Duyut2XmWROI9StQz27+gLY+Rv8AZbGe2etcpXjyi4PlkrM+Kq0p0ZuFRWa6MKKKKkzCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKK63wR8OPE/j28A0i18mwVsS6ncqywL6hTj943+yv4kdaqEJTfLFXZpSozrTVOmrt9EcvbW1xeXsNnZ28tzczuEighQu8jHsqjk19HfDD4EQ6W8PiDxzFFc36kPb6ZkPFbEZ+aQg4kfpx91f9o4I77wF8MPDXgCz3WERu9TkULPqVwAZX9QvZEz/CPbJJ5rta9nC5eoe9U1Z9xlPDkaLVXFay6Lov83+HruFFFFemfVBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAEdxb293ayW11BHPBIpR4pVDK4PUEHgivFPG37O2kaiZb/wVcppF0fmNhLlrVz6L/FF+GV9FFe30VlVowqq00cmLwFDFx5a0b/mvRnwj4j8K+IvCOoCz8SaTPYOxxHI+Gil/wByQfK30zn1ArHr7/vbKy1GxkstQtILu2lGJIZ4w6OPQqeDXjvir9nPw5qJa58KX0uhz8n7O4M9ux9ACdyfgSB/drya2WyjrTdz47G8LVqfvYZ8y7PR/wCT/A+YqK7LxN8K/HfhMySajoM1zaIT/punZuIsepAG5B7sorjFKsMqwYexrzpQlB2krHzVWjUoy5KsWn5i0UUVJkFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRSMVQZdgo9ScV2Hhn4X+OvFhjk0vQJ4bV8f6bf5t4cf3hu+Zx/uqaqMJTdoq5pSo1K0uSnFt+WpyFa3h7wzr/izUjY+HNKn1CZTiRowBHF/vucKv4nPpX0J4U/Zx8P2BW58XahLrUw5+yw7re3U+hwdz/iQD3Fex2GnWGlafHYaZZW9naxDCQ28YRFHsBxXo0ctnLWo7fmfS4LhetUtLEvlXZav/ACX4njHgn9nbSdPMd/42uE1a5HzCwhytqh9Gz80vbrgeoNe2W9vBaWsdtawRwQxqFSKJQqoB0AA4AqSivWpUIUlaCPscHgKGDjy0Y2/N+rCiiitTsCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACuT8SfDPwN4rd5tZ8O2j3TdbyBfJn/GRME/Q5FdZRUyhGStJXM6tGnWjy1Iprz1Pn/Xv2ZoSry+F/E8yH+G31SMSD6eYgUgfVWrzjWvgr8SNE3M2gDUolP+t0yYTZ+iHa//AI7X2PRXHUy6jLbQ8PEcNYOrrFOL8n+jufAF/ZX2lXBg1Wxu9PlHWO8geFh+DAVACGGVII9Qc1+gU0ENzC0NxDHLG3VJFDA/UGuV1L4XfDvViTeeDtI3Hq8EAgY/8CTBrkllcvsyPIq8JVF/CqJ+qt+Vz4nor6xvv2efhxdsTbW+p6eT/wA+167AfhJurEuv2ZfDb5+xeJ9ah9POWKX+SLWDy6suzOCfDOOjsk/R/wCdj5por6Ek/ZgUn9145df9/TQ38pBUJ/Zfus8ePogPfSP/ALfUfUK/8v4r/MwfD+Yf8+vxj/meA0V9AL+y/N/H48Q/7uk4/wDaxqxF+zDagj7R41uXHfy7FE/mxp/UK/8AL+KBcPZg/wDl3+Mf8z53owfSvpy3/Zo8IIP9K1/X5j/sPDGP/RZP61uWPwA+GdpzPpV3fN63V7Kf0VlH6Vay2s+yOiHDGNlvZer/AMkz5GZlRSzsqgd2OKt6dpmp6vKItI0y+1Fz/DZ2zzH/AMdBr7V034c+AtJ2mw8H6NG68iRrVHcf8CYE/rXSoiRxiONFRFGAqjAFbxyt/akd9LhKb/i1UvRX/wAvyPj3Rvgj8SdZCv8A2HFpkTf8tNTuBHj/AIAu5/zFei6F+zNbgJJ4n8UTyHq1vpkQiX6F3DEj6Ba9/orqp5dRjvqeth+GsFS1knJ+b/RWOS8OfDLwL4VdJtI8OWa3SYIu5186cH1Ej5I/DArraKK7IwjBWirHuUqNOjHlpxSXkrBRRRVGgUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRVX+09O/6CFr/wB/V/xo/tPTv+gha/8Af1f8aALVFVf7T07/AKCFr/39X/Gj+09O/wCgha/9/V/xoAtUVV/tPTv+gha/9/V/xo/tPTv+gha/9/V/xoAtUVV/tPTv+gha/wDf1f8AGj+09O/6CFr/AN/V/wAaALVFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAedafaC8vBG5IQYzt6nLBQB+LCpbmCxktmmsjICi7mDggEbgv8AMjv+VVLe4ltpxLE2GHHPII9DU93qU92gRlSNR1CZOfqSSfwoAtQWdoiWsUttPdT3KeZtifbsXJ6ccngmoxpStNJvn+zRiXyk89TuLdcHbnHUc1FDqcsVskDwW86xkmMypkp9Of509dYuPNkkkht5t7iXEikhWxjI5oAWHSXf5ZriOCRpDDGjgnew4I4HHJApYdHeVED3MUUzo0iwsDuKjPPp2PFRw6tcxA7khmbeZVeVdxRj1I/Q/hVy01WKG0DTMssqxsg3RfPznAD56ZOc4z1oAjTSPtJg8hiim2E0jEFzksRwAMnoKo3tnLY3r202Cy4ORnBBGamj1SdAqmKGRBEITG6khgDkZ565NVJpTNO0hREz/DGu0D6CgD02iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k='/>
<div class="u-name">{{Username}}</div>
</div>
<a id="ImageDownload" href="" ></a>
</form>
</div>
</div>
<script>
</script>
</body>
</html>

Related

How to create a greeting card by html using canvas

I used the canvas to save what's inside the div as an image, but it worked if the
css (dispaly:none) property was not showing..
I want the image to be hidden so that it does not appear, and when I press the download button, it downloads what's inside the div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="capture" style=" position: relative;padding: 10px; ">
<img width="500" height="500" src="pic1.png" />
<div style="position: absolute; top:450px; left:450px">my name is</div>
</div>
<div id="invite">
</div>
<div id="print-area">
<button onclick="print()" id="print">download</button>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function print(){
html2canvas(document.querySelector("#capture")).then(canvas => {
var link = document.createElement('a');
link.download = 'filename.png';
link.href = canvas.toDataURL()
link.click();
});
}
</script>
</body>
</html>

working with html and javascript and changing the properties of html document but this is not working in my case?

here I am trying to change the image source property with the help of javascript but it is not working my case how can I change this .some one suggest me change in code.so that is can work in my case.
this is the CSS file for formatting the HTML code.
here I am using both logos from the internet.
also changing the background and background is changed but imaged is not changed.
function hello() {
console.log(document.getElementsByTagName("img").src);
document.getElementsByTagName("img").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
</body>
</html>
Get the elements id instead. document.getElementById("hero").src = "https://www.facebook.com/images/fb_icon_325x325.png";
This way you are specific in which element you are trying to get. Because you using a tag, you need to specify which child of the tag you are getting.
could use document.getElementsByTagName("img").item(0); or document.getElementsByTagName("img")[0] or be more specific and get it by its id.
The [0] is the first occurrence of the tag on the page, numerical increments of items in code start with 0, if there were two, the key would be [1].
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
document.getElementById("hero").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>
The error was that getelementsbyTagName returns an HTMLCollection list which is an array-like object.
Thus if you want to access the element , you have to use the arr[0] style.
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
Code
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<head>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>

How can I open a file into Ace text editor?

How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You can use the file input element as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<div id="editor"></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/html",
placeholder: "choose file to edit"
});
function openCode(files) {
var file = files[0]
if (!file) return;
var modelist = ace.require("ace/ext/modelist")
var modeName = modelist.getModeForPath(file.name).mode
editor.session.setMode(modeName)
reader = new FileReader();
reader.onload = function() {
editor.session.setValue(reader.result)
}
reader.readAsText(file)
}
</script>
</body>
</html>

How to print the text dynamically on the image in html using angularjs in two way binding method?

In this code the text is printing on the side of the image but I need on the image so please help me to finish. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<img src="DHONI.jpg">{{Username}}
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
</script>
</body>
</html>
You need to wrap the {{ Username }} in a <div> and give it position: absolute. Also wrap the img and this div inside a parent div with position: relative. See code below:
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
.ctn {
position: relative;
}
.u-name {
position: absolute;
top: 5px;
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<div class="ctn">
<img src="https://via.placeholder.com/150">
<div class="u-name">{{Username}}</div>
</div>
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
</script>
</body>
</html>

intel-xdk: not able to get contacts list

I am not able to get contacts list.
HTML Code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:green; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<script>
document.addEventListener('intel.xdk.contacts.get', contactsReceived, true);
function contactsReceived() {
alert("contacts recieved");
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
alert("Contacts length: "+myContacts.length);
}
</script>
</body>
</html>
intel.xdk.contacts.get event is not fired. Is it a bug ?
I was not calling intel.xdk.contacts.getContacts() inside onDeviceReady. Found this from the post here.
Hi i am getting same problem. But I am able to get contacts in Phone after deploying (Sony xperia ion).
This is my code.
I set the permission for contacts.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script src="intelxdk.js"></script>
<!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>
<!-- phantom library, needed for XDK CORS -->
<script type="text/javascript" language="javascript">
var onDeviceReady = function () { // called when Cordova is ready
if (window.Cordova && navigator.splashscreen) { // Cordova API detected
navigator.splashscreen.hide(); // hide splash screen
}
setTimeout(function () {
$.ui.launch();
}, 50);
intel.xdk.contacts.getContacts();
};
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if (isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios || $.os.ios7))
$("#afui").removeClass("ios");
});
document.addEventListener('intel.xdk.contacts.get', contactsReceived, false);
function contactsReceived() {
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
if(myContacts.length==0)
{
alert("No contact found");
}
for(var i=0;i<myContacts.length;i++) {
//add row to table
var contactInfo = intel.xdk.contacts.getContactData(myContacts[i]);
var tr = document.createElement("tr");
tr.setAttribute('id', 'pnid'+contactInfo.id);
tr.setAttribute('onClick', 'document.getElementById("iden").value = '+contactInfo.id+';');
tr.setAttribute('style', 'background-color:#B8BFD8');
var id = document.createElement("td");
id.innerHTML = contactInfo.id;
tr.appendChild(id);
var msg = document.createElement("td");
msg.innerHTML = contactInfo.name;
tr.appendChild(msg);
table.appendChild(tr);
}
}
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" onclick="contactsReceived();">Hello World</a>
<table id="contacts">
</table>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</body>
</html>