diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..16f740955f --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +/nbproject/private/ +/styles_BUILD/ +/scripts/onepager.min.js +/styles/onepager.css +/styles/onepager.css.map \ No newline at end of file diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000000..1aa684c521 --- /dev/null +++ b/.htaccess @@ -0,0 +1,71 @@ +#Header set cache-control: no-transform,public,max-age=300,s-maxage=900 + +# compress text, html, javascript, css, xml: + + AddOutputFilterByType DEFLATE text/plain + AddOutputFilterByType DEFLATE text/html + AddOutputFilterByType DEFLATE text/css + AddOutputFilterByType DEFLATE text/xml + AddOutputFilterByType DEFLATE font/ttf + AddOutputFilterByType DEFLATE text/javascript + AddOutputFilterByType DEFLATE application/x-javascript + AddOutputFilterByType DEFLATE application/xhtml+xml + AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml + + +# Add correct content-type for fonts +AddType font/ttf .ttf +AddType font/woff .woff +AddType font/woff2 .woff +AddType font/eot .eot +AddType application/x-font-ttf .ttf +AddType application/x-font-opentype .otf +AddType application/x-font-woff .woff +# AddType font/svg .svg Do NOT activate this, after this all svg+xml images will not appear. + +AddType image/svg+xml svg svgz +AddEncoding gzip svgz + +# Or, compress certain file types by extension: + + SetOutputFilter DEFLATE + + + + SetOutputFilter DEFLATE + + + + SetOutputFilter DEFLATE + + +# Set expire information for some types. + + ExpiresActive On + ExpiresDefault "access plus 1 month" + ExpiresByType image/gif "access plus 1 month" + ExpiresByType image/jpg "access plus 1 month" + ExpiresByType image/jpeg "access plus 1 month" + ExpiresByType image/png "access plus 1 month" + ExpiresByType image/svg+xml "access plus 1 month" + ExpiresByType image/svg "access plus 1 month" + ExpiresByType text/css "access plus 1 month" + ExpiresByType text/html "access plus 1 month" + ExpiresByType text/javascript "access plus 1 month" + ExpiresByType application/x-javascript "access plus 1 month" + ExpiresByType application/javascript "access plus 1 month" + ExpiresByType font/ttf "access plus 1 month" + ExpiresByType font/eot "access plus 1 month" + ExpiresByType font/woff "access plus 1 month" + ExpiresByType font/woff2 "access plus 1 month" + ExpiresByType font/svg "access plus 1 month" + + + + Options +FollowSymLinks + IndexIgnore */* + RewriteEngine On + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule (.*) / + \ No newline at end of file diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg new file mode 100644 index 0000000000..9f7ffd2c7b --- /dev/null +++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg @@ -0,0 +1 @@ +Logo-NetBeans-160401NetBeans.IDE \ No newline at end of file diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg new file mode 100644 index 0000000000..149d9281cf --- /dev/null +++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg @@ -0,0 +1 @@ +Logo-NetBeans-160401NetBeans \ No newline at end of file diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg new file mode 100644 index 0000000000..086418d1e3 --- /dev/null +++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg @@ -0,0 +1 @@ +Logo-NetBeans-160401NetBeansIDE \ No newline at end of file diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg new file mode 100644 index 0000000000..af12d50aae Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg differ diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg new file mode 100644 index 0000000000..a89c12fb20 Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg differ diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg new file mode 100644 index 0000000000..e530567ec6 Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg differ diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg new file mode 100644 index 0000000000..1c57ad586b Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg differ diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg new file mode 100644 index 0000000000..3db2fba9dc Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg differ diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg new file mode 100644 index 0000000000..1c16463a7e Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg differ diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg" new file mode 100644 index 0000000000..5e7042c12f --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie 2 \ No newline at end of file diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg" new file mode 100644 index 0000000000..19f92802ab --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie 3 \ No newline at end of file diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg" new file mode 100644 index 0000000000..e54d9d0ba2 --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie 4 \ No newline at end of file diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg" new file mode 100644 index 0000000000..d804e3f0e1 --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie 5 \ No newline at end of file diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg" new file mode 100644 index 0000000000..8e99cc6432 --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie \ No newline at end of file diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg" new file mode 100644 index 0000000000..8530f30f12 --- /dev/null +++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg" @@ -0,0 +1 @@ +Zeichenfläche 2 \ No newline at end of file diff --git a/bilder/android.png b/bilder/android.png new file mode 100644 index 0000000000..775b422f34 Binary files /dev/null and b/bilder/android.png differ diff --git a/bilder/angularjs.png b/bilder/angularjs.png new file mode 100644 index 0000000000..b1d398b8b7 Binary files /dev/null and b/bilder/angularjs.png differ diff --git a/bilder/ant.gif b/bilder/ant.gif new file mode 100644 index 0000000000..59c0c4b603 Binary files /dev/null and b/bilder/ant.gif differ diff --git a/bilder/arduino.png b/bilder/arduino.png new file mode 100644 index 0000000000..bb96883a54 Binary files /dev/null and b/bilder/arduino.png differ diff --git a/bilder/bower.png b/bilder/bower.png new file mode 100644 index 0000000000..600f60fec5 Binary files /dev/null and b/bilder/bower.png differ diff --git a/bilder/bugzilla.png b/bilder/bugzilla.png new file mode 100644 index 0000000000..f3790e9977 Binary files /dev/null and b/bilder/bugzilla.png differ diff --git a/bilder/cakephp.png b/bilder/cakephp.png new file mode 100644 index 0000000000..abc4554b4a Binary files /dev/null and b/bilder/cakephp.png differ diff --git a/bilder/cassandra.png b/bilder/cassandra.png new file mode 100644 index 0000000000..2bd18ef1d0 Binary files /dev/null and b/bilder/cassandra.png differ diff --git a/bilder/coffeescript.png b/bilder/coffeescript.png new file mode 100644 index 0000000000..d78e5518bc Binary files /dev/null and b/bilder/coffeescript.png differ diff --git a/bilder/controlsjs.png b/bilder/controlsjs.png new file mode 100644 index 0000000000..8728d67be5 Binary files /dev/null and b/bilder/controlsjs.png differ diff --git a/bilder/cordova.png b/bilder/cordova.png new file mode 100644 index 0000000000..81f3363609 Binary files /dev/null and b/bilder/cordova.png differ diff --git a/bilder/couchapp.png b/bilder/couchapp.png new file mode 100644 index 0000000000..a0be4f355e Binary files /dev/null and b/bilder/couchapp.png differ diff --git a/bilder/couchbase.png b/bilder/couchbase.png new file mode 100644 index 0000000000..4bdc3876ff Binary files /dev/null and b/bilder/couchbase.png differ diff --git a/bilder/db.png b/bilder/db.png new file mode 100644 index 0000000000..b8fdcccb11 Binary files /dev/null and b/bilder/db.png differ diff --git a/bilder/docker.png b/bilder/docker.png new file mode 100644 index 0000000000..48d3d08f52 Binary files /dev/null and b/bilder/docker.png differ diff --git a/bilder/doctrine.png b/bilder/doctrine.png new file mode 100644 index 0000000000..084b35760f Binary files /dev/null and b/bilder/doctrine.png differ diff --git a/bilder/es6.png b/bilder/es6.png new file mode 100644 index 0000000000..b47e16127d Binary files /dev/null and b/bilder/es6.png differ diff --git a/bilder/eslint.png b/bilder/eslint.png new file mode 100644 index 0000000000..162f09ad72 Binary files /dev/null and b/bilder/eslint.png differ diff --git a/bilder/git.png b/bilder/git.png new file mode 100644 index 0000000000..eab8c2daae Binary files /dev/null and b/bilder/git.png differ diff --git a/bilder/github.png b/bilder/github.png new file mode 100644 index 0000000000..db813165f6 Binary files /dev/null and b/bilder/github.png differ diff --git a/bilder/gradle.png b/bilder/gradle.png new file mode 100644 index 0000000000..3f3af049e6 Binary files /dev/null and b/bilder/gradle.png differ diff --git a/bilder/grunt.svg b/bilder/grunt.svg new file mode 100644 index 0000000000..fd02b77f58 --- /dev/null +++ b/bilder/grunt.svg @@ -0,0 +1,294 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/bilder/gulp.png b/bilder/gulp.png new file mode 100644 index 0000000000..56dc46c3e4 Binary files /dev/null and b/bilder/gulp.png differ diff --git a/bilder/handlebars.png b/bilder/handlebars.png new file mode 100644 index 0000000000..183a222e8b Binary files /dev/null and b/bilder/handlebars.png differ diff --git a/bilder/ionic.png b/bilder/ionic.png new file mode 100644 index 0000000000..d717b17cef Binary files /dev/null and b/bilder/ionic.png differ diff --git a/bilder/javaee.png b/bilder/javaee.png new file mode 100644 index 0000000000..b8d2b3e3f4 Binary files /dev/null and b/bilder/javaee.png differ diff --git a/bilder/javafx.png b/bilder/javafx.png new file mode 100644 index 0000000000..4e683d15a4 Binary files /dev/null and b/bilder/javafx.png differ diff --git a/bilder/jenkins.png b/bilder/jenkins.png new file mode 100644 index 0000000000..f8813eb312 Binary files /dev/null and b/bilder/jenkins.png differ diff --git a/bilder/jira.png b/bilder/jira.png new file mode 100644 index 0000000000..d457a12cd5 Binary files /dev/null and b/bilder/jira.png differ diff --git a/bilder/jquery.png b/bilder/jquery.png new file mode 100644 index 0000000000..d9f119349f Binary files /dev/null and b/bilder/jquery.png differ diff --git a/bilder/jshint.png b/bilder/jshint.png new file mode 100644 index 0000000000..444ca71038 Binary files /dev/null and b/bilder/jshint.png differ diff --git a/bilder/karmajs.png b/bilder/karmajs.png new file mode 100644 index 0000000000..77a34ff9f3 Binary files /dev/null and b/bilder/karmajs.png differ diff --git a/bilder/knockout.png b/bilder/knockout.png new file mode 100644 index 0000000000..6a08dab058 Binary files /dev/null and b/bilder/knockout.png differ diff --git a/bilder/kotlin.png b/bilder/kotlin.png new file mode 100644 index 0000000000..1163ebadc2 Binary files /dev/null and b/bilder/kotlin.png differ diff --git a/bilder/laravel.png b/bilder/laravel.png new file mode 100644 index 0000000000..11cc0ea137 Binary files /dev/null and b/bilder/laravel.png differ diff --git a/bilder/logo-1.svg b/bilder/logo-1.svg new file mode 100644 index 0000000000..5e7042c12f --- /dev/null +++ b/bilder/logo-1.svg @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie 2 \ No newline at end of file diff --git a/bilder/logo-2.svg b/bilder/logo-2.svg new file mode 100644 index 0000000000..8e99cc6432 --- /dev/null +++ b/bilder/logo-2.svg @@ -0,0 +1 @@ +Zeichenfläche 2 Kopie \ No newline at end of file diff --git a/bilder/maven.png b/bilder/maven.png new file mode 100644 index 0000000000..7bfc052209 Binary files /dev/null and b/bilder/maven.png differ diff --git a/bilder/mercurial.png b/bilder/mercurial.png new file mode 100644 index 0000000000..706240a35d Binary files /dev/null and b/bilder/mercurial.png differ diff --git a/bilder/mongodb.png b/bilder/mongodb.png new file mode 100644 index 0000000000..2b9c66ccb4 Binary files /dev/null and b/bilder/mongodb.png differ diff --git a/bilder/mssql.jpg b/bilder/mssql.jpg new file mode 100644 index 0000000000..a0c37101dd Binary files /dev/null and b/bilder/mssql.jpg differ diff --git a/bilder/mssql.png b/bilder/mssql.png new file mode 100644 index 0000000000..4be29baa05 Binary files /dev/null and b/bilder/mssql.png differ diff --git a/bilder/mysql.png b/bilder/mysql.png new file mode 100644 index 0000000000..eb4865e7f8 Binary files /dev/null and b/bilder/mysql.png differ diff --git a/bilder/netbeans.png b/bilder/netbeans.png new file mode 100644 index 0000000000..a12f92d9b5 Binary files /dev/null and b/bilder/netbeans.png differ diff --git a/bilder/nodejs.png b/bilder/nodejs.png new file mode 100644 index 0000000000..cb4cdb35ae Binary files /dev/null and b/bilder/nodejs.png differ diff --git a/bilder/npm.png b/bilder/npm.png new file mode 100644 index 0000000000..c790010c7b Binary files /dev/null and b/bilder/npm.png differ diff --git a/bilder/ojet.jpg b/bilder/ojet.jpg new file mode 100644 index 0000000000..877aa61372 Binary files /dev/null and b/bilder/ojet.jpg differ diff --git a/bilder/perl.png b/bilder/perl.png new file mode 100644 index 0000000000..5ca7e8766c Binary files /dev/null and b/bilder/perl.png differ diff --git a/bilder/pl-sql.png b/bilder/pl-sql.png new file mode 100644 index 0000000000..f42886023f Binary files /dev/null and b/bilder/pl-sql.png differ diff --git a/bilder/polymer.png b/bilder/polymer.png new file mode 100644 index 0000000000..86b06752ba Binary files /dev/null and b/bilder/polymer.png differ diff --git a/bilder/postgresql.png b/bilder/postgresql.png new file mode 100644 index 0000000000..dbb8e71c2b Binary files /dev/null and b/bilder/postgresql.png differ diff --git a/bilder/puppet.png b/bilder/puppet.png new file mode 100644 index 0000000000..e1e4996436 Binary files /dev/null and b/bilder/puppet.png differ diff --git a/bilder/python.png b/bilder/python.png new file mode 100644 index 0000000000..f0f22cbbce Binary files /dev/null and b/bilder/python.png differ diff --git a/bilder/react.png b/bilder/react.png new file mode 100644 index 0000000000..2ce06c446c Binary files /dev/null and b/bilder/react.png differ diff --git a/bilder/redmine.png b/bilder/redmine.png new file mode 100644 index 0000000000..2eacf307ac Binary files /dev/null and b/bilder/redmine.png differ diff --git a/bilder/requirejs.png b/bilder/requirejs.png new file mode 100644 index 0000000000..e7fd732b72 Binary files /dev/null and b/bilder/requirejs.png differ diff --git a/bilder/scala.png b/bilder/scala.png new file mode 100644 index 0000000000..659915f663 Binary files /dev/null and b/bilder/scala.png differ diff --git a/bilder/selenium.png b/bilder/selenium.png new file mode 100644 index 0000000000..ca5889d64b Binary files /dev/null and b/bilder/selenium.png differ diff --git a/bilder/shell.png b/bilder/shell.png new file mode 100644 index 0000000000..ca4d4fa4f1 Binary files /dev/null and b/bilder/shell.png differ diff --git a/bilder/silverstripe.png b/bilder/silverstripe.png new file mode 100644 index 0000000000..7e177faab3 Binary files /dev/null and b/bilder/silverstripe.png differ diff --git a/bilder/sonar.png b/bilder/sonar.png new file mode 100644 index 0000000000..167d2c6baa Binary files /dev/null and b/bilder/sonar.png differ diff --git a/bilder/spring.png b/bilder/spring.png new file mode 100644 index 0000000000..9f5b20aa67 Binary files /dev/null and b/bilder/spring.png differ diff --git a/bilder/sqlite.png b/bilder/sqlite.png new file mode 100644 index 0000000000..90949fb5f3 Binary files /dev/null and b/bilder/sqlite.png differ diff --git a/bilder/svn.png b/bilder/svn.png new file mode 100644 index 0000000000..1af91a53c5 Binary files /dev/null and b/bilder/svn.png differ diff --git a/bilder/symfony.png b/bilder/symfony.png new file mode 100644 index 0000000000..0cc594d159 Binary files /dev/null and b/bilder/symfony.png differ diff --git a/bilder/typescript.png b/bilder/typescript.png new file mode 100644 index 0000000000..1ac5170e7e Binary files /dev/null and b/bilder/typescript.png differ diff --git a/bilder/uml.png b/bilder/uml.png new file mode 100644 index 0000000000..e30231d6c7 Binary files /dev/null and b/bilder/uml.png differ diff --git a/bilder/wordpress.png b/bilder/wordpress.png new file mode 100644 index 0000000000..8850a33f40 Binary files /dev/null and b/bilder/wordpress.png differ diff --git a/bilder/zend.png b/bilder/zend.png new file mode 100644 index 0000000000..c728b3edf4 Binary files /dev/null and b/bilder/zend.png differ diff --git a/fonts/puls.svg b/fonts/puls.svg new file mode 100644 index 0000000000..a0bb2068c7 --- /dev/null +++ b/fonts/puls.svg @@ -0,0 +1,24 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/puls.ttf b/fonts/puls.ttf new file mode 100644 index 0000000000..ddaf4e0a89 Binary files /dev/null and b/fonts/puls.ttf differ diff --git a/fonts/puls.woff b/fonts/puls.woff new file mode 100644 index 0000000000..209f1b88ab Binary files /dev/null and b/fonts/puls.woff differ diff --git a/index.html b/index.html new file mode 100644 index 0000000000..99087f9329 --- /dev/null +++ b/index.html @@ -0,0 +1,615 @@ + + + + NetBeans - Fits the pieces together + + + + + +
+
+ + + + + +
+
+ + +
+
+ +
+
+
+ netbeans +
+
+ + +
+
+

