Merge pull request #64 from MortezaBashsiz/dev

add docs template
MortezaBashsiz · Aug 27, 2024 · ffb8830 · ffb8830
2 parents b9977a1 + 6b89e55
commit ffb8830
Show file tree

Hide file tree

Showing 9 changed files with 6,437 additions and 0 deletions.
diff --git a/docs/assets/css/bd-coming-soon.css b/docs/assets/css/bd-coming-soon.css
diff --git a/docs/assets/css/bd-coming-soon.css.map b/docs/assets/css/bd-coming-soon.css.map
diff --git a/docs/assets/images/bg.jpg b/docs/assets/images/bg.jpg
diff --git a/docs/assets/images/logo.svg b/docs/assets/images/logo.svg
diff --git a/docs/assets/scss/bd-coming-soon.scss b/docs/assets/scss/bd-coming-soon.scss
@@ -0,0 +1,90 @@
+body {
+    font-family: 'Karla', sans-serif;
+    background-image: url("../images/bg.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    color: #ffffff;
+    padding-bottom: 75px;
+
+    @media (min-width: 768px) {
+        padding-bottom: 110px;
+    }
+}
+.navbar-brand {
+    margin-right: 0;
+
+    img {
+        height: 21px;
+    }
+}
+.navbar-dark {
+    padding-top: 35px;
+    padding-bottom: 35px;
+    .navbar-text {
+        color: #ffffff;
+        opacity: 1;
+        padding: 0 20px;
+        border-right: 1px solid #ffffff;
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+
+        &:last-child {
+            border-right: 0;
+        }
+    }
+
+    @media (max-width: 767px) {
+        padding-bottom: 0;
+    }
+}
+.page-title {
+    font-size: 80px;
+    font-weight: bold;
+    margin-bottom: 6px;
+
+    @media (max-width: 767px) {
+        font-size: 35px;
+        margin-bottom: 14px;  
+    }
+}
+.page-description {
+    max-width: 465px;
+    font-size: 18px;
+    margin-bottom: 59px;
+
+    @media (max-width: 767px) {
+        font-size: 14px;   
+    }
+}
+
+p {
+    font-size: 14px;
+    margin-bottom: 21px;
+}
+
+.footer-social-links {
+    .social-link {
+        display: inline-block;
+        text-align: center;
+        line-height: 40px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #ffffff;
+        color: #000000;
+        margin-right: 16px;
+        transition: all 0.3s ease-in-out;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        &:hover {
+            text-decoration: none;
+            background-color: #000000;
+            color: #ffffff;
+        }
+    }
+}
diff --git a/docs/gulpfile.js b/docs/gulpfile.js
@@ -0,0 +1,39 @@
+//Import
+
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const sourceMaps = require('gulp-sourcemaps');
+const autoprefixer = require('gulp-autoprefixer');
+const browserSync = require('browser-sync');
+
+//SCSS
+
+function style() {
+    return gulp.src('./assets/scss/*.scss')
+    .pipe(sourceMaps.init())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer())
+    .pipe(sourceMaps.write('./'))
+    .pipe(gulp.dest('./assets/css'))
+    .pipe(browserSync.stream());
+}
+
+//Serve and watch
+
+function watch() {
+    browserSync.init({
+        server: {
+            baseDir: './',
+        },
+        startPath: './index.html',
+        ghostMode: false,
+        notify: false
+    });
+    gulp.watch('./assets/scss/*.scss', style);
+    gulp.watch('./*.html').on('change', browserSync.reload);
+    gulp.watch('./assets/js/*.js').on('change', browserSync.reload);
+
+}
+
+exports.style = style;
+exports.watch = watch;
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>NipoVPN documentation</title>
+    <link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bd-coming-soon.css">
+</head>
+
+<body class="min-vh-100 d-flex flex-column">
+
+    <header>
+        <div class="container">
+            <nav class="navbar navbar-dark bg-transparenet">
+                <a class="navbar-brand" href="#">
+                    <img src="assets/images/logo.svg" alt="logo">
+                </a>
+                <span class="navbar-text ml-auto d-none d-sm-inline-block">Email</span>
+                <span class="navbar-text d-none d-sm-inline-block">[email protected]</span>
+            </nav>
+        </div>
+    </header>
+    <main class="my-auto">
+        <div class="container">
+            <h1 class="page-title">We're coming soon</h1>
+            <p class="page-description">We are working hard to make it possible
+            </p>
+            <p>Stay connected</p>
+            <!-- <nav class="footer-social-links">
+                <a href="#!" class="social-link"><i class="mdi mdi-facebook-box"></i></a>
+                <a href="#!" class="social-link"><i class="mdi mdi-twitter"></i></a>
+                <a href="#!" class="social-link"><i class="mdi mdi-google"></i></a>
+                <a href="#!" class="social-link"><i class="mdi mdi-slack"></i></a>
+                <a href="#!" class="social-link"><i class="mdi mdi-skype"></i></a>
+            </nav> -->
+        </div>
+    </main>
+</body>
+
+</html>