<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>STEMChat</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="/css/pure_css.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/project.css">
</head>

<body>

    <div  class="topnav" id="myTopnav1">
        <a href="javascript:void(0);" class="icon" onclick="myFunction1()">
             <i>â˜°</i>
        </a>

        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            <a href="/">Home</a>

            <a href='<%=about%>'>About</a>
            <%if(curr_user){%>
                <a href='<%=home%>'>Chat</a>
                <%}%>

            <a href='<%=blog%>'>Blogs</a>
            <a href='<%=project%>' class="active">Projects</a>

            <a href='<%=feedback%>'>Feedback</a>
            <%if(curr_user){%>
                <a href='<%=profile%>'>Profile</a>
                <%}%>
            <%if(!curr_user){%>
                <a href='<%=home%>'>Login</a>
                <%}%>
            <%if(curr_user){%>
                <a href="<%=logout%>">Logout</a>
                <%}%>
        </div>
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

    </div>

    <div id="layout" class="pure-g">
        <div class="sidebar pure-u-1">
            <div class="header">
                <h1 class="brand-title">Projects</h1>
                <h2 class="brand-tagline"></h2>
                <h4>
                    Welcome to the projects section! Here we will periodically publish STEM Research projects
                    and Build Your
                    Laboratory . Doing STEM research without a lab is not possible, so the projects
                    in the second category will help you build your own laboratory or make your existing lab more
                    functional.
                </h4>

                <nav class="nav">
                    <ul class="nav-list">
                        <li class="nav-item">
                            <!-- <a class="pure-button" href="http://purecss.io">Pure</a> -->
                        </li>
                        <li class="nav-item">
                            <!-- <a class="pure-button" href="http://yuilibrary.com">YUI Library</a> -->
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div id="main">

            <div class="content pure-u-1 pure-u-md-1">
                <div>



                    <div class="pure-g">
                        <div class="pure-u-1  pure-u-lg-1-3">
                            <div class="l-box _box">
                                <a href="https://metastudio.org/c/projects/3d-design/30">
                                    <h3 class="_link">3D Design</h3>
                                </a>
                                <ul id="lis">
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/openscad-introduction-part-2-designing-everyday-objects/3584/2">
                                            OpenSCAD(intro part 2) Designing Everyday.
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/openscad-introduction-part-1-design-your-own-pen-stand/3583">
                                            OpenSCAD(intro part 1) Design your own Pen.
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="1https://metastudio.org/t/openscad-designing-ghostkubes/3616">
                                            OpenSCAD Designing GhostKubes.
                                        </a>

                                    </li>
                                </ul>


                            </div>
                        </div>
                        <div class="pure-u-1  pure-u-lg-1-3">
                            <div class="l-box _box">
                                <a href="https://metastudio.org/c/projects/cube/31">
                                    <h3 class="_link">CUBE</h3>
                                </a>
                                <ul id="lis">
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/invitation-game-mapping-mango-trees-across-the-country/84/1">
                                            Invitation Game: mapping mango trees.
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/fruit-fly-cube-home-lab-model-organism/3865/1">
                                            Fruit Fly:Cube home lab model
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/study-on-learning-memory-in-snails/1839">
                                            Study on Learning memory in snals.
                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pure-u-1   pure-u-lg-1-3">
                            <div class="l-box _box">
                                <a href="https://metastudio.org/c/projects/electronics/32">
                                    <h3 class="_link">Electronics</h3>
                                </a>
                                <ul id="lis">
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/aeroponics-can-plants-grow-without-soil-and-mililiters-of-water/890">
                                            Aeroponics-Can plants grow without soil.
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/building-contact-less-thermometer-upto-digital-pre-fabrication-stage/3475">
                                            Buiding contactless thermometer.
                                        </a>

                                    </li>
                                    <li id="lis">
                                        <a class="_link2"
                                            href="https://metastudio.org/t/construct-your-own-turtle-robot-and-program-it-to-draw-different-shapes/2646">
                                            Construct your own turtle robot.
                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>



                    </div>
                    <%for(var i=0;i<projects.topics.length;i++){%>
                    <div class="posts">


                        <!-- A single blog post -->
                        <section class="post">
                            <header class="post-header">

                                <a href="/post/t/<%=projects.topics[i].slug%>/<%=projects.topics[i].id%>/1" class="link_head">
                                    <h3>
                                       &#9672 <%=projects.topics[i].title%>


                                </a>
                                <%if(projects.topics[i].image_url!=null){%>
                                <img width="80" height="80" alt="Tilo Mitra&#x27;s avatar" class="post-avatar"
                                    src=<%=projects.topics[i].image_url%>>

                                <%}%>
                            </h3>


                            </header>

                            <div class="post-description">
                                <p class="content-subhead para">

                                    <%for(var j=0;j<projects.topics[i].tags.length;j++){%>
                                    #<%=projects.topics[i].tags[j]%>

                                    <%}%>

                                </p>
                            </div>
                        </section>
                    </div>
                    <%}%>
                    <div id="holder2">

                    </div>
                    <form>
                        <button type="button" id="HButton2"> Load More </button>
                    </form>
                    </div>

                    <div class="footer">
                        <div class="pure-menu pure-menu-horizontal">
                            <center>
                              <!--
                              <div class='foot'>
                                  <p> MADE BY BITS 2020</p>
                              </div>
                              -->
                            </center>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>







    <script src="/js/ui.js"></script>
    <script>
    //loading projects
        $(document).ready(function () {
            var l = 1;

            var my_div = $("#holder2");
            $("#HButton2").on("click", function () {

                console.log(l);
                $.ajax({
                    url: "/project/more/"+l
                })
                    .done(function (data) {
                        console.log(data.topics[0]);
                        var elements = '';
                        for(var i=0;i<data.topics.length;i++){
                            var tags='';
                            var str=data.topics[i].image_url ;
                            for(var j=0;j<data.topics[i].tags.length;j++){
                                   tags=tags+ "#"+data.topics[i].tags[j]+" ";

                                }


                            if(data.topics[i].image_url!=null){
                            elements = elements +'<div class="posts">'+'<section class='+"post"+'>'+'<header class="post-header">'+'<h3>'+'<a class="link_head" href="/post/t/'+data.topics[i].slug+'/'+data.topics[i].id+'/1">'+"&#9672"+data.topics[i].title+'</a>'+'<img width="80" height="80" class="post-avatar" id="" src='+str+'>'+'</h3>'+ '</header>'+'<div class="post-description">'+'<p class="content-subhead para">'+tags+'</p>'+'</div>'+'</section>'+'</div>';
                            }
                            else{
                                elements = elements +'<div class="posts">'+'<section class='+"post"+'>'+'<header class="post-header">'+'<h3>'+'<a class="link_head" href="/post/t/'+data.topics[i].slug+'/'+data.topics[i].id+'/1">'+"&#9672"+data.topics[i].title+'</a>'+'</h3>'+ '</header>'+'<div class="post-description">'+'<p class="content-subhead para">'+tags+'</p>'+'</div>'+'</section>'+'</div>';
                            }

                        }
                       l=l+1;;
                        $('#holder2').append(elements);
                    });
            });
        });
    </script>

    <script>
          function myFunction1() {
            var x = document.getElementById("myTopnav1");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>
