data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAACbUlEQVR4Xu3XwWmEUABF0W8xdjCNuLYK63JrP/bhxkAgIZsku7kgZ7YKD+8/KDPd930PPwWiAhOAUXmznwUABCEtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYA8Jf8r9drbNs21nVND+jp4wD+ccLLsnxfPc9z7Ps+5nl+uom3Ph+A/+T+ifDr1mmaxnVd4ziOtx7WE8cABDB1DaBPMIBpAX9C0vzegGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jcOIANpAQDT/MYBZCAtAGCa3ziADKQFAEzzGweQgbQAgGl+4wAykBYAMM1vHEAG0gIApvmNA8hAWgDANL9xABlICwCY5jf+AdcV/KgRNV2yAAAAAElFTkSuQmCCdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFoCAYAAACPNyggAAAOhUlEQVR4Xu3VwQkAAAjEMN1/abewn7jAQRC64wgQIECAAIF3gX1fNEiAAAECBAiMAHsCAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQIHLFxAWmhEwHPAAAAAElFTkSuQmCC<!DOCTYPE html> <html> <head> <meta name="snap-cloud-domain" location="https://snap.berkeley.edu:443"> <meta charset="UTF-8"> <title>Snap! Build Your Own Blocks</title> <meta name="description" content="The Snap! social platform"> <meta name="author" content="Bernat Romagosa"> <meta name="snap-cloud-domain" location="https://snap.berkeley.edu"> <link rel="icon" href="favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- External libs, both stylesheets and JS --> <link rel="stylesheet" href="libs/reset.css"> <link rel="stylesheet" href="libs/pure-min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="libs/custom-alert.css"> <script type="text/javascript" src="libs/FileSaver.min.js"></script> <!-- Stylesheets --> <link rel="stylesheet" href="style/elements.css"> <link rel="stylesheet" href="style/classes.css"> <link rel="stylesheet" href="style/layout.css"> <!-- JS --> <script type="text/javascript" src="js/locale.js"></script> <script type="text/javascript" src="js/base.js"></script> <script type="text/javascript" src="libs/cloud.js"></script> <script type="text/javascript">SnapCloud = new Cloud();</script> <script type="text/javascript" src="libs/sha512.js"></script> </head> <body> <script type="text/javascript" src="libs/custom-alert.min.js"></script> <script>new customAlert();</script> <div id="loading"> <i class="fas fa-spinner fa-spin fa-3x" aria-hidden="true"></i> </div> <nav id="top-bar"> <div class="pure-menu-horizontal pure-menu"> <ul class="pure-g pure-menu-list"> <a class="pure-u-1-12" href="/" aria-label="Snap! home page"> <img src="img/topbar-logo.png" class="logo clickable"/> </a> <span class="pure-u-5-12"> <li class="pure-menu-item"> <a localizable class="pure-menu-link run" target="_blank">Run Snap<em>!</em></a> </li> <li class="pure-menu-item"> <a localizable class="pure-menu-link explore" href="explore">Explore</a> </li> <li class="pure-menu-item"> <a localizable class="pure-menu-link forum" href="https://forum.snap.berkeley.edu/">Forum</a> </li> <!-- ======= Snap!Con ======= <li class="pure-menu-item"> <a localizable class="pure-menu-link" target="_blank" href="https://www.snapcon.org">Snap<em>!</em>Con</a> </li> --> </span> <i class="pure-u-1-24"></i> <div class="search pure-u-1-6"> <form action="search"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> </div> <i class="pure-u-1-24"></i> <li hidden="true" class="join pure-menu-item pure-u-1-12"> <a localizable class="pure-menu-link" href="sign_up">Join</a></li> <li hidden="true" class="sign-in pure-menu-item pure-u-1-12"> <a localizable class="pure-menu-link" href="login">Log In</a></li> <li hidden="true" class="pure-menu-item pure-u-1-6 pure-menu-has-children pure-menu-allow-hover user-menu"> <a id="menuLink1" class="pure-menu-link visitor clickable"></a> <ul class="pure-menu-children"> <li class="pure-menu-item"> <a localizable class="pure-menu-link my-projects" href="my_projects">My Projects</a></li> <li class="pure-menu-item"> <a localizable class="pure-menu-link my-collections" href="my_collections">My Collections</a></li> <li class="pure-menu-item"> <a localizable class="pure-menu-link my-public-projects" href="">My Public Page</a></li> <li class="pure-menu-item"> <a localizable class="pure-menu-link my-profile" href="profile">My Profile</a></li> <li hidden="true" class="pure-menu-item admin"> <a localizable class="pure-menu-link" href="admin">Administration</a></li> <hr> <li class="pure-menu-item"> <a localizable class="pure-menu-link clickable" href="javascript:SnapCloud.logout(function () { sessionStorage.clear(); location.href = 'index'; });">Log Out</a></li> </ul> </li> <li class="pure-menu-item pure-u-1-24 pure-menu-has-children pure-menu-allow-hover language-select"> <a class="pure-menu-link clickable"> <i class="fas fa-globe"></i> </a> <ul class="pure-menu-children languages"> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('es');">Castellano</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('ca');">Català</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('zh');">简体中文</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('de');">Deutsch</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('en');">English</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('it');">Italiano</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('pt');">Português</a> <a class="pure-menu-link clickable" onclick="localizer.setLanguage('tr');">Türkçe</a> </ul> </li> </ul> </div> </nav> <div id="wrapper"> <script src="js/project.js"></script> <link rel="stylesheet" href="style/project.css"> <!-- Thanks to www.w3schools.com --> <link rel="stylesheet" href="style/banner.css"> <div class="slideshow"> <a href="collection?user=snapcloud&collection=Love" target="_blank"> <div class="slide fade"> <img src="img/totm.png" style="width:100%"> </div> </a> <div class="slide fade"> <img src="img/snap-byob.png" style="width:100%"> </div> <div class="slide fade"> <img src="img/lowfloor.png" style="width:100%"> </div> <div class="slide fade"> <img src="img/widewalls.png" style="width:100%"> </div> <div class="slide fade"> <img src="img/noceiling.png" style="width:100%"> </div> <a class="previous" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <script> var slideIndex = 1; showSlide(slideIndex); function plusSlides (n) { showSlide(slideIndex += n); }; function currentSlide (n) { showSlide(slideIndex = n); }; function showSlide (n) { var slides = document.querySelectorAll('.slide'), i; if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } slides.forEach(function (slide) { slide.style.display = 'none'; }); slides[slideIndex-1].style.display = 'block'; }; </script> <h1><span localizable>Welcome to Snap</span><em>!</em></h1> <div class="indent bigger" localizable>Snap<em>!</em> is a broadly inviting programming language for kids and adults that's also a platform for serious study of computer science.</div> <div class="indent v-spaced"> <a href="/snap" class="pure-button" localizable>Run Snap<em>!</em> Now</a> <a href="/examples" class="pure-button" localizable>Example Projects</a> <a href="/snap/help/SnapManual.pdf" class="pure-button" localizable>Reference Manual</a> </div> <br class="v-spaced"> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB latest_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page latest_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: latest_initGrid(callback); --> <div class="latest container"> <h2 class="latest header" localizable></h2> <div class="bar"> <div hidden class="latest search"> <form action="latest"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var latest_page = 1, latest_totalPages = 1, latest_maxPages = [20][0] || 0, // 0 = no limit latest_pageSize = [5][0] || 150, latest_keepIfEmpty = [][0]; if (!['Latest Projects'][0]) { document.querySelector('.latest.header').remove(); } else { document.querySelector('.latest.header').innerHTML = ['Latest Projects'][0]; } if ([false][0]) { document.querySelector(".latest.search").hidden = false; }; document.querySelector('.latest form input').value = getUrlParameter('query'); function latest_toPage (pageNumber) { var latest_div = document.querySelector('.latest.container'), latest_listDiv = document.querySelector('.latest.list'), latest_pageSpan = document.querySelector( '.latest.paginator .page'), latest_totalPagesSpan = document.querySelector( '.latest.paginator .total-pages'), height = latest_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { latest_listDiv.style.height = height; } latest_listDiv.innerHTML = ''; beganLoading('.latest.list'); latest_loadPage( getUrlParameter('query'), latest_pageSize, pageNumber, function (response) { latest_totalPages = latest_maxPages || response.pages; latest_totalPagesSpan.textContent = latest_totalPages; if (latest_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!latest_keepIfEmpty) { latest_div.remove(); } else { doneLoading('.latest.list'); } return; } else if (latest_totalPages == 1 && !latest_keepIfEmpty) { document.querySelector( '.latest.paginator').remove(); } latest_onLoadPage(response, latest_listDiv); doneLoading('.latest.list'); } ); latest_page = pageNumber; latest_pageSpan.textContent = pageNumber; }; function latest_initGrid (callback) { latest_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="latest paginator"> <a class="clickable" onclick="latest_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="latest_toPage(latest_page - 5 > 0 ? latest_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="latest_toPage(latest_page - 1 > 0 ? latest_page - 1 : latest_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="latest_toPage(latest_page + 1 < latest_totalPages ? latest_page + 1 : latest_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="latest_toPage(latest_page + 5 < latest_totalPages ? latest_page + 5 : latest_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="latest_toPage(latest_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="latest list pure-g"></div> </div> <script> latest_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getPublishedProjectList( null, // no username pageNumber, pageSize, query, onSuccess, genericError, true // withThumbnail ); }; latest_onLoadPage = function (response, targetElement) { response.projects.forEach(function (project) { targetElement.append( newProjectDiv( project, { size: 'small', gridSize: 5, extraFields: { isPublic: 'ispublic', isPublished: 'ispublished', author: 'username' } } ) ); }); }; latest_initGrid(); </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB totm_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page totm_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: totm_initGrid(callback); --> <div class="totm container"> <h2 class="totm header" localizable></h2> <div class="bar"> <div hidden class="totm search"> <form action="totm"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var totm_page = 1, totm_totalPages = 1, totm_maxPages = [0][0] || 0, // 0 = no limit totm_pageSize = [5][0] || 150, totm_keepIfEmpty = [][0]; if (!['Topic of the Month: Love'][0]) { document.querySelector('.totm.header').remove(); } else { document.querySelector('.totm.header').innerHTML = ['Topic of the Month: Love'][0]; } if ([false][0]) { document.querySelector(".totm.search").hidden = false; }; document.querySelector('.totm form input').value = getUrlParameter('query'); function totm_toPage (pageNumber) { var totm_div = document.querySelector('.totm.container'), totm_listDiv = document.querySelector('.totm.list'), totm_pageSpan = document.querySelector( '.totm.paginator .page'), totm_totalPagesSpan = document.querySelector( '.totm.paginator .total-pages'), height = totm_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { totm_listDiv.style.height = height; } totm_listDiv.innerHTML = ''; beganLoading('.totm.list'); totm_loadPage( getUrlParameter('query'), totm_pageSize, pageNumber, function (response) { totm_totalPages = totm_maxPages || response.pages; totm_totalPagesSpan.textContent = totm_totalPages; if (totm_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!totm_keepIfEmpty) { totm_div.remove(); } else { doneLoading('.totm.list'); } return; } else if (totm_totalPages == 1 && !totm_keepIfEmpty) { document.querySelector( '.totm.paginator').remove(); } totm_onLoadPage(response, totm_listDiv); doneLoading('.totm.list'); } ); totm_page = pageNumber; totm_pageSpan.textContent = pageNumber; }; function totm_initGrid (callback) { totm_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="totm paginator"> <a class="clickable" onclick="totm_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="totm_toPage(totm_page - 5 > 0 ? totm_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="totm_toPage(totm_page - 1 > 0 ? totm_page - 1 : totm_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="totm_toPage(totm_page + 1 < totm_totalPages ? totm_page + 1 : totm_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="totm_toPage(totm_page + 5 < totm_totalPages ? totm_page + 5 : totm_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="totm_toPage(totm_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="totm list pure-g"></div> </div> <script> totm_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, 'Love', onSuccess, genericError, true // withThumbnail ); }; totm_onLoadPage = latest_onLoadPage; totm_initGrid(); </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB featured_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page featured_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: featured_initGrid(callback); --> <div class="featured container"> <h2 class="featured header" localizable></h2> <div class="bar"> <div hidden class="featured search"> <form action="featured"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var featured_page = 1, featured_totalPages = 1, featured_maxPages = [0][0] || 0, // 0 = no limit featured_pageSize = [5][0] || 150, featured_keepIfEmpty = [][0]; if (!['Featured Projects'][0]) { document.querySelector('.featured.header').remove(); } else { document.querySelector('.featured.header').innerHTML = ['Featured Projects'][0]; } if ([false][0]) { document.querySelector(".featured.search").hidden = false; }; document.querySelector('.featured form input').value = getUrlParameter('query'); function featured_toPage (pageNumber) { var featured_div = document.querySelector('.featured.container'), featured_listDiv = document.querySelector('.featured.list'), featured_pageSpan = document.querySelector( '.featured.paginator .page'), featured_totalPagesSpan = document.querySelector( '.featured.paginator .total-pages'), height = featured_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { featured_listDiv.style.height = height; } featured_listDiv.innerHTML = ''; beganLoading('.featured.list'); featured_loadPage( getUrlParameter('query'), featured_pageSize, pageNumber, function (response) { featured_totalPages = featured_maxPages || response.pages; featured_totalPagesSpan.textContent = featured_totalPages; if (featured_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!featured_keepIfEmpty) { featured_div.remove(); } else { doneLoading('.featured.list'); } return; } else if (featured_totalPages == 1 && !featured_keepIfEmpty) { document.querySelector( '.featured.paginator').remove(); } featured_onLoadPage(response, featured_listDiv); doneLoading('.featured.list'); } ); featured_page = pageNumber; featured_pageSpan.textContent = pageNumber; }; function featured_initGrid (callback) { featured_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="featured paginator"> <a class="clickable" onclick="featured_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="featured_toPage(featured_page - 5 > 0 ? featured_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="featured_toPage(featured_page - 1 > 0 ? featured_page - 1 : featured_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="featured_toPage(featured_page + 1 < featured_totalPages ? featured_page + 1 : featured_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="featured_toPage(featured_page + 5 < featured_totalPages ? featured_page + 5 : featured_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="featured_toPage(featured_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="featured list pure-g"></div> </div> <script> featured_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, 'Featured', onSuccess, genericError, true // withThumbnail ); }; featured_onLoadPage = latest_onLoadPage; featured_initGrid(); </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB snapshot_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page snapshot_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: snapshot_initGrid(callback); --> <div class="snapshot container"> <h2 class="snapshot header" localizable></h2> <div class="bar"> <div hidden class="snapshot search"> <form action="snapshot"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var snapshot_page = 1, snapshot_totalPages = 1, snapshot_maxPages = [0][0] || 0, // 0 = no limit snapshot_pageSize = [5][0] || 150, snapshot_keepIfEmpty = [][0]; if (!['Snap!Shot 2020'][0]) { document.querySelector('.snapshot.header').remove(); } else { document.querySelector('.snapshot.header').innerHTML = ['Snap!Shot 2020'][0]; } if ([false][0]) { document.querySelector(".snapshot.search").hidden = false; }; document.querySelector('.snapshot form input').value = getUrlParameter('query'); function snapshot_toPage (pageNumber) { var snapshot_div = document.querySelector('.snapshot.container'), snapshot_listDiv = document.querySelector('.snapshot.list'), snapshot_pageSpan = document.querySelector( '.snapshot.paginator .page'), snapshot_totalPagesSpan = document.querySelector( '.snapshot.paginator .total-pages'), height = snapshot_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { snapshot_listDiv.style.height = height; } snapshot_listDiv.innerHTML = ''; beganLoading('.snapshot.list'); snapshot_loadPage( getUrlParameter('query'), snapshot_pageSize, pageNumber, function (response) { snapshot_totalPages = snapshot_maxPages || response.pages; snapshot_totalPagesSpan.textContent = snapshot_totalPages; if (snapshot_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!snapshot_keepIfEmpty) { snapshot_div.remove(); } else { doneLoading('.snapshot.list'); } return; } else if (snapshot_totalPages == 1 && !snapshot_keepIfEmpty) { document.querySelector( '.snapshot.paginator').remove(); } snapshot_onLoadPage(response, snapshot_listDiv); doneLoading('.snapshot.list'); } ); snapshot_page = pageNumber; snapshot_pageSpan.textContent = pageNumber; }; function snapshot_initGrid (callback) { snapshot_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="snapshot paginator"> <a class="clickable" onclick="snapshot_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="snapshot_toPage(snapshot_page - 5 > 0 ? snapshot_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="snapshot_toPage(snapshot_page - 1 > 0 ? snapshot_page - 1 : snapshot_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="snapshot_toPage(snapshot_page + 1 < snapshot_totalPages ? snapshot_page + 1 : snapshot_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="snapshot_toPage(snapshot_page + 5 < snapshot_totalPages ? snapshot_page + 5 : snapshot_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="snapshot_toPage(snapshot_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="snapshot list pure-g"></div> </div> <script> snapshot_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, 'Snap!Shot 2020', onSuccess, genericError, true // withThumbnail ); }; snapshot_onLoadPage = latest_onLoadPage; snapshot_initGrid(); </script> <script> // pick three random curated collections var collections = [ 'Science Projects', 'Simulations', '3D', 'Music', 'Art Projects', 'Fractals', 'Animations', 'Games' ]; for (var i = collections.length - 1; i > 2; i --) { collections.splice(Math.floor(Math.random()*collections.length), 1); } </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB curated1_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page curated1_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: curated1_initGrid(callback); --> <div class="curated1 container"> <h2 class="curated1 header" localizable></h2> <div class="bar"> <div hidden class="curated1 search"> <form action="curated1"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var curated1_page = 1, curated1_totalPages = 1, curated1_maxPages = [0][0] || 0, // 0 = no limit curated1_pageSize = [5][0] || 150, curated1_keepIfEmpty = [][0]; if (![collections[0]][0]) { document.querySelector('.curated1.header').remove(); } else { document.querySelector('.curated1.header').innerHTML = [collections[0]][0]; } if ([false][0]) { document.querySelector(".curated1.search").hidden = false; }; document.querySelector('.curated1 form input').value = getUrlParameter('query'); function curated1_toPage (pageNumber) { var curated1_div = document.querySelector('.curated1.container'), curated1_listDiv = document.querySelector('.curated1.list'), curated1_pageSpan = document.querySelector( '.curated1.paginator .page'), curated1_totalPagesSpan = document.querySelector( '.curated1.paginator .total-pages'), height = curated1_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { curated1_listDiv.style.height = height; } curated1_listDiv.innerHTML = ''; beganLoading('.curated1.list'); curated1_loadPage( getUrlParameter('query'), curated1_pageSize, pageNumber, function (response) { curated1_totalPages = curated1_maxPages || response.pages; curated1_totalPagesSpan.textContent = curated1_totalPages; if (curated1_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!curated1_keepIfEmpty) { curated1_div.remove(); } else { doneLoading('.curated1.list'); } return; } else if (curated1_totalPages == 1 && !curated1_keepIfEmpty) { document.querySelector( '.curated1.paginator').remove(); } curated1_onLoadPage(response, curated1_listDiv); doneLoading('.curated1.list'); } ); curated1_page = pageNumber; curated1_pageSpan.textContent = pageNumber; }; function curated1_initGrid (callback) { curated1_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="curated1 paginator"> <a class="clickable" onclick="curated1_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="curated1_toPage(curated1_page - 5 > 0 ? curated1_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="curated1_toPage(curated1_page - 1 > 0 ? curated1_page - 1 : curated1_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="curated1_toPage(curated1_page + 1 < curated1_totalPages ? curated1_page + 1 : curated1_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="curated1_toPage(curated1_page + 5 < curated1_totalPages ? curated1_page + 5 : curated1_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="curated1_toPage(curated1_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="curated1 list pure-g"></div> </div> <script> curated1_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, collections[0], onSuccess, genericError, true // withThumbnail ); }; curated1_onLoadPage = latest_onLoadPage; curated1_initGrid(); </script> </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB curated2_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page curated2_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: curated2_initGrid(callback); --> <div class="curated2 container"> <h2 class="curated2 header" localizable></h2> <div class="bar"> <div hidden class="curated2 search"> <form action="curated2"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var curated2_page = 1, curated2_totalPages = 1, curated2_maxPages = [0][0] || 0, // 0 = no limit curated2_pageSize = [5][0] || 150, curated2_keepIfEmpty = [][0]; if (![collections[1]][0]) { document.querySelector('.curated2.header').remove(); } else { document.querySelector('.curated2.header').innerHTML = [collections[1]][0]; } if ([false][0]) { document.querySelector(".curated2.search").hidden = false; }; document.querySelector('.curated2 form input').value = getUrlParameter('query'); function curated2_toPage (pageNumber) { var curated2_div = document.querySelector('.curated2.container'), curated2_listDiv = document.querySelector('.curated2.list'), curated2_pageSpan = document.querySelector( '.curated2.paginator .page'), curated2_totalPagesSpan = document.querySelector( '.curated2.paginator .total-pages'), height = curated2_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { curated2_listDiv.style.height = height; } curated2_listDiv.innerHTML = ''; beganLoading('.curated2.list'); curated2_loadPage( getUrlParameter('query'), curated2_pageSize, pageNumber, function (response) { curated2_totalPages = curated2_maxPages || response.pages; curated2_totalPagesSpan.textContent = curated2_totalPages; if (curated2_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!curated2_keepIfEmpty) { curated2_div.remove(); } else { doneLoading('.curated2.list'); } return; } else if (curated2_totalPages == 1 && !curated2_keepIfEmpty) { document.querySelector( '.curated2.paginator').remove(); } curated2_onLoadPage(response, curated2_listDiv); doneLoading('.curated2.list'); } ); curated2_page = pageNumber; curated2_pageSpan.textContent = pageNumber; }; function curated2_initGrid (callback) { curated2_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="curated2 paginator"> <a class="clickable" onclick="curated2_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="curated2_toPage(curated2_page - 5 > 0 ? curated2_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="curated2_toPage(curated2_page - 1 > 0 ? curated2_page - 1 : curated2_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="curated2_toPage(curated2_page + 1 < curated2_totalPages ? curated2_page + 1 : curated2_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="curated2_toPage(curated2_page + 5 < curated2_totalPages ? curated2_page + 5 : curated2_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="curated2_toPage(curated2_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="curated2 list pure-g"></div> </div> <script> curated2_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, collections[1], onSuccess, genericError, true // withThumbnail ); }; curated2_onLoadPage = latest_onLoadPage; curated2_initGrid(); </script> </script> <!-- Any template that uses me needs to specify the following functions: // Defines how to retrieve a particular page from the DB curated3_loadPage ( query, // search query pageSize, // amount of elements per page pageNumber, // current page being requested onSuccess // callback called when response comes back. Just leave as // `onSuccess` unless doing something very specific, as // this callback is defined by the search bar itself. ) // Defines how to load a particular page curated3_onLoadPage ( response, // response from the server targetElement // HTML element where response should be rendered ) Once these functions have been defined, just call: curated3_initGrid(callback); --> <div class="curated3 container"> <h2 class="curated3 header" localizable></h2> <div class="bar"> <div hidden class="curated3 search"> <form action="curated3"> <input type="text" name="query"> <i class="fas fa-search"></i> </form> <script> var curated3_page = 1, curated3_totalPages = 1, curated3_maxPages = [0][0] || 0, // 0 = no limit curated3_pageSize = [5][0] || 150, curated3_keepIfEmpty = [][0]; if (![collections[2]][0]) { document.querySelector('.curated3.header').remove(); } else { document.querySelector('.curated3.header').innerHTML = [collections[2]][0]; } if ([false][0]) { document.querySelector(".curated3.search").hidden = false; }; document.querySelector('.curated3 form input').value = getUrlParameter('query'); function curated3_toPage (pageNumber) { var curated3_div = document.querySelector('.curated3.container'), curated3_listDiv = document.querySelector('.curated3.list'), curated3_pageSpan = document.querySelector( '.curated3.paginator .page'), curated3_totalPagesSpan = document.querySelector( '.curated3.paginator .total-pages'), height = curated3_listDiv.clientHeight; // Forces grid to keep previous height when emptied out if (height > 0) { curated3_listDiv.style.height = height; } curated3_listDiv.innerHTML = ''; beganLoading('.curated3.list'); curated3_loadPage( getUrlParameter('query'), curated3_pageSize, pageNumber, function (response) { curated3_totalPages = curated3_maxPages || response.pages; curated3_totalPagesSpan.textContent = curated3_totalPages; if (curated3_totalPages == 0 || (response.projects && !response.projects[0]) || (response.collections && !response.collections[0]) || (response.users && !response.users[0]) // Until we fix the API this will do ) { if (!curated3_keepIfEmpty) { curated3_div.remove(); } else { doneLoading('.curated3.list'); } return; } else if (curated3_totalPages == 1 && !curated3_keepIfEmpty) { document.querySelector( '.curated3.paginator').remove(); } curated3_onLoadPage(response, curated3_listDiv); doneLoading('.curated3.list'); } ); curated3_page = pageNumber; curated3_pageSpan.textContent = pageNumber; }; function curated3_initGrid (callback) { curated3_toPage(1); if (callback) { callback.call(this); } }; </script> </div> <nav class="curated3 paginator"> <a class="clickable" onclick="curated3_toPage(1);"><i class="fas fa-caret-left"></i></a> <a class="clickable" onclick="curated3_toPage(curated3_page - 5 > 0 ? curated3_page - 5 : 1);"><i class="fas fa-angle-double-left"></i></a> <a class="clickable" onclick="curated3_toPage(curated3_page - 1 > 0 ? curated3_page - 1 : curated3_page);"><i class="fas fa-angle-left"></i></a> <span class="page"></span> / <span class="total-pages"></span> <a class="clickable" onclick="curated3_toPage(curated3_page + 1 < curated3_totalPages ? curated3_page + 1 : curated3_totalPages);"><i class="fas fa-angle-right"></i></a> <a class="clickable" onclick="curated3_toPage(curated3_page + 5 < curated3_totalPages ? curated3_page + 5 : curated3_totalPages);"><i class="fas fa-angle-double-right"></i></a> <a class="clickable" onclick="curated3_toPage(curated3_totalPages);"><i class="fas fa-caret-right"></i></a> </nav> </div> <div class="curated3 list pure-g"></div> </div> <script> curated3_loadPage = function (query, pageSize, pageNumber, onSuccess) { SnapCloud.getCollectionProjects( 'snapcloud', pageNumber, pageSize, collections[2], onSuccess, genericError, true // withThumbnail ); }; curated3_onLoadPage = latest_onLoadPage; curated3_initGrid(); </script> </div> <div id="footer"> <div class="links pure-g"> <div class="pure-u-1-5"> <p><h4 localizable>About</h4></p> <p><a localizable href="about">About Snap<em>!</em></a></p> <p><a localizable href="blog">Blog</a></p> <p><a localizable href="credits">Credits</a></p> <p><a localizable href="requirements">Technical Requirements</a></p> <p><a localizable href="partners">Partners</a></p> <p><a localizable href="source" >Source Code</a></p> </div> <div class="pure-u-1-5"> <p><h4 localizable>Learning</h4></p> <p><a localizable href="examples">Examples</a></p> <p><a localizable href="snap/help/SnapManual.pdf" >Reference Manual</a></p> <p><a localizable href="materials">Materials</a></p> <p><a localizable href="bjc">The Beauty and Joy of Computing</a></p> <p><a localizable href="research">Research</a></p> </div> <div class="pure-u-1-5"> <p><h4 localizable>Tools</h4></p> <p><a localizable href="offline">Offline Version</a></p> <p><a localizable href="extensions">Extensions</a></p> <p><a href="snapp">Snapp<em>!</em></a></p> <p><a href="snapinator">Snapinator</a></p> <p><a href="https://smerge.org/">Smerge</a></p> <p><a href="old_site/old-byob.html">BYOB (old Snap<em>!</em>)</a></p> </div> <div class="pure-u-1-5"> <p><h4 localizable>Support</h4></p> <p><a localizable target="_blank" href="https://forum.snap.berkeley.edu/">Forum</a></p> <p><a localizable href="contact">Contact Us</a></p> <p><a localizable href="mirrors">Mirrors</a></p> </div> <div class="pure-u-1-5"> <p><h4 localizable>Legal</h4></p> <p><a localizable href="dmca">DMCA</a></p> <p><a localizable href="privacy">Privacy</a></p> <p><a localizable href="tos">Terms of Service</a></p> </div> </div> </div> </body> <script> SnapCloud.genericError = genericError; document.querySelector('#top-bar .run').href = snapURL; if (!sessionStorage.username) { SnapCloud.initSession( function (username, role) { sessionStorage.username = username; sessionStorage.role = role; initForUsername(username); } ); } else { initForUsername(sessionStorage.username); } function initForUsername (username) { if (username) { SnapCloud.username = username; document.querySelector('li.join').hidden = true; document.querySelector('li.sign-in').hidden = true; document.querySelector('li.user-menu').hidden = false; document.querySelector('a.my-public-projects').href = 'user?user=' + username; if (hasAnyOfRoles(['admin', 'moderator', 'reviewer'])) { document.querySelector('.admin').hidden = false; } fillVisitorFields(); } else { document.querySelector('li.join').hidden = false; document.querySelector('li.sign-in').hidden = false; document.querySelector('li.user-menu').hidden = true; } fillUsernameFields(); fillVisitorFields(); doneLoading(); } // Share sessionStorage across tabs // http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/ if (!sessionStorage.length) { localStorage.setItem('getSessionStorage', Date.now()); }; window.addEventListener('storage', function(event) { if (event.key == 'getSessionStorage') { localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); localStorage.removeItem('sessionStorage'); } else if (event.key == 'sessionStorage' && !sessionStorage.length) { var data = JSON.parse(event.newValue), value; for (key in data) { sessionStorage.setItem(key, data[key]); } } }); </script> </html>