diff --git a/particles.js.org-new/.babelrc b/particles.js.org-new/.babelrc new file mode 100644 index 000000000..0639bf764 --- /dev/null +++ b/particles.js.org-new/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "@babel/preset-env" + ] +} \ No newline at end of file diff --git a/particles.js.org-new/.gitignore b/particles.js.org-new/.gitignore new file mode 100644 index 000000000..0e796c3f1 --- /dev/null +++ b/particles.js.org-new/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +build \ No newline at end of file diff --git a/particles.js.org-new/LICENSE b/particles.js.org-new/LICENSE new file mode 100644 index 000000000..bdc05f528 --- /dev/null +++ b/particles.js.org-new/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Matteo Bruni + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/particles.js.org-new/README.md b/particles.js.org-new/README.md new file mode 100644 index 000000000..f67c1036f --- /dev/null +++ b/particles.js.org-new/README.md @@ -0,0 +1 @@ +# tsParticles Website diff --git a/particles.js.org-new/config.js b/particles.js.org-new/config.js new file mode 100644 index 000000000..272e99bd6 --- /dev/null +++ b/particles.js.org-new/config.js @@ -0,0 +1,26 @@ +export default { + config: { + port: 9050 + }, + paths: { + root: "./", + src: { + base: "./src", + css: "./src/css", + js: "./src/js", + img: "./src/img" + }, + dist: { + base: "./dist", + css: "./dist/css", + js: "./dist/js", + img: "./dist/img" + }, + build: { + base: "./build", + css: "./build/css", + js: "./build/js", + img: "./build/img" + } + } +} \ No newline at end of file diff --git a/particles.js.org-new/gulpfile.js b/particles.js.org-new/gulpfile.js new file mode 100644 index 000000000..500d9986a --- /dev/null +++ b/particles.js.org-new/gulpfile.js @@ -0,0 +1,187 @@ +import gulp from "gulp"; + +import gulpSass from "gulp-sass"; +import bourbon from "node-bourbon"; +import concat from "gulp-concat"; +import imagemin from "gulp-imagemin"; +import sourcemaps from "gulp-sourcemaps"; +import autoprefixer from "gulp-autoprefixer"; +import panini from "panini"; +import sassCompiler from "sass"; +import del from "del"; +import browserify from "browserify"; +import babelify from "babelify"; +import source from "vinyl-source-stream"; +import logSymbols from "log-symbols"; +import BrowserSync from "browser-sync"; + +import options from "./config.js"; + +const { src, dest, watch, series, parallel } = gulp; +const browserSync = BrowserSync.create(); +const nodepath = "node_modules/"; +const sass = gulpSass(sassCompiler); + +//Note : Webp still not supported in major browsers including forefox +//const webp = require('gulp-webp'); //For converting images to WebP format +//const replace = require('gulp-replace'); //For Replacing img formats to webp in html + +//Load Previews on Browser on dev +function livePreview(done) { + browserSync.init({ + server: { + baseDir: options.paths.dist.base + }, + port: options.config.port || 5000 + }); + done(); +} + +//Copy latest installed Bulma +function setupBulma() { + console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n"); + return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass']) + .pipe(dest('src/sass/')); +} + +//Compile Scss code +function compileSCSS() { + console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n"); + return src(['src/scss/main.scss']) + .pipe(sass({ + outputStyle: 'compressed', + sourceComments: 'map', + sourceMap: 'scss', + includePaths: bourbon.includePaths + }).on('error', sass.logError)) + .pipe(autoprefixer('last 2 versions')) + .pipe(dest('dist/css')) + .pipe(browserSync.stream()); +} + +//Compile HTML partials with Panini +function compileHTML() { + console.log("\n\t" + logSymbols.info, "Compiling HTML..\n"); + panini.refresh(); + return src('src/pages/**/*.html') + .pipe(panini({ + root: 'src/pages/', + layouts: 'src/layouts/', + partials: 'src/partials/', + helpers: 'src/helpers/', + data: 'src/data/' + })) + .pipe(dest('dist')) + .pipe(browserSync.stream()); +} + +//Concat CSS Plugins +function concatCssPlugins() { + console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n"); + return src([ + nodepath + 'simplebar/dist/simplebar.min.css', + nodepath + 'plyr/dist/plyr.css', + nodepath + 'codemirror/lib/codemirror.css', + nodepath + 'codemirror/theme/shadowfox.css', + 'src/assets/vendor/css/*', + ]) + .pipe(sourcemaps.init()) + .pipe(concat('app.css')) + .pipe(sourcemaps.write('./')) + .pipe(dest('dist/css')) + .pipe(browserSync.stream()); +} + +//Reset Panini Cache +function resetPages(done) { + console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n"); + panini.refresh(); + done(); +} + +//Triggers Browser reload +function previewReload(done) { + console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n"); + browserSync.reload(); + done(); +} + +//Development Tasks +function devHTML() { + return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base)); +} + +//Optimize images +function devImages() { + return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img)); +} + +// Let's write our task in a function to keep things clean +function javascriptBuild() { + // Start by calling browserify with our entry pointing to our main javascript file + return ( + browserify({ + entries: [`${options.paths.src.js}/main.js`], + // Pass babelify as a transform and set its preset to @babel/preset-env + transform: [babelify.configure({ presets: ["@babel/preset-env"] })] + }) + // Bundle it all up! + .bundle() + // Source the bundle + .pipe(source("bundle.js")) + // Then write the resulting files to a folder + .pipe(dest(`dist/js`)) + ); +} + +//Copy data files +function copyData() { + console.log("\n\t" + logSymbols.info, "Copying data files..\n"); + return src([ + 'src/data/**/*', + ]) + .pipe(dest('dist/data')) + .pipe(browserSync.stream()); +} + +function watchFiles() { + //watch('src/**/*.html', compileHTML); + watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload)); + watch(['src/scss/**/*', 'src/scss/*'], compileSCSS); + watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload)); + watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload)); + console.log("\n\t" + logSymbols.info, "Watching for Changes..\n"); +} + +function devClean() { + console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n"); + return del([options.paths.dist.base]); +} + +const buildTasks = [ + devClean, // Clean Dist Folder + resetPages, + parallel( + copyData, + concatCssPlugins, + compileSCSS, + javascriptBuild, + devImages, + compileHTML + ), +] + +export const build = (done) => { + series(devClean, resetPages, parallel(...buildTasks, devImages))(); + done(); +}; + +export default (done) => { + series( + devClean, + resetPages, + parallel(...buildTasks), + parallel(livePreview, watchFiles) + )(); + done(); +}; diff --git a/particles.js.org-new/package.json b/particles.js.org-new/package.json new file mode 100644 index 000000000..76d44ab58 --- /dev/null +++ b/particles.js.org-new/package.json @@ -0,0 +1,79 @@ +{ + "name": "tsparticles-website2", + "version": "2.0.0", + "private": true, + "description": "tsParticles website", + "main": "gulpfile.js", + "dependencies": { + "@alpinejs/intersect": "^3.10.2", + "@alpinejs/persist": "^3.10.2", + "@ryangjchandler/fern": "^0.1.0", + "alpinejs": "^3.10.2", + "bulma": "^0.9.4", + "highlight.js": "^11.6.0", + "js-datepicker": "^5.18.0", + "notyf": "^3.10.0", + "codemirror": "^5.65.6", + "feather-icons": "^4.29.0", + "ionicons": "^6.0.2", + "plyr": "^3.7.2", + "postcss": "^8.4.14", + "simplebar": "^5.3.8" + }, + "devDependencies": { + "@babel/cli": "^7.18.6", + "@babel/core": "^7.18.6", + "@babel/preset-env": "^7.18.6", + "@babel/register": "^7.18.6", + "autoprefixer": "^10.4.7", + "babelify": "^10.0.0", + "browser-sync": "^2.27.10", + "browserify": "^17.0.0", + "del": "^6.1.1", + "gulp": "^4.0.2", + "gulp-autoprefixer": "^8.0.0", + "gulp-clean-css": "^4.3.0", + "gulp-concat": "^2.6.1", + "gulp-imagemin": "^8.0.0", + "gulp-postcss": "^9.0.1", + "gulp-purgecss": "^4.1.3", + "gulp-replace": "^1.1.3", + "gulp-sass": "^5.1.0", + "gulp-sourcemaps": "^3.0.0", + "gulp-uglify": "^3.0.2", + "gulp-webp": "^4.0.1", + "log-symbols": "^5.1.0", + "node-bourbon": "^4.2.8", + "panini": "^1.7.2", + "regenerator-runtime": "^0.13.9", + "sass": "^1.53.0", + "tslib": "^2.4.0", + "tsparticles-engine": "^2.3.2", + "tsparticles": "^2.3.2", + "vinyl-source-stream": "^2.0.0" + }, + "scripts": { + "dev": "gulp", + "build": "gulp build", + "prod": "gulp prod" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/matteobruni/tsparticles" + }, + "type": "module", + "node": "^12.20.0 || ^14.13.1 || >=16.0.0", + "keywords": [ + "gulp", + "gulp4", + "bulma", + "bulmacss", + "sass" + ], + "author": "Matteo Bruni ", + "license": "MIT", + "bugs": { + "url": "https://github.com/matteobruni/tsparticles/issues" + }, + "homepage": "https://particles.js.org" +} diff --git a/particles.js.org-new/src/img/favicon.png b/particles.js.org-new/src/img/favicon.png new file mode 100644 index 000000000..a6153a5da Binary files /dev/null and b/particles.js.org-new/src/img/favicon.png differ diff --git a/particles.js.org-new/src/img/icons/light-bulb.svg b/particles.js.org-new/src/img/icons/light-bulb.svg new file mode 100644 index 000000000..13eaecd60 --- /dev/null +++ b/particles.js.org-new/src/img/icons/light-bulb.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/icons/rocket.svg b/particles.js.org-new/src/img/icons/rocket.svg new file mode 100644 index 000000000..4d60c3e8a --- /dev/null +++ b/particles.js.org-new/src/img/icons/rocket.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/icons/web.svg b/particles.js.org-new/src/img/icons/web.svg new file mode 100644 index 000000000..c297f1e3e --- /dev/null +++ b/particles.js.org-new/src/img/icons/web.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/faces/1.png b/particles.js.org-new/src/img/illustrations/faces/1.png new file mode 100644 index 000000000..d7749633c Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/faces/1.png differ diff --git a/particles.js.org-new/src/img/illustrations/faces/2.png b/particles.js.org-new/src/img/illustrations/faces/2.png new file mode 100644 index 000000000..1ebb1fce2 Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/faces/2.png differ diff --git a/particles.js.org-new/src/img/illustrations/faces/3.png b/particles.js.org-new/src/img/illustrations/faces/3.png new file mode 100644 index 000000000..3acc2e901 Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/faces/3.png differ diff --git a/particles.js.org-new/src/img/illustrations/features/feature-1.png b/particles.js.org-new/src/img/illustrations/features/feature-1.png new file mode 100644 index 000000000..633341a10 Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/features/feature-1.png differ diff --git a/particles.js.org-new/src/img/illustrations/features/feature-1.svg b/particles.js.org-new/src/img/illustrations/features/feature-1.svg new file mode 100644 index 000000000..082aef650 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/features/feature-1.svg @@ -0,0 +1,438 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/features/feature-2.png b/particles.js.org-new/src/img/illustrations/features/feature-2.png new file mode 100644 index 000000000..a5907726d Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/features/feature-2.png differ diff --git a/particles.js.org-new/src/img/illustrations/features/feature-2.svg b/particles.js.org-new/src/img/illustrations/features/feature-2.svg new file mode 100644 index 000000000..454d66595 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/features/feature-2.svg @@ -0,0 +1,979 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/doc-sync.svg b/particles.js.org-new/src/img/illustrations/icons/doc-sync.svg new file mode 100644 index 000000000..385405734 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/doc-sync.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/laptop-cloud.svg b/particles.js.org-new/src/img/illustrations/icons/laptop-cloud.svg new file mode 100644 index 000000000..f76e586e9 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/laptop-cloud.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/laptop-globe.svg b/particles.js.org-new/src/img/illustrations/icons/laptop-globe.svg new file mode 100644 index 000000000..bc9c66cc9 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/laptop-globe.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/mobile-feed.svg b/particles.js.org-new/src/img/illustrations/icons/mobile-feed.svg new file mode 100644 index 000000000..bb58525d4 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/mobile-feed.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/mouse-globe.svg b/particles.js.org-new/src/img/illustrations/icons/mouse-globe.svg new file mode 100644 index 000000000..4c555076e --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/mouse-globe.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/icons/plug-cloud.svg b/particles.js.org-new/src/img/illustrations/icons/plug-cloud.svg new file mode 100644 index 000000000..213f6c590 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/icons/plug-cloud.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/mockups/app-mockup.png b/particles.js.org-new/src/img/illustrations/mockups/app-mockup.png new file mode 100644 index 000000000..e4db21a4f Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/mockups/app-mockup.png differ diff --git a/particles.js.org-new/src/img/illustrations/pricing/1.svg b/particles.js.org-new/src/img/illustrations/pricing/1.svg new file mode 100644 index 000000000..2b867d7fa --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/pricing/1.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/pricing/2.svg b/particles.js.org-new/src/img/illustrations/pricing/2.svg new file mode 100644 index 000000000..1664be8c4 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/pricing/2.svg @@ -0,0 +1,349 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/pricing/3.svg b/particles.js.org-new/src/img/illustrations/pricing/3.svg new file mode 100644 index 000000000..d9d9f036a --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/pricing/3.svg @@ -0,0 +1,427 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/illustrations/worker.png b/particles.js.org-new/src/img/illustrations/worker.png new file mode 100644 index 000000000..1cd93b8fd Binary files /dev/null and b/particles.js.org-new/src/img/illustrations/worker.png differ diff --git a/particles.js.org-new/src/img/illustrations/worker.svg b/particles.js.org-new/src/img/illustrations/worker.svg new file mode 100644 index 000000000..e15fdb6e3 --- /dev/null +++ b/particles.js.org-new/src/img/illustrations/worker.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/audio.svg b/particles.js.org-new/src/img/loaders/audio.svg new file mode 100644 index 000000000..98b3beb3f --- /dev/null +++ b/particles.js.org-new/src/img/loaders/audio.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/ball-triangle.svg b/particles.js.org-new/src/img/loaders/ball-triangle.svg new file mode 100644 index 000000000..9d839f348 --- /dev/null +++ b/particles.js.org-new/src/img/loaders/ball-triangle.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/bars.svg b/particles.js.org-new/src/img/loaders/bars.svg new file mode 100644 index 000000000..faff4482d --- /dev/null +++ b/particles.js.org-new/src/img/loaders/bars.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/circles.svg b/particles.js.org-new/src/img/loaders/circles.svg new file mode 100644 index 000000000..de8e4debc --- /dev/null +++ b/particles.js.org-new/src/img/loaders/circles.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/grid.svg b/particles.js.org-new/src/img/loaders/grid.svg new file mode 100644 index 000000000..140cb89ec --- /dev/null +++ b/particles.js.org-new/src/img/loaders/grid.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/hearts.svg b/particles.js.org-new/src/img/loaders/hearts.svg new file mode 100644 index 000000000..2f63c4c20 --- /dev/null +++ b/particles.js.org-new/src/img/loaders/hearts.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/oval.svg b/particles.js.org-new/src/img/loaders/oval.svg new file mode 100644 index 000000000..004a35660 --- /dev/null +++ b/particles.js.org-new/src/img/loaders/oval.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/puff.svg b/particles.js.org-new/src/img/loaders/puff.svg new file mode 100644 index 000000000..288de9eb6 --- /dev/null +++ b/particles.js.org-new/src/img/loaders/puff.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/rings.svg b/particles.js.org-new/src/img/loaders/rings.svg new file mode 100644 index 000000000..0743bb828 --- /dev/null +++ b/particles.js.org-new/src/img/loaders/rings.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/spinning-circles.svg b/particles.js.org-new/src/img/loaders/spinning-circles.svg new file mode 100644 index 000000000..17ec48f4c --- /dev/null +++ b/particles.js.org-new/src/img/loaders/spinning-circles.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/loaders/tail-spin.svg b/particles.js.org-new/src/img/loaders/tail-spin.svg new file mode 100644 index 000000000..075a3990d --- /dev/null +++ b/particles.js.org-new/src/img/loaders/tail-spin.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/loaders/three-dots.svg b/particles.js.org-new/src/img/loaders/three-dots.svg new file mode 100644 index 000000000..6f7b43a1a --- /dev/null +++ b/particles.js.org-new/src/img/loaders/three-dots.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/banner3.jpg b/particles.js.org-new/src/img/logo/banner3.jpg new file mode 100644 index 000000000..8693960b3 Binary files /dev/null and b/particles.js.org-new/src/img/logo/banner3.jpg differ diff --git a/particles.js.org-new/src/img/logo/bulma.svg b/particles.js.org-new/src/img/logo/bulma.svg new file mode 100644 index 000000000..8abc94b54 --- /dev/null +++ b/particles.js.org-new/src/img/logo/bulma.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/particles.js.org-new/src/img/logo/clients/gutwork.svg b/particles.js.org-new/src/img/logo/clients/gutwork.svg new file mode 100644 index 000000000..ba46f6d79 --- /dev/null +++ b/particles.js.org-new/src/img/logo/clients/gutwork.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/clients/infinite.svg b/particles.js.org-new/src/img/logo/clients/infinite.svg new file mode 100644 index 000000000..6079fc73d --- /dev/null +++ b/particles.js.org-new/src/img/logo/clients/infinite.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/clients/kromo.svg b/particles.js.org-new/src/img/logo/clients/kromo.svg new file mode 100644 index 000000000..cf9fe83e0 --- /dev/null +++ b/particles.js.org-new/src/img/logo/clients/kromo.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/clients/systek.svg b/particles.js.org-new/src/img/logo/clients/systek.svg new file mode 100644 index 000000000..69205031c --- /dev/null +++ b/particles.js.org-new/src/img/logo/clients/systek.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/clients/tribe.svg b/particles.js.org-new/src/img/logo/clients/tribe.svg new file mode 100644 index 000000000..9e2141920 --- /dev/null +++ b/particles.js.org-new/src/img/logo/clients/tribe.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/icon-logo.svg b/particles.js.org-new/src/img/logo/icon-logo.svg new file mode 100644 index 000000000..c437015ab --- /dev/null +++ b/particles.js.org-new/src/img/logo/icon-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/particles.js.org-new/src/img/logo/made-with-bulma.png b/particles.js.org-new/src/img/logo/made-with-bulma.png new file mode 100644 index 000000000..5f021c426 Binary files /dev/null and b/particles.js.org-new/src/img/logo/made-with-bulma.png differ diff --git a/particles.js.org-new/src/js/libs/components/backtotop/backtotop.js b/particles.js.org-new/src/js/libs/components/backtotop/backtotop.js new file mode 100644 index 000000000..53d2f3a65 --- /dev/null +++ b/particles.js.org-new/src/js/libs/components/backtotop/backtotop.js @@ -0,0 +1,25 @@ +export function initBackToTop() { + return { + scrolled: false, + height: 600, + scroll(e) { + const button = document.getElementById("backtotop"); + let scrollValue = window.scrollY; + if (scrollValue >= this.height) { + this.scrolled = true; + button.classList.add("visible"); + } else { + this.scrolled = false; + button.classList.remove("visible"); + } + }, + + goTop(e) { + let elementPosition = e.target.offsetTop; + window.scrollTo({ + top: elementPosition, + behavior: "smooth", + }); + }, + }; +} diff --git a/particles.js.org-new/src/js/libs/components/index.js b/particles.js.org-new/src/js/libs/components/index.js new file mode 100644 index 000000000..6aca4bb90 --- /dev/null +++ b/particles.js.org-new/src/js/libs/components/index.js @@ -0,0 +1,7 @@ +import { initNavbar } from './navbar/navbar'; +import { initSidebar } from './sidebar/sidebar'; +import { initBackToTop } from './backtotop/backtotop'; + +window.initNavbar = initNavbar; +window.initSidebar = initSidebar; +window.initBackToTop = initBackToTop; \ No newline at end of file diff --git a/particles.js.org-new/src/js/libs/components/navbar/navbar.js b/particles.js.org-new/src/js/libs/components/navbar/navbar.js new file mode 100644 index 000000000..7cf742f36 --- /dev/null +++ b/particles.js.org-new/src/js/libs/components/navbar/navbar.js @@ -0,0 +1,25 @@ +export function initNavbar() { + return { + scrolled: false, + height: 60, + mobileOpen: false, + scroll() { + let scrollValue = window.scrollY; + if (scrollValue >= this.height) { + this.scrolled = true; + } else { + this.scrolled = false; + } + this.searchExpanded = false; + }, + + openMobileMenu() { + this.mobileOpen = !this.mobileOpen; + }, + + openSidebar() { + this.$store.app.isSiderbarOpen = true; + console.log("clicked"); + }, + }; +} diff --git a/particles.js.org-new/src/js/libs/components/pageloader/pageloader.js b/particles.js.org-new/src/js/libs/components/pageloader/pageloader.js new file mode 100644 index 000000000..6c2f19886 --- /dev/null +++ b/particles.js.org-new/src/js/libs/components/pageloader/pageloader.js @@ -0,0 +1,12 @@ +export function initPageLoader() { + window.addEventListener("load", () => { + const pageloader = document.getElementById("pageloader"); + const infraloader = document.getElementById("infraloader"); + pageloader.classList.toggle("is-active"); + var pageloaderTimeout = setTimeout(function () { + infraloader.classList.remove("is-active"); + pageloader.classList.toggle("is-active"); + clearTimeout(pageloaderTimeout); + }, 1200); + }); +} diff --git a/particles.js.org-new/src/js/libs/components/sidebar/sidebar.js b/particles.js.org-new/src/js/libs/components/sidebar/sidebar.js new file mode 100644 index 000000000..408e4ec31 --- /dev/null +++ b/particles.js.org-new/src/js/libs/components/sidebar/sidebar.js @@ -0,0 +1,17 @@ +export function initSidebar() { + return { + closeSidebar() { + this.$store.app.isSiderbarOpen = false; + }, + + openedMenu: "", + openSidebarMenu(e) { + const target = e.target.getAttribute("data-menu"); + if (this.openedMenu === target) { + this.openedMenu = ""; + } else { + this.openedMenu = target; + } + }, + }; +} diff --git a/particles.js.org-new/src/js/libs/utils/constants.js b/particles.js.org-new/src/js/libs/utils/constants.js new file mode 100644 index 000000000..46eadb486 --- /dev/null +++ b/particles.js.org-new/src/js/libs/utils/constants.js @@ -0,0 +1,171 @@ +export const env = 'development'; + +export const themeColors = { + primary: '#00d1b2', + secondary: '#00d1b2', + accent: '#797bf2', + success: '#06d6a0', + info: '#039BE5', + warning: '#faae42', + danger: '#FF7273', + purple: '#8269B2', + blue: '#37C3FF', + green: '#93E088', + lightGreen: '#63ebc6', + yellow: '#FFD66E', + orange: '#FFA981', + lightText: '#a2a5b9', + fadeGrey: '#ededed', + chartGrey: '#B0BDC4' +} + + +export const demoData = [ + { + "type": "user", + "title": "Helen Miller", + "content": "Los Angeles", + "photoUrl": "/img/avatars/helen.jpg", + "color": null + }, + { + "type": "user", + "title": "Shane Black", + "content": "Los Angeles", + "photoUrl": null, + "color": "#7F00FF" + }, + { + "type": "user", + "title": "Daniella Walters", + "content": "San Francisco", + "photoUrl": null, + "color": "#00D1B2" + }, + { + "type": "user", + "title": "Elie Daniels", + "content": "Dublin", + "photoUrl": "/img/avatars/elie.jpg", + "color": null + }, + { + "type": "user", + "title": "Terry Daniels", + "content": "New York", + "photoUrl": "/img/avatars/terry.jpg", + "color": null + }, + { + "type": "user", + "title": "Alex Walsh", + "content": "Irvine", + "photoUrl": "/img/avatars/alex.jpg", + "color": null + }, + { + "type": "user", + "title": "Adam Klinsky", + "content": "Seattle", + "photoUrl": "/img/avatars/eric.png", + "color": null + }, + { + "type": "user", + "title": "Christina Song", + "content": "Mystic Falls", + "photoUrl": "/img/avatars/christina.jpg", + "color": null + }, + { + "type": "user", + "title": "Barry Smithers", + "content": "Miami", + "photoUrl": "/img/avatars/barry.jpg", + "color": null + }, + { + "type": "user", + "title": "Sally Mitchells", + "content": "San Francisco", + "photoUrl": "/img/avatars/sally.jpg", + "color": null + }, + { + "type": "file", + "title": "INV-49465", + "content": "Pending invoice", + "photoUrl": "/img/icons/search/1.svg", + "color": null + }, + { + "type": "file", + "title": "INV-49789", + "content": "Pending invoice", + "photoUrl": "/img/icons/search/1.svg", + "color": null + }, + { + "type": "transaction", + "title": "TR-8066", + "content": "Transaction amount: + $874.99", + "photoUrl": "/img/icons/search/2.svg", + "color": null + }, + { + "type": "transaction", + "title": "TR-8067", + "content": "Transaction amount: + $1042.99", + "photoUrl": "/img/icons/search/2.svg", + "color": null + }, + { + "type": "transaction", + "title": "TR-9078", + "content": "Transaction amount: - $2500.00", + "photoUrl": "/img/icons/search/2.svg", + "color": null + }, + { + "type": "transaction", + "title": "TR-8066", + "content": "Transaction amount: - $139.99", + "photoUrl": "/img/icons/search/2.svg", + "color": null + }, + { + "type": "company", + "title": "Airbnb", + "content": "Company", + "photoUrl": "/img/logo/companies/airbnb.svg", + "color": null + }, + { + "type": "company", + "title": "Tesla", + "content": "Company", + "photoUrl": "/img/logo/companies/tesla.svg", + "color": null + }, + { + "type": "company", + "title": "Alfresco", + "content": "Company", + "photoUrl": "/img/logo/companies/alfresco.svg", + "color": null + }, + { + "type": "company", + "title": "H&M", + "content": "Company", + "photoUrl": "/img/logo/companies/hm.svg", + "color": null + }, + { + "type": "company", + "title": "Amazon", + "content": "Company", + "photoUrl": "/img/logo/companies/amazon.svg", + "color": null + } +] \ No newline at end of file diff --git a/particles.js.org-new/src/js/libs/utils/utils.js b/particles.js.org-new/src/js/libs/utils/utils.js new file mode 100644 index 000000000..b28c12aa4 --- /dev/null +++ b/particles.js.org-new/src/js/libs/utils/utils.js @@ -0,0 +1,85 @@ +export function getUrlParams(param) { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + return urlParams.get(param); +} + +export function switchDemoImages(environment) { + if (environment === "development") { + const targets = document.querySelectorAll("[data-demo-src]"); + const bgTargets = document.querySelectorAll("[data-demo-background]"); + + if (typeof targets != "undefined" && targets != null) { + for (var i = 0, len = targets.length; i < len; i++) { + let demoUrl = targets[i].getAttribute("data-demo-src"); + targets[i].setAttribute("src", demoUrl); + } + } + + if (typeof bgTargets != "undefined" && bgTargets != null) { + for (var i = 0, len = bgTargets.length; i < len; i++) { + let demoBgUrl = bgTargets[i].getAttribute("data-demo-background"); + bgTargets[i].setAttribute("data-background", demoBgUrl); + } + } + } +} + +export function insertBgImages() { + const targets = document.querySelectorAll("[data-background]"); + + if (typeof targets != "undefined" && targets != null) { + for (var i = 0, len = targets.length; i < len; i++) { + let bgUrl = targets[i].getAttribute("data-background"); + targets[i].style.backgroundSize = "cover"; + targets[i].style.backgroundRepeat = "no-repeat"; + targets[i].style.backgroundImage = `url(${bgUrl})`; + } + } +} + +export function initModals() { + let targets = document.querySelectorAll(".modal-trigger"); + if (typeof targets != "undefined" && targets != null) { + for (var i = 0, len = targets.length; i < len; i++) { + targets[i].addEventListener("click", function (event) { + console.log("click modal"); + var modalID = this.getAttribute("data-modal"); + document.querySelector("#" + modalID).classList.add("is-active"); + const scrollY = document.documentElement.style.getPropertyValue( + "--scroll-y" + ); + const body = document.body; + body.style.width = "100%"; + body.style.paddingRight = "15px"; + body.style.position = "fixed"; + + body.style.top = `-${scrollY}`; + }); + } + } + + targets = document.querySelectorAll(".modal-dismiss"); + if (typeof targets != "undefined" && targets != null) { + for (var i = 0, len = targets.length; i < len; i++) { + targets[i].addEventListener("click", function (event) { + console.log("click modal close"); + const body = document.body; + const scrollY = body.style.top; + body.style.position = ""; + body.style.paddingRight = ""; + body.style.width = ""; + body.style.top = ""; + window.scrollTo(0, parseInt(scrollY || "0") * -1); + this.closest(".modal").classList.remove("is-active"); + }); + } + } + + window.addEventListener("scroll", () => { + document.documentElement.style.setProperty( + "--scroll-y", + `${window.scrollY}px` + ); + }); +} \ No newline at end of file diff --git a/particles.js.org-new/src/js/main.js b/particles.js.org-new/src/js/main.js new file mode 100644 index 000000000..95d599d4c --- /dev/null +++ b/particles.js.org-new/src/js/main.js @@ -0,0 +1,88 @@ +"use strict"; + +//Alpine JS and plugins import +import Alpine from "alpinejs"; +import intersect from "@alpinejs/intersect"; +import Fern from "@ryangjchandler/fern"; +import "regenerator-runtime"; +import hljs from "highlight.js"; +import hljsjavascript from 'highlight.js/lib/languages/javascript'; +import hljstypescript from 'highlight.js/lib/languages/typescript'; +import { tsParticles } from "tsparticles-engine"; +import { loadFull } from "tsparticles"; + +window.Alpine = Alpine; +//Init intersect plugin +Alpine.plugin(intersect); +//Init Fern plugin +Alpine.plugin(Fern); +//Init Fern persisted store +Alpine.persistedStore("app", { + isSiderbarOpen: false, +}); +//Start Alpine JS +Alpine.start(); + +import { env } from "./libs/utils/constants"; +import { initPageLoader } from "./libs/components/pageloader/pageloader"; +import { + switchDemoImages, + insertBgImages, + initModals, +} from "./libs/utils/utils"; +import './libs/components' + +const feather = require("feather-icons"); + +const showPageloader = initPageLoader(); + +hljs.registerLanguage('javascript', hljsjavascript); +hljs.registerLanguage('typescript', hljstypescript); + +document.onreadystatechange = function () { + if (document.readyState === "complete") { + //Switch demo images + const changeImages = switchDemoImages(env); + + //Switch backgrounds + const changeBackgrounds = insertBgImages(); + + //Feather Icons + const featherIcons = feather.replace(); + + // Add modal windows + const modals = initModals(); + + document.querySelectorAll('pre code').forEach((el) => { + hljs.highlightElement(el); + }); + + (async () => { + await loadFull(tsParticles); + + await tsParticles.load("tsparticles", { + fullScreen: { + enable: false + }, + particles: { + color: { + value: "#000" + }, + links: { + color: "#000", + enable: true + }, + move: { + enable: true + }, + size: { + value: { + min: 1, + max: 3 + } + } + } + }); + })(); + } +}; diff --git a/particles.js.org-new/src/layouts/default.html b/particles.js.org-new/src/layouts/default.html new file mode 100644 index 000000000..9fcefb8a5 --- /dev/null +++ b/particles.js.org-new/src/layouts/default.html @@ -0,0 +1,36 @@ + + + + + + + + tsParticles + + + + + + + + + + + + + + + + {{> pageloader}} + {{> body}} + {{> footer}} + {{> backtotop}} + + + + + + + + + diff --git a/particles.js.org-new/src/pages/index.html b/particles.js.org-new/src/pages/index.html new file mode 100644 index 000000000..98aac8005 --- /dev/null +++ b/particles.js.org-new/src/pages/index.html @@ -0,0 +1,378 @@ +--- +layout: default +title: Landing Page +--- + +
+ + {{> navbar}} + + {{> navbar-clone}} + +
+
+
+
+
+

