<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" ng-app="syllabicApp" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="https://www.eastcree.org/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://www.eastcree.org/css/bootstrap-theme.min.css"/> <script type="text/javascript" src="https://www.eastcree.org/js/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="https://www.eastcree.org/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.eastcree.org/js/angular.min.js"></script> <script type="text/javascript" src="https://www.eastcree.org/js/angular-route.min.js"></script> <script type="text/javascript" src="https://www.eastcree.org/js/angular-sanitize.min.js"></script> <style type="text/css"> @font-face { font-family: "BJCree UNI"; src: url("/downloads/bjcrus.eot"); src: local("BJCree UNI"), url("/downloads/bjcrus.ttf") format("truetype"); } .syl { font-family:"BJCree Uni"; font-size:1.5em; /*color:#600;*/ } body{ background: #eee; } .table-wrap{ display: inline-block; background: #DDDDFF; padding: 0.25em; margin: 1em; border: 0.5em solid #8888BB; } .syllabic-chart{ margin: 0 auto; max-width: 90.2em; } .syllabic-chart h1{ color: #e0e0f1; margin-left: 0.4em; } .main-section{ float: left; width: auto; } .side-section{ float: left; width: auto; } .syllabic-button{ } .syllabic-button td{ padding: 0.25em; } .syllabic-button span{ width: 5em; min-height: 4.6em; } .syllabic-button img{ max-height: 2em; } .btn-default { background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0f1 100%); background-image: -o-linear-gradient(top, #ffffff 0%, #e0e0f1 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0f1)); background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0f1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0f1', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background-repeat: repeat-x; border-color: #dbdbec; text-shadow: 0 1px 0 #fff; border-color: #ccd; border-radius: 0px; } .btn-default:hover, .btn-default:focus { background-color: #e0e0f1; background-position: 0 -15px; } .btn-default:active, .btn-default.active { background-color: #e0e0f1; border-color: #dbdbec; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #e0e0f1; background-image: none; } @media only screen and (max-width: 1268px) { .syllabic-chart{ margin: 0 auto; max-width: 73em; } .btn-lg, .btn-group-lg > .btn { padding: 8px 10px; font-size: 14px; line-height: 1.3333333; } } @media only screen and (max-width: 1020px) { .table-wrap{ display: inline-block; background: #DDDDFF; padding: 0.1em; margin: 0.2em 0.1em; border: 0.1em solid #8888BB; } .syllabic-chart{ margin: 0 auto; max-width: 55em; } .syllabic-chart h1{ margin-left: 0.1em; } .main-section{ float: left; width: auto; } .side-section{ float: left; width: auto; } .syllabic-button td{ padding: 0.1em; } .syllabic-button span{ width: 5em; min-height: 4.9em; } .btn-lg, .btn-group-lg > .btn { padding: 8px 8px; font-size: 12px; line-height: 1.3333333; } } @keyframes colors { 0% {color: white;} 25% {color: red;} 50% {color: blue;} 75% {color: green;} 100% {color: white;} } @keyframes borders { 0% { border-color: rgba(255,255,255,0);} 12.5% { border-color: #fff rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);} 25% { border-color: #fff #fff rgba(255,255,255,0) rgba(255,255,255,0);} 37.5% { border-color: #fff #fff #fff rgba(255,255,255,0);} 50% { border-color: #fff ;} 62.5% { border-color: rgba(255,255,255,0) #fff #fff #fff ;} 75% { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff #fff ;} 87.5% { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff ;} 100% { border-color: rgba(255,255,255,0);} } </style> </head> <body data-ng-controller="SyllabicController"> <div id="loading" style="background:rgba(0,0,0,0.6); position:fixed; top:0;left:0;right:0;bottom:0;"><div style='position:fixed; top:30%; left:30%; color:white; font-size:3em; border: 10px solid #fff; padding:2em; border-radius:1em; animation-name:borders; animation-duration: 8s;animation-iteration-count: infinite;animation-timing-function: linear;'>Loading ...</div></div> <div class="syllabic-chart"> <h1 class=" page-header " style="color:#666">Syllabic Chart: Eastern James Bay Cree</h1> <div class="table-wrap main-section"> <table class="syllabic-button"> <tr> <td onclick="playAudio(this)">  e <audio> <source src="https://www.eastcree.org/snd/syllabics/e.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> <td onclick="playAudio(this)">  i <audio> <source src="https://www.eastcree.org/snd/syllabics/i.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  ii <audio> <source src="https://www.eastcree.org/snd/syllabics/ii.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  u <audio> <source src="https://www.eastcree.org/snd/syllabics/u.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  uu <audio> <source src="https://www.eastcree.org/snd/syllabics/uu.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  a <audio> <source src="https://www.eastcree.org/snd/syllabics/a.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  aa <audio> <source src="https://www.eastcree.org/snd/syllabics/aa.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  </td> <td onclick="playAudio(this)">  we <audio> <source src="https://www.eastcree.org/snd/syllabics/we.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  wi <audio> <source src="https://www.eastcree.org/snd/syllabics/wi.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  wii <audio> <source src="https://www.eastcree.org/snd/syllabics/wii.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  wu <audio> <source src="https://www.eastcree.org/snd/syllabics/wu.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  wuu <audio> <source src="https://www.eastcree.org/snd/syllabics/wuu.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  wa <audio> <source src="https://www.eastcree.org/snd/syllabics/wa.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> <td onclick="playAudio(this)">  waa <audio> <source src="https://www.eastcree.org/snd/syllabics/waa.mp3" type="audio/mpeg"> </audio> </td> </tr> <tr data-ng-repeat="row in ['p','t','k','ch','m','n', 'l', 's', 'sh', 'y', 'r', 'v', 'th']"> <td data-ng-repeat="syl in ['e','we','i','ii','u','uu','a','aa', 'waa']" onclick="playAudio(this)" >  {{row+syl}} <audio data-ng-init="mp3File='https://www.eastcree.org/snd/syllabics/'+row+syl+'.mp3'"> <source data-ng-src="{{mp3File | trustedResource}}" type="audio/mpeg"> </audio> </td> </tr> </table> </div> <div class="table-wrap side-section"> <table class="syllabic-button"> <tr> <td onclick="playAudio(this)">  u <audio> <source src="https://www.eastcree.org/snd/syllabics/u.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  h <audio> <source src="https://www.eastcree.org/snd/syllabics/h.mp3" type="audio/mpeg"> </audio> </td> </tr> <tr> <td onclick="playAudio(this)">  </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  p <audio> <source src="https://www.eastcree.org/snd/syllabics/p.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  t <audio> <source src="https://www.eastcree.org/snd/syllabics/t.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  k <audio> <source src="https://www.eastcree.org/snd/syllabics/k.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  kw <audio> <source src="https://www.eastcree.org/snd/syllabics/kw.mp3" type="audio/mpeg"> </audio> </td> </tr> <tr> <td onclick="playAudio(this)">  ch <audio> <source src="https://www.eastcree.org/snd/syllabics/ch.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  m <audio> <source src="https://www.eastcree.org/snd/syllabics/m.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  mw <audio> <source src="https://www.eastcree.org/snd/syllabics/mw.mp3" type="audio/mpeg"> </audio> </td> </tr> <tr> <td onclick="playAudio(this)">  n <audio> <source src="https://www.eastcree.org/snd/syllabics/n.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  l <audio> <source src="https://www.eastcree.org/snd/syllabics/l.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  s <audio> <source src="https://www.eastcree.org/snd/syllabics/s.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  sh <audio> <source src="https://www.eastcree.org/snd/syllabics/sh.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  y <audio> <source src="https://www.eastcree.org/snd/syllabics/y.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  r <audio> <source src="https://www.eastcree.org/snd/syllabics/r.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  v,f,ph <audio> <source src="https://www.eastcree.org/snd/syllabics/v.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> <tr> <td onclick="playAudio(this)">  th <audio> <source src="https://www.eastcree.org/snd/syllabics/th.mp3" type="audio/mpeg"> </audio> </td> <td onclick="playAudio(this)">  </td> </tr> </table> </div> </div> <script type="text/javascript"> function playAudio(cell){ var audio = $("audio",cell); audio[0].play(); } angular.module('syllabicApp', ['ngSanitize']) .controller('SyllabicController', ['$scope', function( $scope) { $scope.syllabics ={ "syllables": { "thwâ": "ᕨ", "chwe": "ᒒ", "chwâ": "ᒞ", "lwâ": "ᓨ", "shwe": "ᔗ", "shwâ": "ᔣ", "thwe": "ᐧᕞ", "vwe": "ᐧᕓ", "mw": "ᒽ", "rwe": "ᐧᕂ", "pwe": "ᐺ", "pwâ": "ᑆ", "the": "ᕞ", "thi": "ᕠ", "thî": "ᕢ", "thu": "ᕤ", "thû": "ᕥ", "twâ": "ᑣ", "tha": "ᕦ", "thâ": "ᕧ", "twe": "ᑗ", "kwe": "ᑴ", "kwâ": "ᒀ", "che": "ᒉ", "chi": "ᒋ", "chî": "ᒌ", "chu": "ᒍ", "chû": "ᒎ", "cha": "ᒐ", "châ": "ᒑ", "mwe": "ᒬ", "mwâ": "ᒸ", "nwe": "ᓉ", "nwâ": "ᓍ", "swe": "ᓶ", "she": "ᔐ", "shi": "ᔑ", "shî": "ᔒ", "shu": "ᔓ", "shû": "ᔔ", "sha": "ᔕ", "shâ": "ᔖ", "swâ": "ᔂ", "ywe": "ᔯ", "rwâ": "ᕎ", "vwâ": "ᕛ", "we": "ᐌ", "wi": "ᐎ", "wî": "ᐐ", "wu": "ᐒ", "wû": "ᐔ", "wa": "ᐗ", "wâ": "ᐙ", "pe": "ᐯ", "pi": "ᐱ", "pî": "ᐲ", "pu": "ᐳ", "pû": "ᐴ", "pa": "ᐸ", "pâ": "ᐹ", "th": "ᕪ", "te": "ᑌ", "ti": "ᑎ", "tâ": "ᑖ", "tî": "ᑏ", "tu": "ᑐ", "tû": "ᑑ", "ta": "ᑕ", "ke": "ᑫ", "ki": "ᑭ", "kî": "ᑮ", "ku": "ᑯ", "kû": "ᑰ", "ka": "ᑲ", "kâ": "ᑳ", "kw": "ᒄ", "ch": "ᒡ", "me": "ᒣ", "mi": "ᒥ", "mî": "ᒦ", "mu": "ᒧ", "mû": "ᒨ", "ma": "ᒪ", "mâ": "ᒫ", "ne": "ᓀ", "na": "ᓇ", "nâ": "ᓈ", "ni": "ᓂ", "nî": "ᓃ", "nu": "ᓄ", "nû": "ᓅ", "le": "ᓓ", "lwe": "ᓜ", "li": "ᓕ", "lî": "ᓖ", "lu": "ᓗ", "lû": "ᓘ", "la": "ᓚ", "lâ": "ᓛ", "se": "ᓭ", "sh": "ᔥ", "sa": "ᓴ", "sâ": "ᓵ", "si": "ᓯ", "sî": "ᓰ", "su": "ᓱ", "sû": "ᓲ", "ye": "ᔦ", "yi": "ᔨ", "yî": "ᔩ", "yu": "ᔪ", "yû": "ᔫ", "ya": "ᔭ", "yâ": "ᔮ", "ywâ": "ᔻ", "re": "ᕃ", "ri": "ᕆ", "rî": "ᕇ", "ru": "ᕈ", "rû": "ᕉ", "ra": "ᕋ", "râ": "ᕌ", "ve": "ᕓ", "vi": "ᕕ", "vî": "ᕖ", "vu": "ᕗ", "vû": "ᕘ", "va": "ᕙ", "vâ": "ᕚ", "u": "ᐅ", "î": "ᐄ", "â": "ᐋ", "û": "ᐆ" }, "finals": { "u": "ᐤ", "p": "ᑉ", "t": "ᒼ", "k": "ᒃ", "m": "ᒻ", "n": "ᓐ", "l": "ᓪ", "s": "ᔅ", "r": "ᕐ", "e": "ᐁ", "i": "ᐃ", "y": "ᔾ", "a": "ᐊ", "h": "ᐦ", "v": "ᕝ", "f": "ᕝ", "w": "ᐧ", ".": "᙮" } }; $scope.getSyllabics=function(roman,isFinal){ var a = /aa/g; var e = /ee/g; var i = /ii/g; var u = /uu/g; var o = /oo/g; var hats = roman.replace(a,"â"); hats = hats.replace(i,"î"); hats = hats.replace(u,"û"); hats = hats.replace(o,"ô"); hats = hats.replace(e,"ê"); //console.log(roman,hats,"getSyllabics"); if(isFinal)return $scope.syllabics.finals[hats]; return $scope.syllabics.syllables[hats]; }; }]) .filter('trustedResource',[ '$sce', function($sce){ return function(val){ return $sce.trustAsResourceUrl(val); } } ]); try{ $(window).on('load',function(){ $("#loading").remove(); //console.log('here'); }); }catch(err){ console.log(err); // $("#loading").remove(); } try{ setTimeout(function(){ $("#loading").remove(); },180000); $(document).on('ready',function(){ //console.log('ready'); //$("#loading").remove(); }); }catch(err){ console.log(err); //$("#loading").remove(); } </script> </body> </html>

CINXE.COM