http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/index.html ---------------------------------------------------------------------- diff --git a/index.html b/index.html new file mode 100644 index 0000000..99087f9 --- /dev/null +++ b/index.html @@ -0,0 +1,615 @@ +<!DOCTYPE html> +<html> + <head> + <title>NetBeans - Fits the pieces together</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600' rel='stylesheet' type='text/css'> + </head> + <body> + <header> + <div class="inner flex-container-small"> + <nav> + <div id="burger-menu"> + <div></div> + <div></div> + <div></div> + </div> + <ul> + <li><a class="nav-link" href="//netbeans.org/features/index.html">NetBeans IDE</a></li> + <li><a class="nav-link" href="//netbeans.org/features/platform/index.html">NetBeans Platform</a></li> + <li><a class="nav-link" href="//netbeans.org/enterprise/index.html">Enterprise</a></li> + <li><a class="nav-link" href="/plugins.netbeans.org/PluginPortal/">Plugins</a></li> + <li><a class="nav-link" href="//netbeans.org/kb/index.html">Docs & Support</a></li> + <li><a class="nav-link" href="//netbeans.org/community/index.html">Community</a></li> + </ul> + </nav> + + <div class="search with-icon"></div> + + <a href="/" id="logo"> + <img src="bilder/logo-2.svg" alt="logo" /> + <div> + <strong>Net</strong>Beans + </div> + </a> + </div> + <form class="search-field"> + <input type="text" /> + <button class="search with-icon"></button> + </form> + </header> + + <main> + <div class="title-img"> + <div class="img-wrapper"> + <img src="bilder/netbeans.png" alt="netbeans" /> + </div> + </div> + <section class="banner"> + <div class="inner flex-container-small"> + <div class="headline-with-downloads"> + <div class="slogan"> + <h1>NetBeans IDE</h1> + <small>Fits the Pieces Together</small> + </div> + <div class="download-links"> + <a href="//netbeans.org/community/releases/81/">Learn More</a> + <a href="//netbeans.org/downloads/"> Download 8.2</a> + </div> + </div> + <div class="desc"> + <p> + Quickly and easily develop desktop, mobile and web applications + with Java, JavaScript, HTML5, PHP, C/C++ and more. + </p> + <p> + NetBeans IDE is FREE, open source, and has a worldwide community + of users and developers. + </p> + </div> + </div> + <a class="nav-link next-section ripple-btn" href="languages"> + <div class="ripple"></div> + </a> + </section> + + <section id="languages" class="primary-color"> + <div class="inner center"> + <h2>NetBeans IDE supports a lot of languages...</h2> + <ul class="languages"> + <li> + <a class="circle java no-deco" href="//netbeans.org/features/java/index.html">Java</a> + </li> + <li> + <a class="circle php no-deco" href="//netbeans.org/features/php/index.html">PHP</a> + </li> + <li> + <a class="circle html5 no-deco" href="//netbeans.org/features/html5/index.html">HTML5</a> + </li> + <li> + <a class="circle js no-deco" href="//netbeans.org/kb/73/ide/javascript-editor.html">JS</a> + </li> + <li> + <a class="circle css3 no-deco" href="//netbeans.org/kb/docs/webclient/html5-editing-css.html">CSS</a> + </li> + <li> + <a class="circle less no-deco" href="//netbeans.org/kb/docs/webclient/html5-editing-css.html#preprocessors">LESS</a> + </li> + <li> + <a class="circle sass no-deco" href="//netbeans.org/kb/docs/webclient/html5-editing-css.html#preprocessors">SASS</a> + </li> + <li> + <a class="circle sass no-deco" href="//netbeans.org/kb/docs/webclient/html5-editing-css.html#preprocessors">SCSS</a> + </li> + <li> + <a class="circle markdown no-deco" href="//plugins.netbeans.org/plugin/50964/markdown-support">MD*</a> + </li> + <li> + <a class="circle ftl no-deco" href="//plugins.netbeans.org/plugin/58284/freemarker-support-for-netbeans">FTL*</a> + </li> + <li> + <a class="circle jsx no-deco" href="//blogs.oracle.com/geertjan/entry/jsx_in_netbeans_ide_8">JSX</a> + </li> + <li> + <a class="circle ini no-deco" href="//blogs.oracle.com/netbeansphp/entry/ini_files_support_available">Ini</a> + </li> + <li> + <a class="circle json no-deco" href="//wiki.netbeans.org/JsonTools">JSON</a> + </li> + <li> + <a class="circle cpp no-deco" href="//netbeans.org/features/cpp/index.html">C/C++</a> + </li> + <li> + <a class="circle xml no-deco" href="//xml.netbeans.org/">XML</a> + </li> + <li> + <a class="circle jade no-deco" href="//wiki.netbeans.org/NewAndNoteworthyNB81#Jade_Node_Template_Engine_Support">Jade</a> + </li> + <li> + <a class="circle sql no-deco" href="//netbeans.org/features/ide/database.html">SQL</a> + </li> + <li> + <a class="circle twig no-deco" href="//blogs.oracle.com/netbeansphp/entry/twig_code_completion">Twig</a> + </li> + <li> + <a class="circle groovy no-deco" href="//netbeans.org/features/groovy/index.html">Groovy</a> + </li> + <li> + <a class="circle yaml no-deco" href="//blogs.oracle.com/netbeansphp/entry/yaml_support_is_available_in">YAML</a> + </li> + </ul> + <p>* These are 3rd Party Plugins.</p> + <a class="nav-link next-section ripple-btn" href="technologies"> + <div class="ripple"></div> + </a> + </div> + </section> + + <section id="technologies" class="secondary-color"> + <div class="inner center"> + <h2>...and has support for lots of technologies and frameworks...</h2> + <ul class="technologies"> + <li> + <a href="//netbeans.org/kb/docs/webclient/ojet-gettingstarted.html"> + <img class="box tech" src="bilder/ojet.jpg" alt="OracleJET logo" /> + <span class="name">OracleJET</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/integrated_angularjs_development"> + <img class="box tech" src="bilder/angularjs.png" alt="AngularJS 1 & 2 logo" /> + <span class="name">AngularJS 1 & 2</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/web/js-toolkits-jquery.html"> + <img class="box tech" src="bilder/jquery.png" alt="jQuery logo" /> + <span class="name">jQuery</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/NewAndNoteworthyNB801#Require_JS_Support"> + <img class="box tech" src="bilder/requirejs.png" alt="RequireJS logo" /> + <span class="name">RequireJS</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/webclient/html5-knockout-screencast.html"> + <img class="box tech" src="bilder/knockout.png" alt="Knockout logo" /> + <span class="name">Knockout</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/HudsonInNetBeans"> + <img class="box tech" src="bilder/jenkins.png" alt="Jenkins logo" /> + <span class="name">Jenkins</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/selenium_for_java_in_netbeans"> + <img class="box tech" src="bilder/selenium.png" alt="Selenium logo" /> + <span class="name">Selenium</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/webclient/html5-js-support.html#karmatests"> + <img class="box tech" src="bilder/karmajs.png" alt="Karma logo" /> + <span class="name">Karma</span> + </a> + </li> + <li> + <a href="//platform.netbeans.org/tutorials/nbm-maven-quickstart.html"> + <img class="box tech" src="bilder/maven.png" alt="Maven logo" /> + <span class="name">Apache Maven</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/NewAndNoteworthyNB81#Node.js_Support"> + <img class="box tech" src="bilder/nodejs.png" alt="NodeJS logo" /> + <span class="name">NodeJS</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/docker_hub_in_netbeans_ide"> + <img class="box tech" src="bilder/docker.png" alt="Docker logo" /> + <span class="name">Docker</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/NewAndNoteworthyNB82#JavaScript"> + <img class="box tech" src="bilder/es6.png" alt="ES5, ES6, ES7 logo" /> + <span class="name">ES5, ES6, ES7</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/netbeansphp/entry/symfony_support_improved"> + <img class="box tech" src="bilder/symfony.png" alt="Symfony 1, 2, 3 logo" /> + <span class="name">Symfony 1, 2, 3</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/netbeansphp/entry/doctrine2_support_added"> + <img class="box tech" src="bilder/doctrine.png" alt="Doctrine 1 & 2 logo" /> + <span class="name">Doctrine 1 & 2</span> + </a> + </li> + <li> + <a href="//www.w3programmers.com/configure-netbeans-7-for-zend-framework-2/"> + <img class="box tech" src="bilder/zend.png" alt="Zend 1 & 2 logo" /> + <span class="name">Zend 1 & 2</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/webclient/cordova-gettingstarted.html"> + <img class="box tech" src="bilder/cordova.png" alt="Cordova logo" /> + <span class="name">Cordova</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/grunting_in_netbeans_ide"> + <img class="box tech" src="bilder/grunt.svg" alt="Grunt logo" /> + <span class="name">Grunt</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/gulp_for_netbeans_ide_part"> + <img class="box tech" src="bilder/gulp.png" alt="Gulp logo" /> + <span class="name">Gulp</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/NewAndNoteworthyNB801#NPM_and_Bower"> + <img class="box tech" src="bilder/npm.png" alt="NPM logo" /> + <span class="name">NPM</span> + </a> + </li> + <li> + <a href="//blogs.oracle.com/geertjan/entry/bower_and_node_js_in"> + <img class="box tech" src="bilder/bower.png" alt="Bower logo" /> + <span class="name">Bower</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/ide/git.html"> + <img class="box tech" src="bilder/git.png" alt="Git logo" /> + <span class="name">Git</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/ide/subversion.html"> + <img class="box tech" src="bilder/svn.png" alt="Subversion logo" /> + <span class="name">Subversion</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/ide/mercurial.html"> + <img class="box tech" src="bilder/mercurial.png" alt="Mercurial logo" /> + <span class="name">Mercurial</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/73/ide/kenai-issuetracking.html"> + <img class="box tech" src="bilder/bugzilla.png" alt="Bugzilla logo" /> + <span class="name">Bugzilla</span> + </a> + </li> + <li> + <a href="//www.hildeberto.com/2012/05/integrating-jira-with-netbeans.html"> + <img class="box tech" src="bilder/jira.png" alt="Jira logo" /> + <span class="name">Jira</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/Ant"> + <img class="box tech" src="bilder/ant.gif" alt="Apache Ant logo" /> + <span class="name">Apache Ant</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/DatabasesAndDrivers"> + <img class="box tech" src="bilder/db.png" alt="DB logo" /> + <span class="name">Database Driver</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/ide/mysql.html"> + <img class="box tech" src="bilder/mysql.png" alt="MySQL logo" /> + <span class="name">MySQL</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/DatabasesAndDrivers#PostgreSQL_driver_for_the_PostgreSQL_database"> + <img class="box tech" src="bilder/postgresql.png" alt="PostgreSQL logo" /> + <span class="name">PostgreSQL</span> + </a> + </li> + <li> + <a href="//wiki.netbeans.org/DatabasesAndDrivers#Microsoft_driver_for_the_SQL_Server_database"> + <img class="box tech" src="bilder/mssql.jpg" alt="MSSQL logo" /> + <span class="name">MS SQL</span> + </a> + </li> + <li> + <a href="//netbeans.org/features/java-on-client/javafx.html"> + <img class="box tech" src="bilder/javafx.png" alt="JavaFX logo" /> + <span class="name">JavaFX</span> + </a> + </li> + <li> + <a href="//netbeans.org/features/java-on-server/java-ee.html"> + <img class="box tech" src="bilder/javaee.png" alt="JavaEE logo" /> + <span class="name">JavaEE</span> + </a> + </li> + <li> + <a href="//netbeans.org/kb/docs/web/quickstart-webapps-spring.html"> + <img class="box tech" src="bilder/spring.png" alt="Spring logo" /> + <span class="name">Spring</span> + </a> + </li> + </ul> + <a class="nav-link next-section" href="plugins"></a> + </div> + </section> + + <section id="plugins" class="alternative-color"> + <div class="inner center"> + <h2>...and it is highly customizable!</h2> + <ul class="technologies"> + <li> + <a href="//plugins.netbeans.org/plugin/44510/gradle-support"> + <img class="box tech" src="bilder/gradle.png" alt="Gradle logo" /> + <span class="name">Gradle</span> + </a> + </li> + <li> + <a href="//github.com/jbboehr/netbeans-handlebars-plugin"> + <img class="box tech" src="bilder/handlebars.png" alt="Handlebars logo" /> + <span class="name">Handlebars</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/67889/nbscala-1-8-1-2"> + <img class="box tech" src="bilder/scala.png" alt="Scala logo" /> + <span class="name">Scala</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/68590/kotlin"> + <img class="box tech" src="bilder/kotlin.png" alt="Kotlin logo" /> + <span class="name">Kotlin</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/46054/arduino"> + <img class="box tech" src="bilder/arduino.png" alt="Arduino logo" /> + <span class="name">Arduino</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/63486/eslint"> + <img class="box tech" src="bilder/eslint.png" alt="ESLint logo" /> + <span class="name">ESLint</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/58580/jshint"> + <img class="box tech" src="bilder/jshint.png" alt="JSHint logo" /> + <span class="name">JSHint</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/46542/php-wordpress-blog-cms"> + <img class="box tech" src="bilder/wordpress.png" alt="WordPress logo" /> + <span class="name">WordPress</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/68049/nbshell"> + <img class="box tech" src="bilder/shell.png" alt="Shell Scripts logo" /> + <span class="name">Shell Scripts</span> + </a> + </li> + <li> + <a href="//github.com/GeertjanWielenga/React.js"> + <img class="box tech" src="bilder/react.png" alt="ReactJS logo" /> + <span class="name">ReactJS</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/52638/nbmongo"> + <img class="box tech" src="bilder/mongodb.png" alt="MongoDB logo" /> + <span class="name">MongoDB</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/16018/sqlite-jdbc-driver"> + <img class="box tech" src="bilder/sqlite.png" alt="SQLite logo" /> + <span class="name">SQLite</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/54528/pl-sql-driver"> + <img class="box tech" src="bilder/pl-sql.png" alt="PL/SQL logo" /> + <span class="name">PL/SQL</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/59444/netcassandrabeans"> + <img class="box tech" src="bilder/cassandra.png" alt="Cassandra logo" /> + <span class="name">Cassandra</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/68591/couchbasenetbeans"> + <img class="box tech" src="bilder/couchbase.png" alt="Couchbase logo" /> + <span class="name">Couchbase</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/40018/couchapp"> + <img class="box tech" src="bilder/couchapp.png" alt="CouchApp logo" /> + <span class="name">CouchApps</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/55824/redminenb"> + <img class="box tech" src="bilder/redmine.png" alt="Redmine logo" /> + <span class="name">Redmine</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/57646/github-issues"> + <img class="box tech" src="bilder/github.png" alt="GitHub logo" /> + <span class="name">GitHub</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/59028/ionicextension"> + <img class="box tech" src="bilder/ionic.png" alt="Ionic logo" /> + <span class="name">Ionic</span> + </a> + </li> + <li> + <a href="//github.com/ladariha/PolymerForNB"> + <img class="box tech" src="bilder/polymer.png" alt="Polymer logo" /> + <span class="name">Polymer</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/60605/typescript-editor"> + <img class="box tech" src="bilder/typescript.png" alt="TypeScript logo" /> + <span class="name">TypeScript</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/39007/coffeescript-netbeans"> + <img class="box tech" src="bilder/coffeescript.png" alt="CoffeeScript logo" /> + <span class="name">CoffeeScript</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/61688/python"> + <img class="box tech" src="bilder/python.png" alt="Python logo" /> + <span class="name">Python</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/10668/perl"> + <img class="box tech" src="bilder/perl.png" alt="Perl logo" /> + <span class="name">Perl</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/58448/laravel-quebra-galho"> + <img class="box tech" src="bilder/laravel.png" alt="Laravel logo" /> + <span class="name">Laravel</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/44579/php-cakephp-framework"> + <img class="box tech" src="bilder/cakephp.png" alt="CakePHP logo" /> + <span class="name">CakePHP</span> + </a> + </li> + <li> + <a href="//github.com/guru-digital/sstemplate-netbeans"> + <img class="box tech" src="bilder/silverstripe.png" alt="SilverStripe logo" /> + <span class="name">SilverStripe</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/51532/radar-netbeans"> + <img class="box tech" src="bilder/sonar.png" alt="Sonar logo" /> + <span class="name">SonarQube</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/60170/puppet-configuration-editor"> + <img class="box tech" src="bilder/puppet.png" alt="Puppet logo" /> + <span class="name">Puppet</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/19545/nbandroid"> + <img class="box tech" src="bilder/android.png" alt="Android logo" /> + <span class="name">Android</span> + </a> + </li> + <li> + <a href="//plugins.netbeans.org/plugin/55435/easyuml"> + <img class="box tech" src="bilder/uml.png" alt="UML logo" /> + <span class="name">UML</span> + </a> + </li> + </ul> + <p class="left">There are many more plugins available, take a look at the <a href="//plugins.netbeans.org/">NetBeans Plugin Portal</a></p> + <!--<a class="nav-link next-section" href="section-4"></a>--> + </div> + </section> + + <!--<section id="section-4" class="primary-color"> + <div class="inner center"> + <h2>Members</h2> + <a class="nav-link next-section" href="section-5"></a> + </div> + </section>--> + + <!-- <section id="section-5" class="primary-color"> + <div class="inner"> + <h2>Ãberschrift - Bereich 5 </h2> + <div class="flex-container"> + <p class="w100"> + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor + invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam + et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + </p> + <div class="w50"> + text-left / text-center / text-right + </div> + <div class="w50"> + <a href="#" class="cta">BUTTON</a> + </div> + </div> + </div> + </section>--> + </main> + + <footer> + <div class="back-to-top with-icon ripple-btn"> + <div class="ripple"></div> + </div> + <div class="inner"> + <div class="flex-container"> + <div class="w70"> + Newsletter + </div> + <div class="w30"> + <ul class="social-links"> + <li> + <a class="circle with-icon fb" href="//www.facebook.com/NetBeans"></a> + </li> + <li> + <a class="circle with-icon twitter" href="//twitter.com/netbeans"></a> + </li> + <li> + <a class="circle with-icon plus" href="//plus.google.com/+netbeans"></a> + </li> + <li> + <a class="circle with-icon slack" href="//netbeans.signup.team/"></a> + </li> + <li> + <a class="circle with-icon youtube" href="//www.youtube.com/user/netbeansvideos"></a> + </li> + </ul> + </div> + </div> + </div> + </footer> + + <link rel="stylesheet" property="stylesheet" href="styles/onepager.css"> + + <script src="scripts/onepager.min.js"></script> + </body> +</html> \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/package.json ---------------------------------------------------------------------- diff --git a/package.json b/package.json new file mode 100644 index 0000000..e57126b --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "NetBeans Redesign", + "version": "1.0.0", + "keywords": [ + "util", + "functional", + "server", + "client", + "browser" + ], + "author": "Chris", + "contributors": [ + ], + "dependencies": {} +} http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/components/contactForm/contactForm.js ---------------------------------------------------------------------- diff --git a/scripts/components/contactForm/contactForm.js b/scripts/components/contactForm/contactForm.js new file mode 100644 index 0000000..3b68858 --- /dev/null +++ b/scripts/components/contactForm/contactForm.js @@ -0,0 +1,70 @@ +/* global grecaptcha */ + +(function() { + 'use strict'; + + var http = new XMLHttpRequest(), + + xhr = function(method, url, params, success, error, complete) { + http.onreadystatechange = function() { + if (http.readyState === 4 && http.status === 200) { + success(http.responseText); + } else { + error(http.responseText); + } + }; + + http.open(method, url, true); + + if (method === 'POST') { + //Send the proper header information along with the request + http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + http.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); + + http.send('payload='+params); + } + + complete(); + }; + + document.querySelector('.submit').addEventListener('click', function() { + var captchaValue = document.querySelector('#g-recaptcha-response').value; + + checkForm().then(function(isFormValid) { + if (isFormValid && !!captchaValue) { + var validFields = []; + + setValidationClass('.g-recaptcha', true); + + [].slice.call(document.querySelectorAll('#multi-form .validation-field.mf-valid [data-validators]')).forEach(function(field) { + validFields.push({ + id: field.getAttribute('id'), + value: field.getAttribute('id') === 'captcha' ? captchaValue : field.value, + placeholder: field.getAttribute('data-placeholder'), + validators: field.getAttribute('data-validators').split(' ') + }); + }); + + xhr('POST', "backend/contact.php?extraParam=contact", JSON.stringify({data: validFields}), function() { + document.querySelector('#responseMessage').innerText = 'Vielen Dank, die E-Mail wurde versandt.'; + document.contactForm.reset(); + + removeClass(document.querySelector('#responseMessage'), 'error'); + addClass(document.querySelector('#responseMessage'), 'success'); + }, function(res) { + if (res) { + document.querySelector('#responseMessage').innerHTML = res.statusText || "Oops da ist wohl was schiefgelaufen,<br />schreib uns bitte an [email protected]"; + removeClass(document.querySelector('#responseMessage'), 'success'); + addClass(document.querySelector('#responseMessage'), 'error'); + } else { +// console.log('Error: ', res || res.statusText); + } + }, function() { + grecaptcha.reset(); + }); + } else { + setValidationClass('.g-recaptcha', false); + } + }); + }, true); +}()); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/components/contactForm/formValidation.js ---------------------------------------------------------------------- diff --git a/scripts/components/contactForm/formValidation.js b/scripts/components/contactForm/formValidation.js new file mode 100644 index 0000000..bc774e6 --- /dev/null +++ b/scripts/components/contactForm/formValidation.js @@ -0,0 +1,211 @@ +/* global Q */ + +(function () { + 'use strict'; + + var validators = [], + validatorObject = { + isNotEmpty: function (field) { + var result = Q.defer(), + isValid = (field.value !== ''); + + result.resolve({ + isValid: isValid, + errorMessage: isValid ? '' : 'Bitte ' + field.getAttribute('data-placeholder') + ' angeben.' + }); + + return result.promise; + }, + + isMailValid: function (field) { + var result = Q.defer(), + isValid = (/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/).test(field.value); + + result.resolve({ + isValid: isValid, + errorMessage: isValid ? '' : 'Bitte gib eine gültige E-Mailadresse an.' + }); + + return result.promise; + }, + + isCaptchaValid: function () { + var result = Q.defer(); + + result.resolve({ + isValid: true, + errorMessage: '' + }); + + return result.promise; + } + }, + + isFieldValidatorValid = function (field) { + return Q.all(validators.map(function(validator) { + var result = Q.defer(); + + validator(field).then(function(val) { + if (!val.isValid) { + result.resolve({ + isValid: false, + errorMessage: val.errorMessage + }); + } + + result.resolve({ + isValid: true, + errorMessage: '' + }); + }); + + return result.promise; + })); + }, + + showError = function (validationField, errorMsg) { + validationField.querySelector('.error-message').innerText = errorMsg; + removeClass(validationField, 'mf-valid'); + addClass(validationField, 'mf-error'); + }, + + hideError = function (validationField) { + removeClass(validationField, 'mf-error'); + addClass(validationField, 'mf-valid'); + }, + + validateField = function (field) { + validators.length = 0; + + field.getAttribute('data-validators').split(' ').forEach(function (validator) { + validators.push(validatorObject[validator]); + }); + + var prom = Q.defer(); + + isFieldValidatorValid(field).then(function(results) { + var invalidField = results.find(function(elem) { + elem.isValid ? hideError(getParents(field, '.validation-field')) : showError(getParents(field, '.validation-field'), elem.errorMessage); + + return !elem.isValid; + }); + + prom.resolve(invalidField ? invalidField.isValid : true); + }); + + return prom.promise; + }, + + checkForm = function () { + var activeFieldset = document.querySelector('#multi-form fieldset.active'), + isFormValidResult = Q.defer(); + + if (activeFieldset) { + var validatableFields = [].slice.call(activeFieldset.querySelectorAll('li.opened .validation-field [data-validators], div.opened .validation-field [data-validators]')); + + Q.all(validatableFields.map(function(validatableField) { + return validateField(validatableField); + })).done(function(result) { + var isOneFieldInvalid = result.find(function(elem) { + return !elem; + }); + + var errorFields = document.querySelectorAll('#multi-form fieldset.active .validation-field.mf-error [data-validators], .opened .validation-field.mf-error [data-validators]'); + + if (errorFields.length > 0) { + errorFields[0].focus(); + } + + isFormValidResult.resolve(isOneFieldInvalid === undefined ? true : isOneFieldInvalid); + }); + + return isFormValidResult.promise; + } + }, + + setValidationClass = function(selector, isValid) { + var field = getParents(document.querySelector(selector), '.validation-field'); + + if (isValid) { + removeClass(field, 'mf-error'); + addClass(field, 'mf-valid'); + } else { + removeClass(field, 'mf-valid'); + addClass(field, 'mf-error', 'setVal'); + } + }, + + addClass = function(elem, className, t) { + if (elem.className.indexOf(className) === -1) { + elem.className += ' ' + className; + } + }, + + removeClass = function(elem, className) { + var classes = elem.className.replace(' ' + className, ''); + elem.className = classes; + }, + + getParents = function(el, findingElem) { + var parents = [], + p = el.parentNode; + + if (findingElem) { + var findingElements = [].slice.call(document.querySelectorAll(findingElem)); + + var isParentOfChild = findingElements.some(function(elem) { + return p === elem; + }); + + if (isParentOfChild) { + return p; + } + + while (p !== findingElem) { + var o = p; + p = o.parentNode; + } + + return p; + } else { + while (p !== document) { + var o = p; + + parents.push(o); + p = o.parentNode; + } + + return parents; + } + }; + + [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) { + validationField.addEventListener('focus', function () { + addClass(getParents(this, '.validation-field'), 'focused'); + }, true); + }); + + [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) { + validationField.addEventListener('blur', function () { + removeClass(getParents(this, '.validation-field'), 'focused'); + + if (this.getAttribute('type') === 'number' && typeof this.value === 'string') { + this.value = (this.value.replace(/[^0-9]+/g, '')); + } + + validateField(this); + }, true); + }); + + [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) { + validationField.addEventListener('keyup', function () { + validateField(this); + }, true); + }); + + window.checkForm = checkForm; + window.validation = validateField; + window.setValidationClass = setValidationClass; + window.removeClass = removeClass; + window.addClass = addClass; +}()); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/components/contactForm/multiForm.css ---------------------------------------------------------------------- diff --git a/scripts/components/contactForm/multiForm.css b/scripts/components/contactForm/multiForm.css new file mode 100644 index 0000000..7945aa4 --- /dev/null +++ b/scripts/components/contactForm/multiForm.css @@ -0,0 +1,2 @@ +#multi-form{width:100%;margin:0 auto}#multi-form *{outline:0}#multi-form ul{list-style:none}#multi-form ul li{list-style:none}#multi-form form{margin:0 auto;text-align:center}#multi-form form fieldset{box-sizing:border-box;width:100%;vertical-align:top;border:0;margin:0;padding:0}#multi-form form fieldset.mf-valid .fs-title:after{font-family:"pulsweb";content:"\f00c";color:green;margin-left:.5em;font-size:100%}#multi-form form textarea,#multi-form form input[type="text"]{border:0;border-bottom:1px solid #999;border-radius:2px;padding:.75em .5em;width:100%;box-sizing:border-box;font-size:15px}#multi-form form .action-button-wrapper .standalone{width:100%}#multi-form form .action-button-wrapper .standalone a{display:block;width:50%;margin:0 auto;padding:.5em}#multi-form form .action-button-wrapper div{display:inline-block;margin-top:.5em}#multi-form form .action-button-wrapper div:first-child{padding-right:.5em}#multi-form form .action-button-wrapper div:last-child{padding-left:.5em}# multi-form form label{color:white;margin-bottom:0}#multi-form form .submit{border:1px solid gray;border-radius:2px;width:auto;height:auto}.validation-field{position:relative;width:100%;margin-bottom:2em}.validation-field label{position:absolute;top:.5em;left:8px;color:#aaa !important;padding:0 5px;font-weight:100;transition:top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out}.validation-field.focused label,.validation-field.mf-valid label{top:-.8em;left:0;transform:scale3d(0.85, 0.85, 1)}.validation-field.focused label,.validation-field.mf-valid label{background-color:#fff}.validation-field .validation-hint{position:absolute;right:.6em;top:.5em}.validation-field.mf-valid .validation-hint:after{font-family:"pulsweb";content:"\f00c";color:green;font-size:90%}.validation-field.mf-error textarea,.validation-field.mf-error iframe,.validation-field.mf-error [type="text"],.validation-field.mf-error [type="password"],.validation-field.mf-error [ type="number"]{border-bottom:1px solid orange !important}.validation-field.mf-error .validation-hint:after{font-family:"Glyphicons Halflings";content:'!';color:orange}.validation-field .error-message{opacity:0;width:auto;padding:.5em;border-radius:1px;position:absolute;top:-3em;right:0;font-size:90%;white-space:nowrap;pointer-events:none}.validation-field.mf-error.focused .error-message{opacity:1;color:white;background:orange;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.validation-field.mf-error.focused .error-message:after{content:'';position:absolute;bottom:-.3em;right:1em;border-top:5px solid orange !important;border-left:10px solid transparent;border-right:10px solid transparent}#post .validation-field:first-child{padding-right:.5em}#post .validation-field:last-child{padding-left:.5em}#post .validation-field:first-child.mf-error .validation-hint,#post .validation-field:first-child.mf-valid .validation-hint{right:1.1em}.hidden-fields{display:none}.hidden -fields div,.hidden-fields label{display:none}#captcha{transform:scale(0.7);width:80px}#captcha>div>div{width:100% !important}@media (min-width: 450px){#captcha{transform:none;width:100%}} +/*# sourceMappingURL=multiForm.css.map */ http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/components/contactForm/multiForm.css.map ---------------------------------------------------------------------- diff --git a/scripts/components/contactForm/multiForm.css.map b/scripts/components/contactForm/multiForm.css.map new file mode 100644 index 0000000..54b8860 --- /dev/null +++ b/scripts/components/contactForm/multiForm.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["multiForm.scss"], +"names": [], +"file": "multiForm.css" +} http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/components/contactForm/multiForm.scss ---------------------------------------------------------------------- diff --git a/scripts/components/contactForm/multiForm.scss b/scripts/components/contactForm/multiForm.scss new file mode 100644 index 0000000..28e9e34 --- /dev/null +++ b/scripts/components/contactForm/multiForm.scss @@ -0,0 +1,226 @@ +/* + Created on : 02.03.2015, 22:25:12 + Author : Chris +*/ + +#multi-form { + width: 100%; + margin: 0 auto; + + * { + outline: 0; + } + + ul { + list-style: none; + } + + ul li { + list-style: none; + } + + form { + margin: 0 auto; + text-align: center; + + fieldset { + box-sizing: border-box; + width: 100%; + vertical-align: top; + border: 0; + margin: 0; + padding: 0; + + &.mf-valid { + .fs-title { + &:after { + font-family: "pulsweb"; + content: "\f00c"; + color: green; + margin-left: .5em; + font-size: 100%; + } + } + } + } + + textarea, input[type="text"] { + border: 0; + border-bottom: 1px solid #999; + border-radius: 2px; + padding: .75em .5em; + width: 100%; + box-sizing: border-box; + font-size: 15px; + } + + .action-button-wrapper .standalone { + width: 100%; + + a { + display: block; + width: 50%; + margin: 0 auto; + padding: .5em; + } + } + + .action-button-wrapper div { + display: inline-block; + margin-top: .5em; + + &:first-child { + padding-right: .5em; + } + + &:last-child { + padding-left: .5em; + } + } + + label { + color: white; + margin-bottom: 0; + } + + .submit { + border: 1px solid gray; + border-radius: 2px; + /*padding: .5em .7em;*/ + width: auto; + height: auto; + } + } +} + +/* Style for validation. */ +@mixin errorStyle() { + border-bottom: 1px solid orange !important; +} + +.validation-field { + position: relative; + width: 100%; + margin-bottom: 2em; + + label { + position: absolute; + top: .5em; + left: 8px; + color: #aaa !important; + padding: 0 5px; + font-weight: 100; + + transition: top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out; + } + + &.focused, &.mf-valid { + label { + top: -.8em; + left: 0; + transform: scale3d(.85, .85, 1); + } + } + + &.focused, &.mf-valid { + label { + background-color: #fff; + } + } + + .validation-hint { + position: absolute; + right: .6em; + top: .5em; + } + + &.mf-valid .validation-hint:after { + font-family: "pulsweb"; + content: "\f00c"; + color: green; + font-size: 90%; + } + + &.mf-error { + textarea, iframe, [type="text"], [type="password"], [type="number"] { + @include errorStyle(); + } + + .validation-hint:after { + font-family: "Glyphicons Halflings"; + content: '!'; + color: orange; + } + } + + .error-message { + opacity: 0; + width: auto; + padding: .5em; + border-radius: 1px; + position: absolute; + top: -3em; + right: 0; + font-size: 90%; + white-space: nowrap; + pointer-events: none; + } + + &.mf-error.focused .error-message { + opacity: 1; + color: white; + background: orange; + + -webkit-transition: all .3s; + -moz-transition: all .3s; + transition: all .3s; + + &:after { + content: ''; + position: absolute; + bottom: -.3em; + right: 1em; + border-top: 5px solid orange !important; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + } + } +} + +#post .validation-field { + &:first-child { + padding-right: .5em; + } + &:last-child { + padding-left: .5em; + } + &:first-child { + &.mf-error .validation-hint, &.mf-valid .validation-hint { + right: 1.1em; + } + } +} + +.hidden-fields { + display: none; + + div, label { + display: none; + } +} + +#captcha { + > div { + > div { + width: 100% !important; + } + } + + transform: scale(.7); + width: 80px; + + @media (min-width: 450px) { + transform: none; + width: 100%; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/scripts/onepager.js ---------------------------------------------------------------------- diff --git a/scripts/onepager.js b/scripts/onepager.js new file mode 100644 index 0000000..3d89297 --- /dev/null +++ b/scripts/onepager.js @@ -0,0 +1,155 @@ +(function () { + 'use strict'; + + var burgerMenu = document.querySelector('#burger-menu'), + links = [].slice.call(document.querySelectorAll('.nav-link')), + + body = document.querySelector('body'), + + addClass = function (elem, className) { + if (elem.className.indexOf(className) === -1) { + elem.className += ' ' + className; + } + }, + + removeClass = function (elem, className) { + var classes = elem.className.replace(' ' + className, ''); + elem.className = classes; + }, + + toggle = function (elem, expr, className) { + if (expr) { + addClass(elem, className); + } else { + removeClass(elem, className); + } + }, + + setPushStateUrl = function (target) { + window.history.pushState(null, target.text, target); + }; + + if (!window.location.hostname === 'localhost') { + var path = window.location.pathname.replace('/', ''); + + if (path) { + window.scrollTo(0, document.querySelector('#' + path).offsetTop); + } + } + + [].slice.call(document.querySelectorAll('.ripple-btn')).forEach(function (btn) { + btn.addEventListener('mousedown', function (event) { + var ripple = this.querySelector('.ripple'); + + addClass(ripple, 'visible'); + ripple.style.transform = 'translate(-50%, -50%) translate(' + event.layerX + 'px, ' + event.layerY + 'px) scale(0.0001, 0.0001)'; + + setTimeout(function () { + ripple.style.transform = ripple.style.transform.replace(' scale(0.0001, 0.0001)', ''); + }, 200); + }, true); + + btn.addEventListener('mouseup', function () { + var ripple = this.querySelector('.ripple'); + + removeClass(ripple, 'visible'); + }, true); + }); + + links.forEach(function (link) { + link.addEventListener('click', function (e) { + var targetSection = document.querySelector('#' + this.getAttribute('href')), + endPos = targetSection.offsetTop, + startPos = window.scrollY; + + e.preventDefault(); + + window.removeEventListener('scroll', onScrollMethod); + + setPushStateUrl(this); + + if (startPos <= endPos) { + animForward(startPos, endPos); + } else { + animBackward(startPos, endPos); + } + + window.addEventListener('scroll', onScrollMethod); + }, true); + }); + + document.querySelector('div.search').addEventListener('click', function() { + var searchField = document.querySelector('.search-field'); + + toggle(searchField, searchField.className.indexOf('active') === -1 , 'active'); + }); + + var animForward = function (startPos, endPos) { + var incrementer = .1, + step = function () { + var diffEndStart = (endPos - startPos); + + incrementer += 1.25; + + if (diffEndStart < 40) { + startPos += diffEndStart; + } else { + startPos += (1 * incrementer); + } + + window.scrollTo(0, startPos); + + if (startPos < endPos) { + window.requestAnimationFrame(step); + } + }; + + window.requestAnimationFrame(step); + }; + + var animBackward = function (startPos, endPos) { + var incrementer = .1, + step = function () { + var diffEndStart = (startPos - endPos); + + incrementer += 1.25; + + if (diffEndStart < 40) { + startPos -= diffEndStart; + } else { + startPos -= (1 * incrementer); + } + + window.scrollTo(0, startPos); + + if (startPos > endPos) { + window.requestAnimationFrame(step); + } + }; + + window.requestAnimationFrame(step); + }; + + document.querySelector('.back-to-top').addEventListener('click', function () { + window.history.replaceState(null, null, '/'); + + animBackward(window.scrollY, 0); + }, true); + + burgerMenu.addEventListener('click', function () { + if (body.className.indexOf('active') === -1) { + addClass(body, 'active'); + } else { + removeClass(body, 'active'); + + body.removeEventListener('click', this); + } + }, true); + + var onScrollMethod = function () { + toggle(document.querySelector('header'), document.body.scrollTop >= 100, 'active'); + toggle(document.querySelector('body'), document.body.scrollTop >= 280, 'scrolled'); + }; + + window.addEventListener('scroll', onScrollMethod); +}());