+ tsParticles +

+

Easily create highly customizable JavaScript particles effects, + confetti explosions and fireworks animations and use them as animated backgrounds for your + website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, + jQuery, Preact, Inferno, Solid, Riot and Web Components.

+
+ + GitHub Repository + + + API Docs + +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
    +
    • +
    • +
    • +
    • +
    • +
+
+
+
+
+ +
+
+
+

Great Power Comes

+

With great Responsability

+
+
+ +
+
+
+
+
+

App builder

+
+
+ +
+
+

This is some cool explanatory text that is on two rows

+
+
+ Free Trial +
+
+
+
+
+
+

Cloud integration

+
+
+ +
+
+

This is some explanatory text that is on two rows

+
+
+ Get Started +
+
+
+
+
+
+

Addons & Plugins

+
+
+ +
+
+

This is some explanatory text that is on two rows

+
+
+ Get Started +
+
+
+
+
+
+
+ +{{> features}} + +
+
+ +
+
+

Demo

+

+ 

tsParticles.load({
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+                area: 800
+            }
+        },
+        color: {
+            value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: { min: 1, max: 8 },
+        },
+        links: {
+            enable: true,
+            distance: 150,
+            color: "#808080",
+            opacity: 0.4,
+            width: 1
+        },
+        move: {
+            enable: true,
+            speed: 5,
+            direction: "none",
+            random: false,
+            straight: false,
+            outModes: "out",
+        }
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "grab"
+            },
+            onClick: {
+                enable: true,
+                mode: "push"
+            }
+        },
+        modes: {
+            grab: {
+                distance: 140,
+                links: {
+                    opacity: 1
+                }
+            },
+            push: {
+                quantity: 4
+            },
+        }
+    }
+});
+

