-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
361 lines (253 loc) · 14.2 KB
/
index.html
1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Open Source Ecology</title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Mobile IE needs ClearType for smoothing fonts --> <meta http-equiv="cleartype" content="on"> <!--StyleSheets--> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" href="css/custom.css" /> </head> <body> <!-- ******************************************* HOME PAGE ************ --><div data-role="page" id="home"><!-- ******** HEADER ********* --><div data-role="header"><h1>Welcome</h1></div><!-- /header --> <!-- ******** CONTENT ******** --><div data-role="content"> <img src="images/logo.png" alt="Open Source Ecology" /> <div id="intro"> <p>A Network of Farmers, Engineers, and Supporters Building the <strong>Global Village Construction Set</strong></p> <p>We are very proud about this project, please check our <a href="http://opensourceecology.org/wiki/Core_Values_of_OSE">Core Values</a> so you can learn more about us.</p> </div><!-- //INTRO --> <!-- ******** LINKS LIST ******** --> <ul data-role="listview" data-theme="e" data-inset="true"> <li><a href="#initialProjects" data-prefetch>Projects</a></li> <li><a href="#community">Community</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#sponsor">Sponsor a Project</a></li> </ul> <!-- ****this links show below the jQuery list ****** --> <p> Please see <a href="http://www.ted.com/speakers/marcin_jakubowski.html" rel="external">Marcin's TED profile</a> </p> <p> Website - <a href="http://opensourceecology.org" rel="external">Open Source Ecology</a> </p> <p> Weblog - <a href="http://bit.ly/3xa1mU" rel="external">http://bit.ly/3xa1mU</a> </p> <p> Wiki - <a href="http://bit.ly/63rPDN" rel="external">http://bit.ly/63rPDN</a> </p></div><!-- /content --><!-- ****** FOOTER ******** --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div><!-- /footer--> </div><!--Close Home page page--><!-- ********************************************* PROJECTS PAGE ************ --><div data-role="page" id="initialProjects" data-add-back-btn="true"> <div data-role="header"> <h1>Projects</h1> </div> <div data-role="content"> <img src="images/projects.png" alt="projects" /> <ul id="parentProjects" data-role="listview" data-theme="e" data-inset="true"> <li><a href="#3dPrinter">3d Printer</a></li> <li><a href="#demo" >3d Scanner</a></li> <li><a href="#demo">Wind Turbine</a></li> <li><a href="#demo">Backhoe</a></li> <li><a href="#moreProjects">More Projects</a></li><!-- Data being added Dynamically by main.js --> </ul> <a href="#home" data-role="button" data-transition="flip" data-icon="home" data-iconpos="left" data-inline="true">Home</a> </div><!-- closes content--> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div></div><!--closes projects page--><!--************************************************* 3D PRINTER PROJECT *********************** --><div data-role="page" id="3dPrinter" data-add-back-btn="true"> <div data-role="header"> <h1>3D Printer</h1> </div> <div data-role="content"> <img src="images/3d-printer.png" alt="projects" /> <p>An additive manufacturing technology where a three dimensional object is printed by laying down successive layers of material, just like a printer except in 3D</p> <!-- ******** VIDEO ********* --> <iframe width="300px" height="280px" src="http://www.youtube.com/embed/f6-lIW_-c7M" frameborder="0" allowfullscreen></iframe> <!-- ************************ --> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien turpis, commodo a dictum sodales, ullamcorper euismod elit? Maecenas nec dolor elit. Duis ornare mattis ligula; a placerat sapien imperdiet nec. Vivamus a lectus vitae turpis suscipit semper. Fusce nisl lectus, pellentesque sed accumsan a, cursus pellentesque nulla? Nam rutrum varius leo at semper. Aliquam et ullamcorper enim. Quisque vestibulum ante eu lacus rhoncus eu lacinia magna sodales. Curabitur vehicula ullamcorper vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sagittis, massa sit amet hendrerit sollicitudin; ipsum nibh condimentum sapien, ut consequat tellus nibh vitae lacus. Aenean interdum lorem et nisi pharetra mollis! Proin ut nibh eu mauris pulvinar luctus vitae lacinia orci! Sed in sem odio, sit amet luctus nisi. Phasellus nisl risus, pretium id rhoncus lobortis, euismod rhoncus lorem. </p> <p> Curabitur sed libero sapien, quis tincidunt odio. Vivamus vitae felis odio. Nulla tortor turpis, pulvinar vitae mollis vitae, consectetur ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer lacus turpis; dignissim ut feugiat a, sagittis non nisl. Quisque volutpat ante eget tortor placerat porta. Etiam laoreet tincidunt ante ut tempus. Sed orci nibh, sodales eget mattis ut, imperdiet quis arcu. Pellentesque scelerisque nunc ut libero ultrices facilisis. Proin mauris est, adipiscing vel fringilla ac, fermentum eget felis. Vivamus sed magna eu lorem sollicitudin semper sit amet a lorem. Nulla placerat cursus ligula et viverra. </p> <p> Praesent eros lectus, luctus vitae dignissim a, dictum eu quam? Mauris feugiat neque non quam viverra gravida. Duis in elit est. Nullam turpis eros, facilisis sit amet mattis eu, tempus sodales lorem. Aenean ut dui sit amet lacus bibendum rutrum. Nullam luctus viverra eleifend! Nunc accumsan porttitor diam, a pellentesque turpis gravida in. Mauris varius purus sed est elementum sit amet congue lorem elementum. Donec vestibulum aliquam aliquet. Mauris sodales quam sed risus dignissim ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <a href="#home" data-role="button" data-transition="flip" data-icon="home" data-iconpos="left" data-inline="true">Home</a> </div><!-- closes content--> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div></div><!--closes 3d printer page--><!-- ***************************************** MORE PROJECTS ********--><div data-role="page" id="moreProjects" data-add-back-btn="true"> <div data-role="header"> <h1>More Projects</h1> </div> <div data-role="content"> <!-- Link Data being added Dynamically by main.js --> <ul id="projects" data-role="listview" data-theme="e" data-inset="true"> <li><a href="#demo">nothing</a></li> </ul> <a href="#home" data-role="button" data-transition="flip" data-icon="home" data-iconpos="left" data-inline="true">Home</a> </div><!-- //content --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div></div><!--closes More Projects page--><!-- ********************************************* COMMUNITY PAGE ************ --><div data-role="page" id="community" data-add-back-btn="true"> <div data-role="header"> <h1>Community</h1> </div><!-- /header --> <div data-role="content"> <img src="images/community.png" alt="community" /> <ul data-role="listview" data-theme="e"> <li><a href="#farmers">Farmers</a></li> <li><a href="#demo">Engineers</a></li> <li><a href="#demo">Electricians</a></li> <li><a href="#demo">Designers</a></li> </ul> <a href="#home" data-role="button" data-icon="home" data-iconpos="left" data-transition="flip" data-inline="true">Home</a> </div><!-- /content --><div data-role="footer" data-position="fixed"> <small>© 2012</small></div><!-- /footer--></div><!--Close community page--><!-- ********************************************* FARMERS PAGE ************ --><div data-role="page" id="farmers" data-add-back-btn="true"> <div data-role="header"> <h1>Farmers</h1> </div><!-- /header --> <div data-role="content"> <img src="images/farmers.jpg" alt="farmer community" /> <p style= "text-align: center;">The Farmers community is happy to Welcome you!</p> <p>We are dedicated to share, interact, and learn from each other’s experiences.</p> <p>We hope that by creating this community the work and experience learned can be share and create a source of information for those new to our projects. If you want to become part of this great community, please send us an email so we can include you in our system and you can start getting daily news about our community...thanks.</p> <h3>Subscribe:</h3> <!-- *********** Farmers contact form ********* --> <form action="" method="post" id="newcontact"> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="email" name="email" value="" /> </div> <div data-role="fieldcontain"> <input type="reset" value="cancel" data-theme="a" data-icon="delete" data-iconpos="left" data-inline="true"/> <input type="submit" value="submit" data-theme="b" data-icon="check" data-iconpos="left" data-inline="true"/> </div> </form> <a href="#home" data-role="button" data-icon="home" data-iconpos="left" data-transition="flip" data-inline="true">Home</a> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div><!-- /footer--> </div><!--Close Farmers page page--><!-- ************************************************ BLOG PAGE ******************* --><div data-role="page" id="blog" data-add-back-btn="true"> <div data-role="header"> <h1>Blog</h1> </div> <div data-role="content"> <h3>Join our Blog!</h3> <p>Be part of the discussion, join our blog and see what are we up to!</p> <div data-role="fieldcontain"> <a href="http://opensourceecology.org/blog.php" data-role="button" data-transition="flip" data-icon="gear" data-iconpos="left" data-theme="e">Join our Blog!</a> </div><!-- //fieldcontain --> </div><!-- //content --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div><!-- //footer --></div><!--closes Blog page--><!-- ************************************************ SPONSOR PAGE ******************* --><div data-role="page" id="sponsor" data-add-back-btn="true"> <div data-role="header"> <h1>Sponsor</h1> </div> <div data-role="content"> <img src="images/sponsor.png" alt="sponsor" width="320" height="223" /> <p>If you would like to review the current projects we have and you feel like it is a worthy cause, then we invite you to help us make this projects a reality. After submitting the form we would get in touch with you to arrange your participation.</p> <h4>Choose how would you like to help:</h4> <form action="" method="get"> <div data-role="fieldcontain"> <label for="name">Name:</label> <input type="text" name="name" id="name" value="" /> </div> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="email" name="email" id="email" value="" /> </div> <div data-role="fieldcontain"> <label for="tel">Phone:</label> <input type="tel" name="tel" id="tel" value="" /> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many as you'd like:</legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> <label for="checkbox-1a">Contribute with Your time</label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <label for="checkbox-2a">Donate Money</label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> <label for="checkbox-3a">Donate Materials</label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> <label for="checkbox-4a">Other</label> </fieldset> </div> <div data-role="fieldcontain"> <input type="reset" value="cancel" data-theme="a" data-icon="delete" data-iconpos="left" data-inline="true"/> <input type="submit" value="submit" data-theme="b" data-icon="check" data-iconpos="left" data-inline="true"/> </div> </form> <a href="#home" data-role="button" data-icon="home" data-iconpos="left" data-transition="flip" data-inline="true">Home</a> </div><!-- closes content --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div></div><!--closes SPONSOR page--><!-- *********************************************** DEMO PAGE ******************* --><div data-role="page" id="demo" data-add-back-btn="true"> <div data-role="header"> <h1>PROTOTYPE</h1> </div> <div data-role="content"> <p id="demoCont">Thank you for trying our Prototype App!</p> <a href="#home" data-role="button" data-icon="home" data-iconpos="left" data-transition="flip" data-inline="true">Home</a> </div><!-- //content --> <div data-role="footer" data-position="fixed"> <small>© 2012</small></div></div><!--closes Demo page--><!-- ****************** SCRIPTS ************************** --><!--jQuery CDN--><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script type="text/javascript" src="js/libs/jquery.validate.min.js"></script><script type="text/javascript" src="js/main.js"></script> <!-- JavaScript normally at end of body, except for Modernizr which enables HTML5 elements & feature detects --><script src="js/libs/modernizr.custom.min.js"></script></body></html><!-- ********* CLOSE APP *************************** -->