├── .babelrc ├── .editorconfig ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── app.js ├── less-watch-compiler.config.json ├── models ├── chalk.js ├── db.js └── mysql.js ├── package-lock.json ├── package.json ├── public ├── images │ ├── 58062473-Hand-drawn-Namaste-lettering-Indian-greeting-Hello-in-Hindi-Stylish-cursive-handwriting-modern-calli-Stock-Vector.jpg │ ├── d65b1cab06086daf17d5f7b7a2e9b7ba_cute-watermelon-clipart-1-cute-watermelon-clipart_432-432.jpeg │ ├── error-3.svg │ ├── favicon.png │ ├── favicon │ │ ├── f.ico │ │ └── favicon.ico │ ├── glyph-instagram.jpg │ ├── images (11).png │ ├── images (12).jpg │ ├── images (4).png │ ├── large.jpg │ ├── spacecraft.jpg │ └── tumblr_nk2y2oVEjp1rn9vmdo1_500.gif ├── js │ ├── dist │ │ └── bundle.js │ └── src │ │ ├── actions │ │ └── user-actions.js │ │ ├── components │ │ ├── app-comp.js │ │ ├── error │ │ │ └── error-comp.js │ │ ├── home │ │ │ └── home-comp.js │ │ ├── others │ │ │ └── header-comp.js │ │ ├── render.js │ │ ├── user │ │ │ ├── login-comp.js │ │ │ ├── logout-comp.js │ │ │ └── signup-comp.js │ │ └── welcome │ │ │ └── welcome-comp.js │ │ ├── main.js │ │ ├── reducers │ │ └── user-reducer.js │ │ ├── store │ │ └── store.js │ │ └── utils │ │ └── functions.js └── styles │ ├── dist │ ├── defaults.css │ └── styles.css │ └── src │ ├── defaults.less │ └── styles.less ├── react-user-system.sql ├── routes ├── api-routes.js ├── main-routes.js └── user-routes.js ├── views ├── app.hbs └── layout │ └── layout.hbs ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react", 5 | "stage-0" 6 | ], 7 | "plugins": [ 8 | "react-html-attrs", 9 | "transform-class-properties", 10 | "transform-decorators-legacy", 11 | "transform-react-jsx-source", 12 | ["transform-runtime", {"polyfill": false, "regenerator": true }] 13 | ] 14 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http.editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .env 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "editor.minimap.enabled": true, 4 | "typescript.check.tscVersion": false, 5 | "editor.quickSuggestions": { 6 | "other": true, 7 | "comments": true, 8 | "strings": true 9 | }, 10 | "git.ignoreLimitWarning": true 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-User-System 2 | 3 | A single-page user-system made with MERN stack & Redux!! 4 | 5 | # Own the project 6 | 1. Open PHPMyAdmin, create a DB & import `react-user-system.sql` file. 7 | 2. Create a `.env` file and insert the following code. Replace values with yours!! 8 | 9 | ```javascript 10 | PORT=YOUR_PORT 11 | MYSQL_HOST="host" 12 | MYSQL_USER="user" 13 | MYSQL_PASSWORD="password" 14 | MYSQL_DATABASE="db" 15 | SESSION_SECRET_LETTER="anything-secret" 16 | ``` 17 | 18 | 3. Enjoy!! -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config() 2 | 3 | // INSTALLED PACKAGES 4 | const 5 | express = require('express'), 6 | port = process.env.PORT, 7 | hbs = require('express-handlebars'), 8 | path = require('path'), 9 | logger = require('morgan'), 10 | favicon = require('serve-favicon'), 11 | bodyParser = require('body-parser'), 12 | validator = require('express-validator'), 13 | session = require('client-sessions'), 14 | app = express() 15 | 16 | // REQUIRING PROJECT FILES 17 | const 18 | chalk = require('./models/chalk'), 19 | mRoutes = require('./routes/main-routes'), 20 | uRoutes = require('./routes/user-routes'), 21 | apiRoutes = require('./routes/api-routes') 22 | 23 | // VIEW ENGINE 24 | app.engine('hbs', hbs({ 25 | extname: 'hbs', 26 | defaultLayout: 'layout', 27 | layoutsDir: path.join(__dirname+'/views/layout/') 28 | })) 29 | app.set('view engine', 'hbs') 30 | 31 | // MIDDLEWARES 32 | app.use(favicon(path.join(__dirname+'/public/images/favicon/favicon.ico'))) 33 | // app.use(logger('dev')) 34 | app.use(bodyParser.json()) 35 | app.use(bodyParser.urlencoded({ extended: false })) 36 | app.use(validator()) 37 | app.use(session({ 38 | cookieName: "session", 39 | secret: process.env.SESSION_SECRET_LETTER, 40 | duration: 30 * 60 * 1000, 41 | activeDuration: 5 * 60 * 1000 42 | })) 43 | app.use(express.static(__dirname+'/public/')) 44 | 45 | // ROUTE MIDDLEWARES 46 | app.use('/', mRoutes) 47 | app.use('/user', uRoutes) 48 | app.use('/api', apiRoutes) 49 | 50 | app.listen(port, () => chalk.s(`App running..`) ) 51 | -------------------------------------------------------------------------------- /less-watch-compiler.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "allowedExtensions":[".less"], 3 | "minified": false, 4 | "sourceMap": false, 5 | "watchFolder": "public/styles/src", 6 | "outputFolder": "public/styles/dist" 7 | } -------------------------------------------------------------------------------- /models/chalk.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk') 2 | 3 | const 4 | error = chalk.bgRed.bold, 5 | success = chalk.blue.bold, 6 | s = mssg => console.log(success(mssg)), 7 | e = mssg => console.log(error(mssg)) 8 | 9 | module.exports = { 10 | error, 11 | success, 12 | s, 13 | e 14 | } -------------------------------------------------------------------------------- /models/db.js: -------------------------------------------------------------------------------- 1 | const 2 | db = require('./mysql'), 3 | util = require('util'), 4 | bcrypt = require('bcrypt-nodejs') 5 | 6 | const query = (q, data) => { 7 | return new Promise((resolve, reject) => { 8 | db.query(q, data, (err, res) => { 9 | err ? reject(err) : resolve(res) 10 | }) 11 | }) 12 | } 13 | 14 | const createUser = user => { 15 | return new Promise((resolve, reject) => { 16 | bcrypt.hash(user.password, null, null, (error, hash) => { 17 | user.password = hash 18 | db.query('INSERT INTO users SET ?', user, (err, res) => { 19 | err ? reject(err) : resolve(res) 20 | }) 21 | }) 22 | }) 23 | } 24 | 25 | const comparePassword = (password, hash) => { 26 | return new Promise((resolve, reject) => { 27 | bcrypt.compare(password, hash, (err, res) => { 28 | err ? reject(err) : resolve(res) 29 | }) 30 | }) 31 | } 32 | 33 | module.exports = { 34 | query, 35 | createUser, 36 | comparePassword 37 | } -------------------------------------------------------------------------------- /models/mysql.js: -------------------------------------------------------------------------------- 1 | const 2 | mysql = require('mysql'), 3 | chalk = require('./chalk') 4 | 5 | const db = mysql.createConnection({ 6 | host: process.env.MYSQL_HOST, 7 | user: process.env.MYSQL_USER, 8 | password: process.env.MYSQL_PASSWORD, 9 | database: process.env.MYSQL_DATABASE, 10 | charset: "utf8mb4" 11 | }) 12 | 13 | db.connect(err => { 14 | if (err) { 15 | chalk.e(err) 16 | } 17 | }) 18 | 19 | module.exports = db -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactjs-user-system", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "nodemon app.js", 8 | "dev": "webpack -d --watch", 9 | "prod": "webpack -p --watch", 10 | "less": "less-watch-compiler", 11 | "public": "concurrently \"npm run dev\" \"npm run less\"" 12 | }, 13 | "author": "takkar ", 14 | "license": "ISC", 15 | "dependencies": { 16 | "animate-components": "^1.4.2", 17 | "aphrodite": "^1.2.1", 18 | "axios": "^0.16.1", 19 | "bcrypt-nodejs": "^0.0.3", 20 | "bluebird": "^3.5.0", 21 | "body-parser": "^1.17.2", 22 | "chalk": "^1.1.3", 23 | "client-sessions": "^0.8.0", 24 | "concurrently": "^3.5.0", 25 | "dotenv": "^4.0.0", 26 | "express": "^4.15.2", 27 | "express-handlebars": "^3.0.0", 28 | "express-validator": "^3.2.0", 29 | "gm": "^1.23.0", 30 | "handy-copy": "^1.0.6", 31 | "handy-image-processor": "^1.0.1", 32 | "handy-notification": "^1.0.23", 33 | "handy-timeago": "^1.0.1", 34 | "handy-tooltip": "^1.0.10", 35 | "jquery": "^3.2.1", 36 | "lodash": "^4.17.4", 37 | "morgan": "^1.8.2", 38 | "multer": "^1.3.0", 39 | "mysql": "^2.13.0", 40 | "nodemailer": "^4.0.1", 41 | "prop-types": "^15.5.8", 42 | "react": "^15.5.4", 43 | "react-custom-scrollbars": "^4.1.2", 44 | "react-dom": "^15.5.4", 45 | "react-helmet": "^5.1.3", 46 | "react-redux": "^5.0.4", 47 | "react-router": "^4.1.2", 48 | "react-router-dom": "^4.1.2", 49 | "react-transition-group": "^2.2.0", 50 | "redux": "^3.6.0", 51 | "redux-logger": "^3.0.1", 52 | "redux-promise-middleware": "4.2.1", 53 | "redux-thunk": "^2.2.0", 54 | "serve-favicon": "^2.4.3", 55 | "uuid": "^3.0.1" 56 | }, 57 | "devDependencies": { 58 | "babel-core": "^6.24.1", 59 | "babel-loader": "^7.0.0", 60 | "babel-plugin-react-html-attrs": "^2.0.0", 61 | "babel-plugin-transform-class-properties": "^6.24.1", 62 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 63 | "babel-plugin-transform-react-jsx-source": "^6.22.0", 64 | "babel-plugin-transform-runtime": "^6.23.0", 65 | "babel-preset-env": "^1.4.0", 66 | "babel-preset-es2015": "^6.24.1", 67 | "babel-preset-react": "^6.24.1", 68 | "babel-preset-stage-0": "^6.24.1", 69 | "nodemon": "^1.11.0", 70 | "webpack": "^2.4.1", 71 | "yarn": "^0.24.5" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /public/images/58062473-Hand-drawn-Namaste-lettering-Indian-greeting-Hello-in-Hindi-Stylish-cursive-handwriting-modern-calli-Stock-Vector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/58062473-Hand-drawn-Namaste-lettering-Indian-greeting-Hello-in-Hindi-Stylish-cursive-handwriting-modern-calli-Stock-Vector.jpg -------------------------------------------------------------------------------- /public/images/d65b1cab06086daf17d5f7b7a2e9b7ba_cute-watermelon-clipart-1-cute-watermelon-clipart_432-432.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/d65b1cab06086daf17d5f7b7a2e9b7ba_cute-watermelon-clipart-1-cute-watermelon-clipart_432-432.jpeg -------------------------------------------------------------------------------- /public/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/favicon.png -------------------------------------------------------------------------------- /public/images/favicon/f.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/favicon/f.ico -------------------------------------------------------------------------------- /public/images/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/favicon/favicon.ico -------------------------------------------------------------------------------- /public/images/glyph-instagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/glyph-instagram.jpg -------------------------------------------------------------------------------- /public/images/images (11).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/images (11).png -------------------------------------------------------------------------------- /public/images/images (12).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/images (12).jpg -------------------------------------------------------------------------------- /public/images/images (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/images (4).png -------------------------------------------------------------------------------- /public/images/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/large.jpg -------------------------------------------------------------------------------- /public/images/spacecraft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/spacecraft.jpg -------------------------------------------------------------------------------- /public/images/tumblr_nk2y2oVEjp1rn9vmdo1_500.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/React-User-System/52dbb984d09d4a8683f49c668cf5117176105c0f/public/images/tumblr_nk2y2oVEjp1rn9vmdo1_500.gif -------------------------------------------------------------------------------- /public/js/src/actions/user-actions.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const getSession = () => { 4 | return dispatch => { 5 | axios.post('/api/get-session') 6 | .then(s => dispatch({ type: "GET_SESSION", payload: s.data })) 7 | .catch(e => console.log(e)) 8 | } 9 | } 10 | 11 | const login = session => { 12 | return { 13 | type: "LOGIN", 14 | payload: session 15 | } 16 | } 17 | 18 | const logout = () => { 19 | return dispatch => { 20 | axios.post('/user/logout') 21 | .then(s => dispatch({ type: "LOGOUT", payload: s.data }) ) 22 | .catch(e => console.log(e) ) 23 | } 24 | } 25 | 26 | module.exports = { 27 | getSession, 28 | login, 29 | logout 30 | } -------------------------------------------------------------------------------- /public/js/src/components/app-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 3 | import { connect } from 'react-redux' 4 | 5 | import Header from './others/header-comp' 6 | import Home from './home/home-comp' 7 | import Welcome from './welcome/welcome-comp' 8 | import Signup from './user/signup-comp' 9 | import Login from './user/login-comp' 10 | import Logout from './user/logout-comp' 11 | import Error from './error/error-comp' 12 | 13 | @connect(store => { 14 | return { 15 | user: store.user 16 | } 17 | }) 18 | 19 | export default class App extends React.Component{ 20 | render(){ 21 | return( 22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | ) 39 | } 40 | } -------------------------------------------------------------------------------- /public/js/src/components/error/error-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Link } from 'react-router-dom' 4 | import { Helmet } from 'react-helmet' 5 | import { FadeIn } from 'animate-components' 6 | 7 | export default class Error extends React.Component { 8 | render() { 9 | let { params: { what } } = this.props.match 10 | 11 | if (what == "notfound") { 12 | title = "User not found" 13 | desc = "user" 14 | } else if (what == "note_notfound") { 15 | title = "Note not found" 16 | desc = "note" 17 | } else { 18 | title = "Error" 19 | desc = "page" 20 | } 21 | 22 | return ( 23 |
24 | 25 | Oops! {title} • Notes App 26 | 27 | 28 |
29 |
30 | Oops, the {desc} you're looking for does not exist!! 31 |
32 | 33 |
34 | Try going to homepage 35 |
36 |
37 | 38 |
39 | ) 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/js/src/components/home/home-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Helmet } from 'react-helmet' 4 | import { Link, Redirect } from 'react-router-dom' 5 | import { connect } from 'react-redux' 6 | import { FadeIn } from 'animate-components' 7 | import Timeago from 'handy-timeago' 8 | 9 | import * as fn from '../../utils/functions' 10 | import * as user_action from '../../actions/user-actions' 11 | 12 | @connect(store => { 13 | return { user: store.user } 14 | }) 15 | 16 | export default class Home extends React.Component{ 17 | 18 | componentDidMount = () => this.props.dispatch(user_action.getSession()) 19 | 20 | render(){ 21 | let 22 | { user: { loggedIn, session: { username, email, joined } } } = this.props, 23 | j = Timeago(joined) 24 | 25 | return ( 26 |
27 | { !loggedIn ? : null } 28 | 29 | Hello!! How are you?? 30 | 31 | 32 |

{`Hello to this adventurous world from ${username} having the e-mail address of ${email} who joined this app ${j}`}

33 | 34 |
35 | ) 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/js/src/components/others/header-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { NavLink } from 'react-router-dom' 4 | import { connect } from 'react-redux' 5 | 6 | export default class Header extends React.Component { 7 | render() { 8 | let { user: { loggedIn } } = this.props 9 | 10 | return ( 11 |
12 | { 13 | loggedIn ? 14 |
15 | Home 16 |
17 | : 18 |
19 | Home 20 | Signup 21 | Login 22 |
23 | } 24 | { 25 | loggedIn ? 26 |
27 | Logout 28 |
29 | : 30 | null 31 | } 32 |
33 | ) 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/js/src/components/render.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './app-comp' 4 | import { Provider } from 'react-redux' 5 | import store from '../store/store' 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ) 13 | -------------------------------------------------------------------------------- /public/js/src/components/user/login-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Helmet } from 'react-helmet' 4 | import { Link, Redirect } from 'react-router-dom' 5 | import { connect } from 'react-redux' 6 | import { FadeIn } from 'animate-components' 7 | 8 | import * as fn from '../../utils/functions' 9 | import * as user_action from '../../actions/user-actions' 10 | 11 | @connect(store => { 12 | return { 13 | user: store.user 14 | } 15 | }) 16 | 17 | export default class Login extends React.Component { 18 | 19 | componentDidMount = () => { 20 | $('.l_username').focus() 21 | this.props.dispatch(user_action.getSession()) 22 | } 23 | 24 | state = { 25 | username: "", 26 | password: "", 27 | redirect: false 28 | } 29 | 30 | update_ = (e, of) => { 31 | let v = e.target.value 32 | switch (of) { 33 | case "username": 34 | this.setState({ username: v }) 35 | break; 36 | case "password": 37 | this.setState({ password: v }) 38 | break; 39 | } 40 | } 41 | 42 | login = e => { 43 | e.preventDefault() 44 | let 45 | username = $('.l_username').val(), 46 | password = $('.l_password').val() 47 | 48 | if (!username || !password) { 49 | Notify({ value: "Values are missing!" }) 50 | } else { 51 | 52 | let loginOpt = { 53 | of: "login", 54 | dispatch: this.props.dispatch, 55 | data: { 56 | username: $('.l_username').val(), 57 | password: $('.l_password').val() 58 | }, 59 | btn: $('.l_submit'), 60 | url: "/user/login", 61 | done: () => this.setState({ redirect: true }), 62 | defBtnValue: "Login to continue", 63 | } 64 | fn.commonLogin(loginOpt) 65 | 66 | } 67 | } 68 | 69 | render() { 70 | let 71 | { username, password, redirect } = this.state, 72 | { user: { loggedIn } } = this.props 73 | 74 | return ( 75 |
76 | { (redirect || loggedIn) ? : null } 77 | 78 | Login To Continue!! 79 | 80 | 81 |
82 |
83 | Need an account? 84 |
85 |
86 |
87 | Get started again 88 |
89 | 113 |
114 |
115 | 116 |
117 | ) 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /public/js/src/components/user/logout-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Helmet } from 'react-helmet' 4 | import { Link, Redirect } from 'react-router-dom' 5 | import { connect } from 'react-redux' 6 | import { FadeIn } from 'animate-components' 7 | 8 | import * as fn from '../../utils/functions' 9 | import * as user_action from '../../actions/user-actions' 10 | 11 | @connect(store => { 12 | return { 13 | user: store.user 14 | } 15 | }) 16 | 17 | export default class Logout extends React.Component{ 18 | 19 | componentWillMount = () => { 20 | let { dispatch } = this.props 21 | dispatch(user_action.getSession()) 22 | dispatch(user_action.logout()) 23 | } 24 | 25 | render(){ 26 | let { user: { loggedIn } } = this.props 27 | 28 | return( 29 |
30 | { !loggedIn ? : null } 31 | 32 | Logging you out!! 33 | 34 | 35 |

Logging you out..!!

36 | 37 |
38 | ) 39 | } 40 | } -------------------------------------------------------------------------------- /public/js/src/components/user/signup-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Helmet } from 'react-helmet' 4 | import { Link, Redirect } from 'react-router-dom' 5 | import { FadeIn } from 'animate-components' 6 | import { connect } from 'react-redux' 7 | import Notify from 'handy-notification' 8 | 9 | import * as fn from '../../utils/functions' 10 | import * as user_action from '../../actions/user-actions' 11 | 12 | @connect(store => { 13 | return { user: store.user } 14 | }) 15 | 16 | export default class Signup extends React.Component{ 17 | 18 | state = { 19 | username: '', 20 | email: '', 21 | password: '', 22 | password_again: '', 23 | redirect: false 24 | } 25 | 26 | componentDidMount = () => { 27 | $('.r_username').focus() 28 | this.props.dispatch(user_action.getSession()) 29 | } 30 | 31 | update_ = (e, of) => { 32 | let v = e.target.value 33 | switch (of) { 34 | case "username": 35 | this.setState({ username: v }) 36 | break; 37 | case "email": 38 | this.setState({ email: v }) 39 | break; 40 | case "password": 41 | this.setState({ password: v }) 42 | break; 43 | case "password_again": 44 | this.setState({ password_again: v }) 45 | break; 46 | } 47 | } 48 | 49 | signup = e => { 50 | e.preventDefault() 51 | let 52 | username = $('.r_username').val(), 53 | email = $('.r_email').val(), 54 | password = $('.r_password').val(), 55 | password_again = $('.r_password_again').val() 56 | 57 | if (!username || !email || !password || !password_again) { 58 | Notify({ value: "Values are missing!" }) 59 | } else if (password != password_again) { 60 | Notify({ value: "Passwords don't match!" }) 61 | } else { 62 | 63 | let signupOpt = { 64 | of: "signup", 65 | data: { 66 | username, 67 | email, 68 | password, 69 | password_again 70 | }, 71 | btn: $('.r_submit'), 72 | url: "/user/signup", 73 | done: () => this.setState({ redirect: true }), 74 | defBtnValue: "Sign up for free", 75 | } 76 | fn.commonLogin(signupOpt) 77 | 78 | } 79 | } 80 | 81 | render(){ 82 | let 83 | { username, email, password, password_again, redirect } = this.state, 84 | { user: { loggedIn } } = this.props 85 | 86 | return( 87 |
88 | { redirect ? : null } 89 | { loggedIn ? : null } 90 | 91 | Signup To Continue!! 92 | 93 | 94 |
95 |
96 | Already have an account? 97 |
98 |
99 |
100 | Get started now and let the fun begins 101 |
102 |
103 | this.update_(e, "username")} 114 | /> 115 | this.update_(e, "email")} 125 | /> 126 | this.update_(e, "password")} 134 | /> 135 | this.update_(e, "password_again")} 143 | /> 144 | 145 |
146 |
147 |
148 | 149 |
150 | ) 151 | } 152 | } -------------------------------------------------------------------------------- /public/js/src/components/welcome/welcome-comp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import $ from 'jquery' 3 | import { Helmet } from 'react-helmet' 4 | import { Link, Redirect } from 'react-router-dom' 5 | import { connect } from 'react-redux' 6 | import { FadeIn } from 'animate-components' 7 | 8 | import * as fn from '../../utils/functions' 9 | import * as user_action from '../../actions/user-actions' 10 | 11 | @connect(store => { 12 | return { user: store.user } 13 | }) 14 | 15 | export default class Welcome extends React.Component { 16 | 17 | componentDidMount = () => this.props.dispatch(user_action.getSession()) 18 | 19 | render() { 20 | let { user: { loggedIn } } = this.props 21 | 22 | return ( 23 |
24 | { loggedIn ? : null } 25 | 26 | Welcome!! 27 | 28 | 29 |

You're welcome, Login to continue!!

30 | 31 |
32 | ) 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/js/src/main.js: -------------------------------------------------------------------------------- 1 | import './components/render' 2 | -------------------------------------------------------------------------------- /public/js/src/reducers/user-reducer.js: -------------------------------------------------------------------------------- 1 | const user_default = { 2 | loggedIn: false, 3 | session: { 4 | id: null, 5 | username: null, 6 | email: null, 7 | joined: null 8 | } 9 | } 10 | 11 | const user = (state=user_default, action) => { 12 | let py = action.payload 13 | switch (action.type) { 14 | case "GET_SESSION": 15 | return { ...state, loggedIn: py.loggedIn, session: py.session } 16 | break 17 | 18 | case "LOGIN": 19 | return { ...state, loggedIn: py.loggedIn, session: py.session } 20 | break 21 | 22 | case "LOGOUT": 23 | return { ...state, loggedIn: false, session: {} } 24 | break 25 | } 26 | return state 27 | } 28 | 29 | export default user -------------------------------------------------------------------------------- /public/js/src/store/store.js: -------------------------------------------------------------------------------- 1 | import { applyMiddleware, combineReducers, createStore } from 'redux' 2 | import thunk from 'redux-thunk' 3 | import logger from 'redux-logger' 4 | import promise from 'redux-promise-middleware' 5 | 6 | import user from '../reducers/user-reducer' 7 | 8 | const reducers = combineReducers({ 9 | user 10 | }) 11 | 12 | const middlewares = applyMiddleware(promise(), thunk, logger) 13 | 14 | const store = createStore( 15 | reducers, 16 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), 17 | middlewares 18 | ) 19 | 20 | export default store -------------------------------------------------------------------------------- /public/js/src/utils/functions.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery' 2 | import axios from 'axios' 3 | import Notify from 'handy-notification' 4 | import P from 'bluebird' 5 | import * as user_action from '../actions/user-actions' 6 | 7 | // FUNCTION FOR SHORTENING 8 | const shortener = (elem, length) => { 9 | let parse = parseInt(length), 10 | len = elem.length 11 | if (!parse) { return; } 12 | return (len >= parse) ? `${elem.substr(0, length - 2)}..` : (len < parse) ? elem : null 13 | } 14 | 15 | // FUNCTION TO TOGGLE 16 | const toggle = el => { 17 | let style = el.style.display 18 | style === "none" ? el.style.display = "block" : el.style.display = "none" 19 | } 20 | 21 | // FUNCTION TO CAPITALIZE FIRST LETTER OF A WORD 22 | const c_first = str => str.charAt(0).toUpperCase() + str.substr(1) 23 | 24 | // TO REMOVE LINE OF LAST ELEMENT 25 | const last_line_remover = () => { 26 | $('.modal_main').children().eq($('.display_content').children().length - 1).find('hr').remove() 27 | } 28 | 29 | // FUNCTION FOR GOING BACK 30 | const back = (e, history) => { 31 | e.preventDefault() 32 | history.goBack() 33 | } 34 | 35 | // FUNCTION FOR COMMON LOGIN 36 | const commonLogin = options => { 37 | let 38 | { of, dispatch, data, btn, url, done, defBtnValue } = options, 39 | overlay2 = $('.overlay-2') 40 | 41 | btn 42 | .attr('value', 'Please wait..') 43 | .addClass('a_disabled') 44 | 45 | $.ajax({ 46 | url, 47 | data, 48 | method: "POST", 49 | dataType: "JSON", 50 | success: (data) => { 51 | let { mssg, success, loggedIn, session } = data 52 | console.log(data) 53 | if (success) { 54 | of == "login" ? dispatch(user_action.login({ loggedIn, session })) : null 55 | Notify({ value: mssg, done: () => done() }) 56 | btn.attr('value', 'Redirecting..') 57 | } else { 58 | Notify({ value: mssg }) 59 | btn 60 | .attr('value', defBtnValue) 61 | .removeClass('a_disabled') 62 | } 63 | btn.blur() 64 | } 65 | }) 66 | } 67 | 68 | module.exports = { 69 | shortener, 70 | toggle, 71 | c_first, 72 | last_line_remover, 73 | back, 74 | commonLogin 75 | } 76 | -------------------------------------------------------------------------------- /public/styles/dist/defaults.css: -------------------------------------------------------------------------------- 1 | .modal-shadow { 2 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 3 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 4 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 5 | } 6 | * { 7 | padding: 0px; 8 | margin: 0px; 9 | } 10 | body { 11 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 12 | background: #fbfbfb; 13 | font-size: 13px; 14 | color: #3d464d; 15 | font-weight: normal; 16 | } 17 | a { 18 | text-decoration: none; 19 | color: #2895F1; 20 | outline: none; 21 | } 22 | .a_disabled { 23 | cursor: not-allowed !important; 24 | pointer-events: none !important; 25 | background: #6ab9e8 !important; 26 | } 27 | .sec_btn_disabled { 28 | cursor: not-allowed !important; 29 | pointer-events: none !important; 30 | color: #d8c3c3 !important; 31 | } 32 | input[type="range"] { 33 | outline: none; 34 | } 35 | input[type=range]::-moz-focus-outer { 36 | border: 0; 37 | } 38 | i { 39 | pointer-events: none; 40 | } 41 | hr { 42 | border: 0; 43 | border-top: 1px solid #c1c7cd; 44 | } 45 | li { 46 | list-style: none; 47 | } 48 | input[type="text"], 49 | input[type="email"], 50 | input[type="password"], 51 | textarea { 52 | border: 1px solid #eee; 53 | border-radius: 4px; 54 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 55 | color: #0b867a; 56 | outline: none; 57 | padding: 5px 5px; 58 | } 59 | input[type="submit"]::-moz-focus-inner, 60 | input[type="button"]::-moz-focus-inner { 61 | padding: 0 !important; 62 | border: 0 none !important; 63 | } 64 | textarea { 65 | word-break: break-all; 66 | font-size: 13px; 67 | } 68 | input[type="text"]:focus, 69 | input[type="password"]:focus, 70 | input[type="email"]:focus, 71 | textarea:focus { 72 | border: 1px solid #56b4ef !important; 73 | box-shadow: 0px 0px 5px 1px #c8def0; 74 | /*-webkit-box-shadow: 0px 0px 5px 0px #bed3dc; 75 | -moz-box-shadow: 0px 0px 5px 0px #bed3dc;*/ 76 | } 77 | input[type="submit"], 78 | input[type="button"], 79 | .pri_btn { 80 | font-weight: 600; 81 | background: #1b9be9; 82 | border: 1px solid #1b9be9; 83 | /*#3e91b3*/ 84 | color: #fff; 85 | border-radius: 3px; 86 | cursor: pointer; 87 | outline: none; 88 | } 89 | input[type="submit"]:hover, 90 | input[type="button"]:hover, 91 | .pri_btn:hover { 92 | opacity: .9; 93 | } 94 | .sec_btn { 95 | border: 1px solid #eee; 96 | background: #fbfbfb; 97 | color: #1b2733; 98 | border-radius: 3px; 99 | cursor: pointer; 100 | font-weight: 600; 101 | outline: none; 102 | } 103 | .sec_btn:hover { 104 | color: #1b2733; 105 | background-color: #fff7f7; 106 | } 107 | .sec_btn:focus { 108 | color: #1b2733; 109 | /*background-color: #fff7f7;*/ 110 | background: #f7ebeb; 111 | } 112 | .tir_btn { 113 | border: 1px solid #eee; 114 | background: #fff; 115 | color: #1b2733; 116 | border-radius: 3px; 117 | cursor: pointer; 118 | outline: none; 119 | } 120 | .tir_btn:hover { 121 | color: #1b2733; 122 | background-color: #ebf4fd; 123 | } 124 | .tir_btn:focus { 125 | color: #1b2733; 126 | background-color: #ebf4fd; 127 | } 128 | .a_pri { 129 | color: #2895F1; 130 | } 131 | input[type="submit"]:focus, 132 | input[type="button"]:focus, 133 | .pri_btn:focus { 134 | background: #198bd0; 135 | } 136 | input[type="submit"]:disabled, 137 | input[type="button"]:disabled { 138 | background: #6ab9e8 !important; 139 | cursor: auto !important; 140 | } 141 | input[type="submit"][disabled]:hover, 142 | input[type="button"][disabled]:hover { 143 | opacity: 1 !important; 144 | } 145 | .options { 146 | position: absolute; 147 | padding: 7px 6px; 148 | background: white; 149 | box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 150 | -webkit-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 151 | -moz-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 152 | border-radius: 3px; 153 | z-index: 1; 154 | } 155 | .options ul { 156 | background: white; 157 | } 158 | .options li { 159 | background: white; 160 | } 161 | .options a, 162 | .options label { 163 | background: white; 164 | font-size: 14px; 165 | color: #66757f; 166 | padding: 4px 12px 4px 8px; 167 | width: inherit; 168 | display: block; 169 | border-radius: 2px; 170 | } 171 | .options a:hover, 172 | .options label:hover { 173 | /*background: @second_border;*/ 174 | background: #54BBFF; 175 | /*background: #f4f4f4;*/ 176 | /*color: #1b2733;*/ 177 | color: white; 178 | } 179 | .options li.o_divider { 180 | margin: 5px 0px 5px 0px; 181 | /*display: none;*/ 182 | } 183 | .options .o_li > .menu_divider { 184 | border-top-color: #e6e8eb; 185 | } 186 | .inst { 187 | border: 1px solid #f7f5f5; 188 | color: #1b2733; 189 | background: white; 190 | /*cursor: pointer;*/ 191 | border-radius: 4px; 192 | } 193 | .inst:hover { 194 | /*background: #fffefe;*/ 195 | } 196 | .no_focus { 197 | font-weight: 600; 198 | background: #1b9be9; 199 | border: 1px solid #1b9be9; 200 | color: #fff; 201 | border-radius: 3px; 202 | cursor: pointer; 203 | outline: none; 204 | } 205 | .no_focus:hover { 206 | opacity: .9; 207 | } 208 | input[type="range"] { 209 | -webkit-appearance: none; 210 | width: 100%; 211 | border-radius: 3px; 212 | cursor: pointer; 213 | } 214 | input[type="range"]:focus { 215 | outline: none; 216 | } 217 | input[type="range"]::-webkit-slider-runnable-track { 218 | width: 100%; 219 | background: rgba(255, 255, 255, 0.5); 220 | background: #fff; 221 | /*background: lightskyblue;*/ 222 | cursor: pointer; 223 | border-radius: 3px; 224 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 225 | height: 6px; 226 | } 227 | input[type="range"]::-webkit-slider-thumb { 228 | width: 15px; 229 | height: 15px; 230 | border-radius: 50%; 231 | background: #4080ff; 232 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 233 | margin-top: -5px; 234 | margin-left: px; 235 | cursor: pointer; 236 | -webkit-appearance: none; 237 | border: 1px solid #4080ff; 238 | } 239 | input[type="range"]:hover::-webkit-slider-thumb { 240 | transform: scale(1.2); 241 | -webkit-transform: scale(1.2); 242 | } 243 | input[type="range"]::-moz-range-track { 244 | width: 100%; 245 | background: #fff; 246 | /*background: lightskyblue;*/ 247 | cursor: pointer; 248 | border-radius: 3px; 249 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 250 | height: 6px; 251 | } 252 | input[type="range"]::-moz-range-thumb { 253 | width: 14px; 254 | height: 14px; 255 | border-radius: 50%; 256 | border: 1px solid #4080ff; 257 | background: #4080ff; 258 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 259 | cursor: pointer; 260 | } 261 | input[type="range"]:hover::-moz-range-thumb { 262 | transform: scale(1.2); 263 | -moz-transform: scale(1.2); 264 | } 265 | input[type="range"]::-ms-track { 266 | width: 100%; 267 | background: transparent; 268 | border-color: transparent; 269 | /*border-width: 10px 0px 10px 0px;*/ 270 | color: transparent; 271 | height: 6px; 272 | border-radius: 3px; 273 | z-index: 2; 274 | position: relative; 275 | border: 1px solid; 276 | /*border: 1px solid #ecf0f1;*/ 277 | /*margin-top: -10px;*/ 278 | } 279 | input[type="range"]::-ms-fill-lower { 280 | background: lightskyblue; 281 | border-radius: 3px; 282 | } 283 | input[type="range"]::-ms-fill-upper { 284 | background: #ecf0f1; 285 | border-color: #ecf0f1 !important; 286 | border-radius: 3px; 287 | } 288 | input[type="range"]::-ms-thumb { 289 | width: 12px; 290 | height: 12px; 291 | border-radius: 50%; 292 | background: #4080ff; 293 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 294 | margin-top: 0px; 295 | cursor: pointer; 296 | border: 1px solid #4080ff; 297 | } 298 | input[type="range"]:focus::-ms-thumb { 299 | transform: scale(1.2); 300 | -webkit-transform: scale(1.2); 301 | -moz-transform: scale(1.2); 302 | } 303 | input[type="file"] { 304 | width: 0.1px; 305 | height: 0.1px; 306 | opacity: 0; 307 | overflow: hidden; 308 | position: absolute; 309 | z-index: -2; 310 | } 311 | .overlay { 312 | position: fixed; 313 | width: 100%; 314 | height: 100%; 315 | top: 0px; 316 | left: 0px; 317 | right: 0px; 318 | bottom: 0px; 319 | background: #000; 320 | opacity: 0.5 !important; 321 | z-index: 2; 322 | } 323 | .hidden_overlay { 324 | position: fixed; 325 | width: 100%; 326 | height: 100%; 327 | top: 0px; 328 | left: 0px; 329 | right: 0px; 330 | bottom: 0px; 331 | background: transparent !important; 332 | z-index: 2; 333 | } 334 | .overlay-2 { 335 | position: fixed; 336 | width: 100%; 337 | height: 100%; 338 | top: 0px; 339 | left: 0px; 340 | right: 0px; 341 | bottom: 0px; 342 | background: transparent; 343 | z-index: 20; 344 | display: none; 345 | } 346 | select { 347 | font-size: 14px; 348 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 349 | border-radius: 3px; 350 | border: 1px solid #eee; 351 | cursor: pointer; 352 | outline: none; 353 | /*-moz-appearance: none;*/ 354 | /*-webkit-appearance: none;*/ 355 | } 356 | select:focus { 357 | border-color: #56b4ef; 358 | box-shadow: 0px 0px 5px 1px #c8def0; 359 | } 360 | .spinner { 361 | width: 0px; 362 | height: 0px; 363 | background: #eee; 364 | border-radius: 50%; 365 | position: absolute; 366 | display: inline-block; 367 | left: 177px; 368 | top: 20px; 369 | } 370 | .spinner span { 371 | display: block; 372 | height: 10px; 373 | width: 10px; 374 | background: #ddd; 375 | border-radius: 50%; 376 | position: absolute; 377 | top: 0px; 378 | transition: all 0.1s ease-in-out; 379 | } 380 | .spinner span:nth-child(1) { 381 | left: -18px; 382 | animation: bounce 1s ease-in-out infinite; 383 | } 384 | .spinner span:nth-child(2) { 385 | animation: bounce 1s ease-in-out 0.33s infinite; 386 | } 387 | .spinner span:nth-child(3) { 388 | left: 18px; 389 | animation: bounce 1s ease-in-out 0.66s infinite; 390 | } 391 | @keyframes bounce { 392 | 0%, 393 | 75%, 394 | 100% { 395 | transform: translateY(0px); 396 | } 397 | 25% { 398 | transform: translateY(-10px); 399 | } 400 | } 401 | .inst_checkbox { 402 | display: none; 403 | } 404 | .inst_checkbox + label:before { 405 | content: "\f096"; 406 | font-family: "FontAwesome"; 407 | speak: none; 408 | font-weight: normal; 409 | font-style: normal; 410 | font-variant: normal; 411 | text-transform: normal; 412 | line-height: 1; 413 | -webkit-font-smoothing: antialiased; 414 | } 415 | .inst_checkbox:checked + label::before { 416 | content: "\f14a"; 417 | color: #06a3e9; 418 | animation: tick 1s ease-in; 419 | } 420 | .inst_checkbox:disabled + label { 421 | color: #aaa; 422 | } 423 | .inst_checkbox:disabled + label::before { 424 | content: "\f0c8"; 425 | color: #ccc; 426 | } 427 | #hoverdiv { 428 | position: absolute; 429 | background: #333; 430 | padding: 4px 14px; 431 | color: white; 432 | font-size: 13px; 433 | border-radius: 3px; 434 | top: 0px; 435 | left: 0px; 436 | display: none; 437 | z-index: 4; 438 | } 439 | .handy-notify { 440 | position: fixed; 441 | background: #333; 442 | left: 2%; 443 | /*transform: translate(-50%, -50%);*/ 444 | color: #fff; 445 | border-radius: 3px; 446 | padding: 12px 80px 12px 25px; 447 | /*padding: 10px 30px;*/ 448 | font-size: 15px; 449 | cursor: pointer; 450 | text-align: left; 451 | z-index: 3; 452 | top: 105%; 453 | } 454 | .handy-tooltip-after::after { 455 | content: ""; 456 | position: absolute; 457 | width: 8px; 458 | height: 8px; 459 | background: #333; 460 | transform: rotate(45deg); 461 | -webkit-transform: rotate(45deg); 462 | -moz-transform: rotate(45deg); 463 | bottom: -3px; 464 | left: 45%; 465 | z-index: -1; 466 | } 467 | .handy-tooltip-before::before { 468 | content: ""; 469 | position: absolute; 470 | width: 8px; 471 | height: 8px; 472 | background: #333; 473 | transform: rotate(45deg); 474 | -webkit-transform: rotate(45deg); 475 | -moz-transform: rotate(45deg); 476 | top: -3px; 477 | left: 45%; 478 | z-index: -1; 479 | } 480 | .pro_ava_active { 481 | box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 482 | -webkit-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 483 | -moz-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 484 | border: 3px solid #54BBFF !important; 485 | animation: pro_active 0.1s ease-in-out; 486 | -webkit-animation: pro_active 0.1s ease-in-out; 487 | -moz-animation: pro_active 0.1s ease-in-out; 488 | } 489 | @keyframes pro_active { 490 | 0% { 491 | transform: scale(1); 492 | } 493 | 50% { 494 | transform: scale(0.95); 495 | } 496 | 100% { 497 | transform: scale(1); 498 | } 499 | } 500 | @-webkit-keyframes pro_active { 501 | 0% { 502 | -webkit-transform: scale(1); 503 | } 504 | 50% { 505 | -webkit-transform: scale(0.95); 506 | } 507 | 100% { 508 | -webkit-transform: scale(1); 509 | } 510 | } 511 | @-moz-keyframes pro_active { 512 | 0% { 513 | -moz-transform: scale(1); 514 | } 515 | 50% { 516 | -moz-transform: scale(0.95); 517 | } 518 | 100% { 519 | -moz-transform: scale(1); 520 | } 521 | } 522 | .follow { 523 | background: #1b9be9 !important; 524 | border: 1px solid #1b9be9 !important; 525 | } 526 | .unfollow { 527 | background: #6ae03b !important; 528 | color: white !important; 529 | border: 1px solid #6ae03b !important; 530 | } 531 | .unfollow:focus { 532 | /*background: #69b14c !important;*/ 533 | background: #fbf2f2; 534 | } 535 | .textarea_toggle { 536 | height: 32px !important; 537 | } 538 | .overlay_cursor { 539 | cursor: -webkit-zoom-out; 540 | cursor: -moz-zoom-out; 541 | cursor: -ms-zoom-out; 542 | } 543 | .overlay_toggle { 544 | opacity: 0.8 !important; 545 | } 546 | .home_last_mssg { 547 | position: relative; 548 | border-radius: 4px; 549 | background: #fff; 550 | border: 1px solid #f7f5f5; 551 | font-size: 14px; 552 | text-align: center; 553 | padding: 10px; 554 | cursor: default; 555 | } 556 | .home_last_mssg img { 557 | position: relative; 558 | text-align: center; 559 | width: 150px; 560 | /*margin-bottom: 10px;*/ 561 | display: block; 562 | left: 48%; 563 | transform: translate(-50%); 564 | } 565 | .home_last_mssg span { 566 | position: relative; 567 | text-align: center; 568 | display: block; 569 | left: -5px; 570 | /*top: -5px;*/ 571 | } 572 | .modal { 573 | position: absolute; 574 | top: 50%; 575 | left: 50%; 576 | transform: translate(-50%, -50%); 577 | position: fixed !important; 578 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 579 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 580 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 581 | width: 300px; 582 | border-radius: 3px; 583 | z-index: 2; 584 | background: #fff; 585 | font-size: 14px; 586 | } 587 | .modal .modal_no { 588 | text-align: center; 589 | position: relative; 590 | top: 30px; 591 | } 592 | .modal .modal_no img { 593 | width: 150px; 594 | } 595 | .modal .modal_header { 596 | background: #f9f9f9; 597 | border-bottom: 1px solid #f7f5f5; 598 | padding: 10px; 599 | border-top-left-radius: 3px; 600 | border-top-right-radius: 3px; 601 | } 602 | .modal .modal_header span.title { 603 | font-weight: 600; 604 | } 605 | .modal .modal_middle { 606 | position: relative; 607 | padding: 10px; 608 | } 609 | .modal .modal_bottom { 610 | display: block; 611 | text-align: right; 612 | padding: 9px 5px 12px 5px; 613 | border-top: 1px solid #eee; 614 | margin-top: 0px; 615 | } 616 | .modal .modal_bottom a, 617 | .modal .modal_bottom input[type='submit'] { 618 | display: inline-block; 619 | padding: 4px 10px; 620 | font-weight: 600; 621 | } 622 | .modal_big { 623 | width: 400px; 624 | } 625 | .modal_big .modal_middle { 626 | height: 450px; 627 | width: inherit; 628 | overflow: auto; 629 | padding: 0px !important; 630 | } 631 | .modal_big .modal_middle .modal_main { 632 | position: relative; 633 | padding: 5px 0px; 634 | } 635 | .modal_big .modal_middle .modal_main .modal_items { 636 | margin-bottom: 5px; 637 | position: relative; 638 | padding: 0px 5px 5px 5px; 639 | } 640 | .modal_big .modal_middle .modal_main .modal_items .modal_it_img { 641 | position: relative; 642 | display: inline-block; 643 | height: 45px; 644 | margin-left: 5px; 645 | } 646 | .modal_big .modal_middle .modal_main .modal_items .modal_it_img img { 647 | width: 45px; 648 | height: 45px; 649 | border-radius: 3px; 650 | } 651 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content { 652 | display: inline-block; 653 | position: relative; 654 | width: 83%; 655 | margin-left: 8px; 656 | top: -10px; 657 | } 658 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info { 659 | display: inline-block; 660 | width: 100%; 661 | } 662 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username { 663 | font-size: 14px; 664 | color: #1b2733; 665 | font-weight: 600; 666 | display: block; 667 | outline: none; 668 | } 669 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username:hover, 670 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username:focus { 671 | text-decoration: underline; 672 | } 673 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info span.modal_it_light { 674 | color: #66757f; 675 | font-size: 13px; 676 | } 677 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_ff { 678 | display: inline-block; 679 | position: absolute; 680 | right: 5px; 681 | top: 5px; 682 | text-align: right; 683 | } 684 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_ff a { 685 | display: inline-block; 686 | padding: 5px 15px; 687 | font-weight: 600; 688 | } 689 | .modal_big .modal_middle .modal_main .modal_items hr { 690 | border-top-color: #eee; 691 | margin-top: 3px; 692 | } 693 | .modal_big .modal_bottom { 694 | margin-top: 1px; 695 | } 696 | .modal_big .modal_bottom a:last-of-type { 697 | margin-right: 10px; 698 | margin-left: 5px; 699 | } 700 | .fade-enter { 701 | opacity: 0.01; 702 | } 703 | .fade-enter.fade-enter-active { 704 | opacity: 1; 705 | transition: opacity 500ms ease-in; 706 | } 707 | .fade-exit { 708 | opacity: 1; 709 | } 710 | .fade-exit.fade-exit-active { 711 | opacity: 0.01; 712 | transition: opacity 300ms ease-in; 713 | } 714 | -------------------------------------------------------------------------------- /public/styles/dist/styles.css: -------------------------------------------------------------------------------- 1 | .modal-shadow { 2 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 3 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 4 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 5 | } 6 | * { 7 | padding: 0px; 8 | margin: 0px; 9 | } 10 | body { 11 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 12 | background: #fbfbfb; 13 | font-size: 13px; 14 | color: #3d464d; 15 | font-weight: normal; 16 | } 17 | a { 18 | text-decoration: none; 19 | color: #2895F1; 20 | outline: none; 21 | } 22 | .a_disabled { 23 | cursor: not-allowed !important; 24 | pointer-events: none !important; 25 | background: #6ab9e8 !important; 26 | } 27 | .sec_btn_disabled { 28 | cursor: not-allowed !important; 29 | pointer-events: none !important; 30 | color: #d8c3c3 !important; 31 | } 32 | input[type="range"] { 33 | outline: none; 34 | } 35 | input[type=range]::-moz-focus-outer { 36 | border: 0; 37 | } 38 | i { 39 | pointer-events: none; 40 | } 41 | hr { 42 | border: 0; 43 | border-top: 1px solid #c1c7cd; 44 | } 45 | li { 46 | list-style: none; 47 | } 48 | input[type="text"], 49 | input[type="email"], 50 | input[type="password"], 51 | textarea { 52 | border: 1px solid #eee; 53 | border-radius: 4px; 54 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 55 | color: #0b867a; 56 | outline: none; 57 | padding: 5px 5px; 58 | } 59 | input[type="submit"]::-moz-focus-inner, 60 | input[type="button"]::-moz-focus-inner { 61 | padding: 0 !important; 62 | border: 0 none !important; 63 | } 64 | textarea { 65 | word-break: break-all; 66 | font-size: 13px; 67 | } 68 | input[type="text"]:focus, 69 | input[type="password"]:focus, 70 | input[type="email"]:focus, 71 | textarea:focus { 72 | border: 1px solid #56b4ef !important; 73 | box-shadow: 0px 0px 5px 1px #c8def0; 74 | /*-webkit-box-shadow: 0px 0px 5px 0px #bed3dc; 75 | -moz-box-shadow: 0px 0px 5px 0px #bed3dc;*/ 76 | } 77 | input[type="submit"], 78 | input[type="button"], 79 | .pri_btn { 80 | font-weight: 600; 81 | background: #1b9be9; 82 | border: 1px solid #1b9be9; 83 | /*#3e91b3*/ 84 | color: #fff; 85 | border-radius: 3px; 86 | cursor: pointer; 87 | outline: none; 88 | } 89 | input[type="submit"]:hover, 90 | input[type="button"]:hover, 91 | .pri_btn:hover { 92 | opacity: .9; 93 | } 94 | .sec_btn { 95 | border: 1px solid #eee; 96 | background: #fbfbfb; 97 | color: #1b2733; 98 | border-radius: 3px; 99 | cursor: pointer; 100 | font-weight: 600; 101 | outline: none; 102 | } 103 | .sec_btn:hover { 104 | color: #1b2733; 105 | background-color: #fff7f7; 106 | } 107 | .sec_btn:focus { 108 | color: #1b2733; 109 | /*background-color: #fff7f7;*/ 110 | background: #f7ebeb; 111 | } 112 | .tir_btn { 113 | border: 1px solid #eee; 114 | background: #fff; 115 | color: #1b2733; 116 | border-radius: 3px; 117 | cursor: pointer; 118 | outline: none; 119 | } 120 | .tir_btn:hover { 121 | color: #1b2733; 122 | background-color: #ebf4fd; 123 | } 124 | .tir_btn:focus { 125 | color: #1b2733; 126 | background-color: #ebf4fd; 127 | } 128 | .a_pri { 129 | color: #2895F1; 130 | } 131 | input[type="submit"]:focus, 132 | input[type="button"]:focus, 133 | .pri_btn:focus { 134 | background: #198bd0; 135 | } 136 | input[type="submit"]:disabled, 137 | input[type="button"]:disabled { 138 | background: #6ab9e8 !important; 139 | cursor: auto !important; 140 | } 141 | input[type="submit"][disabled]:hover, 142 | input[type="button"][disabled]:hover { 143 | opacity: 1 !important; 144 | } 145 | .options { 146 | position: absolute; 147 | padding: 7px 6px; 148 | background: white; 149 | box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 150 | -webkit-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 151 | -moz-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); 152 | border-radius: 3px; 153 | z-index: 1; 154 | } 155 | .options ul { 156 | background: white; 157 | } 158 | .options li { 159 | background: white; 160 | } 161 | .options a, 162 | .options label { 163 | background: white; 164 | font-size: 14px; 165 | color: #66757f; 166 | padding: 4px 12px 4px 8px; 167 | width: inherit; 168 | display: block; 169 | border-radius: 2px; 170 | } 171 | .options a:hover, 172 | .options label:hover { 173 | /*background: @second_border;*/ 174 | background: #54BBFF; 175 | /*background: #f4f4f4;*/ 176 | /*color: #1b2733;*/ 177 | color: white; 178 | } 179 | .options li.o_divider { 180 | margin: 5px 0px 5px 0px; 181 | /*display: none;*/ 182 | } 183 | .options .o_li > .menu_divider { 184 | border-top-color: #e6e8eb; 185 | } 186 | .inst { 187 | border: 1px solid #f7f5f5; 188 | color: #1b2733; 189 | background: white; 190 | /*cursor: pointer;*/ 191 | border-radius: 4px; 192 | } 193 | .inst:hover { 194 | /*background: #fffefe;*/ 195 | } 196 | .no_focus { 197 | font-weight: 600; 198 | background: #1b9be9; 199 | border: 1px solid #1b9be9; 200 | color: #fff; 201 | border-radius: 3px; 202 | cursor: pointer; 203 | outline: none; 204 | } 205 | .no_focus:hover { 206 | opacity: .9; 207 | } 208 | input[type="range"] { 209 | -webkit-appearance: none; 210 | width: 100%; 211 | border-radius: 3px; 212 | cursor: pointer; 213 | } 214 | input[type="range"]:focus { 215 | outline: none; 216 | } 217 | input[type="range"]::-webkit-slider-runnable-track { 218 | width: 100%; 219 | background: rgba(255, 255, 255, 0.5); 220 | background: #fff; 221 | /*background: lightskyblue;*/ 222 | cursor: pointer; 223 | border-radius: 3px; 224 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 225 | height: 6px; 226 | } 227 | input[type="range"]::-webkit-slider-thumb { 228 | width: 15px; 229 | height: 15px; 230 | border-radius: 50%; 231 | background: #4080ff; 232 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 233 | margin-top: -5px; 234 | margin-left: px; 235 | cursor: pointer; 236 | -webkit-appearance: none; 237 | border: 1px solid #4080ff; 238 | } 239 | input[type="range"]:hover::-webkit-slider-thumb { 240 | transform: scale(1.2); 241 | -webkit-transform: scale(1.2); 242 | } 243 | input[type="range"]::-moz-range-track { 244 | width: 100%; 245 | background: #fff; 246 | /*background: lightskyblue;*/ 247 | cursor: pointer; 248 | border-radius: 3px; 249 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 250 | height: 6px; 251 | } 252 | input[type="range"]::-moz-range-thumb { 253 | width: 14px; 254 | height: 14px; 255 | border-radius: 50%; 256 | border: 1px solid #4080ff; 257 | background: #4080ff; 258 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 259 | cursor: pointer; 260 | } 261 | input[type="range"]:hover::-moz-range-thumb { 262 | transform: scale(1.2); 263 | -moz-transform: scale(1.2); 264 | } 265 | input[type="range"]::-ms-track { 266 | width: 100%; 267 | background: transparent; 268 | border-color: transparent; 269 | /*border-width: 10px 0px 10px 0px;*/ 270 | color: transparent; 271 | height: 6px; 272 | border-radius: 3px; 273 | z-index: 2; 274 | position: relative; 275 | border: 1px solid; 276 | /*border: 1px solid #ecf0f1;*/ 277 | /*margin-top: -10px;*/ 278 | } 279 | input[type="range"]::-ms-fill-lower { 280 | background: lightskyblue; 281 | border-radius: 3px; 282 | } 283 | input[type="range"]::-ms-fill-upper { 284 | background: #ecf0f1; 285 | border-color: #ecf0f1 !important; 286 | border-radius: 3px; 287 | } 288 | input[type="range"]::-ms-thumb { 289 | width: 12px; 290 | height: 12px; 291 | border-radius: 50%; 292 | background: #4080ff; 293 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); 294 | margin-top: 0px; 295 | cursor: pointer; 296 | border: 1px solid #4080ff; 297 | } 298 | input[type="range"]:focus::-ms-thumb { 299 | transform: scale(1.2); 300 | -webkit-transform: scale(1.2); 301 | -moz-transform: scale(1.2); 302 | } 303 | input[type="file"] { 304 | width: 0.1px; 305 | height: 0.1px; 306 | opacity: 0; 307 | overflow: hidden; 308 | position: absolute; 309 | z-index: -2; 310 | } 311 | .overlay { 312 | position: fixed; 313 | width: 100%; 314 | height: 100%; 315 | top: 0px; 316 | left: 0px; 317 | right: 0px; 318 | bottom: 0px; 319 | background: #000; 320 | opacity: 0.5 !important; 321 | z-index: 2; 322 | } 323 | .hidden_overlay { 324 | position: fixed; 325 | width: 100%; 326 | height: 100%; 327 | top: 0px; 328 | left: 0px; 329 | right: 0px; 330 | bottom: 0px; 331 | background: transparent !important; 332 | z-index: 2; 333 | } 334 | .overlay-2 { 335 | position: fixed; 336 | width: 100%; 337 | height: 100%; 338 | top: 0px; 339 | left: 0px; 340 | right: 0px; 341 | bottom: 0px; 342 | background: transparent; 343 | z-index: 20; 344 | display: none; 345 | } 346 | select { 347 | font-size: 14px; 348 | font-family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 349 | border-radius: 3px; 350 | border: 1px solid #eee; 351 | cursor: pointer; 352 | outline: none; 353 | /*-moz-appearance: none;*/ 354 | /*-webkit-appearance: none;*/ 355 | } 356 | select:focus { 357 | border-color: #56b4ef; 358 | box-shadow: 0px 0px 5px 1px #c8def0; 359 | } 360 | .spinner { 361 | width: 0px; 362 | height: 0px; 363 | background: #eee; 364 | border-radius: 50%; 365 | position: absolute; 366 | display: inline-block; 367 | left: 177px; 368 | top: 20px; 369 | } 370 | .spinner span { 371 | display: block; 372 | height: 10px; 373 | width: 10px; 374 | background: #ddd; 375 | border-radius: 50%; 376 | position: absolute; 377 | top: 0px; 378 | transition: all 0.1s ease-in-out; 379 | } 380 | .spinner span:nth-child(1) { 381 | left: -18px; 382 | animation: bounce 1s ease-in-out infinite; 383 | } 384 | .spinner span:nth-child(2) { 385 | animation: bounce 1s ease-in-out 0.33s infinite; 386 | } 387 | .spinner span:nth-child(3) { 388 | left: 18px; 389 | animation: bounce 1s ease-in-out 0.66s infinite; 390 | } 391 | @keyframes bounce { 392 | 0%, 393 | 75%, 394 | 100% { 395 | transform: translateY(0px); 396 | } 397 | 25% { 398 | transform: translateY(-10px); 399 | } 400 | } 401 | .inst_checkbox { 402 | display: none; 403 | } 404 | .inst_checkbox + label:before { 405 | content: "\f096"; 406 | font-family: "FontAwesome"; 407 | speak: none; 408 | font-weight: normal; 409 | font-style: normal; 410 | font-variant: normal; 411 | text-transform: normal; 412 | line-height: 1; 413 | -webkit-font-smoothing: antialiased; 414 | } 415 | .inst_checkbox:checked + label::before { 416 | content: "\f14a"; 417 | color: #06a3e9; 418 | animation: tick 1s ease-in; 419 | } 420 | .inst_checkbox:disabled + label { 421 | color: #aaa; 422 | } 423 | .inst_checkbox:disabled + label::before { 424 | content: "\f0c8"; 425 | color: #ccc; 426 | } 427 | #hoverdiv { 428 | position: absolute; 429 | background: #333; 430 | padding: 4px 14px; 431 | color: white; 432 | font-size: 13px; 433 | border-radius: 3px; 434 | top: 0px; 435 | left: 0px; 436 | display: none; 437 | z-index: 4; 438 | } 439 | .handy-notify { 440 | position: fixed; 441 | background: #333; 442 | left: 2%; 443 | /*transform: translate(-50%, -50%);*/ 444 | color: #fff; 445 | border-radius: 3px; 446 | padding: 12px 80px 12px 25px; 447 | /*padding: 10px 30px;*/ 448 | font-size: 15px; 449 | cursor: pointer; 450 | text-align: left; 451 | z-index: 3; 452 | top: 105%; 453 | } 454 | .handy-tooltip-after::after { 455 | content: ""; 456 | position: absolute; 457 | width: 8px; 458 | height: 8px; 459 | background: #333; 460 | transform: rotate(45deg); 461 | -webkit-transform: rotate(45deg); 462 | -moz-transform: rotate(45deg); 463 | bottom: -3px; 464 | left: 45%; 465 | z-index: -1; 466 | } 467 | .handy-tooltip-before::before { 468 | content: ""; 469 | position: absolute; 470 | width: 8px; 471 | height: 8px; 472 | background: #333; 473 | transform: rotate(45deg); 474 | -webkit-transform: rotate(45deg); 475 | -moz-transform: rotate(45deg); 476 | top: -3px; 477 | left: 45%; 478 | z-index: -1; 479 | } 480 | .pro_ava_active { 481 | box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 482 | -webkit-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 483 | -moz-box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important; 484 | border: 3px solid #54BBFF !important; 485 | animation: pro_active 0.1s ease-in-out; 486 | -webkit-animation: pro_active 0.1s ease-in-out; 487 | -moz-animation: pro_active 0.1s ease-in-out; 488 | } 489 | @keyframes pro_active { 490 | 0% { 491 | transform: scale(1); 492 | } 493 | 50% { 494 | transform: scale(0.95); 495 | } 496 | 100% { 497 | transform: scale(1); 498 | } 499 | } 500 | @-webkit-keyframes pro_active { 501 | 0% { 502 | -webkit-transform: scale(1); 503 | } 504 | 50% { 505 | -webkit-transform: scale(0.95); 506 | } 507 | 100% { 508 | -webkit-transform: scale(1); 509 | } 510 | } 511 | @-moz-keyframes pro_active { 512 | 0% { 513 | -moz-transform: scale(1); 514 | } 515 | 50% { 516 | -moz-transform: scale(0.95); 517 | } 518 | 100% { 519 | -moz-transform: scale(1); 520 | } 521 | } 522 | .follow { 523 | background: #1b9be9 !important; 524 | border: 1px solid #1b9be9 !important; 525 | } 526 | .unfollow { 527 | background: #6ae03b !important; 528 | color: white !important; 529 | border: 1px solid #6ae03b !important; 530 | } 531 | .unfollow:focus { 532 | /*background: #69b14c !important;*/ 533 | background: #fbf2f2; 534 | } 535 | .textarea_toggle { 536 | height: 32px !important; 537 | } 538 | .overlay_cursor { 539 | cursor: -webkit-zoom-out; 540 | cursor: -moz-zoom-out; 541 | cursor: -ms-zoom-out; 542 | } 543 | .overlay_toggle { 544 | opacity: 0.8 !important; 545 | } 546 | .home_last_mssg { 547 | position: relative; 548 | border-radius: 4px; 549 | background: #fff; 550 | border: 1px solid #f7f5f5; 551 | font-size: 14px; 552 | text-align: center; 553 | padding: 10px; 554 | cursor: default; 555 | } 556 | .home_last_mssg img { 557 | position: relative; 558 | text-align: center; 559 | width: 150px; 560 | /*margin-bottom: 10px;*/ 561 | display: block; 562 | left: 48%; 563 | transform: translate(-50%); 564 | } 565 | .home_last_mssg span { 566 | position: relative; 567 | text-align: center; 568 | display: block; 569 | left: -5px; 570 | /*top: -5px;*/ 571 | } 572 | .modal { 573 | position: absolute; 574 | top: 50%; 575 | left: 50%; 576 | transform: translate(-50%, -50%); 577 | position: fixed !important; 578 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 579 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 580 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 581 | width: 300px; 582 | border-radius: 3px; 583 | z-index: 2; 584 | background: #fff; 585 | font-size: 14px; 586 | } 587 | .modal .modal_no { 588 | text-align: center; 589 | position: relative; 590 | top: 30px; 591 | } 592 | .modal .modal_no img { 593 | width: 150px; 594 | } 595 | .modal .modal_header { 596 | background: #f9f9f9; 597 | border-bottom: 1px solid #f7f5f5; 598 | padding: 10px; 599 | border-top-left-radius: 3px; 600 | border-top-right-radius: 3px; 601 | } 602 | .modal .modal_header span.title { 603 | font-weight: 600; 604 | } 605 | .modal .modal_middle { 606 | position: relative; 607 | padding: 10px; 608 | } 609 | .modal .modal_bottom { 610 | display: block; 611 | text-align: right; 612 | padding: 9px 5px 12px 5px; 613 | border-top: 1px solid #eee; 614 | margin-top: 0px; 615 | } 616 | .modal .modal_bottom a, 617 | .modal .modal_bottom input[type='submit'] { 618 | display: inline-block; 619 | padding: 4px 10px; 620 | font-weight: 600; 621 | } 622 | .modal_big { 623 | width: 400px; 624 | } 625 | .modal_big .modal_middle { 626 | height: 450px; 627 | width: inherit; 628 | overflow: auto; 629 | padding: 0px !important; 630 | } 631 | .modal_big .modal_middle .modal_main { 632 | position: relative; 633 | padding: 5px 0px; 634 | } 635 | .modal_big .modal_middle .modal_main .modal_items { 636 | margin-bottom: 5px; 637 | position: relative; 638 | padding: 0px 5px 5px 5px; 639 | } 640 | .modal_big .modal_middle .modal_main .modal_items .modal_it_img { 641 | position: relative; 642 | display: inline-block; 643 | height: 45px; 644 | margin-left: 5px; 645 | } 646 | .modal_big .modal_middle .modal_main .modal_items .modal_it_img img { 647 | width: 45px; 648 | height: 45px; 649 | border-radius: 3px; 650 | } 651 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content { 652 | display: inline-block; 653 | position: relative; 654 | width: 83%; 655 | margin-left: 8px; 656 | top: -10px; 657 | } 658 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info { 659 | display: inline-block; 660 | width: 100%; 661 | } 662 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username { 663 | font-size: 14px; 664 | color: #1b2733; 665 | font-weight: 600; 666 | display: block; 667 | outline: none; 668 | } 669 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username:hover, 670 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info a.modal_it_username:focus { 671 | text-decoration: underline; 672 | } 673 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_it_info span.modal_it_light { 674 | color: #66757f; 675 | font-size: 13px; 676 | } 677 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_ff { 678 | display: inline-block; 679 | position: absolute; 680 | right: 5px; 681 | top: 5px; 682 | text-align: right; 683 | } 684 | .modal_big .modal_middle .modal_main .modal_items .modal_it_content .modal_ff a { 685 | display: inline-block; 686 | padding: 5px 15px; 687 | font-weight: 600; 688 | } 689 | .modal_big .modal_middle .modal_main .modal_items hr { 690 | border-top-color: #eee; 691 | margin-top: 3px; 692 | } 693 | .modal_big .modal_bottom { 694 | margin-top: 1px; 695 | } 696 | .modal_big .modal_bottom a:last-of-type { 697 | margin-right: 10px; 698 | margin-left: 5px; 699 | } 700 | .fade-enter { 701 | opacity: 0.01; 702 | } 703 | .fade-enter.fade-enter-active { 704 | opacity: 1; 705 | transition: opacity 500ms ease-in; 706 | } 707 | .fade-exit { 708 | opacity: 1; 709 | } 710 | .fade-exit.fade-exit-active { 711 | opacity: 0.01; 712 | transition: opacity 300ms ease-in; 713 | } 714 | .notes_wrapper { 715 | margin-top: 70px; 716 | } 717 | .index_header { 718 | width: 100%; 719 | height: 50px; 720 | position: fixed; 721 | z-index: 1; 722 | top: 0px; 723 | } 724 | .index_header .right { 725 | float: right; 726 | position: relative; 727 | display: inline-block; 728 | right: 70px; 729 | top: 21px; 730 | } 731 | .index_header .right a { 732 | border: 1px solid #eee; 733 | outline: none; 734 | padding: 4px 16px; 735 | border-radius: 3px; 736 | font-size: 14px; 737 | margin-right: 5px; 738 | color: #3d464d; 739 | background: #fff; 740 | } 741 | .index_header .right a a[href='help'] { 742 | margin-right: 0px; 743 | } 744 | .index_header .right a .index_header > .right > a[href="about"] { 745 | margin-right: 5px; 746 | } 747 | .index_header .right a:hover { 748 | background: #f7f9fa; 749 | } 750 | .index_header .right a:focus { 751 | background: #f7f9fa; 752 | } 753 | .header_loggedin { 754 | background: #fff; 755 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 756 | position: fixed; 757 | width: 100%; 758 | height: 45px; 759 | background: white; 760 | z-index: 2; 761 | top: 0px; 762 | } 763 | .header_loggedin a { 764 | font-size: 14px; 765 | color: #1b2733; 766 | margin-left: 7px; 767 | padding: 5px 12px; 768 | border-radius: 3px; 769 | display: inline-block; 770 | } 771 | .header_loggedin a:hover { 772 | background: #f7f9fa; 773 | } 774 | .header_loggedin a:focus { 775 | background: #f7f9fa; 776 | } 777 | .header_loggedin .left { 778 | display: inline-block; 779 | position: relative; 780 | top: 8px; 781 | left: 25px; 782 | } 783 | .header_loggedin .right { 784 | display: inline-block; 785 | position: absolute; 786 | top: 8px; 787 | right: 3%; 788 | } 789 | .ha_active { 790 | background: #f7f9fa; 791 | } 792 | .log_sign { 793 | position: absolute; 794 | right: 50px; 795 | top: 88px; 796 | } 797 | .log_sign > a { 798 | padding: 5px 18px; 799 | border-radius: 4px; 800 | font-size: 14px; 801 | } 802 | .display_text { 803 | text-align: center; 804 | margin-bottom: 30px; 805 | } 806 | .display_text > span { 807 | font-size: 23px; 808 | color: #0b867a; 809 | } 810 | .cua { 811 | width: 300px; 812 | position: absolute; 813 | top: 50%; 814 | left: 50%; 815 | transform: translate(-50%, -50%); 816 | } 817 | .cua form > * { 818 | display: block; 819 | margin-bottom: 10px; 820 | width: 92%; 821 | padding: 8px 10px; 822 | font-size: 14px; 823 | } 824 | .cua input[type='submit'] { 825 | width: 99%; 826 | } 827 | .registered { 828 | position: absolute; 829 | background: #fff; 830 | padding: 20px; 831 | width: 300px; 832 | top: 50%; 833 | left: 50%; 834 | transform: translate(-50%, -50%); 835 | font-size: 15px; 836 | border-radius: 5px; 837 | box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); 838 | } 839 | .user_banner { 840 | text-align: center; 841 | position: relative; 842 | background: white; 843 | width: 580px; 844 | left: 367px; 845 | padding: 15px; 846 | border: 1px solid #f7f5f5; 847 | border-radius: 4px; 848 | } 849 | .user_banner .user_buttons { 850 | position: absolute; 851 | right: 15px; 852 | top: 15px; 853 | } 854 | .user_banner .user_buttons > a { 855 | padding: 5px 15px; 856 | font-size: 14px; 857 | display: inline-block; 858 | margin-right: 5px; 859 | } 860 | .user_banner .profile_img_div { 861 | margin-top: 10px; 862 | } 863 | .user_banner .profile_img_div img { 864 | border-radius: 50%; 865 | height: 150px; 866 | width: 150px; 867 | } 868 | .user_banner .user_info { 869 | margin-top: 10px; 870 | } 871 | .user_banner .user_info a.user_main_link { 872 | font-weight: 600; 873 | color: #1b2733; 874 | display: block; 875 | font-size: 16px; 876 | } 877 | .user_banner .user_info .user_no_notes { 878 | color: #66757f; 879 | font-size: 13px; 880 | } 881 | .user_banner .user_info .user_bio { 882 | text-align: center; 883 | font-size: 14px; 884 | margin-top: 7px; 885 | } 886 | .user_banner .user_info hr { 887 | margin: 25px 0px 10px 0px; 888 | border-top: 1px solid #f5eded; 889 | } 890 | .user_banner .user_info .user_stats { 891 | text-align: center; 892 | } 893 | .user_banner .user_info .user_stats > div, 894 | .user_banner .user_info .user_stats > a { 895 | display: inline-block; 896 | padding: 7px 40px; 897 | text-align: center; 898 | position: relative; 899 | cursor: pointer; 900 | border-radius: 3px; 901 | color: inherit; 902 | } 903 | .user_banner .user_info .user_stats > div:hover, 904 | .user_banner .user_info .user_stats > a:hover { 905 | background: #f7f9fa; 906 | } 907 | .user_banner .user_info .user_stats > div .stat_hg, 908 | .user_banner .user_info .user_stats > a .stat_hg { 909 | display: block; 910 | font-size: 15px; 911 | font-weight: 600; 912 | } 913 | .user_banner .user_info .user_stats .stat_disabled { 914 | cursor: text !important; 915 | } 916 | .user_banner .user_info .user_stats .stat_disabled:hover { 917 | background: #fff; 918 | } 919 | .notes { 920 | margin-top: 20px; 921 | display: inline-block; 922 | margin-left: 365px; 923 | margin-bottom: 50px; 924 | width: 614px; 925 | } 926 | .note { 927 | background: #fff; 928 | padding: 10px; 929 | display: block; 930 | font-size: 14px; 931 | border: 1px solid #f7f5f5; 932 | border-radius: 3px; 933 | margin-bottom: 10px; 934 | cursor: pointer; 935 | } 936 | .note:hover { 937 | border-color: #eee; 938 | } 939 | .note .note_header { 940 | margin-bottom: 7px; 941 | } 942 | .note .note_header img { 943 | height: 31px; 944 | width: 31px; 945 | border-radius: 50%; 946 | display: inline-block; 947 | } 948 | .note .note_header .note_h_left { 949 | display: inline-block; 950 | margin-left: 5px; 951 | width: 90%; 952 | } 953 | .note .note_header .note_h_left .note_username { 954 | display: block; 955 | color: #1b2733; 956 | font-weight: 600; 957 | position: relative; 958 | top: 2px; 959 | } 960 | .note .note_header .note_h_left .note_time { 961 | font-size: 13px; 962 | color: #66757f; 963 | position: relative; 964 | top: -1px; 965 | } 966 | .note .note_title, 967 | .note .note_content { 968 | color: #1b2733; 969 | } 970 | .note .note_title { 971 | margin-bottom: 4px; 972 | font-weight: 600; 973 | } 974 | .create_note { 975 | width: 380px; 976 | } 977 | .create_note input[type='text'], 978 | .create_note textarea { 979 | padding: 7px !important; 980 | width: 94%; 981 | font-size: 14px; 982 | } 983 | .create_note input[type="text"] { 984 | margin-bottom: 9px; 985 | } 986 | .create_note textarea { 987 | height: 250px; 988 | } 989 | .create_note .c_n_bottom { 990 | margin-top: 1px; 991 | } 992 | .create_note .c_n_bottom input[type='submit'] { 993 | margin-left: 5px; 994 | padding: 5px 10px; 995 | margin-right: 6px; 996 | font-size: 14px; 997 | } 998 | .welcome_div { 999 | position: absolute; 1000 | top: 50%; 1001 | left: 50%; 1002 | transform: translate(-50%, -50%); 1003 | } 1004 | .welcome_div img { 1005 | height: 300px; 1006 | } 1007 | .error_div { 1008 | width: 436px; 1009 | } 1010 | .error_div .error_info { 1011 | margin-bottom: 10px; 1012 | width: 100%; 1013 | } 1014 | .error_div .error_info span { 1015 | font-size: 20px; 1016 | } 1017 | .error_div .error_bottom { 1018 | text-align: right; 1019 | margin-top: 3px; 1020 | } 1021 | .error_div .error_bottom a { 1022 | display: inline-block; 1023 | padding: 4px 15px; 1024 | font-weight: 600; 1025 | font-size: 14px; 1026 | } 1027 | .error_div .error_bottom a:last-of-type { 1028 | margin-left: 5px; 1029 | } 1030 | .view_note { 1031 | width: 600px; 1032 | } 1033 | .view_note .v_n_middle .v_n_info { 1034 | margin-bottom: 5px; 1035 | } 1036 | .view_note .v_n_middle .v_n_info img { 1037 | width: 40px; 1038 | height: 40px; 1039 | border-radius: 50%; 1040 | display: inline-block; 1041 | } 1042 | .view_note .v_n_middle .v_n_info .v_n_left { 1043 | display: inline-block; 1044 | margin-left: 5px; 1045 | position: relative; 1046 | top: -5px; 1047 | } 1048 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_username { 1049 | display: block; 1050 | font-weight: 600; 1051 | font-size: 15px; 1052 | color: inherit; 1053 | } 1054 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_username:hover, 1055 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_username:focus { 1056 | text-decoration: underline; 1057 | } 1058 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_time { 1059 | font-size: 13px; 1060 | color: #66757f; 1061 | position: relative; 1062 | top: -2px; 1063 | } 1064 | .view_note .v_n_middle .v_n_title { 1065 | font-weight: 600; 1066 | display: block; 1067 | margin-bottom: 3px; 1068 | font-size: 15px; 1069 | outline: none; 1070 | } 1071 | .view_note .v_n_middle .v_n_content { 1072 | display: block; 1073 | outline: none; 1074 | } 1075 | .view_note .v_n_middle .v_n_title[contenteditable='true'], 1076 | .view_note .v_n_middle .v_n_content[contenteditable='true'] { 1077 | border: 1px solid #54BBFF; 1078 | padding: 5px 5px !important; 1079 | border-radius: 2px; 1080 | } 1081 | .view_note .v_n_bottom a { 1082 | margin-left: 5px; 1083 | } 1084 | .view_note .v_n_bottom .v_n_cancel { 1085 | margin-right: 5px; 1086 | } 1087 | .view_note .v_n_bottom .v_n_int { 1088 | position: absolute; 1089 | color: #66757f; 1090 | bottom: 10px; 1091 | left: 10px; 1092 | } 1093 | .view_note .v_n_bottom .v_n_int span.like_unlike { 1094 | display: inline-block; 1095 | height: 24px; 1096 | cursor: pointer; 1097 | transition: all 0.1s ease-in-out; 1098 | } 1099 | .view_note .v_n_bottom .v_n_int span.like_unlike:hover { 1100 | color: #1b2733; 1101 | transform: scale(1.1); 1102 | } 1103 | .view_note .v_n_bottom .v_n_int .like_unlike_disabled { 1104 | cursor: not-allowed !important; 1105 | pointer-events: none !important; 1106 | color: #d8c3c3 !important; 1107 | } 1108 | .content_editor { 1109 | margin-top: 5px; 1110 | } 1111 | .edit { 1112 | position: relative; 1113 | width: 400px; 1114 | left: 490px; 1115 | font-size: 14px; 1116 | } 1117 | .edit .edit_animation > * { 1118 | display: block; 1119 | width: 100%; 1120 | margin-top: 15px; 1121 | } 1122 | .edit .eb_btns { 1123 | text-align: right; 1124 | } 1125 | .edit .eb_btns a { 1126 | display: inline-block; 1127 | margin-right: 23px; 1128 | padding: 5px 20px; 1129 | } 1130 | .edit .eb_btns form { 1131 | display: inline-block; 1132 | } 1133 | .edit .eb_btns form .avatar_span { 1134 | display: inline-block; 1135 | padding: 5px 10px 6px 10px; 1136 | margin-right: 7px; 1137 | } 1138 | .edit .edit_span { 1139 | color: #66757f; 1140 | display: block; 1141 | position: relative; 1142 | font-size: 14px; 1143 | margin-bottom: 5px; 1144 | } 1145 | .edit .edit_info img { 1146 | width: 35px; 1147 | height: 35px; 1148 | border-radius: 50%; 1149 | position: relative; 1150 | display: inline-block; 1151 | } 1152 | .edit .edit_info span { 1153 | position: relative; 1154 | top: -12px; 1155 | left: 8px; 1156 | font-size: 18px; 1157 | font-weight: 600; 1158 | } 1159 | .edit .e_joined { 1160 | text-align: right; 1161 | width: 94%; 1162 | } 1163 | .edit input[type='text'], 1164 | .edit input[type='email'], 1165 | .edit textarea { 1166 | width: 90%; 1167 | padding: 8px; 1168 | font-size: 14px; 1169 | } 1170 | .edit textarea { 1171 | height: 100px; 1172 | } 1173 | .edit .resend_vl_div { 1174 | text-align: right; 1175 | } 1176 | .edit .resend_vl_div .resend_vl { 1177 | display: inline-block; 1178 | padding: 5px 15px; 1179 | margin-right: 21px; 1180 | } 1181 | .home { 1182 | position: relative; 1183 | width: 607px; 1184 | margin-left: 365px; 1185 | margin-bottom: 60px; 1186 | } 1187 | .home .home_info { 1188 | margin-bottom: 10px; 1189 | background: #fff; 1190 | padding: 14px 10px; 1191 | border: 1px solid #f7f5f5; 1192 | border-radius: 3px; 1193 | font-size: 15px; 1194 | } 1195 | .home .home_info a { 1196 | position: absolute; 1197 | right: 10px; 1198 | padding: 4px 12px; 1199 | top: 10px; 1200 | } 1201 | .page_end { 1202 | padding: 10px; 1203 | text-align: center; 1204 | font-size: 14px; 1205 | margin-top: 10px; 1206 | color: #66757f; 1207 | cursor: pointer; 1208 | border-radius: 3px; 1209 | border: 1px solid #fbfbfb; 1210 | } 1211 | .page_end:hover { 1212 | border: 1px solid #eee; 1213 | } 1214 | .explore .explores { 1215 | display: inline-block; 1216 | width: 615px; 1217 | margin-left: 365px; 1218 | } 1219 | .explore .explores div.explores_list { 1220 | position: relative; 1221 | background: #fff; 1222 | padding: 10px; 1223 | border-radius: 3px; 1224 | border: 1px solid #f7f5f5; 1225 | margin-bottom: 10px; 1226 | } 1227 | .explore .explores div.explores_list:hover { 1228 | border-color: #eee; 1229 | } 1230 | .explore .explores div.explores_list .exl_main img { 1231 | width: 45px; 1232 | height: 45px; 1233 | border-radius: 50%; 1234 | } 1235 | .explore .explores div.explores_list .exl_main .exl_content { 1236 | display: inline-block; 1237 | position: relative; 1238 | top: -8px; 1239 | margin-left: 7px; 1240 | } 1241 | .explore .explores div.explores_list .exl_main .exl_content a.exl_username { 1242 | color: #1b2733; 1243 | font-size: 14px; 1244 | font-weight: 600; 1245 | } 1246 | .explore .explores div.explores_list .exl_main .exl_content div.exl_desc { 1247 | color: #66757f; 1248 | } 1249 | .explore .explores div.explores_list .exl_main .exl_content div.exl_desc span.exl_desc_sep { 1250 | margin-left: 5px; 1251 | margin-right: 5px; 1252 | } 1253 | .explore .explores div.explores_list .exl_ff { 1254 | position: absolute; 1255 | right: 15px; 1256 | top: 25px; 1257 | } 1258 | .explore .explores div.explores_list .exl_ff a { 1259 | padding: 5px 20px; 1260 | font-size: 14px; 1261 | } 1262 | .prompt { 1263 | position: fixed; 1264 | top: 50%; 1265 | left: 50%; 1266 | transform: translate(-50%, -50%); 1267 | z-index: 2; 1268 | background: #fff; 1269 | width: 400px; 1270 | border-radius: 3px; 1271 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 1272 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 1273 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 1274 | } 1275 | .prompt .prompt-top { 1276 | padding: 10px 10px; 1277 | background: #f6f7f9; 1278 | border-top-left-radius: 3px; 1279 | border-top-right-radius: 3px; 1280 | border-bottom: 1px solid #eee; 1281 | } 1282 | .prompt .prompt-top .prompt-title { 1283 | font-size: 15px; 1284 | font-weight: 600; 1285 | } 1286 | .prompt .prompt-top span:last-of-type { 1287 | display: inline-block; 1288 | position: absolute; 1289 | right: 7px; 1290 | top: 7px; 1291 | padding: 2px; 1292 | color: #66757f; 1293 | height: 20px; 1294 | cursor: pointer; 1295 | border: 1px solid #f6f7f9; 1296 | border-radius: 3px; 1297 | } 1298 | .prompt .prompt-top span:last-of-type:hover { 1299 | color: #1b2733; 1300 | border: 1px solid #e2dbdb; 1301 | } 1302 | .prompt .prompt-top span:last-of-type i { 1303 | font-size: 20px; 1304 | position: relative; 1305 | left: 1px; 1306 | } 1307 | .prompt .prompt-middle { 1308 | padding: 4px 10px; 1309 | font-size: 14px; 1310 | margin-top: 11px; 1311 | margin-bottom: 10px; 1312 | position: relative; 1313 | } 1314 | .prompt .prompt-middle span { 1315 | display: inline-block; 1316 | position: relative; 1317 | } 1318 | .prompt .prompt-bottom { 1319 | padding: 8px 10px 8px 10px; 1320 | border-top: 1px solid #eee; 1321 | text-align: right; 1322 | } 1323 | .prompt .prompt-bottom a { 1324 | display: inline-block; 1325 | padding: 4px 12px; 1326 | font-weight: 600; 1327 | } 1328 | .prompt .prompt-bottom a:last-of-type { 1329 | margin-left: 5px; 1330 | } 1331 | .goto { 1332 | position: absolute; 1333 | right: 7px; 1334 | top: 6px; 1335 | height: 28px; 1336 | } 1337 | .goto .goto_link .goto_label { 1338 | position: relative; 1339 | top: -7px; 1340 | right: 2px; 1341 | font-weight: 600; 1342 | } 1343 | .goto .goto_link span.show_more { 1344 | display: inline-block; 1345 | height: 24px; 1346 | border: 1px solid #f9f9f9; 1347 | border-radius: 2px; 1348 | cursor: pointer; 1349 | color: #66757f; 1350 | transition: all 0.1s ease-in-out; 1351 | } 1352 | .goto .goto_link span.show_more:focus { 1353 | color: #1b2733; 1354 | } 1355 | .goto .goto_options { 1356 | right: -2px; 1357 | top: 35px; 1358 | } 1359 | .goto .goto_options::before { 1360 | content: ""; 1361 | background: white; 1362 | width: 11px; 1363 | height: 11px; 1364 | top: -6px; 1365 | position: absolute; 1366 | border-top: 1px solid #DCDFE1; 1367 | transform: rotate(45deg); 1368 | border-left: 1px solid #DCDFE1; 1369 | right: 9px; 1370 | z-index: -1; 1371 | } 1372 | .deactivate { 1373 | width: 500px; 1374 | } 1375 | .deactivate .deactivate_title { 1376 | font-weight: 600; 1377 | display: block; 1378 | margin-bottom: 5px; 1379 | } 1380 | .deactivate .deactivate_btn { 1381 | display: block; 1382 | margin-top: 11px; 1383 | text-align: right; 1384 | } 1385 | .deactivate .deactivate_btn a { 1386 | display: inline-block; 1387 | padding: 4px 10px; 1388 | } 1389 | -------------------------------------------------------------------------------- /public/styles/src/defaults.less: -------------------------------------------------------------------------------- 1 | @a: #2895F1; 2 | @family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 3 | @dark: #1b2733; 4 | @fb: #fbfbfb; 5 | @ff: #fff; 6 | @ee: #eee; 7 | @pric: #1b9be9; 8 | @d_light: #66757f; 9 | @header: #f9f9f9; 10 | @header_border: #f7f5f5; 11 | @second_border: #f7f9fa; 12 | @third-border: #f6f7f9; 13 | 14 | .center(){ 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translate(-50%, -50%); 19 | } 20 | 21 | .modal-shadow(){ 22 | box-shadow: 0 0 18px rgba(27,31,35,0.4); 23 | -webkit-box-shadow: 0 0 18px rgba(27,31,35,0.4); 24 | -moz-box-shadow: 0 0 18px rgba(27,31,35,0.4); 25 | } 26 | 27 | .modal-shadow{ 28 | box-shadow: 0 0 18px rgba(27,31,35,0.4); 29 | -webkit-box-shadow: 0 0 18px rgba(27,31,35,0.4); 30 | -moz-box-shadow: 0 0 18px rgba(27,31,35,0.4); 31 | } 32 | 33 | *{ 34 | padding: 0px; 35 | margin: 0px; 36 | } 37 | 38 | body{ 39 | font-family: @family; 40 | background: @fb; 41 | font-size: 13px; 42 | color: #3d464d; 43 | font-weight: normal; 44 | } 45 | 46 | a{ 47 | text-decoration: none; 48 | color: @a; 49 | outline: none; 50 | } 51 | 52 | .a_disabled{ 53 | cursor: not-allowed !important; 54 | pointer-events: none !important; 55 | background: #6ab9e8 !important; 56 | } 57 | 58 | .sec_btn_disabled{ 59 | cursor: not-allowed !important; 60 | pointer-events: none !important; 61 | color: #d8c3c3 !important; 62 | } 63 | 64 | input[type="range"]{ 65 | outline: none; 66 | } 67 | 68 | input[type=range]::-moz-focus-outer { 69 | border: 0; 70 | } 71 | 72 | i{ 73 | pointer-events: none; 74 | } 75 | 76 | hr{ 77 | border: 0; 78 | border-top: 1px solid #c1c7cd; 79 | } 80 | 81 | li{ 82 | list-style: none; 83 | } 84 | 85 | input[type="text"], 86 | input[type="email"], 87 | input[type="password"], 88 | textarea{ 89 | border: 1px solid @ee; 90 | border-radius: 4px; 91 | font-family: @family; 92 | color: #0b867a; 93 | outline: none; 94 | padding: 5px 5px; 95 | } 96 | 97 | input[type="submit"]::-moz-focus-inner, 98 | input[type="button"]::-moz-focus-inner{ 99 | padding: 0 !important; 100 | border: 0 none !important; 101 | } 102 | 103 | textarea{ 104 | word-break: break-all; 105 | font-size: 13px; 106 | } 107 | 108 | input[type="text"]:focus, 109 | input[type="password"]:focus, 110 | input[type="email"]:focus, 111 | textarea:focus{ 112 | border: 1px solid #56b4ef !important; 113 | box-shadow: 0px 0px 5px 1px #c8def0; 114 | /*-webkit-box-shadow: 0px 0px 5px 0px #bed3dc; 115 | -moz-box-shadow: 0px 0px 5px 0px #bed3dc;*/ 116 | } 117 | 118 | input[type="submit"], 119 | input[type="button"], 120 | .pri_btn{ 121 | font-weight: 600; 122 | background: @pric; 123 | border: 1px solid @pric; /*#3e91b3*/ 124 | color: @ff;; 125 | border-radius: 3px; 126 | cursor: pointer; 127 | outline: none; 128 | } 129 | 130 | input[type="submit"]:hover, 131 | input[type="button"]:hover, 132 | .pri_btn:hover{ 133 | opacity: .9; 134 | } 135 | 136 | .sec_btn{ 137 | border: 1px solid @ee; 138 | background: @fb; 139 | color: @dark; 140 | border-radius: 3px; 141 | cursor: pointer; 142 | font-weight: 600; 143 | outline: none; 144 | } 145 | 146 | .sec_btn:hover{ 147 | color: @dark; 148 | background-color: #fff7f7; 149 | } 150 | 151 | .sec_btn:focus{ 152 | color: @dark; 153 | /*background-color: #fff7f7;*/ 154 | background: #f7ebeb; 155 | } 156 | 157 | .tir_btn{ 158 | border: 1px solid @ee; 159 | background: @ff; 160 | color: @dark; 161 | border-radius: 3px; 162 | cursor: pointer; 163 | outline: none; 164 | } 165 | 166 | .tir_btn:hover{ 167 | color: @dark; 168 | background-color: #ebf4fd; 169 | } 170 | 171 | .tir_btn:focus{ 172 | color: @dark; 173 | background-color: #ebf4fd; 174 | } 175 | 176 | .a_pri{ 177 | color: @a; 178 | } 179 | 180 | input[type="submit"]:focus, 181 | input[type="button"]:focus, 182 | .pri_btn:focus{ 183 | background: #198bd0; 184 | } 185 | 186 | input[type="submit"]:disabled, 187 | input[type="button"]:disabled{ 188 | background: #6ab9e8 !important; 189 | cursor: auto !important; 190 | } 191 | 192 | input[type="submit"][disabled]:hover, 193 | input[type="button"][disabled]:hover{ 194 | opacity: 1 !important; 195 | } 196 | 197 | .options{ 198 | position: absolute; 199 | padding: 7px 6px; 200 | background: white; 201 | box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08); 202 | -webkit-box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08); 203 | -moz-box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08); 204 | border-radius: 3px; 205 | z-index: 1; 206 | } 207 | 208 | .options ul{ 209 | background: white; 210 | } 211 | 212 | .options li{ 213 | background: white; 214 | } 215 | 216 | .options a, 217 | .options label{ 218 | background: white; 219 | font-size: 14px; 220 | color: @d_light; 221 | padding: 4px 12px 4px 8px; 222 | width: inherit; 223 | display: block; 224 | border-radius: 2px; 225 | } 226 | 227 | .options a:hover, 228 | .options label:hover{ 229 | /*background: @second_border;*/ 230 | background: #54BBFF; 231 | /*background: #f4f4f4;*/ 232 | /*color: #1b2733;*/ 233 | color: white; 234 | } 235 | 236 | .options li.o_divider{ 237 | margin: 5px 0px 5px 0px; 238 | /*display: none;*/ 239 | } 240 | 241 | .options .o_li > .menu_divider{ 242 | border-top-color: #e6e8eb; 243 | } 244 | 245 | .inst{ 246 | border: 1px solid #f7f5f5; 247 | color: #1b2733; 248 | background: white; 249 | /*cursor: pointer;*/ 250 | border-radius: 4px; 251 | } 252 | 253 | .inst:hover{ 254 | /*background: #fffefe;*/ 255 | } 256 | 257 | .no_focus{ 258 | font-weight: 600; 259 | background: @pric; 260 | border: 1px solid @pric; 261 | color: #fff; 262 | border-radius: 3px; 263 | cursor: pointer; 264 | outline: none; 265 | } 266 | 267 | .no_focus:hover{ 268 | opacity: .9; 269 | } 270 | 271 | input[type="range"]{ 272 | -webkit-appearance: none; 273 | width: 100%; 274 | border-radius: 3px; 275 | cursor: pointer; 276 | } 277 | 278 | input[type="range"]:focus{ 279 | outline: none; 280 | } 281 | 282 | input[type="range"]::-webkit-slider-runnable-track{ 283 | width: 100%; 284 | background: rgba(255,255,255,0.5); 285 | background: @ff; 286 | /*background: lightskyblue;*/ 287 | cursor: pointer; 288 | border-radius: 3px; 289 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1); 290 | height: 6px; 291 | } 292 | 293 | input[type="range"]::-webkit-slider-thumb{ 294 | width: 15px; 295 | height: 15px; 296 | border-radius: 50%; 297 | background: #4080ff; 298 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1); 299 | margin-top: -5px; 300 | margin-left: px; 301 | cursor: pointer; 302 | -webkit-appearance: none; 303 | border: 1px solid #4080ff; 304 | } 305 | 306 | input[type="range"]:hover::-webkit-slider-thumb{ 307 | transform: scale(1.2); 308 | -webkit-transform: scale(1.2); 309 | } 310 | 311 | input[type="range"]::-moz-range-track{ 312 | width: 100%; 313 | background: #fff; 314 | /*background: lightskyblue;*/ 315 | cursor: pointer; 316 | border-radius: 3px; 317 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1); 318 | height: 6px; 319 | } 320 | 321 | input[type="range"]::-moz-range-thumb{ 322 | width: 14px; 323 | height: 14px; 324 | border-radius: 50%; 325 | border: 1px solid #4080ff; 326 | background: #4080ff; 327 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1); 328 | cursor: pointer; 329 | } 330 | 331 | input[type="range"]:hover::-moz-range-thumb{ 332 | transform: scale(1.2); 333 | -moz-transform: scale(1.2); 334 | } 335 | 336 | input[type="range"]::-ms-track{ 337 | width: 100%; 338 | background: transparent; 339 | border-color: transparent; 340 | /*border-width: 10px 0px 10px 0px;*/ 341 | color: transparent; 342 | height: 6px; 343 | border-radius: 3px; 344 | z-index: 2; 345 | position: relative; 346 | border: 1px solid; 347 | /*border: 1px solid #ecf0f1;*/ 348 | /*margin-top: -10px;*/ 349 | } 350 | 351 | input[type="range"]::-ms-fill-lower{ 352 | background: lightskyblue; 353 | border-radius: 3px; 354 | } 355 | 356 | input[type="range"]::-ms-fill-upper{ 357 | background: #ecf0f1; 358 | border-color: #ecf0f1 !important; 359 | border-radius: 3px; 360 | } 361 | 362 | input[type="range"]::-ms-thumb{ 363 | width: 12px; 364 | height: 12px; 365 | border-radius: 50%; 366 | background: #4080ff; 367 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1); 368 | margin-top: 0px; 369 | cursor: pointer; 370 | border: 1px solid #4080ff; 371 | } 372 | 373 | input[type="range"]:focus::-ms-thumb{ 374 | transform: scale(1.2); 375 | -webkit-transform: scale(1.2); 376 | -moz-transform: scale(1.2); 377 | } 378 | 379 | input[type="file"]{ 380 | width: 0.1px; 381 | height: 0.1px; 382 | opacity: 0; 383 | overflow: hidden; 384 | position: absolute; 385 | z-index: -2; 386 | } 387 | 388 | .overlay{ 389 | position: fixed; 390 | width: 100%; 391 | height: 100%; 392 | top: 0px; 393 | left: 0px; 394 | right: 0px; 395 | bottom: 0px; 396 | background: #000; 397 | opacity: 0.5 !important; 398 | z-index: 2; 399 | } 400 | 401 | .hidden_overlay{ 402 | position: fixed; 403 | width: 100%; 404 | height: 100%; 405 | top: 0px; 406 | left: 0px; 407 | right: 0px; 408 | bottom: 0px; 409 | background: transparent !important; 410 | z-index: 2; 411 | } 412 | 413 | .overlay-2{ 414 | position: fixed; 415 | width: 100%; 416 | height: 100%; 417 | top: 0px; 418 | left: 0px; 419 | right: 0px; 420 | bottom: 0px; 421 | background: transparent; 422 | z-index: 20; 423 | display: none; 424 | } 425 | 426 | select{ 427 | font-size: 14px; 428 | font-family: @family; 429 | border-radius: 3px; 430 | border: 1px solid @ee; 431 | cursor: pointer; 432 | outline: none; 433 | /*-moz-appearance: none;*/ 434 | /*-webkit-appearance: none;*/ 435 | } 436 | 437 | select:focus{ 438 | border-color: #56b4ef; 439 | box-shadow: 0px 0px 5px 1px #c8def0; 440 | } 441 | 442 | .spinner{ 443 | width: 0px; 444 | height: 0px; 445 | background: #eee; 446 | border-radius: 50%; 447 | position: absolute; 448 | display: inline-block; 449 | left: 177px; 450 | top: 20px; 451 | } 452 | 453 | .spinner span{ 454 | display: block; 455 | height: 10px; 456 | width: 10px; 457 | background: #ddd; 458 | border-radius: 50%; 459 | position: absolute; 460 | top: 0px; 461 | transition: all .1s ease-in-out; 462 | } 463 | 464 | .spinner span:nth-child(1){ 465 | left: -18px; 466 | animation: bounce 1s ease-in-out infinite; 467 | } 468 | 469 | .spinner span:nth-child(2){ 470 | animation: bounce 1s ease-in-out 0.33s infinite; 471 | } 472 | 473 | .spinner span:nth-child(3){ 474 | left: 18px; 475 | animation: bounce 1s ease-in-out 0.66s infinite; 476 | } 477 | 478 | @keyframes bounce { 479 | 0%, 75%, 100%{ 480 | transform: translateY(0px); 481 | } 482 | 25%{ 483 | transform: translateY(-10px) 484 | } 485 | } 486 | 487 | .inst_checkbox{ 488 | display: none; 489 | } 490 | 491 | .inst_checkbox + label:before{ 492 | content: "\f096"; 493 | font-family: "FontAwesome"; 494 | speak: none; 495 | font-weight: normal; 496 | font-style: normal; 497 | font-variant: normal; 498 | text-transform: normal; 499 | line-height: 1; 500 | -webkit-font-smoothing: antialiased; 501 | } 502 | 503 | .inst_checkbox:checked + label::before{ 504 | content: "\f14a"; 505 | color: #06a3e9; 506 | animation: tick 1s ease-in; 507 | } 508 | 509 | 510 | .inst_checkbox:disabled + label{ 511 | color: #aaa; 512 | } 513 | 514 | .inst_checkbox:disabled + label::before{ 515 | content: "\f0c8"; 516 | color: #ccc; 517 | } 518 | 519 | #hoverdiv{ 520 | position: absolute; 521 | background: #333; 522 | padding: 4px 14px; 523 | color: white; 524 | font-size: 13px; 525 | border-radius: 3px; 526 | top: 0px; 527 | left: 0px; 528 | display: none; 529 | z-index: 4; 530 | } 531 | 532 | .handy-notify{ 533 | position: fixed; 534 | background: #333; 535 | left: 2%; 536 | /*transform: translate(-50%, -50%);*/ 537 | color: @ff; 538 | border-radius: 3px; 539 | padding: 12px 80px 12px 25px; 540 | /*padding: 10px 30px;*/ 541 | font-size: 15px; 542 | cursor: pointer; 543 | text-align: left; 544 | z-index: 3; 545 | top: 105%; 546 | } 547 | 548 | .handy-tooltip-after::after{ 549 | content: ""; 550 | position: absolute; 551 | width: 8px; 552 | height: 8px; 553 | background: #333; 554 | transform: rotate(45deg); 555 | -webkit-transform: rotate(45deg); 556 | -moz-transform: rotate(45deg); 557 | bottom: -3px; 558 | left: 45%; 559 | z-index: -1; 560 | } 561 | 562 | .handy-tooltip-before::before{ 563 | content: ""; 564 | position: absolute; 565 | width: 8px; 566 | height: 8px; 567 | background: #333; 568 | transform: rotate(45deg); 569 | -webkit-transform: rotate(45deg); 570 | -moz-transform: rotate(45deg); 571 | top: -3px; 572 | left: 45%; 573 | z-index: -1; 574 | } 575 | 576 | .pro_ava_active{ 577 | box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08) !important; 578 | -webkit-box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08) !important; 579 | -moz-box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08) !important; 580 | border: 3px solid #54BBFF !important; 581 | animation: pro_active 0.1s ease-in-out; 582 | -webkit-animation: pro_active 0.1s ease-in-out; 583 | -moz-animation: pro_active 0.1s ease-in-out; 584 | } 585 | 586 | @keyframes pro_active { 587 | 0%{ 588 | transform: scale(1); 589 | } 590 | 50%{ 591 | transform: scale(0.95); 592 | } 593 | 100%{ 594 | transform: scale(1); 595 | } 596 | } 597 | 598 | @-webkit-keyframes pro_active { 599 | 0%{ 600 | -webkit-transform: scale(1); 601 | } 602 | 50%{ 603 | -webkit-transform: scale(0.95); 604 | } 605 | 100%{ 606 | -webkit-transform: scale(1); 607 | } 608 | } 609 | 610 | @-moz-keyframes pro_active { 611 | 0%{ 612 | -moz-transform: scale(1); 613 | } 614 | 50%{ 615 | -moz-transform: scale(0.95); 616 | } 617 | 100%{ 618 | -moz-transform: scale(1); 619 | } 620 | } 621 | 622 | .follow{ 623 | background: @pric !important; 624 | border: 1px solid @pric !important; 625 | } 626 | 627 | .unfollow{ 628 | background: #6ae03b !important; 629 | color: white !important; 630 | border: 1px solid #6ae03b !important; 631 | } 632 | 633 | .unfollow:focus{ 634 | /*background: #69b14c !important;*/ 635 | background: #fbf2f2; 636 | } 637 | 638 | .textarea_toggle{ 639 | height: 32px !important 640 | } 641 | 642 | .overlay_cursor{ 643 | cursor: -webkit-zoom-out; 644 | cursor: -moz-zoom-out; 645 | cursor: -ms-zoom-out; 646 | } 647 | 648 | .overlay_toggle{ 649 | opacity: 0.8 !important; 650 | } 651 | 652 | // NOTHING COMPONENT 653 | .home_last_mssg{ 654 | position: relative; 655 | border-radius: 4px; 656 | background:@ff; 657 | border: 1px solid @header_border; 658 | font-size: 14px; 659 | text-align: center; 660 | padding: 10px; 661 | cursor: default; 662 | 663 | & img{ 664 | position: relative; 665 | text-align: center; 666 | width: 150px; 667 | /*margin-bottom: 10px;*/ 668 | display: block; 669 | left: 48%; 670 | transform: translate(-50%); 671 | } 672 | 673 | & span{ 674 | position: relative; 675 | text-align: center; 676 | display: block; 677 | left: -5px; 678 | /*top: -5px;*/ 679 | } 680 | 681 | } 682 | 683 | .modal{ 684 | .center(); 685 | position: fixed !important; 686 | .modal-shadow(); 687 | width: 300px; 688 | border-radius: 3px; 689 | z-index: 2; 690 | background: @ff; 691 | font-size: 14px; 692 | 693 | & .modal_no{ 694 | text-align: center; 695 | position: relative; 696 | top: 30px; 697 | & img{ width: 150px; } 698 | } 699 | 700 | & .modal_header{ 701 | background: @header; 702 | border-bottom: 1px solid @header_border; 703 | padding: 10px; 704 | border-top-left-radius: 3px; 705 | border-top-right-radius: 3px; 706 | // font-weight: 600; 707 | 708 | & span.title{ 709 | font-weight: 600; 710 | } 711 | 712 | } 713 | 714 | & .modal_middle{ 715 | position: relative; 716 | padding: 10px; 717 | 718 | } 719 | 720 | & .modal_bottom{ 721 | display: block; 722 | text-align: right; 723 | padding: 9px 5px 12px 5px; 724 | border-top: 1px solid @ee; 725 | margin-top: 0px; 726 | 727 | & a, & input[type='submit']{ 728 | display: inline-block; 729 | padding: 4px 10px; 730 | font-weight: 600; 731 | } 732 | 733 | } 734 | 735 | } 736 | 737 | .modal_big{ 738 | width: 400px; 739 | 740 | & .modal_middle{ 741 | height: 450px; 742 | width: inherit; 743 | overflow: auto; 744 | padding: 0px !important; 745 | 746 | & .modal_main{ 747 | position: relative; 748 | padding: 5px 0px; 749 | 750 | & .modal_items{ 751 | margin-bottom: 5px; 752 | position: relative; 753 | padding: 0px 5px 5px 5px; 754 | 755 | & .modal_it_img{ 756 | position: relative; 757 | display: inline-block; 758 | height: 45px; 759 | margin-left: 5px; 760 | 761 | & img{ 762 | width: 45px; 763 | height: 45px; 764 | border-radius: 3px; 765 | } 766 | 767 | } 768 | 769 | & .modal_it_content{ 770 | display: inline-block; 771 | position: relative; 772 | width: 83%; 773 | margin-left: 8px; 774 | top: -10px; 775 | 776 | & .modal_it_info{ 777 | display: inline-block; 778 | width: 100%; 779 | 780 | & a.modal_it_username{ 781 | font-size: 14px; 782 | color: @dark; 783 | font-weight: 600; 784 | display: block; 785 | outline: none; 786 | 787 | &:hover,&:focus{text-decoration: underline;} 788 | 789 | } 790 | 791 | & span.modal_it_light{ 792 | color: @d_light; 793 | font-size: 13px; 794 | } 795 | 796 | } 797 | 798 | & .modal_ff{ 799 | display: inline-block; 800 | position: absolute; 801 | right: 5px; 802 | top: 5px; 803 | text-align: right; 804 | 805 | & a{ 806 | display: inline-block; 807 | padding: 5px 15px; 808 | font-weight: 600; 809 | } 810 | 811 | } 812 | 813 | } 814 | 815 | & hr{ 816 | border-top-color: @ee; 817 | margin-top: 3px; 818 | } 819 | 820 | } 821 | 822 | } 823 | 824 | } 825 | 826 | & .modal_bottom{ 827 | margin-top: 1px; 828 | 829 | & a:last-of-type{ 830 | margin-right: 10px; 831 | margin-left: 5px; 832 | } 833 | 834 | } 835 | 836 | } 837 | 838 | // FADE Transition for Components 839 | .fade-enter { 840 | opacity: 0.01; 841 | } 842 | 843 | .fade-enter.fade-enter-active { 844 | opacity: 1; 845 | transition: opacity 500ms ease-in; 846 | } 847 | 848 | .fade-exit { 849 | opacity: 1; 850 | } 851 | 852 | .fade-exit.fade-exit-active { 853 | opacity: 0.01; 854 | transition: opacity 300ms ease-in; 855 | } -------------------------------------------------------------------------------- /public/styles/src/styles.less: -------------------------------------------------------------------------------- 1 | @import 'defaults.less'; 2 | 3 | .notes_wrapper{ 4 | margin-top: 70px; 5 | } 6 | 7 | .index_header{ 8 | width: 100%; 9 | height: 50px; 10 | position: fixed; 11 | z-index: 1; 12 | top: 0px; 13 | 14 | & .right{ 15 | float: right; 16 | position: relative; 17 | display: inline-block; 18 | right: 70px; 19 | top: 21px; 20 | 21 | & a{ 22 | border: 1px solid @ee; 23 | outline: none; 24 | padding: 4px 16px; 25 | border-radius: 3px; 26 | font-size: 14px; 27 | margin-right: 5px; 28 | color: #3d464d; 29 | background: @ff; 30 | 31 | & a[href='help']{ margin-right: 0px; } 32 | 33 | & .index_header > .right > a[href="about"]{ margin-right: 5px; } 34 | 35 | &:hover{ background: @second_border; } 36 | 37 | &:focus{ background: @second_border; } 38 | 39 | } 40 | 41 | } 42 | 43 | } 44 | 45 | .header_loggedin{ 46 | background: @ff; 47 | box-shadow: 0 0 5px rgba(0,0,0,0.1); 48 | position: fixed; 49 | width: 100%; 50 | height: 45px; 51 | background: white; 52 | z-index: 2; 53 | top: 0px; 54 | 55 | & a{ 56 | font-size: 14px; 57 | color: @dark; 58 | margin-left: 7px; 59 | padding: 5px 12px; 60 | border-radius: 3px; 61 | display: inline-block; 62 | 63 | &:hover{ background: @second_border; } 64 | 65 | &:focus{ background: @second_border; } 66 | 67 | } 68 | 69 | & .left{ 70 | display: inline-block; 71 | position: relative; 72 | top: 8px; 73 | left: 25px; 74 | } 75 | 76 | & .right { 77 | display: inline-block; 78 | position: absolute; 79 | top: 8px; 80 | right: 3%; 81 | } 82 | 83 | } 84 | 85 | // for active links 86 | .ha_active{ background: @second_border; } 87 | 88 | .log_sign{ 89 | position: absolute; 90 | right: 50px; 91 | top: 88px; 92 | } 93 | 94 | .log_sign > a{ 95 | padding: 5px 18px; 96 | border-radius: 4px; 97 | font-size: 14px; 98 | } 99 | 100 | .display_text{ 101 | text-align: center; 102 | margin-bottom: 30px; 103 | } 104 | 105 | .display_text > span{ 106 | font-size: 23px; 107 | color: #0b867a; 108 | } 109 | 110 | // REGISTER PAGE 111 | 112 | .cua{ 113 | width: 300px; 114 | .center(); 115 | } 116 | 117 | .cua form > *{ 118 | display: block; 119 | margin-bottom: 10px; 120 | width: 92%; 121 | padding: 8px 10px; 122 | font-size: 14px; 123 | } 124 | 125 | .cua input[type='submit']{ 126 | width: 99%; 127 | } 128 | 129 | // REGISTERED PAGE 130 | .registered{ 131 | position: absolute; 132 | background: @ff; 133 | padding: 20px; 134 | width: 300px; 135 | top: 50%; 136 | left: 50%; 137 | transform: translate(-50%, -50%); 138 | font-size: 15px; 139 | border-radius: 5px; 140 | box-shadow: 0px 0px 15px 0px rgba(0,0,0,.1); 141 | } 142 | 143 | // PROFILE PAGE 144 | .user_banner{ 145 | text-align: center; 146 | position: relative; 147 | background: white; 148 | width: 580px; 149 | left: 367px; 150 | padding: 15px; 151 | border: 1px solid @header_border; 152 | border-radius: 4px; 153 | 154 | .user_buttons{ 155 | position: absolute; 156 | right: 15px; 157 | top: 15px; 158 | 159 | &>a{ 160 | padding: 5px 15px; 161 | font-size: 14px; 162 | display: inline-block; 163 | margin-right: 5px; 164 | 165 | } 166 | 167 | } 168 | 169 | & .profile_img_div{ 170 | margin-top: 10px; 171 | & img{ 172 | border-radius: 50%; 173 | height: 150px; 174 | width: 150px; 175 | } 176 | } 177 | 178 | & .user_info{ 179 | margin-top: 10px; 180 | 181 | & a.user_main_link{ 182 | font-weight: 600; 183 | color: @dark; 184 | display: block; 185 | font-size: 16px; 186 | } 187 | 188 | & .user_no_notes{ 189 | color: @d_light; 190 | font-size: 13px; 191 | } 192 | 193 | & .user_bio{ 194 | text-align: center; 195 | font-size: 14px; 196 | margin-top: 7px; 197 | } 198 | 199 | & hr{ 200 | margin: 25px 0px 10px 0px; 201 | border-top: 1px solid #f5eded; 202 | } 203 | 204 | & .user_stats{ 205 | text-align: center; 206 | 207 | &>div, &>a{ 208 | display: inline-block; 209 | padding: 7px 40px; 210 | text-align: center; 211 | position: relative; 212 | cursor: pointer; 213 | border-radius: 3px; 214 | color: inherit; 215 | 216 | &:hover{ 217 | background: @second_border; 218 | } 219 | 220 | & .stat_hg{ 221 | display: block; 222 | font-size: 15px; 223 | font-weight: 600; 224 | } 225 | 226 | } 227 | 228 | & .stat_disabled{ 229 | cursor: text !important; 230 | &:hover{ background: @ff; } 231 | } 232 | 233 | } 234 | 235 | } 236 | 237 | } 238 | 239 | .notes{ 240 | margin-top: 20px; 241 | display: inline-block; 242 | margin-left: 365px; 243 | margin-bottom: 50px; 244 | width: 614px; 245 | } 246 | 247 | .note{ 248 | background: @ff; 249 | padding: 10px; 250 | display: block; 251 | font-size: 14px; 252 | border: 1px solid @header_border; 253 | border-radius: 3px; 254 | margin-bottom: 10px; 255 | cursor: pointer; 256 | 257 | &:hover{ 258 | border-color: @ee; 259 | } 260 | 261 | & .note_header{ 262 | margin-bottom: 7px; 263 | 264 | & img{ 265 | height: 31px; 266 | width: 31px; 267 | border-radius: 50%; 268 | display: inline-block; 269 | } 270 | 271 | & .note_h_left{ 272 | display: inline-block; 273 | margin-left: 5px; 274 | width: 90%; 275 | 276 | & .note_username{ 277 | display: block; 278 | color: @dark; 279 | font-weight: 600; 280 | position: relative; 281 | top: 2px; 282 | } 283 | 284 | & .note_time{ 285 | font-size: 13px; 286 | color: @d_light; 287 | position: relative; 288 | top: -1px; 289 | } 290 | 291 | } 292 | 293 | } 294 | 295 | & .note_title, & .note_content{ 296 | color: @dark; 297 | } 298 | 299 | & .note_title{ 300 | margin-bottom: 4px; 301 | font-weight: 600; 302 | } 303 | 304 | } 305 | 306 | .create_note{ 307 | width: 380px; 308 | 309 | & input[type='text'], & textarea{ 310 | padding: 7px !important; 311 | width: 94%; 312 | font-size: 14px; 313 | } 314 | 315 | & input[type="text"]{ 316 | margin-bottom: 9px; 317 | } 318 | 319 | & textarea{ 320 | height: 250px; 321 | } 322 | 323 | & .c_n_bottom{ 324 | margin-top: 1px; 325 | 326 | & input[type='submit']{ 327 | margin-left: 5px; 328 | padding: 5px 10px; 329 | margin-right: 6px; 330 | font-size: 14px; 331 | } 332 | } 333 | 334 | } 335 | 336 | // WELCOME AND ERROR PAGE 337 | .welcome_div{ 338 | .center(); 339 | & img{ 340 | height: 300px; 341 | } 342 | } 343 | 344 | .error_div{ 345 | width: 436px; 346 | 347 | .error_info{ 348 | margin-bottom: 10px; 349 | width: 100%; 350 | & span{ 351 | font-size: 20px; 352 | } 353 | } 354 | 355 | .error_bottom { 356 | text-align: right; 357 | margin-top: 3px; 358 | 359 | & a{ 360 | display: inline-block; 361 | padding: 4px 15px; 362 | font-weight: 600; 363 | font-size: 14px; 364 | 365 | &:last-of-type{ 366 | margin-left: 5px; 367 | } 368 | 369 | } 370 | 371 | } 372 | 373 | 374 | } 375 | // view note 376 | .view_note{ 377 | width: 600px; 378 | 379 | & .v_n_middle{ 380 | 381 | & .v_n_info{ 382 | margin-bottom: 5px; 383 | 384 | & img{ 385 | width: 40px; 386 | height: 40px; 387 | border-radius: 50%; 388 | display: inline-block; 389 | } 390 | 391 | & .v_n_left{ 392 | display: inline-block; 393 | margin-left: 5px; 394 | position: relative; 395 | top: -5px; 396 | 397 | & .v_n_username{ 398 | display: block; 399 | font-weight: 600; 400 | font-size: 15px; 401 | color: inherit; 402 | 403 | &:hover, &:focus{ text-decoration: underline; } 404 | 405 | } 406 | 407 | & .v_n_time{ 408 | font-size: 13px; 409 | color: @d_light; 410 | position: relative; 411 | top: -2px; 412 | } 413 | 414 | } 415 | 416 | } 417 | 418 | & .v_n_title{ 419 | font-weight: 600; 420 | display: block; 421 | margin-bottom: 3px; 422 | font-size: 15px; 423 | outline: none; 424 | } 425 | 426 | & .v_n_content{ 427 | display: block; 428 | outline: none; 429 | } 430 | 431 | & .v_n_title[contenteditable='true'], 432 | & .v_n_content[contenteditable='true']{ 433 | border: 1px solid #54BBFF; 434 | padding: 5px 5px !important; 435 | border-radius: 2px; 436 | } 437 | 438 | } 439 | 440 | & .v_n_bottom { 441 | 442 | a{ margin-left: 5px; } 443 | 444 | & .v_n_cancel{ margin-right: 5px; } 445 | 446 | & .v_n_int{ 447 | position: absolute; 448 | color: @d_light; 449 | bottom: 10px; 450 | left: 10px; 451 | 452 | span.like_unlike{ 453 | display: inline-block; 454 | height: 24px; 455 | cursor: pointer; 456 | transition: all .1s ease-in-out; 457 | 458 | &:hover{ 459 | color: @dark; 460 | transform: scale(1.1); 461 | } 462 | 463 | } 464 | 465 | & .like_unlike_disabled{ 466 | cursor: not-allowed !important; 467 | pointer-events: none !important; 468 | color: #d8c3c3 !important; 469 | } 470 | 471 | } 472 | 473 | } 474 | 475 | } 476 | 477 | .content_editor{ 478 | margin-top: 5px; 479 | } 480 | 481 | .edit{ 482 | position: relative; 483 | width: 400px; 484 | left: 490px; 485 | font-size: 14px; 486 | 487 | & .edit_animation > *{ 488 | display: block; 489 | width: 100%; 490 | margin-top: 15px; 491 | } 492 | 493 | & .eb_btns{ 494 | text-align: right; 495 | 496 | & a{ 497 | display: inline-block; 498 | margin-right: 23px; 499 | padding: 5px 20px; 500 | } 501 | 502 | & form{ 503 | display: inline-block; 504 | & .avatar_span{ 505 | display: inline-block; 506 | padding: 5px 10px 6px 10px; 507 | margin-right: 7px; 508 | } 509 | } 510 | 511 | } 512 | 513 | & .edit_span{ 514 | color: @d_light; 515 | display: block; 516 | position: relative; 517 | font-size: 14px; 518 | margin-bottom: 5px; 519 | } 520 | 521 | & .edit_info{ 522 | 523 | & img{ 524 | width: 35px; 525 | height: 35px; 526 | border-radius: 50%; 527 | position: relative; 528 | display: inline-block; 529 | } 530 | 531 | & span { 532 | position: relative; 533 | top: -12px; 534 | left: 8px; 535 | font-size: 18px; 536 | font-weight: 600; 537 | } 538 | 539 | } 540 | 541 | & .e_joined{ 542 | text-align: right; 543 | width: 94%; 544 | } 545 | 546 | & input[type='text'], 547 | & input[type='email'], 548 | textarea{ 549 | width: 90%; 550 | padding: 8px; 551 | font-size: 14px; 552 | } 553 | 554 | & textarea{ 555 | height: 100px; 556 | } 557 | 558 | & .resend_vl_div{ 559 | text-align: right; 560 | 561 | & .resend_vl{ 562 | display: inline-block; 563 | padding: 5px 15px; 564 | margin-right: 21px; 565 | } 566 | 567 | } 568 | 569 | } 570 | 571 | // HOME 572 | 573 | .home{ 574 | position: relative; 575 | width: 607px; 576 | margin-left: 365px; 577 | margin-bottom: 60px; 578 | 579 | & .home_info{ 580 | margin-bottom: 10px; 581 | background: @ff; 582 | padding: 14px 10px; 583 | border: 1px solid @header_border; 584 | border-radius: 3px; 585 | font-size: 15px; 586 | 587 | & a{ 588 | position: absolute; 589 | right: 10px; 590 | padding: 4px 12px; 591 | top: 10px; 592 | } 593 | 594 | } 595 | 596 | } 597 | 598 | // PAGE END 599 | .page_end{ 600 | padding: 10px; 601 | text-align: center; 602 | font-size: 14px; 603 | margin-top: 10px; 604 | color: @d_light; 605 | cursor: pointer; 606 | border-radius: 3px; 607 | border: 1px solid @fb; 608 | 609 | &:hover{ border: 1px solid @ee; } 610 | 611 | } 612 | 613 | // EXPLORE PAGE 614 | .explore{ 615 | 616 | & .explores{ 617 | display: inline-block; 618 | width: 615px; 619 | margin-left: 365px; 620 | 621 | & div.explores_list{ 622 | position: relative; 623 | background: @ff; 624 | // width: 100%; 625 | padding: 10px; 626 | border-radius: 3px; 627 | border: 1px solid @header_border; 628 | margin-bottom: 10px; 629 | 630 | &:hover{ border-color: @ee; } 631 | 632 | & .exl_main{ 633 | 634 | & img{ 635 | width: 45px; 636 | height: 45px; 637 | border-radius: 50%; 638 | } 639 | 640 | & .exl_content{ 641 | display: inline-block; 642 | position: relative; 643 | top: -8px; 644 | margin-left: 7px; 645 | 646 | & a.exl_username{ 647 | color: @dark; 648 | font-size: 14px; 649 | font-weight: 600; 650 | } 651 | 652 | & div.exl_desc{ 653 | color: @d_light; 654 | 655 | & span.exl_desc_sep{ 656 | margin-left: 5px; 657 | margin-right: 5px; 658 | } 659 | 660 | } 661 | 662 | } 663 | 664 | } 665 | 666 | & .exl_ff{ 667 | position: absolute; 668 | right: 15px; 669 | top: 25px; 670 | 671 | & a{ 672 | padding: 5px 20px; 673 | font-size: 14px; 674 | } 675 | 676 | } 677 | 678 | } 679 | 680 | } 681 | 682 | } 683 | 684 | // PROMPT MODAL 685 | .prompt{ 686 | position: fixed; 687 | top: 50%; 688 | left: 50%; 689 | transform: translate(-50%, -50%); 690 | z-index: 2; 691 | background: @ff; 692 | width: 400px; 693 | border-radius: 3px; 694 | .modal-shadow(); 695 | 696 | & .prompt-top{ 697 | padding: 10px 10px; 698 | background: @third-border; 699 | border-top-left-radius: 3px; 700 | border-top-right-radius: 3px; 701 | border-bottom: 1px solid @ee; 702 | 703 | & .prompt-title{ 704 | font-size: 15px; 705 | font-weight: 600; 706 | } 707 | 708 | & span:last-of-type{ 709 | display: inline-block; 710 | position: absolute; 711 | right: 7px; 712 | top: 7px; 713 | padding: 2px; 714 | color: @d_light; 715 | height: 20px; 716 | cursor: pointer; 717 | border: 1px solid @third-border; 718 | border-radius: 3px; 719 | 720 | &:hover{ 721 | color: #1b2733; 722 | border: 1px solid #e2dbdb; 723 | } 724 | 725 | & i{ 726 | font-size: 20px; 727 | position: relative; 728 | left: 1px; 729 | } 730 | 731 | } 732 | 733 | } 734 | 735 | & .prompt-middle{ 736 | padding: 4px 10px; 737 | font-size: 14px; 738 | margin-top: 11px; 739 | margin-bottom: 10px; 740 | position: relative; 741 | 742 | & span{ 743 | display: inline-block; 744 | position: relative; 745 | } 746 | 747 | } 748 | 749 | & .prompt-bottom{ 750 | padding: 8px 10px 8px 10px; 751 | border-top: 1px solid @ee; 752 | text-align: right; 753 | 754 | & a{ 755 | display: inline-block; 756 | padding: 4px 12px; 757 | font-weight: 600; 758 | 759 | &:last-of-type{ 760 | margin-left: 5px; 761 | } 762 | 763 | } 764 | 765 | } 766 | 767 | } 768 | 769 | // GOTO COMPONENT 770 | .goto{ 771 | position: absolute; 772 | right: 7px; 773 | top: 6px; 774 | height: 28px; 775 | 776 | & .goto_link{ 777 | 778 | & .goto_label{ 779 | position: relative; 780 | top: -7px; 781 | right: 2px; 782 | font-weight: 600; 783 | } 784 | 785 | & span.show_more{ 786 | display: inline-block; 787 | height: 24px; 788 | border: 1px solid @header; 789 | border-radius: 2px; 790 | cursor: pointer; 791 | color: @d_light; 792 | transition: all .1s ease-in-out; 793 | 794 | &:focus{ color: @dark; } 795 | 796 | } 797 | 798 | } 799 | 800 | & .goto_options{ 801 | right: -2px; 802 | top: 35px; 803 | 804 | &::before{ 805 | content: ""; 806 | background: white; 807 | width: 11px; 808 | height: 11px; 809 | top: -6px; 810 | position: absolute; 811 | border-top: 1px solid #DCDFE1; 812 | transform: rotate(45deg); 813 | border-left: 1px solid #DCDFE1; 814 | right: 9px; 815 | z-index: -1; 816 | } 817 | 818 | } 819 | 820 | } 821 | 822 | // DEACTIVATE 823 | .deactivate{ 824 | width: 500px; 825 | 826 | & .deactivate_title{ 827 | font-weight: 600; 828 | display: block; 829 | margin-bottom: 5px; 830 | } 831 | 832 | & .deactivate_btn{ 833 | display: block; 834 | margin-top: 11px; 835 | text-align: right; 836 | 837 | & a{ 838 | display: inline-block; 839 | padding: 4px 10px; 840 | } 841 | 842 | } 843 | 844 | } -------------------------------------------------------------------------------- /react-user-system.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 4.5.1 3 | -- http://www.phpmyadmin.net 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Aug 03, 2017 at 12:32 PM 7 | -- Server version: 10.1.19-MariaDB 8 | -- PHP Version: 5.6.28 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | SET time_zone = "+00:00"; 12 | 13 | 14 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 15 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 16 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 17 | /*!40101 SET NAMES utf8mb4 */; 18 | 19 | -- 20 | -- Database: `react-user-system` 21 | -- 22 | 23 | -- -------------------------------------------------------- 24 | 25 | -- 26 | -- Table structure for table `users` 27 | -- 28 | 29 | CREATE TABLE `users` ( 30 | `id` int(11) NOT NULL, 31 | `username` varchar(32) NOT NULL, 32 | `email` varchar(200) NOT NULL, 33 | `password` varchar(200) NOT NULL, 34 | `joined` varchar(100) NOT NULL 35 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 36 | 37 | -- 38 | -- Dumping data for table `users` 39 | -- 40 | 41 | INSERT INTO `users` (`id`, `username`, `email`, `password`, `joined`) VALUES 42 | (3, 'takkar', 'takkar@gmail.com', '$2a$10$jRZM7FlOGhfuUONuwhblUeChyteH9YIl88zpM21ERHcv43VYe8sMi', '1501700229631'), 43 | (5, 'faiyaz', 'faiyaz@gmail.com', '$2a$10$6RFcvOtlH6gNqg.hyyfsy.WMsY6Onds.807M.O44TbFOKSTCS7r6q', '1501706483478'), 44 | (6, 'ghalib', 'ghalib@gmail.com', '$2a$10$wz9ZE3w1a4d2ND6KtgtsVeqG4hPw7nubijEWd7hpyJPbUQNcliaZW', '1501756181565'); 45 | 46 | -- 47 | -- Indexes for dumped tables 48 | -- 49 | 50 | -- 51 | -- Indexes for table `users` 52 | -- 53 | ALTER TABLE `users` 54 | ADD PRIMARY KEY (`id`); 55 | 56 | -- 57 | -- AUTO_INCREMENT for dumped tables 58 | -- 59 | 60 | -- 61 | -- AUTO_INCREMENT for table `users` 62 | -- 63 | ALTER TABLE `users` 64 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7; 65 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 66 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 67 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 68 | -------------------------------------------------------------------------------- /routes/api-routes.js: -------------------------------------------------------------------------------- 1 | const 2 | app = require('express').Router(), 3 | P = require('bluebird'), 4 | db = require('../models/db') 5 | 6 | app.post('/get-session', (req, res) => { 7 | let 8 | { session } = req, 9 | loggedIn = session.id ? true : false 10 | res.json({ loggedIn, session }) 11 | }) 12 | 13 | module.exports = app -------------------------------------------------------------------------------- /routes/main-routes.js: -------------------------------------------------------------------------------- 1 | const 2 | app = require('express').Router() 3 | 4 | app.get('*', (req, res) => { 5 | res.render('app') 6 | }) 7 | 8 | module.exports = app 9 | -------------------------------------------------------------------------------- /routes/user-routes.js: -------------------------------------------------------------------------------- 1 | const 2 | app = require('express').Router(), 3 | db = require('../models/db'), 4 | P = require('bluebird'), 5 | chalk = require('../models/chalk') 6 | 7 | app.post('/signup', (req, res) => { 8 | let { body: { username, email, password, password_again }, session } = req 9 | 10 | req.checkBody('username', 'Username is empty').notEmpty() 11 | req.checkBody('username', 'Username must contain only leters').isAlpha() 12 | req.checkBody('username', 'Username must be greater than 4').isLength({ min: 4 }) 13 | req.checkBody('username', 'Username must be less than 32').isLength({ max: 32 }) 14 | 15 | req.checkBody('email', 'Email is empty').notEmpty() 16 | req.checkBody('email', 'Email is invalid').isEmail() 17 | 18 | req.checkBody('password', 'Password field is empty').notEmpty() 19 | req.checkBody('password_again', 'Password field is empty').notEmpty() 20 | req.checkBody('password', 'Passwords don\'t match').equals(password_again) 21 | 22 | P.coroutine(function *(){ 23 | 24 | let errors = yield req.getValidationResult() 25 | 26 | if(!errors.isEmpty()){ 27 | let 28 | result = errors.array(), 29 | array = [] 30 | result.forEach(item => array.push(item.msg) ) 31 | res.json({ mssg: array }) 32 | } else { 33 | let 34 | user_q = yield db.query('SELECT COUNT(*) as usernameCount from users WHERE username = ?', [username]), 35 | [{ usernameCount: userCount }] = user_q 36 | 37 | if(userCount == 1){ 38 | res.json({ mssg: "Username already exists!" }) 39 | } else { 40 | let 41 | email_q = yield db.query('SELECT COUNT(*) as emailCount FROM users WHERE email = ?', [email]), 42 | [{ emailCount }] = email_q 43 | 44 | if(emailCount == 1){ 45 | res.json({ mssg: "Email already exists!" }) 46 | } else { 47 | let 48 | newUser = { 49 | username, 50 | email: req.body.email, 51 | password, 52 | joined: new Date().getTime() 53 | }, 54 | create_user = yield db.createUser(newUser), 55 | { affectedRows, insertId } = create_user 56 | 57 | if(affectedRows == 1){ 58 | 59 | res.json({ mssg: "You can now login!!", success: true }) 60 | 61 | } 62 | } 63 | } 64 | } 65 | 66 | })() 67 | }) 68 | 69 | app.post('/login', (req, res) => { 70 | P.coroutine(function* (){ 71 | let { body: { username: rusername, password: rpassword }, session } = req 72 | 73 | req.checkBody('username', 'Username is empty').notEmpty() 74 | req.checkBody('password', 'Password field is empty').notEmpty() 75 | 76 | let errors = yield req.getValidationResult() 77 | 78 | if(!errors.isEmpty()){ 79 | let 80 | result = errors.array() 81 | array = [] 82 | result.forEach(item => array.push(item.msg) ) 83 | res.json({ mssg: array }) 84 | } else { 85 | let 86 | user = yield db.query('SELECT COUNT(id) as userCount, id, password, email, joined from users WHERE username = ? LIMIT 1', [ rusername ]), 87 | [{ userCount, id, password, email, joined }] = user 88 | if(userCount == 0){ 89 | res.json({ mssg: "User not found!" }) 90 | } else if(userCount > 0) { 91 | let same = yield db.comparePassword(rpassword, password) 92 | if(!same){ 93 | res.json({ mssg: "Wrong password!" }) 94 | } else { 95 | session.id = id 96 | session.username = rusername 97 | session.email = email, 98 | session.joined = joined 99 | res.json({ mssg: `Hello, ${session.username}!!`, success: true, loggedIn: true, session }) 100 | } 101 | } 102 | } 103 | 104 | })() 105 | }) 106 | 107 | app.post('/logout', (req, res) => { 108 | req.session.id = null 109 | req.session.username = null 110 | res.json("Hello, World!!") 111 | }) 112 | 113 | module.exports = app -------------------------------------------------------------------------------- /views/app.hbs: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /views/layout/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |
20 |
21 | 22 | {{{ body }}} 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | entry: "./public/js/src/main.js", 5 | output: { 6 | path: path.join(__dirname, "/public/js/dist/"), 7 | filename: "bundle.js" 8 | }, 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.js$/, 13 | exclude: /node_modules/, 14 | loader: "babel-loader", 15 | query: { 16 | "presets": ["es2015", "react", "stage-0"], 17 | "plugins": ["react-html-attrs", "transform-class-properties", "transform-decorators-legacy", "transform-react-jsx-source"] 18 | } 19 | } 20 | ] 21 | }, 22 | watch: true 23 | } --------------------------------------------------------------------------------