+
+
+
+

+ See the Pen + tsParticles - Slack Colored Particles by Matteo Bruni (@matteobruni) + on CodePen. +

+ +
+
+
+
+
+ +
+
+
+

JavaScript Frameworks

+

Supported JavaScript Frameworks

+
+
+ +
+
+
+
+
+ +
+

JavaScript

+

Vanilla JavaScript instructions here +

+
+
+
+
+
+ +
+

React.js

+

React.js instructions here +

+
+
+
+
+
+ +
+

Vue.js 3.x

+

Vue.js 3.x instructions here +

+
+
+
+
+
+ +
+

Angular

+

Angular instructions here +

+
+
+
+
+
+ +
+

Vue.js 2.x

+

Vue.js 2.x instructions here +

+
+
+
+
+
+ +
+

Svelte

+

Svelte instructions here +

+
+
+
+
+
+ +
+

jQuery

+

jQuery instructions here +

+
+
+
+
+
+ +
+

Preact

+

Preact instructions here +

+
+
+
+
+
+ +
+

Inferno

+

Inferno instructions here +

+
+
+
+
+
+ +
+

Riot

+

Riot instructions here +

+
+
+
+
+
+ +
+

Solid

+

Solid instructions here +

+
+
+
+
+
+ +
+

Web Components

