CINXE.COM
UCSF Recycling & Waste Reduction - Zero Waste App
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http鈥恊quiv="Content鈥怱ecurity鈥怭olicy" content="default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self';"> <meta name="Referrer鈥怭olicy" value="no鈥恟eferrer | same鈥恛rigin"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UCSF Recycling & Waste Reduction - Zero Waste App</title> <link rel="stylesheet" href="css/main.css"> </head> <body class="front-page"> <div id="wrap"> <div id="ucsf-banner-nav"> <div class="top-header-container row"> <ul class="menu"> <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li> </ul> </div> </div><!-- ucsf-banner-nav --> <div id="maincontent"> <section id="masthead"> <h1><a href="index.php">Recycling &<br />Waste Reduction</a></h1> </section> <section id="grid"> <div class="clearfix"> <div class="tile tile-1"> <span class="vHelper"></span> <img src="img/tile-paper.png" alt="paper" id="tile-paper" /> </div> <div class="tile tile-2"> <span class="vHelper"></span> <img src="img/tile-plastic.png" alt="plastic"/> </div> <div class="tile tile-3"> <span class="vHelper"></span> <img src="img/tile-glass.png" alt="glass"/> </div> </div> <div class="clearfix"> <div class="tile tile-4"> <span class="vHelper"></span> <img src="img/tile-food.png" alt="food"/> </div> <div class="tile tile-5"> <span class="vHelper"></span> <img src="img/tile-metal.png" alt="metal"/> </div> <div class="tile tile-6"> <span class="vHelper"></span> <img src="img/tile-other.png" alt="other"/> </div> </div> <div class="clearfix"> <div class="tile tile-7"> <span class="vHelper"></span> <img src="img/tile-search.png" alt="search"/> </div> <div class="tile tile-8"> <span class="vHelper"></span> <img src="img/tile-browse.png" alt="browse"/> </div> <div class="tile tile-9"> <span class="vHelper"></span> <img src="img/tile-more.png" alt="more"/> </div> </div> </section> </div> </div> <section id="sticky-footer"> <div id="footer-nav-tiles" class="clearfix"> <div class="tile"> <a href="index.php" id="tile-home"><img src="img/tile-home.png" alt="home"/><br> HOME </a> </div> <div class="tile"> <a href="tips.php" id="tile-tips"><img src="img/tile-tips.png" alt="tips"/><br> TIPS </a> </div> <div class="tile"> <a href="knowledge.php" id="tile-testme"><img src="img/tile-testme.png" alt="test me"/><br> TEST ME </a> </div> <div class="tile"> <a href="stats.php" id="tile-stats"><img src="img/tile-stats.png" alt="stats"/><br> MY STATS </a> </div> </div> </section> <section id="modal-menu" class="modal-frame"> <span class="modal-menu-close">×</span> <div class="modal-box"> <ul> <li><a href="browse.php">Browse</a></li> <li><a href="tips.php">Tips</a></li> <li><a href="knowledge.php">Test Knowledge</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="about.php">About</a></li> </ul> </div> </section> <section id="modal-success" class="modal-frame"> <span class="modal-success-close">×</span> <div class="modal-box"> <h3>Good Job!</h3> <a href="" class="modal-success-close2"><img src="img/checkmark.png" alt="checkmark"></a> <p>Thanks for doing your part.</p> </div> </section> <section id="modal-congrats" class="modal-frame"> <span class="modal-congrats-close">×</span> <div class="modal-box"> <h3></h3> <a href="" class="modal-congrats-close2"><img src="img/checkmark.png" alt="checkmark"></a> </div> </section> <section id="modal-share" class="modal-frame"> <span class="modal-share-close">×</span> <div class="modal-box"> <ul> <li><a href="" onclick="shareFacebook();">Facebook</a></li> <li><a href="" onclick="shareTwitter();">Twitter</a></li> <li><a href="" onclick="shareGoogle();">Google Plus</a></li> <li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a></li> <li><a href="https://www.snapchat.com/" target="_blank" rel="noopener noreferrer">SnapChat</a></li> </ul> </div> </section> <script> //=============================== // close modal menus var modalmenu = document.getElementById('modal-menu'); var modalmenuclose = document.getElementsByClassName("modal-menu-close")[0]; modalmenuclose.onclick = function() { modalmenu.style.display = "none"; } //===================== var modalshare = document.getElementById('modal-share'); var modalshareclose = document.getElementsByClassName("modal-share-close")[0]; modalshareclose.onclick = function() { modalshare.style.display = "none"; } //======================== var modalsuccess = document.getElementById('modal-success'); var modalsuccessclose = document.getElementsByClassName("modal-success-close")[0]; var modalsuccessclose2 = document.getElementsByClassName("modal-success-close2")[0]; modalsuccessclose.onclick = modalsuccessclose2.onclick = function(e) { e.preventDefault(); modalsuccess.style.display = "none"; } //======================== // moved to knowledge.js /* var modalcongrats = document.getElementById('modal-congrats'); var modalcongratsclose = document.getElementsByClassName("modal-congrats-close")[0]; var modalcongratsclose2 = document.getElementsByClassName("modal-congrats-close2")[0]; modalcongratsclose.onclick = modalcongratsclose2.onclick = function() { modalcongrats.style.display = "none"; } */ //===================== // Close modal when the user clicks anywhere outside of the modal window.onclick = function(event) { if (event.target == modalshare || event.target == modalmenu || event.target == modalsuccess ) { modalshare.style.display = "none"; modalmenu.style.display = "none"; modalsuccess.style.display = "none"; } } //======================= // share Socials function shareTwitter() { window.open('https://twitter.com/intent/tweet?url=' + window.location.href,'_blank'); } function shareFacebook() { window.open('https://www.facebook.com/sharer/sharer.php?u=' + window.location.href,'_blank'); } function shareGoogle() { window.open('https://plus.google.com/share?url=' + window.location.href,'_blank'); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="js/response.min.js"></script> <script src="js/home.js"></script> <script> (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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-88600128-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>