

<!DOCTYPE html>

<html>

<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, minimum-scale=1, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>African Storybook</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="stylesheet" href="css/framework7.material.min.css">
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700&subset=latin,greek,greek-ext,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,400italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='css/app.v3.min.css' rel='stylesheet' type='text/css'>
    <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">

    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

</head>

<body class="theme-cyan" onload="onASbLoad();">
    <div class="panel-overlay" style="z-index:11100;"></div>
    <div class="panel panel-left panel-cover"  style="z-index: 11200 !important;">
        <!--div class="content-block"-->
        <div class="theme_darker panelBar">Menu</div>

        <div class="list-block leftMenu">
            <ul id="leftMainMenu">
                <li class="item-content">
                    <a href="#" id="readItemM1" class="close-panel item-link  disabled" onclick="displayReader();">
                        <div class="item-inner">
                            <div class="item-title">Read</div>
                        </div>
                    </a>
                </li>
                <li class="item-content">
                    <a href="#" id="myspaceItemM1" class="item-link close-panel disabled" onclick="displayMySpace();">
                        <div class="item-inner">
                            <div class="item-title">Make</div>
                        </div>
                    </a>
                </li>
                <li class="item-content">
                    <a href="#" id="useItemM1" class="close-panel item-link disabled" onclick="displayUse();">
                        <div class="item-inner">
                            <div class="item-title">Use</div>
                        </div>
                    </a>
                </li>
                <li id="logout" class="item-content menuItemHide">
                    <a href="#" class="close-panel item-link" onclick="logout();">
                        <div class="item-inner">
                            <div class="item-title">Logout</div>
                        </div>
                    </a>
                </li>
            </ul>

        </div>
        <div class="theme-background panelSocial">
            <a href="#footer"  class="external">
                <img class="ssimage" src="img/mailw.png">
            </a>
            <a href="https://www.facebook.com/africanstorybookorg/" class="external">
                <img class="ssimage" src="img/Facebookw.png">
            </a>
            <a href="https://twitter.com/africastorybook" class="external">
                <img class="ssimage" src="img/Twitterw.png">
            </a>
            <a href="https://www.youtube.com/user/africanstorybookorg" class="external">
                <img class="ssimage" src="img/YouTubew.png">
            </a>
        </div>
    </div>
    <div class="panel panel-right panel-cover layout-dark" id="menuInsert" style="z-index: 11200 !important;">
    </div>
    <div class="views">
        <div class="view view-main" style="overflow:hidden;">

            <div class="pages">
                <div id="indexPage" data-page="index" class="page">
                    <div class="navbar theme_darker">
                        <div class="navbar-inner">
                            <div class="left menuIconMobile"><a href="#" class="open-panel back link icon-only"><i class="icon icon-bars"></i></a>
                            </div>
                            <div class="center">African Storybook</div>
                            <div class="right button">
                                <a href="#" class="open-panel link icon-only nopadding menuHelp" data-panel="right"><span class="menu-text">Help and Notes</span><i class="icon icon-more-white menu-icon"></i></a>
                            </div>
                        </div>

                        <div class="menuBar theme-background menuDesktop" id="main-menu">
                            <div class="row">
                                <a href="#" id="readItemM2" class="button active disabled" onclick="displayReader();">Read</a>
                                <a href="#" id="myspaceItemM2" class="button disabled" onclick="displayMySpace();">Make</a>
                                <a href="#" id="useItemM2" class="button disabled" onclick="displayUse();">Use</a>
                                <a href="#" id="logoutMain" class="button menuItemHide" onclick="logout();">Logout</a>
                                <div class="button" style="right: 0px;position: absolute; padding-right: 20px;">
                                    <a href="#footer"  class="external">
                                        <img class="ssimage" src="img/mailw.png">
                                    </a>
                                    <a href="https://www.facebook.com/africanstorybookorg/" class="external">
                                        <img class="ssimage" src="img/Facebookw.png">
                                    </a>
                                    <a href="https://twitter.com/africastorybook" class="external">
                                        <img class="ssimage" src="img/Twitterw.png">
                                    </a>
                                    <a href="https://www.youtube.com/user/africanstorybookorg" class="external">
                                        <img class="ssimage" src="img/YouTubew.png">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form class="searchbar theme-background searchbarHome" onsubmit="doMainPageSearch();">
                        <div class="searchbar-input">
                            <input dir="auto" autocomplete="off" autocapitalize="none" id="mainSearchInput" type="search" placeholder="Search for storybooks" style="width:calc(100% - 24px);">
                            <a href="#" class="searchbar-clear" id='homeSearchClear'></a>
                            <div class="searchbar-button" onclick="doMainPageSearch();"></div>
                        </div>
                    </form>

                    <div class="page-content  page-adjust-3bar" style="overflow-x:hidden;">
                        <div style=" background-color: #F5F5F5; margin-bottom:8px;">
                            <div class="row analytics-row  no-gutter">
                                <div class="col-33 analysis"><h3>169</h3><p>Languages</p></div>
                                <div class="col-33 analysis"><h3>1074</h3><p>Storybooks</p></div>
                                <div class="col-33 analysis"><h3>5674</h3><p>Translations</p></div>
                            </div>
                        </div>



                        <div class="vision-background">
                            <div class="heading">Vision</div>
                            <div class="subheading">Open access to picture storybooks in the languages of Africa.
                                <br>For children’s literacy, enjoyment and imagination.
                                <br>&nbsp;
                            </div>
                        </div>



                        <div id="stories">
                            <div class="heading">New Storybooks</div><div class="subheading">Storybooks approved by ASb<a href="#" class="open-approved"><img src="img/info.svg" style="cursor:pointer;"></a></div><div class="row story-row"><div class="col-50 tablet-25"><a href="#" onclick="loadBook(31892,1, false);"><img border="0" src="illustrations/covers/31892.png" class="story-centered card"></a></div><div class="col-50 tablet-25"><a href="#" onclick="loadBook(31878,1, false);"><img border="0" src="illustrations/covers/31878.png" class="story-centered card"></a></div><div class="col-50 tablet-25"><a href="#" onclick="loadBook(31842,1, false);"><img border="0" src="illustrations/covers/31842.png" class="story-centered card"></a></div><div class="col-50 tablet-25"><a href="#" onclick="loadBook(31789,1, false);"><img border="0" src="illustrations/covers/31789.png" class="story-centered card"></a></div></div>                        </div>
                                                <div id="collections">
                            <div class="heading">Collections of Storybooks<a href="#" class="open_collection"><img src="img/info.svg" style="cursor:pointer;"></a></div>
                            <div>&nbsp;</div>

                            <div class="row story-row" >
                                <div class="col-100 tablet-25">
                                </div>
                                <div class="col-50 tablet-25">
                                    <div class="story-centered card collection_card"  onclick="loadCollection(35);">
                                        <div class="collection_title" >Early maths storybooks</div>
                                        <div class="collection_approved">ASb approved</div>
                                        <div class="collection_images">
                                            <img border="0" src="illustrations/thumbs/9652.png" ><img border="0" src="illustrations/thumbs/12020.png" ><img border="0" src="illustrations/thumbs/12005.png" ><img border="0" src="illustrations/thumbs/9647.png" ><img border="0" src="illustrations/thumbs/12006.png" ><img border="0" src="illustrations/thumbs/12006.png" ><img border="0" src="illustrations/thumbs/12018.png" ><img border="0" src="illustrations/thumbs/12007.png" ><img border="0" src="illustrations/thumbs/9644.png" >
                                        </div>

                                    </div>
                                </div>
                                <div class="col-50 tablet-25">
                                    <div class="story-centered card collection_card" onclick="loadCollection(5);">
                                        <div class="collection_title">Unity and friendship</div>
                                        <div class="collection_approved">ASb approved</div>
                                        <div class="collection_images">
                                            <img border="0" src="illustrations/thumbs/19860.png" ><img border="0" src="illustrations/thumbs/18786.png" ><img border="0" src="illustrations/thumbs/26503.png" ><img border="0" src="illustrations/thumbs/19861.png" ><img border="0" src="illustrations/thumbs/18788.png" ><img border="0" src="illustrations/thumbs/26504.png" ><img border="0" src="illustrations/thumbs/18789.png" ><img border="0" src="illustrations/thumbs/26505.png" ><img border="0" src="illustrations/thumbs/19862.png" >                                        </div>

                                    </div>
                                </div>
                                <div class="col-100 tablet-25"  style="position:relative;">
                                </div>
                            </div>
                        </div>
                                                <div>&nbsp;</div>
                        <div class="subheading" style="font-size:32px; padding-bottom:0;"> Read - Create - Translate - Adapt </div>
                        <div class="row"  style="width:90vw; margin: 0 auto;">
                            <div class="col-100 tablet-30 actions" onclick="displayReader();">
                                <h2>Read</h2>
                                <div style="float: left"><a href="#"  onclick="displayReader();"><img src="img/readicon.png" width="80" height="80" style="display:block;"></a></div>
                                <div style="margin-left: 90px;" onclick="displayReader();"><p>Find individual storybooks or themed storybook collections to <span class="menuText">READ</span> with young children. Download to read offline or to print.</p></div>
                            </div>
                            <div class="col-100 tablet-40 actions" onclick="displayMySpace();">
                                <h2>Make</h2>
                                <div style="float: left"><a href="#"  onclick="displayMySpace();"><img src="img/createicon.png" width="80" height="80" style="display:block;"></a></div>
                                <div style="margin-left: 90px;"  onclick="displayMySpace();"><p>In <span class="menuText">MAKE</span>, you can create a new picture storybook, translate a story, adapt a story for a different reading level<a href="#" class="open-levels"><img src="img/info.svg" style="cursor:pointer;vertical-align:middle;"></a> and build your own storybook collection. </p></div>
                            </div>
                            <div class="col-100 tablet-30 actions" >
                                <h2>Use</h2>
                                <div style="float: left"><a href="#" onclick="displayUse();"><img src="img/useicon.png" width="80" height="80" style="display:block;"></a></div>
                                <div style="margin-left: 90px;"  onclick="displayUse();"><p>In <span class="menuText">Use</span>, you can explore ways in which you might use the African Storybooks.</p></div>
                            </div>
                        </div>


                        <div>&nbsp;</div>
                        <div>&nbsp;</div>
                        <div class="subheading" style="font-size:32px;">African Storybook Reader App</div>
                        <div style="text-align:center">
                            <a class="external" href="https://geo.itunes.apple.com/us/app/african-storybook-creator/id1116639549?mt=8" style="display:inline-block;overflow:hidden;background:url(img/istore-badge.svg) no-repeat;width:135px;height:40px;"></a>
                            <a class="external" href="https://play.google.com/store/apps/details?id=org.saide.ASbReader" style="display:inline-block;overflow:hidden;background:url(img/Google-Play-Icon.png) no-repeat;width:135px;height:40px;"></a>
                        </div>
                        <div>&nbsp;</div>


                        <a id="footer" name="footer"></a>
                        <div class="layout-dark footer">

                            <div class="row bottom-line-dark">

                                <div class="col-100 tablet-40" style="text-align: left;">
                                    <form name="maillistForm" id="maillistForm" method="post" action="mailinglist.php" onsubmit="validateMailinglistForm();">
                                        <div class="row">
                                            <div class="col-100 tablet-50">
                                                <input dir="auto" name="maillistName" id="maillistName" type="text" placeholder="Your first name">
                                            </div>
                                            <div class="col-100 tablet-50">
                                                <input dir="auto" name="maillistLastName" id="maillistLastName" type="text" placeholder="Your last name">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-100 tablet-100">
                                                <input name="maillistEmail" id="maillistEmail" type="email" placeholder="Your e-mail">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <a href="#" class="button button-big button-fill button-raised color-amber" onclick="validateMailinglistForm();">Join our mailing list</a>
                                        </div>
                                    </form>
                                </div>

                                <div class="col-100 tablet-60" style="text-align: left;">
                                    <div class="row">
                                        <div class="col-100 tablet-50">
                                            <h3 class="icon-home">Donor</h3>
                                            <p>Comic Relief UK,
                                                <br>89 Albert Embankment,
                                                <br>London,
                                                <br>SE1 7TP UK</p>
                                            <h3 class="icon-phone">Phone</h3>
                                            <p>+44 20 7820 2000</p>
                                        </div>
                                        <div class="col-100 tablet-50">
                                            <h3 class="icon-home">Address</h3>
                                            <p>Saide
                                                <br>14th Floor,
                                                <br>19 Ameshoff Street,
                                                <br>Braamfontein Johannesburg,
                                                <br>South Africa</p>
                                            <h3 class="icon-phone">Phone us</h3>
                                            <p>+27 11 403 2813</p>
                                            <h3 class="icon-email">E-mail us</h3>
                                            <p>africanstorybook@saide.org.za</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row  bottom-line-dark">
                                <div class="col-100 tablet-33"><a href="#" class="color-amber link" onclick="loadQueryPage('newsletter.php');">News flash</a>
                                </div>
                                <div class="col-100 tablet-33"><a href="#" class="color-amber link" onclick="loadQueryPage('about.php');">About</a>
                                </div>
                                <div class="col-100 tablet-33"><a href="#" class="color-amber link" onclick="loadQueryPage('terms.php');">Terms of use</a>
                                </div>

                            </div>
                            <div class="copyright bottom-line-dark">© 2015 Saide - Creative Commons Licence</div>

                        </div>
                    </div>
                    <div id="mainPageBottonBar" style="position:absolute; height:44px; width:100%; background-color:#727272; bottom:0px;z-index: 5001;">
                        <img src="img/asb120.png" style="position:absolute; left:5px; bottom:5px; width:80px; height:auto;">
                        <img src="img/saidew.png" style="position:absolute; right:5px; bottom:0px; width:80px; height:auto;">
                    </div>
                </div>
                <div data-page="controller" class="page cached">
                <div class="page-content">
                    <iframe width="100" height="100" id="bookControl" src=""></iframe>
                    <iframe width="100" height="100" id="downloadControl" src=""></iframe>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="modal-overlay" id="overlay"></div>
    <div class="loader theme-darker" id="progressBar"></div>
    <div class="readWaitPage" id=readWaitPage>
        <div class="spinnerContainer">
            <svg class="spinner" width="32px" height="32px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
    </div>
    <div class="popup-overlay savebusy"></div>
    <div id='connection'><span style="font-size:20px;color:green;">&#9679;</span>&nbsp;Connected</div>

    <div id="vote-popup" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.4);z-index: 13000;opacity: 0; visibility:hidden; -webkit-transition-duration: .5s; transition-duration: .5s;" onclick="removeVoter();" >
        <div style="position: fixed; width: 616px;height: 360px;top: 50%; left: 50%; transform: translate(-50%, -50%);box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.2);transition: 0.5s;border-radius: 10px;z-index:15001;" >
            <div style="left: 0;top: 0; width: 100%; height: 100%; position: relative;border-radius: 10px; background-image:url(votes.jpg); background-size: cover;"></div>
            <div style='position:absolute; left:223px; top:177px; width: 165px; height:22px; background:transparent;cursor:pointer;' onclick="doVote();"></div>
            <div onclick="removeVoter();" style='position:absolute; top:10px; right:10px; width:24px; height:24px; background-size:24px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDRweCIgaGVpZ2h0PSI0NHB4IiB2aWV3Qm94PSIwIDAgNDQgNDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwLjEgKDMzODA0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5jbG9zZV9yb3VuZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJjbG9zZV9yb3VuZCIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00MiwyMiBDNDIsMTAuOTU0MzA1IDMzLjA0NTY5NSwyIDIyLDIgQzEwLjk1NDMwNSwyIDIsMTAuOTU0MzA1IDIsMjIgQzIsMzMuMDQ1Njk1IDEwLjk1NDMwNSw0MiAyMiw0MiBDMzMuMDQ1Njk1LDQyIDQyLDMzLjA0NTY5NSA0MiwyMiBaIE0wLDIyIEMwLDkuODQ5NzM1NSA5Ljg0OTczNTUsMCAyMiwwIEMzNC4xNTAyNjQ1LDAgNDQsOS44NDk3MzU1IDQ0LDIyIEM0NCwzNC4xNTAyNjQ1IDM0LjE1MDI2NDUsNDQgMjIsNDQgQzkuODQ5NzM1NSw0NCAwLDM0LjE1MDI2NDUgMCwyMiBaIiBpZD0iT3ZhbC0zMyI+PC9wYXRoPgogICAgICAgICAgICA8cG9seWdvbiBpZD0iUmVjdGFuZ2xlLTI2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDIyLjAwMDAwMCkgcm90YXRlKC00NS4wMDAwMDApIHRyYW5zbGF0ZSgtMjIuMDAwMDAwLCAtMjIuMDAwMDAwKSAiIHBvaW50cz0iMjMgMTEgMjEgMTEgMjEgMjEgMTEgMjEgMTEgMjMgMjEgMjMgMjEgMzMgMjMgMzMgMjMgMjMgMzMgMjMgMzMgMjEgMjMgMjEiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")'></div>
        </div>
    </div>
    <script>

    	if (localStorage.getItem("gc-vote") === null) {
        	setTimeout(function () {
            	document.getElementById('vote-popup').style.visibility = 'visible';
            	document.getElementById('vote-popup').style.opacity = '1';
            	}, 500);
        }

        function doVote () {
        	localStorage.setItem("gc-vote", "1");
            window.open('https://impactchallenge.withgoogle.com/southafrica2018/charities/saide-african-storybook-initiative', '_blank');
            removeVoter();
        }

        function removeVoter() {
            document.getElementById('vote-popup').style.visibility = 'hidden';
            document.getElementById('vote-popup').style.display = 'none';
            document.getElementById('vote-popup').style.opacity = '0';
        }
    </script>

    <div id="popupEditor" class="popup popup-editor">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="#" class="link close-popup icon-only"><i class="icon icon-back"></i></a>
                </div>
                <div class="center sliding">Editor</div>
            </div>
        </div>
        <div class="content-block">
            <textarea name="editorUse11" id="editorUse11" style="height: 80%;position: fixed; width: calc(100% - 70px);"></textarea>
        </div>
    </div>

    <script type="text/javascript" src="js/framework7.min.js"></script>
    <script type="text/javascript" src="js/enc.js"></script>
    <script type="text/javascript" src="js/app.v3.min.js"></script>
    <script type="text/javascript" src="js/hash.js"></script>
    <script type="text/javascript" src="js/list.min.js"></script>


    <script>

        window.onbeforeunload = function () {
            return "Do you really want to close?";
        };

        window.fbAsyncInit = function () {
            FB.init({
                appId: '1685721771696342',
                xfbml: true,
                version: 'v2.5'
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));


        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-32856255-1', 'auto');
        ga('send', 'pageview');


        queryString = "";
        var languages = "<option selected value='1133' selected>All languages</option><option value='8737'>Acholi</option><option value='7433'>Afaan Oromo</option><option value='1136'>Afrikaans</option><option value='16532'>Akuapem Twi</option><option value='1100'>Alur</option>";
        tracker = "";
        gotoread = false;
        gotomyspace = false;
    </script>
</body>

</html>