+

Web Components instructions here +

+
+
+
+
+
+ +
+

WordPress

+

WordPress instructions here +

+
+
+
+
+
+ +
+

Elementor

+

Elementor instructions here +

+
+
+
+
+
+
+ diff --git a/particles.js.org-new/src/partials/backtotop.html b/particles.js.org-new/src/partials/backtotop.html new file mode 100644 index 000000000..40299c98a --- /dev/null +++ b/particles.js.org-new/src/partials/backtotop.html @@ -0,0 +1,5 @@ + +
\ No newline at end of file diff --git a/particles.js.org-new/src/partials/contact-us.html b/particles.js.org-new/src/partials/contact-us.html new file mode 100644 index 000000000..5c9708b74 --- /dev/null +++ b/particles.js.org-new/src/partials/contact-us.html @@ -0,0 +1,42 @@ +
+
+
+

Drop us a line or two

+

We'd love to hear from You

+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
diff --git a/particles.js.org-new/src/partials/features.html b/particles.js.org-new/src/partials/features.html new file mode 100644 index 000000000..8224adfd9 --- /dev/null +++ b/particles.js.org-new/src/partials/features.html @@ -0,0 +1,31 @@ +
+
+
+

Awesome Features

+

To make you super happy

+
+
+ +
+
+