NetBeans IDE supports a lot of languages...

+ +

* These are 3rd Party Plugins.

+ +
+
+
+
+ +
+ +
+ +
+ +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000000..fee5a9f0b8 --- /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": {} +} \ No newline at end of file diff --git a/scripts/components/contactForm/contactForm.js b/scripts/components/contactForm/contactForm.js new file mode 100644 index 0000000000..3b68858200 --- /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,
schreib uns bitte an kontakt@puls-webagentur.de"; + 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 diff --git a/scripts/components/contactForm/formValidation.js b/scripts/components/contactForm/formValidation.js new file mode 100644 index 0000000000..bc774e648d --- /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 diff --git a/scripts/components/contactForm/multiForm.css b/scripts/components/contactForm/multiForm.css new file mode 100644 index 0000000000..7945aa4ed6 --- /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 */ diff --git a/scripts/components/contactForm/multiForm.css.map b/scripts/components/contactForm/multiForm.css.map new file mode 100644 index 0000000000..54b886078d --- /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" +} diff --git a/scripts/components/contactForm/multiForm.scss b/scripts/components/contactForm/multiForm.scss new file mode 100644 index 0000000000..28e9e342a0 --- /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 diff --git a/scripts/onepager.js b/scripts/onepager.js new file mode 100644 index 0000000000..3d892970ad --- /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); +}()); diff --git a/styles/onepager.scss b/styles/onepager.scss new file mode 100644 index 0000000000..9faaac9ec1 --- /dev/null +++ b/styles/onepager.scss @@ -0,0 +1,991 @@ +/* + Created on : 05.08.2016, 17:11:56 + Author : Chris +*/ + +$default-color: #fff; +$primary-color: #4181c1; +$secondary-color: #ebebeb; +$alternative-color: #272727; + +$symbolic-color-php: #6c7eb7; // PHP +$symbolic-color-html5: #e44d26; // HTML5 +$symbolic-color-css3: #016fba; // CSS3 +$symbolic-color-less: #2b4e85; // LESS +$symbolic-color-sass: #cf649a; // SASS +$symbolic-color-markdown: #000; // MarkDown +$symbolic-color-ftl: #444; // FTL +$symbolic-color-json: #1984a4; // JSON +$symbolic-color-jsx: #333; // JSX +$symbolic-color-ini: #ff6600; // Ini +$symbolic-color-js: #d6ba33; // JS +$symbolic-color-java: #e00024; // JAVA +$symbolic-color-sql: #444; // SQL +$symbolic-color-cpp: #348ab9; // CPP +$symbolic-color-xml: #666; // XML +$symbolic-color-jade: #47c17b; // JADE +$symbolic-color-twig: #899914; // Twig +$symbolic-color-groovy: #6398aa; // Groovy +$symbolic-color-yaml: #888; // Yaml + +$symbolic-color-fb: #3b5998; // fb +$symbolic-color-twitter: #1da1f2; // twitter +$symbolic-color-plus: #db4437; // plus +$symbolic-color-slack: #766fba; // slack +$symbolic-color-youtube: #e62117; // youtube + + +// Sizes +$small: 768px; +$medium: 1024px; +$large: 1260px; + +$headerHeight: 50px; + +@mixin margin-bottom-reset() { + margin: 0; + padding: 0; +} + +@mixin fullWidth() { + width: 100%; + margin: 0 auto; + box-sizing: border-box; +} + +@mixin box-shadow($rotated: 1) { + box-shadow: 0 3px * $rotated 4px 0 rgba(0, 0, 0, .12), 0 1px * $rotated 2px 0 rgba(0, 0, 0, .24); +} + +@mixin box-shadow-active($rotated: 1) { + box-shadow: 0 6px * $rotated 7px 0 rgba(0, 0, 0, .2), 0 1px 10px * $rotated 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); +} + +@mixin text-shadow($rotated: 1) { + text-shadow: 0 3px 4px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); +} + +@mixin inner-fullwidth() { + @include fullWidth(); + padding: 35px 15px; + max-width: 1200px; +} + +@font-face { + font-family: 'PulsIcons'; + src: url('../fonts/puls.ttf') format('truetype'), + url('../fonts/puls.woff') format('woff'), + url('../fonts/puls.svg') format('svg'); +} + +@keyframes show-hide-ripple { + from { + transform: scale(0); + opacity: .5; + } + to { + transform: scale(30); + opacity: 0; + } +} + +body { + @include margin-bottom-reset(); + + font-family: 'Open Sans', sans-serif; + line-height: 24px; + size: 16px; + color: #333; + font-weight: 300; + width: 100%; + + ul, ol, li, h1, h2, h3, p, div, img { + @include margin-bottom-reset(); + } + + h1, h2, h3 { + margin-bottom: 10px; + } + + a { + color: $alternative-color; + text-decoration: none; + + &.external { + text-decoration: underline; + font-weight: bold; + } + + &.no-deco { + color: white; + } + } + + .alternative-color { + a:not(.next-section) { + color: lighten($primary-color, 15%); + } + } + + .with-icon { + &:after { + font-family: 'PulsIcons'; + } + } + + img { + max-width: 100%; + width: 100%; + display: block; + } + + ul { + list-style: none; + margin-left: 0; + } + + header, footer { + @include margin-bottom-reset(); + @include fullWidth(); + } + + header { + position: fixed; + height: $headerHeight; + color: $secondary-color; + background-color: transparent; + transition: background-color 500ms ease; + z-index: 1; + user-select: none; + -webkit-user-select: none; + + .inner { + padding-top: 0; + padding-bottom: 0; + height: 100%; + + nav { + align-items: flex-start; + display: flex; + flex: 1; + + #burger-menu { + min-width: 30px; + max-width: 30px; + height: 25px; + position: relative; + z-index: 1; + align-self: center; + + > div { + border: 2px solid $alternative-color; + transition: all 300ms ease-out; + position: absolute; + left: 0; + right: 0; + top: 10px; + + &:first-child { + top: 0px; + } + + &:last-child { + top: 20px; + } + } + } + + ul { + background-color: rgba(0, 0, 0, .9); + display: block; + height: 10000%; + left: 0; + min-width: 150px; + padding-top: $headerHeight + 25; + width: 60%; + position: absolute; + transform: translate3d(-700px, 0, 0); + transition: transform 300ms ease-out; + + li { + display: block; + margin-bottom: 5px; + + .nav-link { + color: inherit; + display: block; + padding: 5px 20px; + transition: color 200ms ease-in; + + &.active { + color: $primary-color; + } + } + } + } + } + + #logo { + align-self: center; + color: $primary-color; + display: flex; + align-items: center; + justify-content: flex-end; + + img { + width: 75px; + margin-right: -1em; + } + + div { + align-content: center; + align-items: center; + } + } + } + + .search { + color: $alternative-color; + align-self: center; + font-size: 125%; + margin: 0 .25em; + + &:after { + content: '\f002'; + } + + &:hover { + cursor: pointer; + } + } + + .search-field { + @include inner-fullwidth(); + @include box-shadow(); + + display: flex; + padding: 0; + height: 0; + overflow: hidden; + transition: height 200ms ease-out; + position: absolute; + right: 0; + + input[type="text"] { + outline: 0; + padding: .25em; + font-size: 120%; + flex: 1 0 80%; + } + + button { + margin: 0; + flex: 1 0 5%; + align-self: auto; + background-color: $alternative-color; + color: $secondary-color; + border: 0; + } + + &.active { + height: 40px; + } + + @media (min-width: 600px) { + max-width: 600px; + margin: 0; + } + + @media (min-width: $small) { + right: 8em; + } + } + + &.active { + background-color: lighten($alternative-color, 75%); + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .12), + 0 1px 2px 0 rgba(0, 0, 0, .24); + } + } + + main { + section { + position: relative; + padding-top: $headerHeight; + height: 100vh; + + .next-section { + @include box-shadow(-1); + + position: absolute; + bottom: .75em; + left: 50%; + margin-left: -25px; + line-height: 1; + color: $secondary-color; + font-size: 175%; + padding: .5em .7em; + line-height: 1; + border-radius: 50%; + background-color: rgba(0, 0, 0, .3); + border: 1px solid $secondary-color; + transform: rotate3d(1, 0, 0, 180deg); + text-shadow: 0 0 4px rgba(0, 0, 0, 1); + transition: text-shadow 500ms ease-out, box-shadow 250ms ease-out; + + &:after { + font-family: 'PulsIcons'; + content: '\f102'; + } + + &:hover { + cursor: pointer; + } + + &:active { + text-shadow: 0 -1px 6px rgba(0, 0, 0, 1); + box-shadow: 0 -6px 7px 0 rgba(0, 0, 0, .2), 0 -1px 10px 0 rgba(0, 0, 0, .12), 0 -2px 4px -1px rgba(0, 0, 0, .2); + } + } + + .languages, .technologies { + display: flex; + flex-direction: row; + max-width: 640px; + margin: 2em auto; + overflow-x: scroll; + + > li { + display: flex; + } + + @media(min-width: $small) { + flex-wrap: wrap; + justify-content: space-between; + overflow-x: hidden; + } + } + + .languages { + align-content: center; + + > li { + .php { + background-color: $symbolic-color-php; + } + + .js { + background-color: $symbolic-color-js; + } + + .java { + background-color: $symbolic-color-java; + } + + .groovy { + background-color: $symbolic-color-groovy; + } + + .html5 { + background-color: $symbolic-color-html5; + } + + .css3 { + background-color: $symbolic-color-css3; + } + + .less { + background-color: $symbolic-color-less; + } + + .sass { + background-color: $symbolic-color-sass; + } + + .ftl { + background-color: $symbolic-color-ftl; + } + + .json { + background-color: $symbolic-color-json; + } + + .jsx { + background-color: $symbolic-color-jsx; + } + + .ini { + background-color: $symbolic-color-ini; + } + + .markdown { + background-color: $symbolic-color-markdown; + } + + .jade { + background-color: $symbolic-color-jade; + } + + .twig { + background-color: $symbolic-color-twig; + } + + .sql { + background-color: $symbolic-color-sql; + } + + .yaml { + background-color: $symbolic-color-yaml; + } + + .cpp { + background-color: $symbolic-color-cpp; + } + + .xml { + background-color: $symbolic-color-xml; + } + } + } + + .technologies { + max-width: 795px; + + > li { + max-width: 85px; + text-align: center; + margin: .5em; + font-weight: bold; + font-size: 70%; + display: inline-table; + + .name { + display: none; + } + + @media(min-width: $small) { + .name { + display: block; + } + } + } + } + + &:not(.banner) { + height: auto; + + p { + text-align: center; + } + + @media(min-width: $small) { + height: auto; + } + } + + &#languages { + height: auto; + + .inner { + height: 100%; + padding-bottom: 6em; + } + } + + &#plugins { + .inner { + padding-bottom: 6em; + } + } + } + } + + footer { + background: #fff; + box-sizing: border-box; + + .back-to-top { + @include box-shadow(); + + position: fixed; + padding: .5em .7em; + line-height: 1; + bottom: .75em; + right: .75em; + background-color: $primary-color; + border-radius: 50%; + transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; + color: $secondary-color; + opacity: 0; + visibility: hidden; + font-size: 150%; + + &:after { + content: '\f102'; + } + + &:hover { + cursor: pointer; + } + + &:active { + @include box-shadow-active(); + } + } + + .social-links { + display: flex; + + > li { + display: flex; + + a { + width: 50px; + height: 50px; + line-height: 50px; + color: white; + font-size: 130%; + margin: .25em; + transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; + + &:active { + @include box-shadow-active(); + } + } + + .fb { + background-color: $symbolic-color-fb; + + &:after { + content: '\f09a'; + } + } + .twitter { + background-color: $symbolic-color-twitter; + + &:after { + content: '\f099'; + } + } + .plus { + background-color: $symbolic-color-plus; + + &:after { + content: '\ea8b'; + } + } + .slack { + background-color: $symbolic-color-slack; + + &:after { + content: '\f198'; + } + } + .youtube { + background-color: $symbolic-color-youtube; + + &:after { + content: '\ea9d'; + } + } + } + } + } + + .circle { + @include box-shadow(); + @include text-shadow(); + + border-radius: 50%; + font-weight: bold; + font-size: 100%; + background-color: black; + width: 75px; + height: 75px; + line-height: 75px; + margin: .5em; + text-align: center; + flex: 1 0 50%; + + &.small { + font-size: 80%; + line-height: 3; + } + + &.tech { + max-width: 100%; + max-height: 100%; + margin: 0; + background-color: transparent; + box-shadow: none; + } + } + + .download-links { + margin-top: .5em; + font-weight: bold; + font-size: 90%; + display: flex; + justify-content: center; + + a { + @include box-shadow(); + + padding: 1em; + white-space: nowrap; + color: white; + background-color: orangered; + cursor: pointer; + border-radius: 2px; + transition: box-shadow 250ms ease-out; + margin: 0; + + &:active { + @include box-shadow-active(); + } + } + } + + &.scrolled { + footer { + .back-to-top { + visibility: visible; + opacity: 1; + } + } + } + + &.active { + .clickable-background { + bottom: 0; + display: block; + left: 0; + opacity: .5; + position: absolute; + right: 0; + top: $headerHeight; + background-color: rgba(0, 0, 0, 1); + z-index: 1; + } + + header { + nav { + #burger-menu { + > div { + border: 2px solid #ccc; + + &:first-child { + transform: rotate3d(0, 0, 1, 45deg); + top: 10px; + } + + &:nth-child(2n) { + opacity: 0; + } + + &:last-child { + transform: rotate3d(0, 0, 1, -45deg); + top: 10px; + } + } + } + + ul { + transform: translate3d(0, 0, 0); + } + } + } + } + + .primary-color { + background-color: $primary-color; + color: #fff; + } + + .secondary-color { + background-color: $secondary-color; + } + + .default-color { + background-color: $default-color; + } + + .alternative-color { + background-color: $alternative-color; + color: #ddd; + } + + .ripple-btn { + } + + .inner { + @include inner-fullwidth(); + padding-bottom: 80px; + + @media(min-width: $small) { + padding-bottom: 50px; + } + } + + .flex-container { + display: flex; + flex-direction: column; + align-items: center; + + @media(min-width: $medium) { + flex-wrap: wrap; + + > * { + flex: 1; + } + } + } + + .flex-container-small { + display: flex; + justify-content: space-between; + + > * { + } + } + + .font-light { + color: lighten($alternative-color, 2%); + } + + .left { + text-align: left; + } + + .center { + text-align: center; + } + + .right { + text-align: right; + } + + .title-img { + width: 100%; + height: 107%; + position: absolute; + z-index: -2; + background-color: #eee; + + .img-wrapper { + position: absolute; + left: 1em; + right: 1em; + bottom: 0; + + img { + position: absolute; + bottom: -3em; + left: 0; + right: 0; + margin: 0 auto; + box-sizing: border-box; + display: none; + box-shadow: 0px -2px 12px 3px lighten($alternative-color, 60%); + + @media(min-device-width: 600px) and (max-device-width: 800px) { + @media (min-height: 400px) and (orientation: portrait) { + max-width: 768px; + display: block; + bottom: 20em; + } + } + + @media(min-width: 650px) { + @media (min-height: 425px) { + max-width: 768px; + display: block; + } + } + + @media(min-width: 810px) { + @media (min-height: 500px) { + max-width: 760px; + bottom: -3em; + } + + @media (min-height: 700px) { + max-width: 850px; + } + + @media (min-height: 850px) { + max-width: 1200px; + } + } + } + } + } + + .banner { + text-align: center; + box-sizing: border-box; + + .inner { + height: auto; + padding: 3vh 15px; + color: $alternative-color; + justify-content: flex-start; + + &.flex-container-small { + flex-direction: column; + align-items: center; + + .desc { + max-width: 500px; + margin-top: 2em; + } + + .headline-with-downloads { + .download-links a { + &:last-child { + display: none; + } + } + } + + /* Phone Landscape */ + @media screen and (min-width: 500px) + and (min-height: 320px) + and (orientation: landscape) { + flex-direction: row-reverse; + align-items: flex-start; + justify-content: center; + + .desc { + margin-right: 1em; + margin-top: 0; + } + } + } + + .slogan { + color: inherit; + display: inline-block; + padding: 25px; + margin-bottom: 1em; + background: rgba(255, 255, 255, .7); + + h1 { + font-weight: 800; + box-sizing: border-box; + color: $primary-color; + text-shadow: 1px 1px 2px lighten($primary-color, 25%); + white-space: nowrap; + } + } + + p { + text-align: justify; + + &:not(:last-child) { + margin-bottom: 1em; + } + } + + + @media(min-width: $small) { + padding: 10vh 15px; + + &.flex-container-small { + flex-direction: row-reverse; + justify-content: center; + align-items: stretch; + + .headline-with-downloads { + display: flex; + flex-direction: column; + + .download-links a { + &:first-child { + margin-right: .5em; + } + + &:last-child { + display: block; + } + } + } + + .slogan { + max-width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + } + + .desc { + margin-right: 1em; + margin-top: 0; + } + } + } + } + + /* Portrait Nexus 7 */ + @media only screen + and (min-device-width: 600px) + and (max-device-width: 960px) + and (orientation: portrait) + and (-webkit-min-device-pixel-ratio: 1) { + height: 70vh; + } + } + + @media(min-width: $medium) { + header { + .inner { + nav { + flex: 2; + + #burger-menu { + display: none; + } + + ul { + @include margin-bottom-reset(); + + display: flex; + background: none; + transform: translate3d(0, 0, 0); + height: auto; + position: static; + margin-top: 0; + width: auto; + + li { + margin: 0 2.5em 0 0; + padding: 0; + cursor: pointer; + white-space: nowrap; + color: $alternative-color; + + .nav-link { + padding: 1em 0; + + &:hover { + color: $primary-color; + } + } + + &:last-child { + margin-right: 0; + } + } + } + } + } + } + + body { + .nav-link:hover { + color: #222; + border-bottom: 2px solid; + } + } + } +} \ No newline at end of file