├── .browserslistrc
├── src
    ├── EventBus.js
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── Home.vue
    │   └── generate.vue
    ├── plugins
    │   ├── helpers.js
    │   ├── state.js
    │   └── vuetify.js
    ├── router
    │   ├── routes.js
    │   └── index.js
    ├── components
    │   ├── footer.vue
    │   ├── nav-bar.vue
    │   └── nav-drawer.vue
    ├── App.vue
    ├── main.js
    └── styles
    │   ├── register.scss
    │   └── index.scss
├── public
    ├── favicon.ico
    ├── index.html
    └── downloads
    │   ├── deploy-backend.bat
    │   └── deploy-backend.sh
├── babel.config.js
├── .gitignore
├── .eslintrc.js
├── README.md
├── vue.config.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/src/EventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | export default new Vue();
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyndex-drive/home/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyndex-drive/home/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about Vue page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/plugins/helpers.js:
--------------------------------------------------------------------------------
1 | export function mobileChecker() {
2 |   var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
3 |   if (width > 966) {
4 |     return false;
5 |   } else {
6 |     return true;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # the-best-portfolio
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
 1 | import Home from '../views/Home.vue';
 2 | import About from '../views/About.vue';
 3 | import Generate from '../views/generate.vue';
 4 | 
 5 | const routes = [
 6 |   {
 7 |     path: '/',
 8 |     name: 'Home',
 9 |     component: Home,
10 |   },
11 |   {
12 |     path: '/about',
13 |     name: 'About',
14 |     component: About,
15 |   },
16 |   {
17 |     path: '/generate',
18 |     name: 'Generate',
19 |     component: Generate,
20 |   },
21 | ];
22 | 
23 | export default routes;
24 | 


--------------------------------------------------------------------------------
/src/components/footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-footer elevation="15" inset dense small rounded shaped>
 3 |     <v-row align="center" justify="center" class="my-1 py-0">
 4 |       <v-row>
 5 |         <v-col align="center" justify="center">
 6 |           <v-icon>mdi-copyright</v-icon> {{ new Date().getFullYear() }} | Z Y N
 7 |           D E X
 8 |         </v-col>
 9 |       </v-row>
10 |     </v-row>
11 |   </v-footer>
12 | </template>
13 | 
14 | <script>
15 | export default {};
16 | </script>
17 | 
18 | <style></style>
19 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import goTo from 'vuetify/es5/services/goto';
 4 | import routes from './routes';
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | const router = new Router({
 9 |   scrollBehavior: (to, from, savedPosition) => {
10 |     let scrollTo = 0;
11 |     if (to.hash) {
12 |       scrollTo = to.hash;
13 |     } else if (savedPosition) {
14 |       scrollTo = savedPosition.y;
15 |     }
16 | 
17 |     return goTo(scrollTo);
18 |   },
19 |   mode: 'history',
20 |   routes,
21 | });
22 | 
23 | export default router;
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app id="app">
 3 |     <navDrawer />
 4 |     <navBar />
 5 |     <v-main>
 6 |       <div class="content">
 7 |         <router-view></router-view>
 8 |       </div>
 9 |     </v-main>
10 |     <foot />
11 |   </v-app>
12 | </template>
13 | <script>
14 | import navBar from './components/nav-bar';
15 | import navDrawer from './components/nav-drawer';
16 | import foot from './components/footer';
17 | export default {
18 |   name: 'App',
19 |   components: {
20 |     navBar,
21 |     navDrawer,
22 |     foot,
23 |   },
24 | };
25 | </script>
26 | <style></style>
27 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const vueSrc = './src';
 3 | 
 4 | module.exports = {
 5 |   runtimeCompiler: true,
 6 |   publicPath: '/',
 7 |   css: {
 8 |     requireModuleExtension: true,
 9 |   },
10 |   configureWebpack: {
11 |     resolve: {
12 |       alias: {
13 |         '@': path.resolve(__dirname, vueSrc),
14 |       },
15 |     },
16 |   },
17 |   chainWebpack: (config) => {
18 |     let title = require('./package.json').title;
19 |     config.plugin('html').tap((args) => {
20 |       args[0].title = title;
21 |       return args;
22 |     });
23 |   },
24 |   lintOnSave: false,
25 |   transpileDependencies: ['vuetify'],
26 | };
27 | 


--------------------------------------------------------------------------------
/src/plugins/state.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | const state = Vue.observable({
 4 |   navbar: {
 5 |     key: 0,
 6 |     active: false,
 7 |   },
 8 |   botSettings: {
 9 |     darkmode: false,
10 |     navBlur: false,
11 |   },
12 | });
13 | 
14 | export const getters = {
15 |   navbar: {
16 |     key: () => state.navbar.key,
17 |     active: () => state.navbar.active,
18 |   },
19 |   botSettings: {
20 |     darkmode: () => state.botSettings.darkmode,
21 |     navBlur: () => state.botSettings.navBlur,
22 |   },
23 | };
24 | 
25 | export const mutations = {
26 |   navbar: {
27 |     key: (val) => (state.navbar.key = val),
28 |     active: (val) => (state.navbar.active = val),
29 |   },
30 |   botSettings: {
31 |     darkmode: (val) => (state.botSettings.darkmode = val),
32 |     navBlur: (val) => (state.botSettings.navBlur = val),
33 |   },
34 | };
35 | 
36 | export default state;
37 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib';
 3 | import minifyCssString from 'minify-css-string';
 4 | 
 5 | Vue.use(Vuetify);
 6 | 
 7 | let options = {
 8 |   theme: {
 9 |     themes: {
10 |       light: {
11 |         primary: '#F44336',
12 |         secondary: '#424242',
13 |         accent: '#82B1FF',
14 |         error: '#FF5252',
15 |         info: '#2196F3',
16 |         success: '#4CAF50',
17 |         warning: '#FFC107',
18 |       },
19 |       dark: {
20 |         primary: '#F44336',
21 |         secondary: '#424242',
22 |         accent: '#82B1FF',
23 |         error: '#FF5252',
24 |         info: '#2196F3',
25 |         success: '#4CAF50',
26 |         warning: '#FFC107',
27 |       },
28 |     },
29 |     options: {
30 |       minifyTheme: minifyCssString,
31 |     },
32 |   },
33 | };
34 | 
35 | export default new Vuetify(options);
36 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import store, { mutations, getters } from './plugins/state';
 5 | import moment from 'vue-moment';
 6 | import lodash from 'lodash';
 7 | import axios from 'axios';
 8 | import VueAwesomeSwiper from 'vue-awesome-swiper';
 9 | import { gsap } from 'gsap';
10 | import EventBus from './EventBus';
11 | import vuetify from './plugins/vuetify';
12 | import '@/styles/register.scss';
13 | import 'swiper/swiper-bundle.css';
14 | 
15 | Vue.config.productionTip = false;
16 | Vue.use(VueAwesomeSwiper);
17 | Vue.use(moment);
18 | Vue.prototype.$axios = axios;
19 | Vue.prototype.$gsap = gsap;
20 | Vue.prototype.$Eventbus = EventBus;
21 | Vue.prototype.$lodash = lodash;
22 | 
23 | Vue.prototype.$state = {
24 |   store: store,
25 |   mutate: mutations,
26 |   get: getters,
27 | };
28 | 
29 | new Vue({
30 |   router,
31 |   vuetify,
32 |   render: (h) => h(App),
33 | }).$mount('#app');
34 | 


--------------------------------------------------------------------------------
/src/styles/register.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | // Import a Google Font for Following Material Guidelines
 4 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 5 | 
 6 | // Vuetify Sass Variables
 7 | $family-sans-serif: 'open-sans', sans-serif;
 8 | $body-font-family: 'Work Sans', serif;
 9 | $border-radius-root: 6px;
10 | $font-size-root: 14px;
11 | $btn-letter-spacing: 0;
12 | $btn-font-weight: 400;
13 | $list-item-title-font-size: 0.929rem;
14 | $list-item-dense-title-font-size: 0.929rem;
15 | $list-item-dense-title-font-weight: initial;
16 | $fab-icon-sizes: (
17 |   'small': 20,
18 | );
19 | $btn-sizes: (
20 |   'default': 41,
21 |   'large': 54,
22 | );
23 | $headings: (
24 |   'h1': (
25 |     'size': 3.3125rem,
26 |     'line-height': 1.15em,
27 |   ),
28 |   'h2': (
29 |     'size': 2.25rem,
30 |     'line-height': 1.5em,
31 |   ),
32 | );
33 | 
34 | // Vue2-Animate Variables
35 | $animationDuration: 0.5s;
36 | 
37 | // Other Imports
38 | @import 'bulma';
39 | @import 'vue2-animate/src/sass/vue2-animate.scss';
40 | @import 'index.scss';
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zyndex",
 3 |   "title": "ZYNDEX | G-Index Generator",
 4 |   "version": "0.1.0",
 5 |   "private": false,
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.21.0",
14 |     "bulma": "^0.9.1",
15 |     "core-js": "^3.6.5",
16 |     "gsap": "^3.5.1",
17 |     "lodash": "^4.17.20",
18 |     "minify-css-string": "^1.0.0",
19 |     "swiper": "^6.3.5",
20 |     "vue": "^2.6.11",
21 |     "vue-awesome-swiper": "^4.1.1",
22 |     "vue-meta": "^2.4.0",
23 |     "vue-moment": "^4.1.0",
24 |     "vue-router": "^3.2.0",
25 |     "vue2-animate": "^2.1.4",
26 |     "vuetify": "^2.2.11"
27 |   },
28 |   "devDependencies": {
29 |     "@vue/cli-plugin-babel": "~4.5.0",
30 |     "@vue/cli-plugin-eslint": "~4.5.0",
31 |     "@vue/cli-plugin-router": "~4.5.0",
32 |     "@vue/cli-service": "~4.5.0",
33 |     "babel-eslint": "^10.1.0",
34 |     "eslint": "^6.7.2",
35 |     "eslint-plugin-vue": "^6.2.2",
36 |     "node-sass": "^4.12.0",
37 |     "sass": "^1.19.0",
38 |     "sass-loader": "^8.0.2",
39 |     "vue-cli-plugin-vuetify": "~2.0.7",
40 |     "vue-template-compiler": "^2.6.11",
41 |     "vuetify-loader": "^1.3.0"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
 1 | // Every Project's Must
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | // Custom Scroll Bar Design for Following Material Guidelines
 7 | 
 8 | //? Scroll Bar Width
 9 | ::-webkit-scrollbar {
10 |   width: 4px;
11 |   background-color: white;
12 | }
13 | 
14 | //? Scroll Bar Track
15 | ::-webkit-scrollbar-track {
16 |   box-shadow: inset 0 0 5px grey;
17 |   border-radius: none;
18 | }
19 | 
20 | //? Scroll Bar Thumb
21 | ::-webkit-scrollbar-thumb {
22 |   background: hsl(0%, 0%, 15%);
23 |   border-radius: 10px;
24 | }
25 | 
26 | // Some Helper CSS
27 | 
28 | //? For all Use Cases
29 | .non-touch {
30 |   -webkit-user-select: none;
31 |   -khtml-user-select: none;
32 |   -moz-user-select: none;
33 |   -o-user-select: none;
34 |   user-select: none;
35 | }
36 | 
37 | .point-cursor {
38 |   cursor: pointer;
39 | }
40 | 
41 | .break-only-word {
42 |   word-break: break-word;
43 | }
44 | 
45 | .width-min {
46 |   min-width: 40%;
47 | }
48 | 
49 | .border-max {
50 |   border-radius: 50%;
51 | }
52 | 
53 | .fit-content {
54 |   width: fit-content;
55 | }
56 | 
57 | .back-gif {
58 |   background-image: url('https://i.pinimg.com/originals/f4/a8/b4/f4a8b449107bfcbc785ebf766c3864b8.gif');
59 |   background-size: cover;
60 |   background-repeat: no-repeat;
61 |   background-position: center;
62 | }
63 | .gradient-hero {
64 |   background-image: linear-gradient(
65 |     to top,
66 |     #ffffff,
67 |     #f2faff,
68 |     #d5f9ff,
69 |     #b0f9ff,
70 |     #94f9f2,
71 |     #94f9f2,
72 |     #94f9f2,
73 |     #94f9f2,
74 |     #b0f9ff,
75 |     #d5f9ff,
76 |     #f2faff,
77 |     #ffffff
78 |   );
79 | }
80 | 
81 | .is-maximum {
82 |   width: 100%;
83 |   height: 100%;
84 | }
85 | 
86 | .slide-fade-enter-active {
87 |   transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
88 | }
89 | .slide-fade-leave-active {
90 |   transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
91 | }
92 | .slide-fade-enter,
93 | .slide-fade-leave-to {
94 |   transform: translateX(10px);
95 |   opacity: 0;
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/nav-bar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app-bar app collapse-on-scroll>
  3 |     <v-app-bar-nav-icon @click="navClick()"></v-app-bar-nav-icon>
  4 |     <v-avatar
  5 |       @click="$router.push('/')"
  6 |       size="38"
  7 |       color="primary"
  8 |       class="mx-2 non-touch point-cursor"
  9 |     >
 10 |       <v-img :src="avatar"></v-img>
 11 |     </v-avatar>
 12 |     <v-toolbar-title
 13 |       @click="$router.push('/')"
 14 |       class="font-weight-black text-h5 non-touch point-cursor"
 15 |       v-ripple
 16 |     >
 17 |       {{ ismobile ? 'ZYNDEX' : 'Z Y N D E X' }}
 18 |     </v-toolbar-title>
 19 |     <v-spacer></v-spacer>
 20 |     <v-tooltip v-if="!ismobile" bottom transition="slide-y-transition">
 21 |       <template v-slot:activator="{ on, attrs }">
 22 |         <v-btn
 23 |           v-bind="attrs"
 24 |           v-on="on"
 25 |           color="primary"
 26 |           icon
 27 |           @click="changeTheme()"
 28 |         >
 29 |           <v-icon>
 30 |             {{ $vuetify.theme.dark ? 'mdi-water' : 'mdi-water-off' }}
 31 |           </v-icon>
 32 |         </v-btn>
 33 |       </template>
 34 |       <span> Change Dark Mode </span>
 35 |     </v-tooltip>
 36 |     <v-tooltip bottom transition="slide-y-transition">
 37 |       <template v-slot:activator="{ on, attrs }">
 38 |         <v-btn
 39 |           color="primary"
 40 |           v-bind="attrs"
 41 |           v-on="on"
 42 |           icon
 43 |           @click="windowClick(github.link)"
 44 |         >
 45 |           <v-icon>
 46 |             {{ github.icon }}
 47 |           </v-icon>
 48 |         </v-btn>
 49 |       </template>
 50 |       <span> {{ github.title }} </span>
 51 |     </v-tooltip>
 52 |   </v-app-bar>
 53 | </template>
 54 | 
 55 | <script>
 56 | import { mobileChecker } from '../plugins/helpers';
 57 | export default {
 58 |   name: 'Nav-Bar',
 59 |   data: function () {
 60 |     return {
 61 |       github: {
 62 |         link: 'https://github.com/tks18',
 63 |         icon: 'mdi-github',
 64 |         title: "Shan.tk's Github Profile",
 65 |       },
 66 |       avatar:
 67 |         'https://i.ibb.co/hRxTz1g/c0ec2e063895760baa493c36d2d28387-s-400.jpg',
 68 |     };
 69 |   },
 70 |   methods: {
 71 |     navClick() {
 72 |       this.$state.store.navbar.active = true;
 73 |     },
 74 |     windowClick(url) {
 75 |       window.open(url);
 76 |       return;
 77 |     },
 78 |     changeTheme() {
 79 |       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
 80 |       localStorage.setItem(
 81 |         'themecache',
 82 |         JSON.stringify({
 83 |           dark: this.$vuetify.theme.dark,
 84 |           blur: this.$state.store.botSettings.navBlur,
 85 |           theme: {
 86 |             accent: this.$vuetify.theme.themes.light.primary,
 87 |           },
 88 |         }),
 89 |       );
 90 |       this.$state.store.botSettings.darkmode = this.$vuetify.theme.dark;
 91 |     },
 92 |   },
 93 |   computed: {
 94 |     ismobile() {
 95 |       return mobileChecker();
 96 |     },
 97 |   },
 98 | };
 99 | </script>
100 | 
101 | <style></style>
102 | 


--------------------------------------------------------------------------------
/public/downloads/deploy-backend.bat:
--------------------------------------------------------------------------------
 1 | @echo off
 2 | echo.
 3 | echo U L T I M A T E  G ^- I N D E X  B A C K E N D  D E P L O Y E R
 4 | echo.
 5 | echo by
 6 | echo.   ______               __  __
 7 | echo.  / __/ /  ___ ____    / /_/ /__
 8 | echo. _\ \/ _ \/ _ `/ _ \  / __/  '_/
 9 | echo. /___/_//_/\_,_/_//_/  \__/_/\_\
10 | echo.
11 | echo.
12 | echo Deploying the Backend Now.
13 | echo.
14 | echo Make Sure You have Nodejs, Git Installed and You are in the Root of the Directory and not any Subfolders
15 | echo.
16 | echo Make Sure You have Every Environment Variables in Hand for Faster Deployment
17 | echo.
18 | echo Starting the Script Now
19 | echo.
20 | CALL npm i ^-g heroku
21 | echo Login in to Your Heroku Account
22 | CALL heroku login
23 | echo.
24 | CALL git clone --quiet --single-branch --branch master https://github.com/tks18/gindex-backend.git __temp__
25 | echo.
26 | echo Starting Deployment Process
27 | echo.
28 | set /p appname=Enter Unique Backend App Name in Heroku:
29 | CALL heroku create %appname%
30 | echo.
31 | CALL heroku git:remote ^-a %appname%
32 | echo.
33 | echo Pushing G Index Backend to Heroku
34 | CALL git subtree push ^-^-prefix __temp__ heroku master
35 | echo.
36 | echo Now Have Your Environment Variables ready !!
37 | echo.
38 | set /p dburl=Enter the MongoDB url that You Copied from their Website:
39 | set /p site=Enter the Heroku App Website to which it is Deployed:
40 | set /p emailid=Enter the Email ID from which User Messages will be Sent:
41 | set /p emailpass=Enter the Email Password for the Above:
42 | set /p emailport=Enter the Email Port for the Above:
43 | set /p emailservice=Enter the Email Provider Name(Eg: Gmail, Yahoo, etc.):
44 | set /p emailsmtp=Enter the SMTP Address for the Email Provider:
45 | set /p adminemail=Enter the Admin Email ID(Can be Anything or can be Same as the Above Email ID):
46 | set /p replyemail=Confirm the Before Email Again:
47 | set /p maxsessions=Enter the Number of Maximum Active Sessions that Users can Login Simultaneously(Eg: 1, 2, 5, etc.):
48 | set /p emailgif=Enter the Image Link for Displaying in Emails:
49 | set /p sitesec=Enter a Secret Key that you will Remember (Should be Used while Creating a Superadmin Account after this Setup):
50 | set /p tmdbapi=Enter the TMDB API Key for Metadata Info of Media in the Index (If You Don't Need, put NaN):
51 | set /p fronturls=Enter the Frontend Url/Urls (Don't Put trailing / at the end) (Multiple Frontends can be Put Here by putting a ,):
52 | set /p frontname=Enter the Frontend's Website Name (Can be Anything):
53 | set /p tokensec=Enter a Super Long Token Secret that will be Used to Secure the JWT Tokens.(These are Never Required to be Remebered):
54 | echo.
55 | echo Pushing Config Keys to Heroku App.
56 | echo.
57 | CALL heroku config:set ^-a %appname% DBURL=%dburl% SITE=%site% EMAILID=%emailid% EMAILPASS=%emailpass% EMAILPORT=%emailport% EMAILSERVICE=%emailservice% EMAILSMTP=%emailsmtp% ADMINEMAIL=%adminemail% REPLYTOMAIL=%replyemail% MAXSESSIONS=%maxsessions% EMAILGIF=%emailgif% SITESECRET=%sitesec% TMDBAPI=%tmdbapi% FRONTENDURL=%fronturls% FRONTENDSITENAME=%frontname% TOKENSECRET=%tokensec%
58 | pause
59 | exit
60 | 


--------------------------------------------------------------------------------
/public/downloads/deploy-backend.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | echo -e "\n"
 3 | echo 'U L T I M A T E  G ^- I N D E X  B A C K E N D  D E P L O Y E R'
 4 | echo -e "\n"
 5 | echo 'by'
 6 | echo   '______               __  __'
 7 | echo  '/ __/ /  ___ ____    / /_/ /__'
 8 | echo '_\ \/ _ \/ _ / _ \  / __/  _/'
 9 | echo '/___/_//_/\_,_/_//_/  \__/_/\_\'
10 | echo -e "\n"
11 | echo -e "\n"
12 | echo 'Deploying the Backend Now'
13 | echo -e "\n"
14 | echo 'Make Sure You have Nodejs, Git Installed and You are in the Root of the Directory and not any Subfolders'
15 | echo -e "\n"
16 | echo 'Make Sure You have Every Environment Variables in Hand for Faster Deployment'
17 | echo -e "\n"
18 | echo 'Starting the Script Now'
19 | echo -e "\n"
20 | npm i -g heroku
21 | echo 'Login in to Your Heroku Account'
22 | heroku login
23 | echo -e "\n"
24 | CALL git clone --quiet --single-branch --branch master https://github.com/tks18/gindex-backend.git __temp__
25 | echo -e "\n"
26 | echo 'Starting Deployment Process'
27 | echo -e "\n"
28 | read -p 'Enter Unique Backend App Name in Heroku: ' appname
29 | heroku create $appname
30 | echo -e "\n"
31 | heroku git:remote -a $appname
32 | echo -e "\n"
33 | echo 'Pushing G Index Backend to Heroku'
34 | git subtree push --prefix __temp__ heroku master
35 | echo -e "\n"
36 | echo 'Now Have Your Environment Variables ready !!'
37 | echo -e "\n"
38 | read -p 'Enter the MongoDB url that You Copied from their Website: ' dburl
39 | read -p 'Enter the Heroku App Website to which it is Deployed: ' site
40 | read -p 'Enter the Email ID from which User Messages will be Sent: ' emailid
41 | read -p 'Enter the Email Password for the Above: ' emailpass
42 | read -p 'Enter the Email Port for the Above: ' emailport
43 | read -p 'Enter the Email Provider Name(Eg: Gmail, Yahoo, etc.): ' emailservice
44 | read -p 'Enter the SMTP Address for the Email Provider: ' emailsmtp
45 | read -p 'Enter the Admin Email ID(Can be Anything or can be Same as the Above Email ID): ' adminemail
46 | read -p 'Confirm the Before Email Again: ' replyemail
47 | read -p 'Enter the Number of Maximum Active Sessions that Users can Login Simultaneously(Eg: 1, 2, 5, etc.): ' maxsessions
48 | read -p 'Enter the Image Link for Displaying in Emails: ' emailgif
49 | read -p 'Enter a Secret Key that you will Remember (Should be Used while Creating a Superadmin Account after this Setup): ' sitesec
50 | read -p 'Enter the TMDB API Key for Metadata Info of Media in the Index (If You Don\t Need, put NaN): ' tmdbapi
51 | read -p 'Enter the Frontend Url/Urls (Dont Put trailing / at the end) (Multiple Frontends can be Put Here by putting a ,): ' fronturls
52 | read -p 'Enter the Frontend Website Name (Can be Anything): ' frontname
53 | read -p 'Enter a Super Long Token Secret that will be Used to Secure the JWT Tokens.(These are Never Required to be Remebered): ' tokensec
54 | echo -e "\n"
55 | echo 'Pushing Config Keys to Heroku App'
56 | echo -e "\n"
57 | heroku config:set -a $appname DBURL=$dburl SITE=$site EMAILID=$emailid EMAILPASS=$emailpass EMAILPORT=$emailport EMAILSERVICE=$emailservice EMAILSMTP=$emailsmtp ADMINEMAIL=$adminemail REPLYTOMAIL=$replyemail MAXSESSIONS=$maxsessions EMAILGIF=$emailgif SITESECRET=$sitesec TMDBAPI=$tmdbapi FRONTENDURL=$fronturls FRONTENDSITENAME=$frontname TOKENSECRET=$tokensec
58 | read -p "Press [Enter] key to exit..."
59 | exit
60 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <section class="hero is-small">
  4 |       <div class="hero-body">
  5 |         <div class="columns is-multiline is-centered is-vcentered">
  6 |           <div class="column is-full">
  7 |             <div class="container">
  8 |               <div class="text text-overline">
  9 |                 Zyndex is the Ultimate Destination for Google Drive Index which
 10 |                 is Easily Deployable and has More Reliable Security Which can be
 11 |                 Trusted.
 12 |               </div>
 13 |               <p>
 14 |                 <v-btn color="primary" @click="$vuetify.goTo('#scroll-target')">
 15 |                   <v-icon>mdi-book-open-outline</v-icon>
 16 |                   Read More
 17 |                 </v-btn>
 18 |               </p>
 19 |             </div>
 20 |           </div>
 21 |         </div>
 22 |       </div>
 23 |     </section>
 24 |     <v-card elevation="20" class="ma-4">
 25 |       <section
 26 |         :class="
 27 |           'hero ' + ($vuetify.theme.dark ? ' ' : 'gradient-hero') + ' is-small'
 28 |         "
 29 |       >
 30 |         <div class="hero-body">
 31 |           <div
 32 |             v-if="currHerosrc"
 33 |             class="columns is-multiline is-centered is-vcentered"
 34 |           >
 35 |             <transition name="slide-fade" mode="out-in">
 36 |               <div v-bind:key="herokey" class="column grad-text is-half">
 37 |                 <div class="container">
 38 |                   <div
 39 |                     :class="
 40 |                       (ismobile ? 'text-center' : 'text-right') +
 41 |                       ' my-2' +
 42 |                       (ismobile ? ' text-h5' : ' text-h2') +
 43 |                       ' break-only-word font-weight-bold'
 44 |                     "
 45 |                   >
 46 |                     {{ currHerosrc.title }}
 47 |                   </div>
 48 |                   <div
 49 |                     :class="
 50 |                       (ismobile ? 'text-center' : 'text-right') +
 51 |                       ' my-1 text-subtitle font-weight-black'
 52 |                     "
 53 |                   >
 54 |                     {{ currHerosrc.subtitle }}
 55 |                   </div>
 56 |                 </div>
 57 |               </div>
 58 |             </transition>
 59 |             <div class="column is-half">
 60 |               <v-avatar color="red" :size="ismobile ? 300 : 500">
 61 |                 <v-img
 62 |                   src="https://media.giphy.com/media/RKprmbDQXHFVy4DFyq/giphy-downsized.gif"
 63 |                 ></v-img>
 64 |               </v-avatar>
 65 |             </div>
 66 |           </div>
 67 |         </div>
 68 |       </section>
 69 |     </v-card>
 70 |     <v-container>
 71 |       <v-row align="center" justify="center">
 72 |         <v-col :cols="ismobile ? 12 : 6">
 73 |           <v-card shaped outlined>
 74 |             <v-col
 75 |               align="center"
 76 |               cols="12"
 77 |               :class="
 78 |                 ismobile ? 'text-body-2' : 'text-overline' + ' font-weight-bold'
 79 |               "
 80 |             >
 81 |               Deploy it Right Now by Clicking the Following Button and Get
 82 |               Started with the Instructions. Let's Get You Started
 83 |             </v-col>
 84 |             <v-col cols="12" align="center" justify="center">
 85 |               <v-btn
 86 |                 class="back-gif text text--black"
 87 |                 color="primary"
 88 |                 large
 89 |                 @click="$router.push('/generate')"
 90 |               >
 91 |                 <v-icon>mdi-check-all</v-icon> Generate Now
 92 |               </v-btn>
 93 |             </v-col>
 94 |           </v-card>
 95 |         </v-col>
 96 |       </v-row>
 97 |     </v-container>
 98 |     <div class="container" id="scroll-target">
 99 |       <div class="text text-h6 my-2 font-weight-bold">
100 |         Get to Know About the Project
101 |       </div>
102 |       <div
103 |         :class="
104 |           ismobile
105 |             ? 'columns is-multiline is-mobile is-centered is-vcentered has-text-centered'
106 |             : 'columns is-multiline is-mobile is-centered is-vcentered'
107 |         "
108 |       >
109 |         <div
110 |           v-for="(btn, index) in abtBtns"
111 |           v-bind:key="index"
112 |           :class="
113 |             ismobile
114 |               ? index == abtBtns.length - 1
115 |                 ? 'column is-full'
116 |                 : 'column is-half'
117 |               : 'column is-2'
118 |           "
119 |         >
120 |           <v-btn color="primary">
121 |             <v-icon>{{ btn.icon }}</v-icon> {{ btn.btnTxt }}
122 |           </v-btn>
123 |         </div>
124 |       </div>
125 |     </div>
126 |     <v-container class="container mt-3">
127 |       <div class="content">
128 |         <div class="text text-h6 my-2 font-weight-bold">Overview</div>
129 |         <div class="text-body-2">
130 |           Zyndex is a Google Drive Index Combining the power of Cloudflare
131 |           Workers and Google Drive which allows you to index your files on the
132 |           browser through Cloudflare Workers. Zyndex Gives you Unmatched Amount
133 |           of Customizations that no One Can Give. With Security as the Main
134 |           Focus, This Gives You Every Thing You need to Manage Users. Complete
135 |           Role Based Authentication and Authorization. Tokenized Download Links
136 |           & Secured Playback can be one of the Prominent Features of this Index.
137 |         </div>
138 |       </div>
139 |     </v-container>
140 |   </div>
141 | </template>
142 | <script>
143 | import { mobileChecker } from '../plugins/helpers';
144 | import { shuffle } from 'lodash';
145 | export default {
146 |   data: function () {
147 |     return {
148 |       heroSrc: [
149 |         {
150 |           title: 'Zyndex',
151 |           subtitle: 'Designed for Style! Engineered to Last!',
152 |         },
153 |         {
154 |           title: 'Built with Overloaded Features',
155 |           subtitle: 'Ultimaterific !!',
156 |         },
157 |         {
158 |           title: 'Loaded with Super Cool Admin Features.',
159 |           subtitle: 'When the Going Gets Tough, The Tough Gets Ultimate.',
160 |         },
161 |         {
162 |           title: 'Massive Customizations',
163 |           subtitle: 'You will get Massive theming Options to Customize',
164 |         },
165 |       ],
166 |       abtBtns: [
167 |         {
168 |           icon: 'mdi-head-lightbulb-outline',
169 |           btnTxt: 'Features',
170 |         },
171 |         {
172 |           icon: 'mdi-wan',
173 |           btnTxt: 'Docs',
174 |         },
175 |         {
176 |           icon: 'mdi-key-chain-variant',
177 |           btnTxt: 'Pre-reqs',
178 |         },
179 |         {
180 |           icon: 'mdi-google-photos',
181 |           btnTxt: 'Shots',
182 |         },
183 |         {
184 |           icon: 'mdi-lightbulb-outline',
185 |           btnTxt: " FAQ's",
186 |         },
187 |       ],
188 |       currHerosrc: {},
189 |       herokey: 0,
190 |     };
191 |   },
192 |   methods: {},
193 |   computed: {
194 |     ismobile() {
195 |       return mobileChecker();
196 |     },
197 |   },
198 |   mounted() {
199 |     this.currHerosrc = this.heroSrc[0];
200 |     var shuffled = shuffle(this.heroSrc);
201 |     setInterval(() => {
202 |       this.currHerosrc = shuffled[this.herokey];
203 |       if (this.herokey == shuffled.length - 1) {
204 |         this.herokey = 0;
205 |       } else {
206 |         this.herokey++;
207 |       }
208 |     }, 7500);
209 |   },
210 | };
211 | </script>
212 | 


--------------------------------------------------------------------------------
/src/components/nav-drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-navigation-drawer
  3 |     app
  4 |     temporary
  5 |     v-model="$state.store.navbar.active"
  6 |     class="$state.store.botSettings.navBlur ? 'back-blur' : undefined"
  7 |   >
  8 |     <v-container>
  9 |       <v-list-item class="px-2">
 10 |         <v-list-item-content>
 11 |           <v-list-item-title
 12 |             @click="$router.push('/about')"
 13 |             class="text-center point-cursor non-touch text-h4 font-weight-black"
 14 |           >
 15 |             Z Y N D E X
 16 |           </v-list-item-title>
 17 |           <v-list-item-subtitle
 18 |             class="text-center non-touch text-caption font-weight-light"
 19 |           >
 20 |             The Ultimate Google Drive Index
 21 |           </v-list-item-subtitle>
 22 |         </v-list-item-content>
 23 |       </v-list-item>
 24 |       <div class="text text-center text-body-2 my-2 font-weight-light">
 25 |         Developed by
 26 |       </div>
 27 |       <v-row align="center" justify="center">
 28 |         <v-avatar
 29 |           @click="$router.push('/about')"
 30 |           class="point-cursor non-touch"
 31 |           size="125"
 32 |         >
 33 |           <v-img :src="avatar"></v-img>
 34 |         </v-avatar>
 35 |       </v-row>
 36 |       <v-list-item three-line class="px-2">
 37 |         <v-list-item-content>
 38 |           <v-list-item-title
 39 |             @click="$router.push('/about')"
 40 |             class="text-center point-cursor non-touch font-weight-medium"
 41 |           >
 42 |             Sudharshan TK
 43 |           </v-list-item-title>
 44 |           <v-list-item-subtitle
 45 |             class="text-center non-touch font-weight-italic"
 46 |           >
 47 |             (aka Shan.tk)
 48 |           </v-list-item-subtitle>
 49 |           <v-list-item-subtitle class="text-center non-touch font-weight-light">
 50 |             Web Developer / Aspiring Chartered Accountant
 51 |           </v-list-item-subtitle>
 52 |         </v-list-item-content>
 53 |       </v-list-item>
 54 |       <v-list>
 55 |         <v-list-item-group>
 56 |           <div class="text-center text-subtitle-2">Settings</div>
 57 |           <v-divider class="ma-1"> </v-divider>
 58 |           <v-list-item @click="changeTheme">
 59 |             <v-list-item-icon>
 60 |               <v-icon>
 61 |                 {{ $vuetify.theme.dark ? 'mdi-water' : 'mdi-water-off' }}
 62 |               </v-icon>
 63 |             </v-list-item-icon>
 64 |             <v-list-item-content>
 65 |               <v-list-item-title> Dark Mode </v-list-item-title>
 66 |               <v-list-item-subtitle>
 67 |                 {{
 68 |                   $vuetify.theme.dark
 69 |                     ? 'Turn off Dark Mode'
 70 |                     : 'Turn on Dark Mode'
 71 |                 }}
 72 |               </v-list-item-subtitle>
 73 |             </v-list-item-content>
 74 |           </v-list-item>
 75 |           <v-list-item @click="colorDiag = true">
 76 |             <v-list-item-icon>
 77 |               <v-icon>mdi-palette</v-icon>
 78 |             </v-list-item-icon>
 79 |             <v-list-item-content>
 80 |               <v-list-item-title> Change Accent Color </v-list-item-title>
 81 |               <v-list-item-subtitle>
 82 |                 Set Your Preferred Accent Color
 83 |               </v-list-item-subtitle>
 84 |               <v-dialog v-model="colorDiag" max-width="350">
 85 |                 <v-card>
 86 |                   <v-card-title class="headline">
 87 |                     Choose Accent Color
 88 |                   </v-card-title>
 89 |                   <v-card-text>
 90 |                     <v-color-picker
 91 |                       show-swatches
 92 |                       hide-inputs
 93 |                       v-model="accent"
 94 |                     ></v-color-picker>
 95 |                   </v-card-text>
 96 |                   <v-card-actions>
 97 |                     <v-spacer />
 98 |                     <v-col>
 99 |                       <v-btn
100 |                         class="subtitle text-bold"
101 |                         color="primary"
102 |                         @click="changeAccent()"
103 |                         outlined
104 |                       >
105 |                         Accept
106 |                       </v-btn>
107 |                     </v-col>
108 |                     <v-col>
109 |                       <v-btn
110 |                         @click="colorDiag = !colorDiag"
111 |                         class="subtitle text-bold"
112 |                         color="primary"
113 |                       >
114 |                         Close
115 |                       </v-btn>
116 |                     </v-col>
117 |                   </v-card-actions>
118 |                 </v-card>
119 |               </v-dialog>
120 |             </v-list-item-content>
121 |           </v-list-item>
122 |           <v-divider class="ma-1"> </v-divider>
123 |         </v-list-item-group>
124 |       </v-list>
125 |       <v-list class="text-left">
126 |         <v-list-item-group>
127 |           <v-list-item
128 |             v-for="(nav, index) in navPaths"
129 |             v-bind:key="index"
130 |             @click="$router.push(nav.link)"
131 |           >
132 |             <v-list-item-icon>
133 |               <v-icon> {{ nav.icon }} </v-icon>
134 |             </v-list-item-icon>
135 |             <v-list-item-content>
136 |               <v-list-item-title>{{ nav.title }}</v-list-item-title>
137 |               <v-list-item-subtitle>{{ nav.subtitle }}</v-list-item-subtitle>
138 |             </v-list-item-content>
139 |           </v-list-item>
140 |         </v-list-item-group>
141 |       </v-list>
142 |     </v-container>
143 |   </v-navigation-drawer>
144 | </template>
145 | 
146 | <script>
147 | export default {
148 |   name: 'Nav-Drawer',
149 |   data: function () {
150 |     return {
151 |       avatar:
152 |         'https://i.ibb.co/hRxTz1g/c0ec2e063895760baa493c36d2d28387-s-400.jpg',
153 |       accent: null,
154 |       colorDiag: false,
155 |       navPaths: [
156 |         {
157 |           icon: 'mdi-home',
158 |           title: 'Home',
159 |           subtitle: 'Home',
160 |           link: '/',
161 |         },
162 |         {
163 |           icon: 'mdi-information-variant',
164 |           title: 'About',
165 |           subtitle: 'About Zyndex and this Website',
166 |           link: '/about',
167 |         },
168 |         {
169 |           icon: 'mdi-file-document',
170 |           title: 'Documentation',
171 |           subtitle: 'Read the Docs',
172 |           link: '/docs',
173 |         },
174 |         {
175 |           icon: 'mdi-page-next',
176 |           title: 'Generate Yours',
177 |           subtitle: 'Generate Your Template',
178 |           link: '/generate',
179 |         },
180 |       ],
181 |     };
182 |   },
183 |   methods: {
184 |     windowClick(url) {
185 |       window.open(url);
186 |       return;
187 |     },
188 |     changeTheme() {
189 |       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
190 |       localStorage.setItem(
191 |         'themecache',
192 |         JSON.stringify({
193 |           dark: this.$vuetify.theme.dark,
194 |           blur: this.$state.store.botSettings.navBlur,
195 |           theme: {
196 |             accent: this.$vuetify.theme.themes.light.primary,
197 |           },
198 |         }),
199 |       );
200 |       this.$state.store.botSettings.darkmode = this.$vuetify.theme.dark;
201 |     },
202 |     changeAccent() {
203 |       this.$vuetify.theme.themes.light.primary = this.accent.hex;
204 |       this.$vuetify.theme.themes.dark.primary = this.accent.hex;
205 |       localStorage.setItem(
206 |         'themecache',
207 |         JSON.stringify({
208 |           dark: this.$vuetify.theme.dark,
209 |           blur: this.$state.store.botSettings.navBlur,
210 |           theme: {
211 |             accent: this.accent.hex,
212 |           },
213 |         }),
214 |       );
215 |     },
216 |   },
217 |   mounted() {
218 |     var themecache = JSON.parse(localStorage.getItem('themecache'));
219 |     if (themecache && themecache != null) {
220 |       this.$state.store.botSettings.darkmode = themecache.dark;
221 |       this.$state.store.botSettings.navBlur = themecache.blur;
222 |       this.$vuetify.theme.dark = themecache.dark;
223 |       this.$vuetify.theme.themes.light.primary = themecache.theme.accent;
224 |       this.$vuetify.theme.themes.dark.primary = themecache.theme.accent;
225 |     }
226 |   },
227 | };
228 | </script>
229 | 
230 | <style></style>
231 | 


--------------------------------------------------------------------------------
/src/views/generate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content mx-2 px-3 my-2">
  3 |     <div class="text-center my-3 text-h6 font-weight-bold">
  4 |       Generate Your Ultimate Index Now 😜
  5 |     </div>
  6 |     <div class="columns is-multiline is-centered">
  7 |       <div class="column is-half my-2">
  8 |         <form>
  9 |           <v-card elevation="10" class="pa-4 my-2">
 10 |             <div class="text-center text-h6 ma-3">Basic Details</div>
 11 |             <div class="columns is-desktop is-multiline is-centered">
 12 |               <div class="column is-half">
 13 |                 <v-text-field
 14 |                   prepend-icon="mdi-form-textbox"
 15 |                   dense
 16 |                   autocomplete="off"
 17 |                   type="text"
 18 |                   v-model="name"
 19 |                   :persistent-hint="true"
 20 |                   :success="validations.name(name)"
 21 |                   hint="Enter the Website's Name of Your Choice "
 22 |                   label="Enter Site Name"
 23 |                   hide-details="auto"
 24 |                   outlined
 25 |                 ></v-text-field>
 26 |               </div>
 27 |               <div class="column is-half">
 28 |                 <v-select
 29 |                   prepend-icon="mdi-water-plus-outline"
 30 |                   dense
 31 |                   v-model="selTheme"
 32 |                   autocomplete="off"
 33 |                   :persistent-hint="true"
 34 |                   :success="validations.selTheme(selTheme)"
 35 |                   :items="themes"
 36 |                   item-text="value"
 37 |                   item-value="value"
 38 |                   label="Select Your Theme"
 39 |                   hint="Please See the Screenshots for Theme's Look."
 40 |                   outlined
 41 |                 ></v-select>
 42 |               </div>
 43 |               <div class="column is-half">
 44 |                 <v-select
 45 |                   prepend-icon="mdi-shape"
 46 |                   dense
 47 |                   v-model="variant"
 48 |                   autocomplete="off"
 49 |                   :persistent-hint="true"
 50 |                   :success="validations.selTheme(variant)"
 51 |                   :items="variants"
 52 |                   item-text="value"
 53 |                   item-value="value"
 54 |                   label="Select Your Theme Variant"
 55 |                   hint="Please See the Screenshots for Look."
 56 |                   outlined
 57 |                 ></v-select>
 58 |               </div>
 59 |               <div class="column is-half">
 60 |                 <v-text-field
 61 |                   prepend-icon="mdi-web"
 62 |                   dense
 63 |                   v-model="fronturl"
 64 |                   autocomplete="off"
 65 |                   type="url"
 66 |                   :persistent-hint="true"
 67 |                   :success="validations.fronturl(fronturl)"
 68 |                   hint="Enter the Frontend Website URL to which it will be Deployed. Do Not Put / at the End."
 69 |                   label="Frontend URL"
 70 |                   hide-details="auto"
 71 |                   outlined
 72 |                 ></v-text-field>
 73 |               </div>
 74 |               <div class="column is-half">
 75 |                 <v-text-field
 76 |                   prepend-icon="mdi-webhook"
 77 |                   dense
 78 |                   v-model="version"
 79 |                   autocomplete="off"
 80 |                   :persistent-hint="true"
 81 |                   :success="validations.version()"
 82 |                   hint="Latest Version will be Served. Not Fillable"
 83 |                   :disabled="true"
 84 |                   label="Version"
 85 |                   hide-details="auto"
 86 |                   outlined
 87 |                 ></v-text-field>
 88 |               </div>
 89 |               <div class="column is-half">
 90 |                 <v-text-field
 91 |                   prepend-icon="mdi-web"
 92 |                   dense
 93 |                   v-model="backurl"
 94 |                   type="url"
 95 |                   autocomplete="off"
 96 |                   :persistent-hint="true"
 97 |                   :success="validations.backurl(backurl)"
 98 |                   hint="If You have not Deployed the Backend. Please see the Docs."
 99 |                   label="Backend URL"
100 |                   hide-details="auto"
101 |                   outlined
102 |                 ></v-text-field>
103 |               </div>
104 |               <div class="column is-half">
105 |                 <v-text-field
106 |                   prepend-icon="mdi-lock-question"
107 |                   dense
108 |                   v-model="hybridpass"
109 |                   autocomplete="off"
110 |                   type="password"
111 |                   :persistent-hint="true"
112 |                   :success="validations.hybridpass(hybridpass)"
113 |                   hint="If You have Deployed the Backend and Generated Put Here or Leave it Blank"
114 |                   label="Hybrid Password"
115 |                   hide-details="auto"
116 |                   outlined
117 |                 ></v-text-field>
118 |               </div>
119 |               <div class="column is-half text-center">
120 |                 <v-btn small color="primary" @click="openAuthWindow">
121 |                   Get Authorization Code
122 |                 </v-btn>
123 |               </div>
124 |               <div class="column is-full">
125 |                 <v-text-field
126 |                   prepend-icon="mdi-passport"
127 |                   dense
128 |                   v-model="authCode"
129 |                   type="password"
130 |                   :persistent-hint="true"
131 |                   autocomplete="off"
132 |                   :success="validations.authCode(authCode)"
133 |                   hint="Enter the Auth Code that You Generated with the Above Button"
134 |                   label="Authorization Code / Refresh Token"
135 |                   hide-details="auto"
136 |                   outlined
137 |                 ></v-text-field>
138 |               </div>
139 |               <div class="column is-half">
140 |                 <v-text-field
141 |                   prepend-icon="mdi-card-account-details-outline"
142 |                   dense
143 |                   v-model="clientId"
144 |                   type="password"
145 |                   :persistent-hint="true"
146 |                   autocomplete="off"
147 |                   :success="validations.name(clientId)"
148 |                   hint="Enter Your Client ID that was given in Google developer Console"
149 |                   label="Client ID"
150 |                   hide-details="auto"
151 |                   outlined
152 |                 ></v-text-field>
153 |               </div>
154 |               <div class="column is-half">
155 |                 <v-text-field
156 |                   prepend-icon="mdi-card-account-details"
157 |                   dense
158 |                   v-model="clientSec"
159 |                   type="password"
160 |                   :persistent-hint="true"
161 |                   autocomplete="off"
162 |                   :success="validations.name(clientSec)"
163 |                   hint="Enter Your Client Secret that was given in Google developer Console"
164 |                   label="Client Secret"
165 |                   hide-details="auto"
166 |                   outlined
167 |                 ></v-text-field>
168 |               </div>
169 |               <div class="column is-full">
170 |                 <div class="text-subtitle-1 font-weight-bold">
171 |                   <v-icon>mdi-square-root-box</v-icon> Roots
172 |                 </div>
173 |                 <v-card shaped outlined class="py-2 px-2">
174 |                   <div
175 |                     v-if="roots.length < 1"
176 |                     class="text-center text-subtitle-2"
177 |                   >
178 |                     Enter Roots Information with the Below Button
179 |                   </div>
180 |                   <v-row v-for="(root, index) in roots" v-bind:key="index">
181 |                     <v-col
182 |                       v-if="roots.length > 0"
183 |                       cols="1"
184 |                       justify="center"
185 |                       class="text-subtitle-2"
186 |                     >
187 |                       {{ index + 1 }}
188 |                     </v-col>
189 |                     <v-col
190 |                       v-if="roots.length > 0"
191 |                       :cols="ismobile ? 8 : 4"
192 |                       justify="center"
193 |                       class="text-subtitle-2"
194 |                     >
195 |                       {{ root.name }}
196 |                     </v-col>
197 |                     <v-col
198 |                       v-if="roots.length > 0 && !ismobile"
199 |                       cols="4"
200 |                       justify="center"
201 |                       class="text-subtitle-2"
202 |                     >
203 |                       Protect File Link:
204 |                       {{ root.protect_file_link ? 'On' : 'Off' }}
205 |                     </v-col>
206 |                     <v-col
207 |                       v-if="roots.length > 0"
208 |                       cols="3"
209 |                       justify="center"
210 |                       class="text-center text-subtitle-2"
211 |                     >
212 |                       <v-btn small icon color="primary"
213 |                         ><v-icon>mdi-circle-edit-outline</v-icon></v-btn
214 |                       >
215 |                       <v-btn small icon color="primary"
216 |                         ><v-icon>mdi-delete</v-icon></v-btn
217 |                       >
218 |                     </v-col>
219 |                   </v-row>
220 |                   <div class="text-center text-subtitle-2">
221 |                     <v-btn color="primary"
222 |                       ><v-icon>mdi-plus</v-icon> Add Root</v-btn
223 |                     >
224 |                   </div>
225 |                 </v-card>
226 |               </div>
227 |             </div>
228 |           </v-card>
229 |           <v-card elevation="10" class="pa-4 my-2">
230 |             <div class="text-center text-h6 ma-3">Other Options</div>
231 |           </v-card>
232 |         </form>
233 |       </div>
234 |       <div class="column is-half">
235 |         <v-container fluid>
236 |           <v-row>
237 |             <v-col cols="12" :class="ismobile ? 'text-center' : 'text-right'">
238 |               <v-btn color="primary" @click="summa"
239 |                 >Copy <v-icon>mdi-content-copy</v-icon></v-btn
240 |               >
241 |             </v-col>
242 |             <v-col cols="12">
243 |               <v-textarea
244 |                 class="is-maximum"
245 |                 no-resize
246 |                 height="100%"
247 |                 :full-width="true"
248 |                 :persistent-hint="true"
249 |                 readonly
250 |                 autocomplete="off"
251 |                 :disabled="true"
252 |                 label="Your Template Goes Here"
253 |                 :filled="true"
254 |                 :outlined="true"
255 |               ></v-textarea>
256 |             </v-col>
257 |           </v-row>
258 |         </v-container>
259 |       </div>
260 |     </div>
261 |   </div>
262 | </template>
263 | <script>
264 | import { mobileChecker } from '../plugins/helpers';
265 | export default {
266 |   data: function () {
267 |     return {
268 |       themes: [
269 |         {
270 |           value: 'carnation',
271 |         },
272 |         {
273 |           value: 'curious-blue',
274 |         },
275 |         {
276 |           value: 'emerald',
277 |         },
278 |         {
279 |           value: 'ice-cold',
280 |         },
281 |         {
282 |           value: 'konifer',
283 |         },
284 |         {
285 |           value: 'netflix-red',
286 |         },
287 |         {
288 |           value: 'kournikova',
289 |         },
290 |         {
291 |           value: 'mona-lisa',
292 |         },
293 |         {
294 |           value: 'persian-rose',
295 |         },
296 |         {
297 |           value: 'purple-heart',
298 |         },
299 |         {
300 |           value: 'purple-mountains-majesty',
301 |         },
302 |         {
303 |           value: 'salmon',
304 |         },
305 |         {
306 |           value: 'selective-yellow',
307 |         },
308 |         {
309 |           value: 'shamrock',
310 |         },
311 |         {
312 |           value: 'witch-haze',
313 |         },
314 |       ],
315 |       variants: [
316 |         {
317 |           value: 'gradient',
318 |         },
319 |         {
320 |           value: 'black',
321 |         },
322 |       ],
323 |       name: '',
324 |       selTheme: '',
325 |       fronturl: '',
326 |       version: 'latest',
327 |       backurl: '',
328 |       hybridpass: '',
329 |       roots: [
330 |         {
331 |           folder_id: '12askjdbaskdbakdb',
332 |           name: 'Glory to Heaven',
333 |           protect_file_link: true,
334 |         },
335 |         {
336 |           folder_id: '12askjdbaskdbakdb',
337 |           name: 'Glory to Heaven',
338 |           protect_file_link: true,
339 |         },
340 |         {
341 |           folder_id: '12askjdbaskdbakdb',
342 |           name: 'Glory to Heaven',
343 |           protect_file_link: true,
344 |         },
345 |       ],
346 |       authCode: '',
347 |       clientId: '',
348 |       clientSec: '',
349 |       variant: '',
350 |       validations: {
351 |         name: function (input) {
352 |           if (input.length > 5) {
353 |             return true;
354 |           } else {
355 |             return false;
356 |           }
357 |         },
358 |         selTheme: function (theme) {
359 |           if (theme.length > 2) {
360 |             return true;
361 |           } else {
362 |             return false;
363 |           }
364 |         },
365 |         fronturl: function (url) {
366 |           const urlRegex = /^(https:\/\/|http:\/\/)(.+)[\S\s][^/]$/;
367 |           if (urlRegex.test(url)) {
368 |             return true;
369 |           } else {
370 |             return false;
371 |           }
372 |         },
373 |         version: function () {
374 |           return true;
375 |         },
376 |         backurl: function (url) {
377 |           const urlRegex = /^(https:\/\/|http:\/\/)(.+)[\S\s][^/]$/;
378 |           if (urlRegex.test(url)) {
379 |             return true;
380 |           } else {
381 |             return false;
382 |           }
383 |         },
384 |         hybridpass: function (hash) {
385 |           if (hash.length > 7) {
386 |             return true;
387 |           } else {
388 |             return false;
389 |           }
390 |         },
391 |         authCode: function (code) {
392 |           if (code.length > 20) {
393 |             return true;
394 |           } else {
395 |             return false;
396 |           }
397 |         },
398 |       },
399 |     };
400 |   },
401 |   methods: {
402 |     summa() {
403 |       console.log(this.roots.length);
404 |       console.log('pressed');
405 |     },
406 |     openAuthWindow() {
407 |       window.open(
408 |         'https://accounts.google.com/o/oauth2/auth?client_id=202264815644.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob&response_type=code&access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive&approval_prompt=auto',
409 |       );
410 |       return;
411 |     },
412 |   },
413 |   computed: {
414 |     ismobile() {
415 |       return mobileChecker();
416 |     },
417 |   },
418 | };
419 | </script>
420 | 


--------------------------------------------------------------------------------