Connect with people

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem + Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.

+
+
+ +
+
+ +
+
+ +
+
+

Collaborate easily

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem + Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.

+
+
+
+
diff --git a/particles.js.org-new/src/partials/footer.html b/particles.js.org-new/src/partials/footer.html new file mode 100644 index 000000000..e31341a59 --- /dev/null +++ b/particles.js.org-new/src/partials/footer.html @@ -0,0 +1,91 @@ + diff --git a/particles.js.org-new/src/partials/login-modal.html b/particles.js.org-new/src/partials/login-modal.html new file mode 100644 index 000000000..50b9ac2f9 --- /dev/null +++ b/particles.js.org-new/src/partials/login-modal.html @@ -0,0 +1,32 @@ + diff --git a/particles.js.org-new/src/partials/navbar-clone.html b/particles.js.org-new/src/partials/navbar-clone.html new file mode 100644 index 000000000..83c90e344 --- /dev/null +++ b/particles.js.org-new/src/partials/navbar-clone.html @@ -0,0 +1,83 @@ + diff --git a/particles.js.org-new/src/partials/navbar.html b/particles.js.org-new/src/partials/navbar.html new file mode 100644 index 000000000..a4043adb9 --- /dev/null +++ b/particles.js.org-new/src/partials/navbar.html @@ -0,0 +1,86 @@ + diff --git a/particles.js.org-new/src/partials/pageloader.html b/particles.js.org-new/src/partials/pageloader.html new file mode 100644 index 000000000..cf27b0e93 --- /dev/null +++ b/particles.js.org-new/src/partials/pageloader.html @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff --git a/particles.js.org-new/src/partials/pricing.html b/particles.js.org-new/src/partials/pricing.html new file mode 100644 index 000000000..fe99dc2e1 --- /dev/null +++ b/particles.js.org-new/src/partials/pricing.html @@ -0,0 +1,39 @@ +
+
+
+

Get Started

+

Choose one of our plans

+
+
+ +
+
+

Starter

+ +
+ 0 +
+

Sign up, get some awesome features and get started now

+ Get Started +
+
+

Pro

+ +
+ 15 +
+

Sign up, get some awesome features and get started now

+ Get Started +
+
+

Business

+ +
+ 30 +
+

Sign up, get some awesome features and get started now

+ Get Started +
+
+
+
diff --git a/particles.js.org-new/src/partials/sidebar.html b/particles.js.org-new/src/partials/sidebar.html new file mode 100644 index 000000000..d39a24aa5 --- /dev/null +++ b/particles.js.org-new/src/partials/sidebar.html @@ -0,0 +1,68 @@ +
+
+ + +
+
+ +
+
\ No newline at end of file diff --git a/particles.js.org-new/src/partials/testimonials.html b/particles.js.org-new/src/partials/testimonials.html new file mode 100644 index 000000000..6f39428b1 --- /dev/null +++ b/particles.js.org-new/src/partials/testimonials.html @@ -0,0 +1,53 @@ +
+
+
+ +
+

Our clients love us

+

Look at what they say about us

+
+ +
+
+
+
+
+ Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea + case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. +
+
+ +
Irma Walters
Accountant +
+
+
+
+
+
+ Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea + case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. +
+
+ +
John Bradley
Financial Analyst +
+
+
+
+
+
+ Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea + case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. +
+
+ +
Gary Blackman
HR Manager +
+
+
+
+
+
+
diff --git a/particles.js.org-new/src/scss/abstracts/_animations.scss b/particles.js.org-new/src/scss/abstracts/_animations.scss new file mode 100644 index 000000000..a7628878a --- /dev/null +++ b/particles.js.org-new/src/scss/abstracts/_animations.scss @@ -0,0 +1,108 @@ +/* ========================================================================== +General Keyframes animations +========================================================================== */ + +.animated { + animation-duration: 0.5s; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -webkit-animation-fill-mode: both; +} + +//Delays +.delay-1 { + animation-delay: .25s; +} +.delay-2 { + animation-delay: .5s; +} +.delay-3 { + animation-delay: .75s; +} +.delay-4 { + animation-delay: 1s; +} + +//FADE IN LEFT +@keyframes fadeInLeft { + from { + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + opacity: 0; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} +@-webkit-keyframes fadeInLeft { + from { + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + opacity: 0; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.preFadeInLeft { + opacity: 0; +} + +.fadeInLeft { + opacity: 0; + animation-name: fadeInLeft; + -webkit-animation-name: fadeInLeft; +} + +//FADE IN UP +@keyframes fadeInUp { + from { + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} +@-webkit-keyframes fadeInUp { + from { + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} +.preFadeInUp { + opacity: 0; +} +.fadeInUp { + opacity: 0; + animation-name: fadeInUp; + -webkit-animation-name: fadeInUp; +} + +//Gelatine +.gelatine { + animation: gelatine 0.6s; + animation-duration: 0.6s; + -webkit-animation-duration: 0.5s; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} + +@keyframes gelatine { + from, to { transform: scale(1, 1); } + 25% { transform: scale(0.9, 1.1); } + 50% { transform: scale(1.1, 0.9); } + 75% { transform: scale(0.95, 1.05); } +} \ No newline at end of file diff --git a/particles.js.org-new/src/scss/abstracts/_colors.scss b/particles.js.org-new/src/scss/abstracts/_colors.scss new file mode 100644 index 000000000..123d75622 --- /dev/null +++ b/particles.js.org-new/src/scss/abstracts/_colors.scss @@ -0,0 +1,39 @@ +/* ========================================================================== +Color variables +========================================================================== */ + +$fullhd-enabled: false; +$body-size: 14px; + +$white: #fff; +$smoke-white: #fcfcfc; +$grey-white: #f2f2f2; + +$primary: #4FC1EA; +$secondary: #F39200; +$accent: #00efb7; + +$fade-grey: #ededed; +$light-grey: #EFF4F7; +$title-grey: #A9ABAC; +$blue-grey: #444F60; +$muted-grey: #999; +$light-blue-grey: #98a9c3; +$medium-grey: #66676b; +$basaltic-grey: #878787; +$purple: #7F00FF; +$mint: #11FFBD; +$bloody: #FC354C; +$pinky: #ff00cc; +$frost: #004e92; +$placeholder: #cecece; +$dark-grey: #344258; +$border-grey: #ccc; +$muted-grey: #999; +$section-grey: #fbfbfb; + +//Heading font +$font: 'Montserrat', sans-serif !important; + +//Shadow +$light-shadow: -1px 3px 15px 0 rgba(0, 0, 0, 0.06); \ No newline at end of file diff --git a/particles.js.org-new/src/scss/components/_buttons.scss b/particles.js.org-new/src/scss/components/_buttons.scss new file mode 100644 index 000000000..36cc19631 --- /dev/null +++ b/particles.js.org-new/src/scss/components/_buttons.scss @@ -0,0 +1,133 @@ +/* ========================================================================== +Classes to change the feel of bulma buttons +========================================================================== */ + +// CTA buttons + +.button { + cursor: pointer; + transition: all 0.5s; + + &:focus, &:active { + outline: none; + } + + &.cta { + font-size: 1rem; + font-weight: 500; + height: 44px; + } + + &.is-clear { + line-height: 0 !important; + } + + &.is-bold { + font-weight: 500; + } + + &.rounded { + border-radius: 500px; + } + + &.raised:hover { + box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important; + opacity: 0.8; + } + + &.btn-outlined { + background: transparent; + } + + &.signup-button { + font-weight: 500; + height: 44px; + width: 120px; + } +} + +.button { + &.primary-btn { + outline: none; + border-color: $primary; + background-color: $primary; + color: $white; + transition: all 0.5s; + + &:hover { + color: $white; + } + + &.raised:hover { + box-shadow: 0 14px 26px -12px rgba($primary, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba($primary, 0.2) !important; + opacity: 0.8; + } + + &.btn-outlined { + border-color: $primary; + color: $primary; + background-color: transparent; + + &:hover { + color: $white; + background-color: $primary; + } + } + } + + &.secondary-btn { + outline: none; + border-color: $secondary; + background-color: $secondary; + color: $white; + transition: all 0.5s; + + &:hover { + color: $white; + } + + &.raised:hover { + box-shadow: 0 14px 26px -12px rgba($secondary, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba($secondary, 0.2) !important; + opacity: 0.8; + } + + &.btn-outlined { + border-color: $secondary; + color: $secondary; + background-color: transparent; + + &:hover { + color: $white; + background-color: $secondary; + } + } + } + + &.button.accent-btn { + outline: none; + border-color: $accent; + background-color: $accent; + color: $white; + transition: all 0.5s; + + &:hover { + color: $white; + } + + &.raised:hover { + box-shadow: 0 14px 26px -12px rgba($accent, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba($accent, 0.2) !important; + opacity: 0.8; + } + + &.btn-outlined { + border-color: $accent; + color: $accent; + background-color: transparent; + + &:hover { + color: $white; + background-color: $accent; + } + } + } +} diff --git a/particles.js.org-new/src/scss/components/_cards.scss b/particles.js.org-new/src/scss/components/_cards.scss new file mode 100644 index 000000000..a5252612f --- /dev/null +++ b/particles.js.org-new/src/scss/components/_cards.scss @@ -0,0 +1,154 @@ +/*! _cards.scss v1.0.0 | Commercial License | built on top of bulma.io/Bulmax */ + +/* ========================================================================== +Cards and Card content styles +========================================================================== */ + +// Feature Card +.feature-card { + width: 300px; + height: 320px; + background-color: #fff; + border-radius: 3px; + margin: 0 auto; + + .card-title h4 { + font-family: 'Open Sans', sans-serif; + padding-top: 25px; + font-size: 1.2rem; + font-weight: 600; + color: $blue-grey; + } + + .card-icon { + img { + display: block; + height: 80px; + width: 80px; + margin: 30px auto; + } + } + + .card-text { + padding: 0 40px; + + p { + color: $muted-grey; + } + } + + .card-action { + margin-top: 10px; + } + + &.is-bordered { + border: 1px solid $fade-grey; + } +} + +// Flex Card +.flex-card { + position: relative; + background-color: #fff; + border: 0; + border-radius: 0.1875rem; + display: block; + position: relative; + overflow: hidden; + width: 100%; + margin-bottom: 20px; + + &.raised { + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); + } + + .tabs { + padding: 15px 0.7rem; + } + + .navtab-content { + min-height: 190px; + + p { + padding: 0 0.8rem 20px; + } + } + + .navigation-tabs { + &.outlined-pills .tabs.tabs-header { + &.primary { + background-color: $primary; + } + + &.secondary { + background-color: $secondary; + } + + &.accent { + background-color: $accent; + } + + ul li a { + color: $grey-white; + } + + ul li.is-active a { + color: $white; + border: 1px solid $white; + border-bottom-color: $white !important; + } + } + } +} + +//Modal card +.modal { + .auth-card { + max-width: 420px; + margin: 0 auto; + border-radius: 6px; + + .tabs { + margin-bottom: 0; + + li { + a { + color: $placeholder; + } + + &.is-active { + a { + color: $secondary; + border-bottom-color: $secondary; + } + } + } + } + + .tab-content { + padding: 20px; + + .field { + max-width: 390px; + margin: 10px auto; + + label { + display: block; + font-weight: 500; + font-size: .9rem; + } + + .input { + font-size: .95rem; + height: 44px; + } + } + + .button.is-fullwidth { + padding: 20px 0; + max-width: 390px; + margin: 20px auto; + } + } + } +} diff --git a/particles.js.org-new/src/scss/components/_dropdowns.scss b/particles.js.org-new/src/scss/components/_dropdowns.scss new file mode 100644 index 000000000..b50ea0d8e --- /dev/null +++ b/particles.js.org-new/src/scss/components/_dropdowns.scss @@ -0,0 +1,108 @@ +/* ========================================================================== +Dropdown styles +========================================================================== */ + +// Hover Dropdowns +.nav-item { + &.is-drop { + position: relative; + + &:hover { + border-bottom: 1px solid transparent !important; + color: $secondary; + + a { + border-bottom: 1px solid transparent !important; + color: $secondary; + } + + .dropContain { + top: 65px; + animation: fadeInUp 0.27s ease-out; + + .dropOut { + opacity: 1; + } + } + } + + a { + padding-right: 7px; + } + + span { + &.drop-caret { + position: relative; + top: 5px; + } + } + + .dropContain { + width: 220px; + position: absolute; + z-index: 3; + left: 50%; + margin-left: -110px; + top: -400px; + + .dropOut { + width: 220px; + background: $white; + float: left; + position: relative; + margin-top: 15px; + opacity: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); + -webkit-transition: all .5s ease-out; + -moz-transition: all .5s ease-out; + -ms-transition: all .5s ease-out; + -o-transition: all .5s ease-out; + transition: all .5s ease-out; + } + + .dropOut .triangle { + width: 0; + height: 0; + position: absolute; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid $white; + top: -8px; + left: 50%; + margin-left: -8px; + } + + .dropOut ul li { + text-align: left; + float: left; + width: 200px; + padding: 12px 0 10px 15px; + margin: 0px 10px; + color: #777; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-transition: background-color .1s ease-out; + -moz-transition: background-color .1s ease-out; + -ms-transition: background-color .1s ease-out; + -o-transition: background-color .1s ease-out; + transition: background-color .1s ease-out; + + &:hover { + background: $light-grey; + cursor: pointer; + } + } + + .dropOut ul { + float: left; + padding: 10px 0; + } + } + } +} diff --git a/particles.js.org-new/src/scss/components/_forms.scss b/particles.js.org-new/src/scss/components/_forms.scss new file mode 100644 index 000000000..b49dd3ce6 --- /dev/null +++ b/particles.js.org-new/src/scss/components/_forms.scss @@ -0,0 +1,22 @@ +/* ========================================================================== +Inputs styles +========================================================================== */ + +.input, .textarea { + color: $basaltic-grey; + box-shadow: none !important; + transition: all 0.3s; + + &:focus { + border-color: darken($fade-grey, 3%); + box-shadow: $light-shadow !important; + } +} + +.form-footer { + width: 100%; + + .button { + min-width: 160px; + } +} \ No newline at end of file diff --git a/particles.js.org-new/src/scss/components/_hamburger.scss b/particles.js.org-new/src/scss/components/_hamburger.scss new file mode 100644 index 000000000..40243a1a6 --- /dev/null +++ b/particles.js.org-new/src/scss/components/_hamburger.scss @@ -0,0 +1,116 @@ +/* ========================================================================== +Hamburger menu icon +========================================================================== */ + +.menu-toggle { + font-size: 20px; + color: #666; + line-height: 48px; + text-align: center; + background: transparent; + display: flex; + justify-content: center; + align-items: center; + width: 64; + height: 64; + cursor: pointer; + padding: 0; + transition: opacity 0.4s; + opacity: 1; + position: relative; + top: 2px; + + .icon-box-toggle { + height: 100%; + width: 100%; + background: transparent; + position: relative; + display: block; + width: 30px; + height: 30px; + + &.active > span.rotate { + /*transform*/ + -webkit-transform: rotate(90deg); + -moz-transform: translate(0px, 0px) rotate(90deg); + -ms-transform: translate(0px, 0px) rotate(90deg); + -o-transform: translate(0px, 0px) rotate(90deg); + transform: translate(0px, 0px) rotate(90deg); + } + + &.active > span > i.icon-line-center { + visibility: hidden; + width: 1px; + height: 3px; + left: 70%; + } + + &.active > span > i.icon-line-bottom { + margin: -2px 0 0 -10px; + left: 50%; + top: 12px; + + /*transform*/ + -webkit-transform: rotate(135deg); + -moz-transform: translate(0px, 0px) rotate(135deg); + -ms-transform: translate(0px, 0px) rotate(135deg); + -o-transform: translate(0px, 0px) rotate(135deg); + transform: translate(0px, 0px) rotate(135deg); + } + + &.active > span > i.icon-line-top { + margin: -2px 0 0 -10px; + left: 50%; + top: 12px; + + /*transform*/ + -webkit-transform: rotate(45deg); + -moz-transform: translate(0px, 0px) rotate(45deg); + -ms-transform: translate(0px, 0px) rotate(45deg); + -o-transform: translate(0px, 0px) rotate(45deg); + transform: translate(0px, 0px) rotate(45deg); + } + } + + .icon-line-center { + position: absolute; + width: 20px; + height: 2px; + background: $title-grey; + margin: -1px 0 0 -10px; + left: 50%; + top: 11px; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + } + + .icon-line-top { + position: absolute; + width: 20px; + height: 2px; + background: $title-grey; + margin: -3px 0 0 -10px; + left: 50%; + top: 7px; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + } + + .icon-line-bottom { + position: absolute; + width: 20px; + height: 2px; + background: $title-grey; + margin: 2px 0 0 -10px; + left: 50%; + top: 14px; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + } +} diff --git a/particles.js.org-new/src/scss/components/_testimonials.scss b/particles.js.org-new/src/scss/components/_testimonials.scss new file mode 100644 index 000000000..672cccd1c --- /dev/null +++ b/particles.js.org-new/src/scss/components/_testimonials.scss @@ -0,0 +1,93 @@ +/* ========================================================================== +Testimonials Styles +========================================================================== */ + +.testimonial { + position: relative; + overflow: hidden; + margin: 10px auto; + min-width: 220px; + max-width: 310px; + width: 100%; + color: #333; + text-align: left; + box-shadow: none !important; + + * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + img { + max-width: 100%; + height: 80px; + width: 80px; + border-radius: 50%; + margin-right: 5px; + display: block; + z-index: 1; + position: absolute; + right: 60%; + } + + blockquote { + margin: 0; + display: block; + border-radius: 8px; + position: relative; + background-color: $smoke-white; + padding: 30px 50px 65px; + font-size: 1.2rem; + font-weight: 500; + margin: 0 0 -40px; + line-height: 1.6em; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); + } + + blockquote:before { + font-family: 'Material Icons'; + content: "\e244"; + position: absolute; + font-size: 30px; + opacity: 0.3; + font-style: normal; + } + + blockquote:before { + top: 16px; + left: 16px; + } + + .author { + margin: 0; + height: 80px; + display: block; + text-align: left; + color: $white; + padding: 0 35px; + position: relative; + z-index: 0; + + h5, span { + left: 42%; + position: absolute; + opacity: 0.8; + padding: 3px 5px; + } + + h5 { + text-transform: capitalize; + bottom: 60%; + margin: 0; + font-weight: 600; + font-size: 1.2rem; + color: $blue-grey; + } + + span { + font-size: 0.8em; + color: $white; + top: 50%; + } + } +} diff --git a/particles.js.org-new/src/scss/layout/_footer.scss b/particles.js.org-new/src/scss/layout/_footer.scss new file mode 100644 index 000000000..92b5f270d --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_footer.scss @@ -0,0 +1,56 @@ +/* ========================================================================== +Footer +========================================================================== */ + +footer.footer-dark { + background: $blue-grey; + color: $white; + + .columns { + margin-top: 35px; + } + + .footer-logo { + img { + height: 40px; + } + } + + .footer-column { + .footer-header { + h3 { + font-weight: 500; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 20px; + } + } + + .link-list { + line-height: 40px; + font-size: 1.1rem; + + a { + color: $light-blue-grey; + font-weight: 400; + transition: all 0.5s; + + &:hover { + color: $smoke-white; + } + } + } + + .level-item { + .icon { + color: $secondary; + transition: all 0.5s; + + &:hover { + color: $smoke-white; + } + } + } + } +} diff --git a/particles.js.org-new/src/scss/layout/_hero.scss b/particles.js.org-new/src/scss/layout/_hero.scss new file mode 100644 index 000000000..454622a4d --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_hero.scss @@ -0,0 +1,62 @@ +/* ========================================================================== +Hero styles +========================================================================== */ + +.particles-container { + position: relative; +} + +.particles-container > div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.hero-body { + padding-top: 6rem; + padding-bottom: 6rem; + + .title { + font-family: $font; + color: $blue-grey; + } + + .title { + &.is-bold { + font-weight: 700; + } + } + + .subtitle { + &.is-muted { + color: $muted-grey; + } + } + + .landing-caption { + background: #fff; + border-radius: 20px; + + .button { + min-width: 130px; + } + } +} + +.hero-foot { + + * { + border: none !important; + } + + img { + &.partner-logo { + display: block; + margin: 0 auto; + width: 100%; + max-width: 100px; + } + } +} diff --git a/particles.js.org-new/src/scss/layout/_navbar.scss b/particles.js.org-new/src/scss/layout/_navbar.scss new file mode 100644 index 000000000..07c7f643c --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_navbar.scss @@ -0,0 +1,135 @@ +/* ========================================================================== +Navbar +========================================================================== */ + +//Navbar +.navbar.is-site { + position: relative; + min-height: 3.8rem; + transition: all .3s; + z-index: 29; + + .container { + min-height: 4rem; + } + + &.no-shadow { + box-shadow: none !important; + } + + //Responsive menu icon + .navbar-burger { + width: 4rem; + height: 4rem; + } + + //Brand + .navbar-brand { + min-height: 4rem; + + img { + max-height: 36px !important; + height: 36px; + } + + //Removing navbar item default hover behaviour + &:hover { + .navbar-item { + background: transparent !important; + } + } + } + + .navbar-end { + align-items: center; + } + + //Navbar items + .navbar-item { + color: $muted-grey; + + &.is-secondary { + &:hover { + color: $secondary !important; + } + } + + &.has-dropdown { + padding: 10px 0; + + .navbar-link { + color: $muted-grey; + + &:after { + top: 55%; + height: 0.5em; + width: 0.5em; + border-width: 2px; + border-color: $muted-grey; + } + } + + .navbar-dropdown { + top: 3.4rem; + min-width: 220px; + margin-top: 4px; + border-top-color: $secondary; + + .navbar-item { + padding: 10px 20px; + } + } + + &:hover { + .navbar-link { + color: $secondary; + + &:after { + border-color: $secondary; + } + } + } + } + + .signup { + display: block; + line-height: 0; + font-size: .9rem !important; + } + } + + //Fixed navbar modifier + &.is-fixed { + position: fixed; + top: 0; + left: 0; + width: 100%; + min-height: 4rem !important; + background: $white; + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); + + a { + color: $blue-grey; + + &:hover { + color: $primary; + } + } + } +} + +//Cloned fixed navbar +#navbar-clone { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: $white; + transform: translateY(-100%); + z-index: 100; + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); + + &.is-active { + transform: translateY(0); + } +} diff --git a/particles.js.org-new/src/scss/layout/_responsive.scss b/particles.js.org-new/src/scss/layout/_responsive.scss new file mode 100644 index 000000000..718d43202 --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_responsive.scss @@ -0,0 +1,235 @@ +/* ========================================================================== +Responsive Styles +========================================================================== */ + +@media (max-width: 767px) { + .landing-caption { + text-align: center; + } + + .navbar { + .navbar-brand { + .navbar-burger { + display: flex; + align-items: center; + justify-content: center; + } + } + } + + .navbar-menu { + .is-static { + position: absolute; + width: 100%; + } + + .is-fixed { + position: fixed; + width: 100%; + } + + .navbar-item { + text-align: center !important; + + .signup-button { + width: 100% !important; + } + } + + .navbar-link { + padding: 10px 20px !important; + } + } + + .title { + &.section-title { + font-size: 2rem !important; + } + } + + .level-left { + &.level-social { + display: flex; + justify-content: flex-start; + } + } + + .app-side { + .title, .subtitle { + text-align: center; + } + } + + .testimonial { + margin: 0 auto; + + blockquote { + font-size: 1rem; + } + } + + .pricing-wrap { + flex-direction: column; + + .feature-card { + margin: 12px auto !important; + } + } + + .form-button { + width: 100%; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { + + .navbar { + .navbar-brand { + .navbar-burger { + display: flex; + align-items: center; + justify-content: center; + } + } + } + + .landing-caption { + text-align: center; + + .subtitle { + max-width: 440px; + margin: 0 auto; + margin-bottom: 20px; + } + } + + form { + padding: 0 40px; + } + + .hero-body { + padding-bottom: 0; + + img { + display: block; + margin: 0 auto; + max-height: 450px !important; + max-width: 450px !important; + } + } + + .navbar-menu { + .is-static { + position: absolute; + width: 100%; + } + + .is-fixed { + position: fixed; + width: 100%; + } + + .navbar-item { + text-align: center !important; + + .signup-button { + width: 100% !important; + } + } + + .navbar-link { + padding: 10px 20px !important; + } + } + + .side-feature { + .subtitle, .title { + max-width: 420px; + margin: 0 auto; + } + + .title { + margin-bottom: 12px; + } + + img { + display: block; + max-width: 450px; + margin: 0 auto; + } + } + + .app-side { + .title, .subtitle { + text-align: center; + max-width: 450px; + margin: 0 auto; + } + } + + .icon-list { + display: flex; + + .column { + max-width: 25%; + min-width: 25%; + } + } + + .testimonial { + margin: 0 auto; + } + + .is-centered-tablet-portrait { + text-align: center !important; + + .divider { + margin: 0 auto !important; + } + } + + .footer-logo, .footer-column { + text-align: center; + } + + .level { + &.is-mobile { + justify-content: center !important; + + .level-item { + margin: 0 .75rem !important; + } + } + } +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + + .navbar-menu { + .navbar-end { + a { + display: flex; + justify-content: center; + align-items: center; + } + + .navbar-link { + padding-right: 0 !important; + } + + .button { + min-width: 120px; + } + } + } + + .navbar-item { + &.is-hidden-mobile { + display: none !important; + } + + &.is-hidden-desktop.is-hidden-tablet { + display: flex !important; + } + } +} diff --git a/particles.js.org-new/src/scss/layout/_sections.scss b/particles.js.org-new/src/scss/layout/_sections.scss new file mode 100644 index 000000000..c5af53873 --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_sections.scss @@ -0,0 +1,202 @@ +/* ========================================================================== +Section Styles +========================================================================== */ + +//Sections +.section { + position: relative; + overflow-x: hidden !important; + + &:focus { + outline: none !important; + } + + &.section-light-grey { + background-color: $light-grey; + } + + &.section-feature-grey { + background-color: $section-grey; + } + + &.section-secondary { + background-color: $secondary; + } + + &.section-half { + height: 75vh !important; + } + + &.has-background-image { + background-size: cover; + background-repeat: no-repeat; + } + + .title, .subtitle { + font-family: 'Open Sans', sans-serif; + } + + .subtitle { + &.is-muted { + color: $muted-grey; + } + } + + .overlay { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 0; + } +} + +//Titles +.title-wrapper { + max-width: 500px; + margin: 0 auto; + + .title, .subtitle { + font-family: 'Open Sans', sans-serif; + } + + .subtitle { + &.is-muted { + color: $muted-grey; + } + } +} + +//Divider +.divider { + height: 3px; + border-radius: 50px; + background: $secondary; + width: 60px; + + &.is-centered { + margin: 0 auto; + } +} + +//Wrapper +.content-wrapper { + padding: 60px 0; +} + +//Side feqtures +.side-feature { + h3 { + padding-bottom: 16px; + } +} + +//Icon box +.feature-icon { + padding: 16px 0; + cursor: pointer; + + &:hover { + .icon-wrap { + transform: translateY(-5px); + box-shadow: $light-shadow; + + ion-icon { + color: $secondary; + } + } + } + + .icon-wrap { + height: 60px; + width: 60px; + border-radius: 50%; + border: 1px solid darken($fade-grey, 4%); + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto 10px; + transition: all .3s; + + ion-icon { + font-size: 110px; + color: lighten($blue-grey, 18%); + transition: all .3s; + } + } + + h4 { + font-family: $font; + font-weight: 600; + color: $blue-grey; + } + + p { + color: $muted-grey; + } +} + +//Pricing +.pricing-wrap { + display: flex; + justify-content: center; + margin-top: 60px; +} + +.feature-card { + &.is-pricing { + border: 1px solid darken($fade-grey, 4%); + border-radius: 6px; + box-shadow: $light-shadow; + margin: 8px; + padding: 20px; + height: 420px; + + .plan-name { + font-family: $font; + font-weight: 600; + font-size: 1.4rem; + color: $blue-grey; + } + + img { + display: block; + max-width: 160px; + margin: 0 auto; + } + + .price { + position: relative; + font-family: $font; + font-weight: 700; + font-size: 2.4rem; + color: $blue-grey; + + &:before { + content: '$'; + position: relative; + top: -12px; + left: 5px; + font-size: 1.2rem; + } + + &:after { + content: 'per month'; + position: absolute; + bottom: -16px; + left: 0; + right: 0; + margin: 0 auto; + font-size: .9rem; + font-weight: 400; + color: $muted-grey; + } + } + + p { + padding: 24px 0 16px; + color: $muted-grey; + } + } +} diff --git a/particles.js.org-new/src/scss/layout/_sidebar.scss b/particles.js.org-new/src/scss/layout/_sidebar.scss new file mode 100644 index 000000000..f9c8145e5 --- /dev/null +++ b/particles.js.org-new/src/scss/layout/_sidebar.scss @@ -0,0 +1,230 @@ +/* ========================================================================== +Sidebar Styles +========================================================================== */ + +//Sidebar animated icon trigger +.menu-icon-wrapper { + position: relative; + left: 0; + top: 0; + width: 34px; + height: 34px; + pointer-events: none; + transition: 0.1s; + + > * { + pointer-events: none !important; + } + + svg { + position: absolute; + top: -18px; + left: -18px; + transform: scale(0.07); + transform-origin: 0 0; + + path { + stroke: $secondary; + stroke-width: 40px; + stroke-linecap: round; + stroke-linejoin: round; + fill: transparent; + transition: stroke-dasharray 0.5s; + + &.path1 { + stroke-dashoffset: 5803.15px; + stroke-dasharray: 2901.57px, 2981.57px, 240px; + } + + &.path2 { + stroke-dashoffset: 800px; + stroke-dasharray: 400px, 480px, 240px; + } + + &.path3 { + stroke-dashoffset: 6993.11px; + stroke-dasharray: 3496.56px, 3576.56px, 240px; + } + } + } + + &.open { + svg { + path { + &.path1 { + stroke-dasharray: 2901.57px, 5258.15px, 240px; + } + + &.path2 { + stroke-dasharray: 400px, 600px, 0px; + } + + &.path3 { + stroke-dasharray: 3496.56px, 6448.11px, 240px; + } + } + } + } + + .menu-icon-trigger { + position: relative; + width: 100%; + height: 100%; + cursor: pointer; + pointer-events: auto; + background: none; + border: none; + margin: 0; + padding: 0; + } + + button { + outline: none; + } +} + +//Sidebar +.sidebar { + background: $dark-grey; + width: 280px; + height: 100%; + position: fixed; + top: 0; + left: 0; + transform: translateX(-281px); + transition: all 0.3s; + z-index: 10000; + overflow-y: auto; + + &.is-active { + transform: translateX(0); + } + + .sidebar-header { + height: 4.25rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lighten($dark-grey, 5%); + padding: 0 20px; + + img { + height: 32px; + } + + a { + width: 24px; + height: 24px; + } + + svg { + stroke: $white; + transform: rotate(0); + transition: all 0.3s; + cursor: pointer; + + &:hover { + stroke: $secondary; + transform: rotate(180deg); + } + } + } + + .inner { + position: relative; + + .sidebar-menu { + margin: 0; + padding: 0; + max-width: 400px; + list-style: none; + list-style-type: none; + font-family: "Open Sans", sans-serif !important; + + li { + position: relative; + + a { + display: flex; + align-items: center; + padding: 20px 25px; + text-decoration: none; + color: $white; + + &:hover { + padding: 20px 25px; + text-decoration: none; + color: $white; + } + + span { + margin-right: 20px; + color: $white; + } + } + + &.have-children { + cursor: pointer; + + &.active { + > a { + span { + color: $secondary; + + &:after { + color: $secondary; + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + } + } + } + + > a { + pointer-events: none; + } + + > ul { + //display: none; + } + + ul { + padding: 0px; + + li { + a { + color: $white; + background-color: darken($dark-grey, 5%); + padding-left: 62px; + border-bottom: 1px solid darken($dark-grey, 2%); + font-size: 0.9rem; + + &:hover { + color: $primary; + padding-left: 62px; + } + } + } + } + + span { + &.material-icons { + &:after { + position: absolute; + top: 20px; + right: 30px; + content: "\e5cc"; + color: $white; + transition: all 0.5s; + font-weight: 200 !important; + font-size: 1.6rem; + } + } + } + } + } + } + } +} diff --git a/particles.js.org-new/src/scss/main.scss b/particles.js.org-new/src/scss/main.scss new file mode 100644 index 000000000..56597eecc --- /dev/null +++ b/particles.js.org-new/src/scss/main.scss @@ -0,0 +1,22 @@ +/* ========================================================================== +Main SCSS file +========================================================================== */ + +@import 'abstracts/colors'; +@import 'abstracts/animations'; + +@import "../../node_modules/bulma/bulma.sass"; + +@import 'layout/navbar'; +@import 'layout/sidebar'; +@import 'layout/sections'; +@import 'layout/hero'; +@import 'layout/footer'; +@import 'components/buttons'; +@import 'components/dropdowns'; +@import 'components/hamburger'; +@import 'components/cards'; +@import 'components/forms'; +@import 'components/testimonials'; +@import 'utilities/utils'; +@import 'layout/responsive'; diff --git a/particles.js.org-new/src/scss/utilities/_utils.scss b/particles.js.org-new/src/scss/utilities/_utils.scss new file mode 100644 index 000000000..b32b1e8de --- /dev/null +++ b/particles.js.org-new/src/scss/utilities/_utils.scss @@ -0,0 +1,163 @@ +body { + overflow-x: hidden; +} + +//Preloader +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: $white; + z-index: 99; +} + +#status { + width: 200px; + height: 200px; + position: absolute; + left: 50%; + top: 50%; + background-image: url(../img/loaders/rings.svg); + background-size: 80px 80px; + background-repeat: no-repeat; + background-position: center; + margin: -100px 0 0 -100px; +} + +//Back to top button +#backtotop { + position: fixed; + right: 0; + opacity: 0; + visibility: hidden; + bottom: 25px; + margin: 0 25px 0 0; + z-index: 9999; + transition: 0.35s; + transform: scale(0.7); + transition: all 0.5s; + + &.visible { + opacity: 1; + visibility: visible; + transform: scale(1); + + a { + outline: none; + text-decoration: none; + border: 0 none; + display: block; + width: 46px; + height: 46px; + background-color: $medium-grey; + color: $white; + opacity: 1; + transition: all 0.3s; + border-radius: 50%; + text-align: center; + font-size: 26px; + + &:after { + outline: none; + content: "\e316"; + font-family: "Material Icons"; + position: relative; + display: block; + top: 52%; + -webkit-transform: translateY(-55%); + transform: translateY(-55%); + } + + &:hover { + outline: none; + opacity: 0.9; + background: $secondary; + } + } + } +} + + +//Helpers +.is-disabled { + pointer-events: none; + opacity: 0.4; + cursor: default !important; +} + +.is-hidden { + display: none !important; +} + +.stuck { + position: fixed !important; + top: 0 !important; + z-index: 2 !important; +} + +.light-text { + color: $white !important; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mb-40 { + margin-bottom: 40px; +} + +.mb-60 { + margin-bottom: 60px; +} + +.mt-20 { + margin-top: 20px; +} + +.mt-40 { + margin-top: 40px; +} + +.mt-50 { + margin-top: 50px; +} + +.mt-60 { + margin-top: 60px; +} + +.ml-30 { + margin-left: 30px; +} + +.huge-pb { + padding-bottom: 100px; +} + +.pb-20 { + padding-bottom: 20px !important; +} + +.pb-40 { + padding-bottom: 40px !important; +} + +//Input placeholders +::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: $placeholder; +} + +::-moz-placeholder { /* Firefox 19+ */ + color: $placeholder; +} + +:-ms-input-placeholder { /* IE 10+ */ + color: $placeholder; +} + +:-moz-placeholder { /* Firefox 18- */ + color: $placeholder; +}