add project

Web/Backend/index.js

+var mysql = require("mysql");
+
+var con = mysql.createConnection({
+  host: "localhost",
+  user: "root",
+  password: "",
+  database: "b_beauty_project"
+});
+
+con.connect(function(err) {
+if (err) throw err;
+console.log("Connected!");
+
+});
+
+

Web/b_beauty_project/.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Web/b_beauty_project/README.md

+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Web/b_beauty_project/package.json

+{
+  "name": "b_beauty_project",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@date-io/date-fns": "^1.3.11",
+    "@material-ui/core": "^4.8.3",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.40",
+    "@material-ui/pickers": "^3.2.9",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
+    "date-fns": "^2.9.0",
+    "material-table": "^1.56.1",
+    "mysql": "^2.18.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-intl": "^3.11.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.3.0",
+    "recompose": "^0.30.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

Web/b_beauty_project/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <!-- Fonts -->
+  <title>จองคิวร้านเสริมสวย กับ B Beauty</title>
+  <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
\ No newline at end of file

Web/b_beauty_project/public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

Web/b_beauty_project/public/robots.txt

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

Web/b_beauty_project/src/components/AppBra/index.js

+import React, { Component } from "react";
+import { withStyles } from "@material-ui/styles";
+import { AppBar, Tabs, Tab, Badge, Paper } from "@material-ui/core";
+import ShoppingBasket from "@material-ui/icons/ShoppingBasketOutlined";
+import AccountCircle from "@material-ui/icons/AccountCircleOutlined";
+import CreditCard from "@material-ui/icons/CreditCardOutlined";
+import LiveHelpIcon from "@material-ui/icons/LiveHelpOutlined";
+import HelpIcon from "@material-ui/icons/HelpOutline";
+import RedeemIcon from "@material-ui/icons/RedeemOutlined";
+import SupervisedUserCircleOutlinedIcon from "@material-ui/icons/SupervisedUserCircleOutlined";
+import MapIcon from "@material-ui/icons/MapOutlined";
+import compose from "recompose/compose";
+import { withRouter } from "react-router-dom";
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    width: "100%",
+    backgroundColor: theme.palette.background.paper
+  },
+  flex: {
+    flex: 1
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(3),
+    right: theme.spacing(3)
+  },
+  container: {
+    display: "flex",
+    flexWrap: "wrap"
+  },
+  dense: {
+    marginTop: theme.spacing(2)
+  },
+  textField: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  },
+  margin: {
+    margin: theme.spacing(2)
+  }
+});
+
+class Dashboard extends Component {
+  render() {
+    const { classes, history, tab, handleChangeTab } = this.props;
+    const badgeOrder = 5;
+    const badgeUser = 6;
+    const badgeCredit = 2;
+    const badgePlace = 12;
+    return (
+      <div className={classes.root}>
+        <AppBar position="static" color="default">
+          <Tabs
+            value={tab}
+            onChange={(event, newValue) => {
+              handleChangeTab(event, newValue);
+            }}
+            variant="scrollable"
+            scrollButtons="on"
+            indicatorColor="primary"
+            textColor="primary"
+            aria-label="scrollable force tabs example"
+          >
+            <Tab
+              label="สปาและนวด"
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeOrder}
+                  color="secondary"
+                >
+                  <ShoppingBasket />
+                </Badge>
+              }
+              className={classes.flex}
+            />
+            <Tab
+              label="ผิวหน้า"
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeUser}
+                  color="secondary"
+                >
+                  <AccountCircle />
+                </Badge>
+              }
+              className={classes.flex}
+            />
+            <Tab
+              label="ขนตาและคิ้ว"
+              icon={
+                <Badge
+                  className={classes.margin}
+                  //badgeContent={badgeCredit}
+                  color="secondary"
+                >
+                  <CreditCard />
+                </Badge>
+              }
+              className={classes.flex}
+            />
+            <Tab
+              label="ทำเล็บ"
+              icon={<SupervisedUserCircleOutlinedIcon />}
+              className={classes.flex}
+            />
+            <Tab
+              label="ชาลอน"
+              icon={<LiveHelpIcon />}
+              className={classes.flex}
+            />
+            <Tab
+              label="แต่งหน้าทำผม"
+              icon={<HelpIcon />}
+              className={classes.flex}
+            />
+          </Tabs>
+        </AppBar>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Dashboard);

Web/b_beauty_project/src/components/AppHeader/index.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function ButtonAppBar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" Link href="/" >
+            B Beauty
+           
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+         
+          </Typography>
+          <Button color="inherit" Link href="/LoginPage" >Login</Button>
+          <Button color="inherit" Link href="/RigisterPage" >rigister</Button>
+          <Button color="inherit" Link href="/RigisterShopPage" >rigistershop</Button>
+         
+        </Toolbar>
+      </AppBar>
+      
+    </div>
+   
+  );
+}
\ No newline at end of file

Web/b_beauty_project/src/index.js

+import React from "react";
+import ReactDOM from "react-dom";
+import Routes from "./routes/index";
+import * as serviceWorker from "./serviceWorker";
+import { MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import { th } from "date-fns/locale";
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import "./styles/custom.css";
+import "./styles/materialize.css";
+import "./styles/spacing.css";
+
+const theme = createMuiTheme({
+  fontFamily: `'Prompt', sans-serif`,
+  typography: {
+    useNextVariants: true,
+    fontFamily: `'Prompt', sans-serif`
+  },
+  palette: {
+    // primary: {
+    //     light: '#80DEEA',
+    //     main: '#1a8a98',
+    //     dark: '#00838F',
+    //     contrastText: '#fff'
+    // },
+    // secondary: {
+    //     light: '#ff7961',
+    //     main: '#f44336',
+    //     dark: '#ba000d',
+    //     contrastText: '#000'
+    // }
+  }
+});
+
+ReactDOM.render(
+  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={th}>
+    <MuiThemeProvider theme={theme}>
+      <Routes />
+    </MuiThemeProvider>
+  </MuiPickersUtilsProvider>,
+  document.getElementById("root")
+);
+
+serviceWorker.unregister();

Web/b_beauty_project/src/routes/index.js

+import React, { Component, Fragment } from "react";
+import { Switch, Route, BrowserRouter } from "react-router-dom";
+
+import AppHeader from "../components/AppHeader";
+
+import HomePage from "../views/HomePage";
+import DataShopPage from "../views/DataShopPage/Home";
+import LoginPage from "../views/LoginPage";
+import RigisterPage from "../views/RigisterPage";
+import RigisterShopPage from "../views/RigisterShopPage";
+import ShopPage from "../views/ShopPage";
+import BeauticianShopPage from "../views/BeauticianShopPage/Home";
+
+class Router extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <BrowserRouter>
+        <Fragment>
+          <AppHeader />
+          <Switch>
+            <Route exact path="/" component={HomePage} />
+            <Route path="/DataShopPage" component={DataShopPage} />
+            <Route path="/LoginPage" component={LoginPage} />
+            <Route path="/RigisterPage" component={RigisterPage} />
+            <Route path="/RigisterShopPage" component={RigisterShopPage} />
+            <Route path="/ShopPage" component={ShopPage} />
+            <Route path="/BeauticianShopPage" component={BeauticianShopPage} />
+          </Switch>
+        </Fragment>
+      </BrowserRouter>
+    );
+  }
+}
+
+export default Router;

Web/b_beauty_project/src/serviceWorker.js

+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

Web/b_beauty_project/src/styles/custom.css

+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Prompt', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.right {
+    float: right;
+}
+
+.bold {
+    font-weight: bold;
+}
\ No newline at end of file

Web/b_beauty_project/src/styles/materialize.css

+/*!
+ * Materialize v1.0.0 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+ */
+
+ .materialize-red {
+    background-color: #e51c23 !important;
+  }
+  
+  .materialize-red-text {
+    color: #e51c23 !important;
+  }
+  
+  .materialize-red.lighten-5 {
+    background-color: #fdeaeb !important;
+  }
+  
+  .materialize-red-text.text-lighten-5 {
+    color: #fdeaeb !important;
+  }
+  
+  .materialize-red.lighten-4 {
+    background-color: #f8c1c3 !important;
+  }
+  
+  .materialize-red-text.text-lighten-4 {
+    color: #f8c1c3 !important;
+  }
+  
+  .materialize-red.lighten-3 {
+    background-color: #f3989b !important;
+  }
+  
+  .materialize-red-text.text-lighten-3 {
+    color: #f3989b !important;
+  }
+  
+  .materialize-red.lighten-2 {
+    background-color: #ee6e73 !important;
+  }
+  
+  .materialize-red-text.text-lighten-2 {
+    color: #ee6e73 !important;
+  }
+  
+  .materialize-red.lighten-1 {
+    background-color: #ea454b !important;
+  }
+  
+  .materialize-red-text.text-lighten-1 {
+    color: #ea454b !important;
+  }
+  
+  .materialize-red.darken-1 {
+    background-color: #d0181e !important;
+  }
+  
+  .materialize-red-text.text-darken-1 {
+    color: #d0181e !important;
+  }
+  
+  .materialize-red.darken-2 {
+    background-color: #b9151b !important;
+  }
+  
+  .materialize-red-text.text-darken-2 {
+    color: #b9151b !important;
+  }
+  
+  .materialize-red.darken-3 {
+    background-color: #a21318 !important;
+  }
+  
+  .materialize-red-text.text-darken-3 {
+    color: #a21318 !important;
+  }
+  
+  .materialize-red.darken-4 {
+    background-color: #8b1014 !important;
+  }
+  
+  .materialize-red-text.text-darken-4 {
+    color: #8b1014 !important;
+  }
+  
+  .red {
+    background-color: #F44336 !important;
+  }
+  
+  .red-text {
+    color: #F44336 !important;
+  }
+  
+  .red.lighten-5 {
+    background-color: #FFEBEE !important;
+  }
+  
+  .red-text.text-lighten-5 {
+    color: #FFEBEE !important;
+  }
+  
+  .red.lighten-4 {
+    background-color: #FFCDD2 !important;
+  }
+  
+  .red-text.text-lighten-4 {
+    color: #FFCDD2 !important;
+  }
+  
+  .red.lighten-3 {
+    background-color: #EF9A9A !important;
+  }
+  
+  .red-text.text-lighten-3 {
+    color: #EF9A9A !important;
+  }
+  
+  .red.lighten-2 {
+    background-color: #E57373 !important;
+  }
+  
+  .red-text.text-lighten-2 {
+    color: #E57373 !important;
+  }
+  
+  .red.lighten-1 {
+    background-color: #EF5350 !important;
+  }
+  
+  .red-text.text-lighten-1 {
+    color: #EF5350 !important;
+  }
+  
+  .red.darken-1 {
+    background-color: #E53935 !important;
+  }
+  
+  .red-text.text-darken-1 {
+    color: #E53935 !important;
+  }
+  
+  .red.darken-2 {
+    background-color: #D32F2F !important;
+  }
+  
+  .red-text.text-darken-2 {
+    color: #D32F2F !important;
+  }
+  
+  .red.darken-3 {
+    background-color: #C62828 !important;
+  }
+  
+  .red-text.text-darken-3 {
+    color: #C62828 !important;
+  }
+  
+  .red.darken-4 {
+    background-color: #B71C1C !important;
+  }
+  
+  .red-text.text-darken-4 {
+    color: #B71C1C !important;
+  }
+  
+  .red.accent-1 {
+    background-color: #FF8A80 !important;
+  }
+  
+  .red-text.text-accent-1 {
+    color: #FF8A80 !important;
+  }
+  
+  .red.accent-2 {
+    background-color: #FF5252 !important;
+  }
+  
+  .red-text.text-accent-2 {
+    color: #FF5252 !important;
+  }
+  
+  .red.accent-3 {
+    background-color: #FF1744 !important;
+  }
+  
+  .red-text.text-accent-3 {
+    color: #FF1744 !important;
+  }
+  
+  .red.accent-4 {
+    background-color: #D50000 !important;
+  }
+  
+  .red-text.text-accent-4 {
+    color: #D50000 !important;
+  }
+  
+  .pink {
+    background-color: #e91e63 !important;
+  }
+  
+  .pink-text {
+    color: #e91e63 !important;
+  }
+  
+  .pink.lighten-5 {
+    background-color: #fce4ec !important;
+  }
+  
+  .pink-text.text-lighten-5 {
+    color: #fce4ec !important;
+  }
+  
+  .pink.lighten-4 {
+    background-color: #f8bbd0 !important;
+  }
+  
+  .pink-text.text-lighten-4 {
+    color: #f8bbd0 !important;
+  }
+  
+  .pink.lighten-3 {
+    background-color: #f48fb1 !important;
+  }
+  
+  .pink-text.text-lighten-3 {
+    color: #f48fb1 !important;
+  }
+  
+  .pink.lighten-2 {
+    background-color: #f06292 !important;
+  }
+  
+  .pink-text.text-lighten-2 {
+    color: #f06292 !important;
+  }
+  
+  .pink.lighten-1 {
+    background-color: #ec407a !important;
+  }
+  
+  .pink-text.text-lighten-1 {
+    color: #ec407a !important;
+  }
+  
+  .pink.darken-1 {
+    background-color: #d81b60 !important;
+  }
+  
+  .pink-text.text-darken-1 {
+    color: #d81b60 !important;
+  }
+  
+  .pink.darken-2 {
+    background-color: #c2185b !important;
+  }
+  
+  .pink-text.text-darken-2 {
+    color: #c2185b !important;
+  }
+  
+  .pink.darken-3 {
+    background-color: #ad1457 !important;
+  }
+  
+  .pink-text.text-darken-3 {
+    color: #ad1457 !important;
+  }
+  
+  .pink.darken-4 {
+    background-color: #880e4f !important;
+  }
+  
+  .pink-text.text-darken-4 {
+    color: #880e4f !important;
+  }
+  
+  .pink.accent-1 {
+    background-color: #ff80ab !important;
+  }
+  
+  .pink-text.text-accent-1 {
+    color: #ff80ab !important;
+  }
+  
+  .pink.accent-2 {
+    background-color: #ff4081 !important;
+  }
+  
+  .pink-text.text-accent-2 {
+    color: #ff4081 !important;
+  }
+  
+  .pink.accent-3 {
+    background-color: #f50057 !important;
+  }
+  
+  .pink-text.text-accent-3 {
+    color: #f50057 !important;
+  }
+  
+  .pink.accent-4 {
+    background-color: #c51162 !important;
+  }
+  
+  .pink-text.text-accent-4 {
+    color: #c51162 !important;
+  }
+  
+  .purple {
+    background-color: #9c27b0 !important;
+  }
+  
+  .purple-text {
+    color: #9c27b0 !important;
+  }
+  
+  .purple.lighten-5 {
+    background-color: #f3e5f5 !important;
+  }
+  
+  .purple-text.text-lighten-5 {
+    color: #f3e5f5 !important;
+  }
+  
+  .purple.lighten-4 {
+    background-color: #e1bee7 !important;
+  }
+  
+  .purple-text.text-lighten-4 {
+    color: #e1bee7 !important;
+  }
+  
+  .purple.lighten-3 {
+    background-color: #ce93d8 !important;
+  }
+  
+  .purple-text.text-lighten-3 {
+    color: #ce93d8 !important;
+  }
+  
+  .purple.lighten-2 {
+    background-color: #ba68c8 !important;
+  }
+  
+  .purple-text.text-lighten-2 {
+    color: #ba68c8 !important;
+  }
+  
+  .purple.lighten-1 {
+    background-color: #ab47bc !important;
+  }
+  
+  .purple-text.text-lighten-1 {
+    color: #ab47bc !important;
+  }
+  
+  .purple.darken-1 {
+    background-color: #8e24aa !important;
+  }
+  
+  .purple-text.text-darken-1 {
+    color: #8e24aa !important;
+  }
+  
+  .purple.darken-2 {
+    background-color: #7b1fa2 !important;
+  }
+  
+  .purple-text.text-darken-2 {
+    color: #7b1fa2 !important;
+  }
+  
+  .purple.darken-3 {
+    background-color: #6a1b9a !important;
+  }
+  
+  .purple-text.text-darken-3 {
+    color: #6a1b9a !important;
+  }
+  
+  .purple.darken-4 {
+    background-color: #4a148c !important;
+  }
+  
+  .purple-text.text-darken-4 {
+    color: #4a148c !important;
+  }
+  
+  .purple.accent-1 {
+    background-color: #ea80fc !important;
+  }
+  
+  .purple-text.text-accent-1 {
+    color: #ea80fc !important;
+  }
+  
+  .purple.accent-2 {
+    background-color: #e040fb !important;
+  }
+  
+  .purple-text.text-accent-2 {
+    color: #e040fb !important;
+  }
+  
+  .purple.accent-3 {
+    background-color: #d500f9 !important;
+  }
+  
+  .purple-text.text-accent-3 {
+    color: #d500f9 !important;
+  }
+  
+  .purple.accent-4 {
+    background-color: #aa00ff !important;
+  }
+  
+  .purple-text.text-accent-4 {
+    color: #aa00ff !important;
+  }
+  
+  .deep-purple {
+    background-color: #673ab7 !important;
+  }
+  
+  .deep-purple-text {
+    color: #673ab7 !important;
+  }
+  
+  .deep-purple.lighten-5 {
+    background-color: #ede7f6 !important;
+  }
+  
+  .deep-purple-text.text-lighten-5 {
+    color: #ede7f6 !important;
+  }
+  
+  .deep-purple.lighten-4 {
+    background-color: #d1c4e9 !important;
+  }
+  
+  .deep-purple-text.text-lighten-4 {
+    color: #d1c4e9 !important;
+  }
+  
+  .deep-purple.lighten-3 {
+    background-color: #b39ddb !important;
+  }
+  
+  .deep-purple-text.text-lighten-3 {
+    color: #b39ddb !important;
+  }
+  
+  .deep-purple.lighten-2 {
+    background-color: #9575cd !important;
+  }
+  
+  .deep-purple-text.text-lighten-2 {
+    color: #9575cd !important;
+  }
+  
+  .deep-purple.lighten-1 {
+    background-color: #7e57c2 !important;
+  }
+  
+  .deep-purple-text.text-lighten-1 {
+    color: #7e57c2 !important;
+  }
+  
+  .deep-purple.darken-1 {
+    background-color: #5e35b1 !important;
+  }
+  
+  .deep-purple-text.text-darken-1 {
+    color: #5e35b1 !important;
+  }
+  
+  .deep-purple.darken-2 {
+    background-color: #512da8 !important;
+  }
+  
+  .deep-purple-text.text-darken-2 {
+    color: #512da8 !important;
+  }
+  
+  .deep-purple.darken-3 {
+    background-color: #4527a0 !important;
+  }
+  
+  .deep-purple-text.text-darken-3 {
+    color: #4527a0 !important;
+  }
+  
+  .deep-purple.darken-4 {
+    background-color: #311b92 !important;
+  }
+  
+  .deep-purple-text.text-darken-4 {
+    color: #311b92 !important;
+  }
+  
+  .deep-purple.accent-1 {
+    background-color: #b388ff !important;
+  }
+  
+  .deep-purple-text.text-accent-1 {
+    color: #b388ff !important;
+  }
+  
+  .deep-purple.accent-2 {
+    background-color: #7c4dff !important;
+  }
+  
+  .deep-purple-text.text-accent-2 {
+    color: #7c4dff !important;
+  }
+  
+  .deep-purple.accent-3 {
+    background-color: #651fff !important;
+  }
+  
+  .deep-purple-text.text-accent-3 {
+    color: #651fff !important;
+  }
+  
+  .deep-purple.accent-4 {
+    background-color: #6200ea !important;
+  }
+  
+  .deep-purple-text.text-accent-4 {
+    color: #6200ea !important;
+  }
+  
+  .indigo {
+    background-color: #3f51b5 !important;
+  }
+  
+  .indigo-text {
+    color: #3f51b5 !important;
+  }
+  
+  .indigo.lighten-5 {
+    background-color: #e8eaf6 !important;
+  }
+  
+  .indigo-text.text-lighten-5 {
+    color: #e8eaf6 !important;
+  }
+  
+  .indigo.lighten-4 {
+    background-color: #c5cae9 !important;
+  }
+  
+  .indigo-text.text-lighten-4 {
+    color: #c5cae9 !important;
+  }
+  
+  .indigo.lighten-3 {
+    background-color: #9fa8da !important;
+  }
+  
+  .indigo-text.text-lighten-3 {
+    color: #9fa8da !important;
+  }
+  
+  .indigo.lighten-2 {
+    background-color: #7986cb !important;
+  }
+  
+  .indigo-text.text-lighten-2 {
+    color: #7986cb !important;
+  }
+  
+  .indigo.lighten-1 {
+    background-color: #5c6bc0 !important;
+  }
+  
+  .indigo-text.text-lighten-1 {
+    color: #5c6bc0 !important;
+  }
+  
+  .indigo.darken-1 {
+    background-color: #3949ab !important;
+  }
+  
+  .indigo-text.text-darken-1 {
+    color: #3949ab !important;
+  }
+  
+  .indigo.darken-2 {
+    background-color: #303f9f !important;
+  }
+  
+  .indigo-text.text-darken-2 {
+    color: #303f9f !important;
+  }
+  
+  .indigo.darken-3 {
+    background-color: #283593 !important;
+  }
+  
+  .indigo-text.text-darken-3 {
+    color: #283593 !important;
+  }
+  
+  .indigo.darken-4 {
+    background-color: #1a237e !important;
+  }
+  
+  .indigo-text.text-darken-4 {
+    color: #1a237e !important;
+  }
+  
+  .indigo.accent-1 {
+    background-color: #8c9eff !important;
+  }
+  
+  .indigo-text.text-accent-1 {
+    color: #8c9eff !important;
+  }
+  
+  .indigo.accent-2 {
+    background-color: #536dfe !important;
+  }
+  
+  .indigo-text.text-accent-2 {
+    color: #536dfe !important;
+  }
+  
+  .indigo.accent-3 {
+    background-color: #3d5afe !important;
+  }
+  
+  .indigo-text.text-accent-3 {
+    color: #3d5afe !important;
+  }
+  
+  .indigo.accent-4 {
+    background-color: #304ffe !important;
+  }
+  
+  .indigo-text.text-accent-4 {
+    color: #304ffe !important;
+  }
+  
+  .blue {
+    background-color: #2196F3 !important;
+  }
+  
+  .blue-text {
+    color: #2196F3 !important;
+  }
+  
+  .blue.lighten-5 {
+    background-color: #E3F2FD !important;
+  }
+  
+  .blue-text.text-lighten-5 {
+    color: #E3F2FD !important;
+  }
+  
+  .blue.lighten-4 {
+    background-color: #BBDEFB !important;
+  }
+  
+  .blue-text.text-lighten-4 {
+    color: #BBDEFB !important;
+  }
+  
+  .blue.lighten-3 {
+    background-color: #90CAF9 !important;
+  }
+  
+  .blue-text.text-lighten-3 {
+    color: #90CAF9 !important;
+  }
+  
+  .blue.lighten-2 {
+    background-color: #64B5F6 !important;
+  }
+  
+  .blue-text.text-lighten-2 {
+    color: #64B5F6 !important;
+  }
+  
+  .blue.lighten-1 {
+    background-color: #42A5F5 !important;
+  }
+  
+  .blue-text.text-lighten-1 {
+    color: #42A5F5 !important;
+  }
+  
+  .blue.darken-1 {
+    background-color: #1E88E5 !important;
+  }
+  
+  .blue-text.text-darken-1 {
+    color: #1E88E5 !important;
+  }
+  
+  .blue.darken-2 {
+    background-color: #1976D2 !important;
+  }
+  
+  .blue-text.text-darken-2 {
+    color: #1976D2 !important;
+  }
+  
+  .blue.darken-3 {
+    background-color: #1565C0 !important;
+  }
+  
+  .blue-text.text-darken-3 {
+    color: #1565C0 !important;
+  }
+  
+  .blue.darken-4 {
+    background-color: #0D47A1 !important;
+  }
+  
+  .blue-text.text-darken-4 {
+    color: #0D47A1 !important;
+  }
+  
+  .blue.accent-1 {
+    background-color: #82B1FF !important;
+  }
+  
+  .blue-text.text-accent-1 {
+    color: #82B1FF !important;
+  }
+  
+  .blue.accent-2 {
+    background-color: #448AFF !important;
+  }
+  
+  .blue-text.text-accent-2 {
+    color: #448AFF !important;
+  }
+  
+  .blue.accent-3 {
+    background-color: #2979FF !important;
+  }
+  
+  .blue-text.text-accent-3 {
+    color: #2979FF !important;
+  }
+  
+  .blue.accent-4 {
+    background-color: #2962FF !important;
+  }
+  
+  .blue-text.text-accent-4 {
+    color: #2962FF !important;
+  }
+  
+  .light-blue {
+    background-color: #03a9f4 !important;
+  }
+  
+  .light-blue-text {
+    color: #03a9f4 !important;
+  }
+  
+  .light-blue.lighten-5 {
+    background-color: #e1f5fe !important;
+  }
+  
+  .light-blue-text.text-lighten-5 {
+    color: #e1f5fe !important;
+  }
+  
+  .light-blue.lighten-4 {
+    background-color: #b3e5fc !important;
+  }
+  
+  .light-blue-text.text-lighten-4 {
+    color: #b3e5fc !important;
+  }
+  
+  .light-blue.lighten-3 {
+    background-color: #81d4fa !important;
+  }
+  
+  .light-blue-text.text-lighten-3 {
+    color: #81d4fa !important;
+  }
+  
+  .light-blue.lighten-2 {
+    background-color: #4fc3f7 !important;
+  }
+  
+  .light-blue-text.text-lighten-2 {
+    color: #4fc3f7 !important;
+  }
+  
+  .light-blue.lighten-1 {
+    background-color: #29b6f6 !important;
+  }
+  
+  .light-blue-text.text-lighten-1 {
+    color: #29b6f6 !important;
+  }
+  
+  .light-blue.darken-1 {
+    background-color: #039be5 !important;
+  }
+  
+  .light-blue-text.text-darken-1 {
+    color: #039be5 !important;
+  }
+  
+  .light-blue.darken-2 {
+    background-color: #0288d1 !important;
+  }
+  
+  .light-blue-text.text-darken-2 {
+    color: #0288d1 !important;
+  }
+  
+  .light-blue.darken-3 {
+    background-color: #0277bd !important;
+  }
+  
+  .light-blue-text.text-darken-3 {
+    color: #0277bd !important;
+  }
+  
+  .light-blue.darken-4 {
+    background-color: #01579b !important;
+  }
+  
+  .light-blue-text.text-darken-4 {
+    color: #01579b !important;
+  }
+  
+  .light-blue.accent-1 {
+    background-color: #80d8ff !important;
+  }
+  
+  .light-blue-text.text-accent-1 {
+    color: #80d8ff !important;
+  }
+  
+  .light-blue.accent-2 {
+    background-color: #40c4ff !important;
+  }
+  
+  .light-blue-text.text-accent-2 {
+    color: #40c4ff !important;
+  }
+  
+  .light-blue.accent-3 {
+    background-color: #00b0ff !important;
+  }
+  
+  .light-blue-text.text-accent-3 {
+    color: #00b0ff !important;
+  }
+  
+  .light-blue.accent-4 {
+    background-color: #0091ea !important;
+  }
+  
+  .light-blue-text.text-accent-4 {
+    color: #0091ea !important;
+  }
+  
+  .cyan {
+    background-color: #00bcd4 !important;
+  }
+  
+  .cyan-text {
+    color: #00bcd4 !important;
+  }
+  
+  .cyan.lighten-5 {
+    background-color: #e0f7fa !important;
+  }
+  
+  .cyan-text.text-lighten-5 {
+    color: #e0f7fa !important;
+  }
+  
+  .cyan.lighten-4 {
+    background-color: #b2ebf2 !important;
+  }
+  
+  .cyan-text.text-lighten-4 {
+    color: #b2ebf2 !important;
+  }
+  
+  .cyan.lighten-3 {
+    background-color: #80deea !important;
+  }
+  
+  .cyan-text.text-lighten-3 {
+    color: #80deea !important;
+  }
+  
+  .cyan.lighten-2 {
+    background-color: #4dd0e1 !important;
+  }
+  
+  .cyan-text.text-lighten-2 {
+    color: #4dd0e1 !important;
+  }
+  
+  .cyan.lighten-1 {
+    background-color: #26c6da !important;
+  }
+  
+  .cyan-text.text-lighten-1 {
+    color: #26c6da !important;
+  }
+  
+  .cyan.darken-1 {
+    background-color: #00acc1 !important;
+  }
+  
+  .cyan-text.text-darken-1 {
+    color: #00acc1 !important;
+  }
+  
+  .cyan.darken-2 {
+    background-color: #0097a7 !important;
+  }
+  
+  .cyan-text.text-darken-2 {
+    color: #0097a7 !important;
+  }
+  
+  .cyan.darken-3 {
+    background-color: #00838f !important;
+  }
+  
+  .cyan-text.text-darken-3 {
+    color: #00838f !important;
+  }
+  
+  .cyan.darken-4 {
+    background-color: #006064 !important;
+  }
+  
+  .cyan-text.text-darken-4 {
+    color: #006064 !important;
+  }
+  
+  .cyan.accent-1 {
+    background-color: #84ffff !important;
+  }
+  
+  .cyan-text.text-accent-1 {
+    color: #84ffff !important;
+  }
+  
+  .cyan.accent-2 {
+    background-color: #18ffff !important;
+  }
+  
+  .cyan-text.text-accent-2 {
+    color: #18ffff !important;
+  }
+  
+  .cyan.accent-3 {
+    background-color: #00e5ff !important;
+  }
+  
+  .cyan-text.text-accent-3 {
+    color: #00e5ff !important;
+  }
+  
+  .cyan.accent-4 {
+    background-color: #00b8d4 !important;
+  }
+  
+  .cyan-text.text-accent-4 {
+    color: #00b8d4 !important;
+  }
+  
+  .teal {
+    background-color: #009688 !important;
+  }
+  
+  .teal-text {
+    color: #009688 !important;
+  }
+  
+  .teal.lighten-5 {
+    background-color: #e0f2f1 !important;
+  }
+  
+  .teal-text.text-lighten-5 {
+    color: #e0f2f1 !important;
+  }
+  
+  .teal.lighten-4 {
+    background-color: #b2dfdb !important;
+  }
+  
+  .teal-text.text-lighten-4 {
+    color: #b2dfdb !important;
+  }
+  
+  .teal.lighten-3 {
+    background-color: #80cbc4 !important;
+  }
+  
+  .teal-text.text-lighten-3 {
+    color: #80cbc4 !important;
+  }
+  
+  .teal.lighten-2 {
+    background-color: #4db6ac !important;
+  }
+  
+  .teal-text.text-lighten-2 {
+    color: #4db6ac !important;
+  }
+  
+  .teal.lighten-1 {
+    background-color: #26a69a !important;
+  }
+  
+  .teal-text.text-lighten-1 {
+    color: #26a69a !important;
+  }
+  
+  .teal.darken-1 {
+    background-color: #00897b !important;
+  }
+  
+  .teal-text.text-darken-1 {
+    color: #00897b !important;
+  }
+  
+  .teal.darken-2 {
+    background-color: #00796b !important;
+  }
+  
+  .teal-text.text-darken-2 {
+    color: #00796b !important;
+  }
+  
+  .teal.darken-3 {
+    background-color: #00695c !important;
+  }
+  
+  .teal-text.text-darken-3 {
+    color: #00695c !important;
+  }
+  
+  .teal.darken-4 {
+    background-color: #004d40 !important;
+  }
+  
+  .teal-text.text-darken-4 {
+    color: #004d40 !important;
+  }
+  
+  .teal.accent-1 {
+    background-color: #a7ffeb !important;
+  }
+  
+  .teal-text.text-accent-1 {
+    color: #a7ffeb !important;
+  }
+  
+  .teal.accent-2 {
+    background-color: #64ffda !important;
+  }
+  
+  .teal-text.text-accent-2 {
+    color: #64ffda !important;
+  }
+  
+  .teal.accent-3 {
+    background-color: #1de9b6 !important;
+  }
+  
+  .teal-text.text-accent-3 {
+    color: #1de9b6 !important;
+  }
+  
+  .teal.accent-4 {
+    background-color: #00bfa5 !important;
+  }
+  
+  .teal-text.text-accent-4 {
+    color: #00bfa5 !important;
+  }
+  
+  .green {
+    background-color: #4CAF50 !important;
+  }
+  
+  .green-text {
+    color: #4CAF50 !important;
+  }
+  
+  .green.lighten-5 {
+    background-color: #E8F5E9 !important;
+  }
+  
+  .green-text.text-lighten-5 {
+    color: #E8F5E9 !important;
+  }
+  
+  .green.lighten-4 {
+    background-color: #C8E6C9 !important;
+  }
+  
+  .green-text.text-lighten-4 {
+    color: #C8E6C9 !important;
+  }
+  
+  .green.lighten-3 {
+    background-color: #A5D6A7 !important;
+  }
+  
+  .green-text.text-lighten-3 {
+    color: #A5D6A7 !important;
+  }
+  
+  .green.lighten-2 {
+    background-color: #81C784 !important;
+  }
+  
+  .green-text.text-lighten-2 {
+    color: #81C784 !important;
+  }
+  
+  .green.lighten-1 {
+    background-color: #66BB6A !important;
+  }
+  
+  .green-text.text-lighten-1 {
+    color: #66BB6A !important;
+  }
+  
+  .green.darken-1 {
+    background-color: #43A047 !important;
+  }
+  
+  .green-text.text-darken-1 {
+    color: #43A047 !important;
+  }
+  
+  .green.darken-2 {
+    background-color: #388E3C !important;
+  }
+  
+  .green-text.text-darken-2 {
+    color: #388E3C !important;
+  }
+  
+  .green.darken-3 {
+    background-color: #2E7D32 !important;
+  }
+  
+  .green-text.text-darken-3 {
+    color: #2E7D32 !important;
+  }
+  
+  .green.darken-4 {
+    background-color: #1B5E20 !important;
+  }
+  
+  .green-text.text-darken-4 {
+    color: #1B5E20 !important;
+  }
+  
+  .green.accent-1 {
+    background-color: #B9F6CA !important;
+  }
+  
+  .green-text.text-accent-1 {
+    color: #B9F6CA !important;
+  }
+  
+  .green.accent-2 {
+    background-color: #69F0AE !important;
+  }
+  
+  .green-text.text-accent-2 {
+    color: #69F0AE !important;
+  }
+  
+  .green.accent-3 {
+    background-color: #00E676 !important;
+  }
+  
+  .green-text.text-accent-3 {
+    color: #00E676 !important;
+  }
+  
+  .green.accent-4 {
+    background-color: #00C853 !important;
+  }
+  
+  .green-text.text-accent-4 {
+    color: #00C853 !important;
+  }
+  
+  .light-green {
+    background-color: #8bc34a !important;
+  }
+  
+  .light-green-text {
+    color: #8bc34a !important;
+  }
+  
+  .light-green.lighten-5 {
+    background-color: #f1f8e9 !important;
+  }
+  
+  .light-green-text.text-lighten-5 {
+    color: #f1f8e9 !important;
+  }
+  
+  .light-green.lighten-4 {
+    background-color: #dcedc8 !important;
+  }
+  
+  .light-green-text.text-lighten-4 {
+    color: #dcedc8 !important;
+  }
+  
+  .light-green.lighten-3 {
+    background-color: #c5e1a5 !important;
+  }
+  
+  .light-green-text.text-lighten-3 {
+    color: #c5e1a5 !important;
+  }
+  
+  .light-green.lighten-2 {
+    background-color: #aed581 !important;
+  }
+  
+  .light-green-text.text-lighten-2 {
+    color: #aed581 !important;
+  }
+  
+  .light-green.lighten-1 {
+    background-color: #9ccc65 !important;
+  }
+  
+  .light-green-text.text-lighten-1 {
+    color: #9ccc65 !important;
+  }
+  
+  .light-green.darken-1 {
+    background-color: #7cb342 !important;
+  }
+  
+  .light-green-text.text-darken-1 {
+    color: #7cb342 !important;
+  }
+  
+  .light-green.darken-2 {
+    background-color: #689f38 !important;
+  }
+  
+  .light-green-text.text-darken-2 {
+    color: #689f38 !important;
+  }
+  
+  .light-green.darken-3 {
+    background-color: #558b2f !important;
+  }
+  
+  .light-green-text.text-darken-3 {
+    color: #558b2f !important;
+  }
+  
+  .light-green.darken-4 {
+    background-color: #33691e !important;
+  }
+  
+  .light-green-text.text-darken-4 {
+    color: #33691e !important;
+  }
+  
+  .light-green.accent-1 {
+    background-color: #ccff90 !important;
+  }
+  
+  .light-green-text.text-accent-1 {
+    color: #ccff90 !important;
+  }
+  
+  .light-green.accent-2 {
+    background-color: #b2ff59 !important;
+  }
+  
+  .light-green-text.text-accent-2 {
+    color: #b2ff59 !important;
+  }
+  
+  .light-green.accent-3 {
+    background-color: #76ff03 !important;
+  }
+  
+  .light-green-text.text-accent-3 {
+    color: #76ff03 !important;
+  }
+  
+  .light-green.accent-4 {
+    background-color: #64dd17 !important;
+  }
+  
+  .light-green-text.text-accent-4 {
+    color: #64dd17 !important;
+  }
+  
+  .lime {
+    background-color: #cddc39 !important;
+  }
+  
+  .lime-text {
+    color: #cddc39 !important;
+  }
+  
+  .lime.lighten-5 {
+    background-color: #f9fbe7 !important;
+  }
+  
+  .lime-text.text-lighten-5 {
+    color: #f9fbe7 !important;
+  }
+  
+  .lime.lighten-4 {
+    background-color: #f0f4c3 !important;
+  }
+  
+  .lime-text.text-lighten-4 {
+    color: #f0f4c3 !important;
+  }
+  
+  .lime.lighten-3 {
+    background-color: #e6ee9c !important;
+  }
+  
+  .lime-text.text-lighten-3 {
+    color: #e6ee9c !important;
+  }
+  
+  .lime.lighten-2 {
+    background-color: #dce775 !important;
+  }
+  
+  .lime-text.text-lighten-2 {
+    color: #dce775 !important;
+  }
+  
+  .lime.lighten-1 {
+    background-color: #d4e157 !important;
+  }
+  
+  .lime-text.text-lighten-1 {
+    color: #d4e157 !important;
+  }
+  
+  .lime.darken-1 {
+    background-color: #c0ca33 !important;
+  }
+  
+  .lime-text.text-darken-1 {
+    color: #c0ca33 !important;
+  }
+  
+  .lime.darken-2 {
+    background-color: #afb42b !important;
+  }
+  
+  .lime-text.text-darken-2 {
+    color: #afb42b !important;
+  }
+  
+  .lime.darken-3 {
+    background-color: #9e9d24 !important;
+  }
+  
+  .lime-text.text-darken-3 {
+    color: #9e9d24 !important;
+  }
+  
+  .lime.darken-4 {
+    background-color: #827717 !important;
+  }
+  
+  .lime-text.text-darken-4 {
+    color: #827717 !important;
+  }
+  
+  .lime.accent-1 {
+    background-color: #f4ff81 !important;
+  }
+  
+  .lime-text.text-accent-1 {
+    color: #f4ff81 !important;
+  }
+  
+  .lime.accent-2 {
+    background-color: #eeff41 !important;
+  }
+  
+  .lime-text.text-accent-2 {
+    color: #eeff41 !important;
+  }
+  
+  .lime.accent-3 {
+    background-color: #c6ff00 !important;
+  }
+  
+  .lime-text.text-accent-3 {
+    color: #c6ff00 !important;
+  }
+  
+  .lime.accent-4 {
+    background-color: #aeea00 !important;
+  }
+  
+  .lime-text.text-accent-4 {
+    color: #aeea00 !important;
+  }
+  
+  .yellow {
+    background-color: #ffeb3b !important;
+  }
+  
+  .yellow-text {
+    color: #ffeb3b !important;
+  }
+  
+  .yellow.lighten-5 {
+    background-color: #fffde7 !important;
+  }
+  
+  .yellow-text.text-lighten-5 {
+    color: #fffde7 !important;
+  }
+  
+  .yellow.lighten-4 {
+    background-color: #fff9c4 !important;
+  }
+  
+  .yellow-text.text-lighten-4 {
+    color: #fff9c4 !important;
+  }
+  
+  .yellow.lighten-3 {
+    background-color: #fff59d !important;
+  }
+  
+  .yellow-text.text-lighten-3 {
+    color: #fff59d !important;
+  }
+  
+  .yellow.lighten-2 {
+    background-color: #fff176 !important;
+  }
+  
+  .yellow-text.text-lighten-2 {
+    color: #fff176 !important;
+  }
+  
+  .yellow.lighten-1 {
+    background-color: #ffee58 !important;
+  }
+  
+  .yellow-text.text-lighten-1 {
+    color: #ffee58 !important;
+  }
+  
+  .yellow.darken-1 {
+    background-color: #fdd835 !important;
+  }
+  
+  .yellow-text.text-darken-1 {
+    color: #fdd835 !important;
+  }
+  
+  .yellow.darken-2 {
+    background-color: #fbc02d !important;
+  }
+  
+  .yellow-text.text-darken-2 {
+    color: #fbc02d !important;
+  }
+  
+  .yellow.darken-3 {
+    background-color: #f9a825 !important;
+  }
+  
+  .yellow-text.text-darken-3 {
+    color: #f9a825 !important;
+  }
+  
+  .yellow.darken-4 {
+    background-color: #f57f17 !important;
+  }
+  
+  .yellow-text.text-darken-4 {
+    color: #f57f17 !important;
+  }
+  
+  .yellow.accent-1 {
+    background-color: #ffff8d !important;
+  }
+  
+  .yellow-text.text-accent-1 {
+    color: #ffff8d !important;
+  }
+  
+  .yellow.accent-2 {
+    background-color: #ffff00 !important;
+  }
+  
+  .yellow-text.text-accent-2 {
+    color: #ffff00 !important;
+  }
+  
+  .yellow.accent-3 {
+    background-color: #ffea00 !important;
+  }
+  
+  .yellow-text.text-accent-3 {
+    color: #ffea00 !important;
+  }
+  
+  .yellow.accent-4 {
+    background-color: #ffd600 !important;
+  }
+  
+  .yellow-text.text-accent-4 {
+    color: #ffd600 !important;
+  }
+  
+  .amber {
+    background-color: #ffc107 !important;
+  }
+  
+  .amber-text {
+    color: #ffc107 !important;
+  }
+  
+  .amber.lighten-5 {
+    background-color: #fff8e1 !important;
+  }
+  
+  .amber-text.text-lighten-5 {
+    color: #fff8e1 !important;
+  }
+  
+  .amber.lighten-4 {
+    background-color: #ffecb3 !important;
+  }
+  
+  .amber-text.text-lighten-4 {
+    color: #ffecb3 !important;
+  }
+  
+  .amber.lighten-3 {
+    background-color: #ffe082 !important;
+  }
+  
+  .amber-text.text-lighten-3 {
+    color: #ffe082 !important;
+  }
+  
+  .amber.lighten-2 {
+    background-color: #ffd54f !important;
+  }
+  
+  .amber-text.text-lighten-2 {
+    color: #ffd54f !important;
+  }
+  
+  .amber.lighten-1 {
+    background-color: #ffca28 !important;
+  }
+  
+  .amber-text.text-lighten-1 {
+    color: #ffca28 !important;
+  }
+  
+  .amber.darken-1 {
+    background-color: #ffb300 !important;
+  }
+  
+  .amber-text.text-darken-1 {
+    color: #ffb300 !important;
+  }
+  
+  .amber.darken-2 {
+    background-color: #ffa000 !important;
+  }
+  
+  .amber-text.text-darken-2 {
+    color: #ffa000 !important;
+  }
+  
+  .amber.darken-3 {
+    background-color: #ff8f00 !important;
+  }
+  
+  .amber-text.text-darken-3 {
+    color: #ff8f00 !important;
+  }
+  
+  .amber.darken-4 {
+    background-color: #ff6f00 !important;
+  }
+  
+  .amber-text.text-darken-4 {
+    color: #ff6f00 !important;
+  }
+  
+  .amber.accent-1 {
+    background-color: #ffe57f !important;
+  }
+  
+  .amber-text.text-accent-1 {
+    color: #ffe57f !important;
+  }
+  
+  .amber.accent-2 {
+    background-color: #ffd740 !important;
+  }
+  
+  .amber-text.text-accent-2 {
+    color: #ffd740 !important;
+  }
+  
+  .amber.accent-3 {
+    background-color: #ffc400 !important;
+  }
+  
+  .amber-text.text-accent-3 {
+    color: #ffc400 !important;
+  }
+  
+  .amber.accent-4 {
+    background-color: #ffab00 !important;
+  }
+  
+  .amber-text.text-accent-4 {
+    color: #ffab00 !important;
+  }
+  
+  .orange {
+    background-color: #ff9800 !important;
+  }
+  
+  .orange-text {
+    color: #ff9800 !important;
+  }
+  
+  .orange.lighten-5 {
+    background-color: #fff3e0 !important;
+  }
+  
+  .orange-text.text-lighten-5 {
+    color: #fff3e0 !important;
+  }
+  
+  .orange.lighten-4 {
+    background-color: #ffe0b2 !important;
+  }
+  
+  .orange-text.text-lighten-4 {
+    color: #ffe0b2 !important;
+  }
+  
+  .orange.lighten-3 {
+    background-color: #ffcc80 !important;
+  }
+  
+  .orange-text.text-lighten-3 {
+    color: #ffcc80 !important;
+  }
+  
+  .orange.lighten-2 {
+    background-color: #ffb74d !important;
+  }
+  
+  .orange-text.text-lighten-2 {
+    color: #ffb74d !important;
+  }
+  
+  .orange.lighten-1 {
+    background-color: #ffa726 !important;
+  }
+  
+  .orange-text.text-lighten-1 {
+    color: #ffa726 !important;
+  }
+  
+  .orange.darken-1 {
+    background-color: #fb8c00 !important;
+  }
+  
+  .orange-text.text-darken-1 {
+    color: #fb8c00 !important;
+  }
+  
+  .orange.darken-2 {
+    background-color: #f57c00 !important;
+  }
+  
+  .orange-text.text-darken-2 {
+    color: #f57c00 !important;
+  }
+  
+  .orange.darken-3 {
+    background-color: #ef6c00 !important;
+  }
+  
+  .orange-text.text-darken-3 {
+    color: #ef6c00 !important;
+  }
+  
+  .orange.darken-4 {
+    background-color: #e65100 !important;
+  }
+  
+  .orange-text.text-darken-4 {
+    color: #e65100 !important;
+  }
+  
+  .orange.accent-1 {
+    background-color: #ffd180 !important;
+  }
+  
+  .orange-text.text-accent-1 {
+    color: #ffd180 !important;
+  }
+  
+  .orange.accent-2 {
+    background-color: #ffab40 !important;
+  }
+  
+  .orange-text.text-accent-2 {
+    color: #ffab40 !important;
+  }
+  
+  .orange.accent-3 {
+    background-color: #ff9100 !important;
+  }
+  
+  .orange-text.text-accent-3 {
+    color: #ff9100 !important;
+  }
+  
+  .orange.accent-4 {
+    background-color: #ff6d00 !important;
+  }
+  
+  .orange-text.text-accent-4 {
+    color: #ff6d00 !important;
+  }
+  
+  .deep-orange {
+    background-color: #ff5722 !important;
+  }
+  
+  .deep-orange-text {
+    color: #ff5722 !important;
+  }
+  
+  .deep-orange.lighten-5 {
+    background-color: #fbe9e7 !important;
+  }
+  
+  .deep-orange-text.text-lighten-5 {
+    color: #fbe9e7 !important;
+  }
+  
+  .deep-orange.lighten-4 {
+    background-color: #ffccbc !important;
+  }
+  
+  .deep-orange-text.text-lighten-4 {
+    color: #ffccbc !important;
+  }
+  
+  .deep-orange.lighten-3 {
+    background-color: #ffab91 !important;
+  }
+  
+  .deep-orange-text.text-lighten-3 {
+    color: #ffab91 !important;
+  }
+  
+  .deep-orange.lighten-2 {
+    background-color: #ff8a65 !important;
+  }
+  
+  .deep-orange-text.text-lighten-2 {
+    color: #ff8a65 !important;
+  }
+  
+  .deep-orange.lighten-1 {
+    background-color: #ff7043 !important;
+  }
+  
+  .deep-orange-text.text-lighten-1 {
+    color: #ff7043 !important;
+  }
+  
+  .deep-orange.darken-1 {
+    background-color: #f4511e !important;
+  }
+  
+  .deep-orange-text.text-darken-1 {
+    color: #f4511e !important;
+  }
+  
+  .deep-orange.darken-2 {
+    background-color: #e64a19 !important;
+  }
+  
+  .deep-orange-text.text-darken-2 {
+    color: #e64a19 !important;
+  }
+  
+  .deep-orange.darken-3 {
+    background-color: #d84315 !important;
+  }
+  
+  .deep-orange-text.text-darken-3 {
+    color: #d84315 !important;
+  }
+  
+  .deep-orange.darken-4 {
+    background-color: #bf360c !important;
+  }
+  
+  .deep-orange-text.text-darken-4 {
+    color: #bf360c !important;
+  }
+  
+  .deep-orange.accent-1 {
+    background-color: #ff9e80 !important;
+  }
+  
+  .deep-orange-text.text-accent-1 {
+    color: #ff9e80 !important;
+  }
+  
+  .deep-orange.accent-2 {
+    background-color: #ff6e40 !important;
+  }
+  
+  .deep-orange-text.text-accent-2 {
+    color: #ff6e40 !important;
+  }
+  
+  .deep-orange.accent-3 {
+    background-color: #ff3d00 !important;
+  }
+  
+  .deep-orange-text.text-accent-3 {
+    color: #ff3d00 !important;
+  }
+  
+  .deep-orange.accent-4 {
+    background-color: #dd2c00 !important;
+  }
+  
+  .deep-orange-text.text-accent-4 {
+    color: #dd2c00 !important;
+  }
+  
+  .brown {
+    background-color: #795548 !important;
+  }
+  
+  .brown-text {
+    color: #795548 !important;
+  }
+  
+  .brown.lighten-5 {
+    background-color: #efebe9 !important;
+  }
+  
+  .brown-text.text-lighten-5 {
+    color: #efebe9 !important;
+  }
+  
+  .brown.lighten-4 {
+    background-color: #d7ccc8 !important;
+  }
+  
+  .brown-text.text-lighten-4 {
+    color: #d7ccc8 !important;
+  }
+  
+  .brown.lighten-3 {
+    background-color: #bcaaa4 !important;
+  }
+  
+  .brown-text.text-lighten-3 {
+    color: #bcaaa4 !important;
+  }
+  
+  .brown.lighten-2 {
+    background-color: #a1887f !important;
+  }
+  
+  .brown-text.text-lighten-2 {
+    color: #a1887f !important;
+  }
+  
+  .brown.lighten-1 {
+    background-color: #8d6e63 !important;
+  }
+  
+  .brown-text.text-lighten-1 {
+    color: #8d6e63 !important;
+  }
+  
+  .brown.darken-1 {
+    background-color: #6d4c41 !important;
+  }
+  
+  .brown-text.text-darken-1 {
+    color: #6d4c41 !important;
+  }
+  
+  .brown.darken-2 {
+    background-color: #5d4037 !important;
+  }
+  
+  .brown-text.text-darken-2 {
+    color: #5d4037 !important;
+  }
+  
+  .brown.darken-3 {
+    background-color: #4e342e !important;
+  }
+  
+  .brown-text.text-darken-3 {
+    color: #4e342e !important;
+  }
+  
+  .brown.darken-4 {
+    background-color: #3e2723 !important;
+  }
+  
+  .brown-text.text-darken-4 {
+    color: #3e2723 !important;
+  }
+  
+  .blue-grey {
+    background-color: #607d8b !important;
+  }
+  
+  .blue-grey-text {
+    color: #607d8b !important;
+  }
+  
+  .blue-grey.lighten-5 {
+    background-color: #eceff1 !important;
+  }
+  
+  .blue-grey-text.text-lighten-5 {
+    color: #eceff1 !important;
+  }
+  
+  .blue-grey.lighten-4 {
+    background-color: #cfd8dc !important;
+  }
+  
+  .blue-grey-text.text-lighten-4 {
+    color: #cfd8dc !important;
+  }
+  
+  .blue-grey.lighten-3 {
+    background-color: #b0bec5 !important;
+  }
+  
+  .blue-grey-text.text-lighten-3 {
+    color: #b0bec5 !important;
+  }
+  
+  .blue-grey.lighten-2 {
+    background-color: #90a4ae !important;
+  }
+  
+  .blue-grey-text.text-lighten-2 {
+    color: #90a4ae !important;
+  }
+  
+  .blue-grey.lighten-1 {
+    background-color: #78909c !important;
+  }
+  
+  .blue-grey-text.text-lighten-1 {
+    color: #78909c !important;
+  }
+  
+  .blue-grey.darken-1 {
+    background-color: #546e7a !important;
+  }
+  
+  .blue-grey-text.text-darken-1 {
+    color: #546e7a !important;
+  }
+  
+  .blue-grey.darken-2 {
+    background-color: #455a64 !important;
+  }
+  
+  .blue-grey-text.text-darken-2 {
+    color: #455a64 !important;
+  }
+  
+  .blue-grey.darken-3 {
+    background-color: #37474f !important;
+  }
+  
+  .blue-grey-text.text-darken-3 {
+    color: #37474f !important;
+  }
+  
+  .blue-grey.darken-4 {
+    background-color: #263238 !important;
+  }
+  
+  .blue-grey-text.text-darken-4 {
+    color: #263238 !important;
+  }
+  
+  .grey {
+    background-color: #9e9e9e !important;
+  }
+  
+  .grey-text {
+    color: #9e9e9e !important;
+  }
+  
+  .grey.lighten-5 {
+    background-color: #fafafa !important;
+  }
+  
+  .grey-text.text-lighten-5 {
+    color: #fafafa !important;
+  }
+  
+  .grey.lighten-4 {
+    background-color: #f5f5f5 !important;
+  }
+  
+  .grey-text.text-lighten-4 {
+    color: #f5f5f5 !important;
+  }
+  
+  .grey.lighten-3 {
+    background-color: #eeeeee !important;
+  }
+  
+  .grey-text.text-lighten-3 {
+    color: #eeeeee !important;
+  }
+  
+  .grey.lighten-2 {
+    background-color: #e0e0e0 !important;
+  }
+  
+  .grey-text.text-lighten-2 {
+    color: #e0e0e0 !important;
+  }
+  
+  .grey.lighten-1 {
+    background-color: #bdbdbd !important;
+  }
+  
+  .grey-text.text-lighten-1 {
+    color: #bdbdbd !important;
+  }
+  
+  .grey.darken-1 {
+    background-color: #757575 !important;
+  }
+  
+  .grey-text.text-darken-1 {
+    color: #757575 !important;
+  }
+  
+  .grey.darken-2 {
+    background-color: #616161 !important;
+  }
+  
+  .grey-text.text-darken-2 {
+    color: #616161 !important;
+  }
+  
+  .grey.darken-3 {
+    background-color: #424242 !important;
+  }
+  
+  .grey-text.text-darken-3 {
+    color: #424242 !important;
+  }
+  
+  .grey.darken-4 {
+    background-color: #212121 !important;
+  }
+  
+  .grey-text.text-darken-4 {
+    color: #212121 !important;
+  }
+  
+  .black {
+    background-color: #000000 !important;
+  }
+  
+  .black-text {
+    color: #000000 !important;
+  }
+  
+  .white {
+    background-color: #FFFFFF !important;
+  }
+  
+  .white-text {
+    color: #FFFFFF !important;
+  }
+  
+  .transparent {
+    background-color: transparent !important;
+  }
+  
+  .transparent-text {
+    color: transparent !important;
+  }
+  
+  /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+  
+  /* Document
+     ========================================================================== */
+  
+  /**
+   * 1. Correct the line height in all browsers.
+   * 2. Prevent adjustments of font size after orientation changes in
+   *    IE on Windows Phone and in iOS.
+   */
+  
+  html {
+    line-height: 1.15;
+    /* 1 */
+    -ms-text-size-adjust: 100%;
+    /* 2 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
+  }
+  
+  b, strong {
+    font-weight: inherit;
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b, strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code, kbd, samp {
+    /* font-family: monospace, monospace; */
+    /* font-family: base_webfont, base_webfont; */
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
+  }
+  
+  /**
+   * Add the correct font style in Android 4.3-.
+   */
+  
+  dfn {
+    font-style: italic;
+  }
+  
+  /**
+   * Add the correct background and color in IE 9-.
+   */
+  
+  mark {
+    background-color: #ff0;
+    color: #000;
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Hidden
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10-.
+   */
+  
+  [hidden] {
+    display: none;
+  }
+  
+  html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  .valign-wrapper {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  
+  .clearfix {
+    clear: both;
+  }
+  
+  .divider {
+    height: 1px;
+    overflow: hidden;
+    background-color: #e0e0e0;
+  }
+  
+  /*********************
+    Media Query Classes
+  **********************/
+  
+  @media only screen and (max-width: 600px) {
+    .hide-on-small-only, .hide-on-small-and-down {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (max-width: 992px) {
+    .hide-on-med-and-down {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (min-width: 601px) {
+    .hide-on-med-and-up {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (min-width: 600px) and (max-width: 992px) {
+    .hide-on-med-only {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (min-width: 993px) {
+    .hide-on-large-only {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (min-width: 1201px) {
+    .hide-on-extra-large-only {
+      display: none !important;
+    }
+  }
+  
+  @media only screen and (min-width: 1201px) {
+    .show-on-extra-large {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (min-width: 993px) {
+    .show-on-large {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (min-width: 600px) and (max-width: 992px) {
+    .show-on-medium {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (max-width: 600px) {
+    .show-on-small {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (min-width: 601px) {
+    .show-on-medium-and-up {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (max-width: 992px) {
+    .show-on-medium-and-down {
+      display: block !important;
+    }
+  }
+  
+  @media only screen and (max-width: 600px) {
+    .center-on-small-only {
+      text-align: center;
+    }
+  }
+  
+  /*******************
+    Utility Classes
+  *******************/
+  
+  .hide {
+    display: none !important;
+  }
+  
+  .left-align {
+    text-align: left;
+  }
+  
+  .right-align {
+    text-align: right;
+  }
+  
+  .center, .center-align {
+    text-align: center;
+  }
+  
+  .left {
+    float: left !important;
+  }
+  
+  .right {
+    float: right !important;
+  }
+  
+  .circle {
+    border-radius: 50%;
+  }
+  
+  .center-block {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .no-padding {
+    padding: 0 !important;
+  }
+  
+  .container {
+    margin: 0 auto;
+    max-width: 1280px;
+    width: 90%;
+  }
+  
+  @media only screen and (min-width: 601px) {
+    .container {
+      width: 85%;
+    }
+  }
+  
+  @media only screen and (min-width: 993px) {
+    .container {
+      width: 70%;
+    }
+  }
+  
+  .col .row {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+  
+  .row {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+  }
+  
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  
+  .row .col {
+    float: left;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 0.75rem;
+    min-height: 1px;
+  }
+  
+  .row .col[class*="push-"], .row .col[class*="pull-"] {
+    position: relative;
+  }
+  
+  .row .col.s1 {
+    width: 8.3333333333%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s2 {
+    width: 16.6666666667%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s3 {
+    width: 25%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s4 {
+    width: 33.3333333333%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s5 {
+    width: 41.6666666667%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s6 {
+    width: 50%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s7 {
+    width: 58.3333333333%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s8 {
+    width: 66.6666666667%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s9 {
+    width: 75%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s10 {
+    width: 83.3333333333%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s11 {
+    width: 91.6666666667%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.s12 {
+    width: 100%;
+    margin-left: auto;
+    left: auto;
+    right: auto;
+  }
+  
+  .row .col.offset-s1 {
+    margin-left: 8.3333333333%;
+  }
+  
+  .row .col.pull-s1 {
+    right: 8.3333333333%;
+  }
+  
+  .row .col.push-s1 {
+    left: 8.3333333333%;
+  }
+  
+  .row .col.offset-s2 {
+    margin-left: 16.6666666667%;
+  }
+  
+  .row .col.pull-s2 {
+    right: 16.6666666667%;
+  }
+  
+  .row .col.push-s2 {
+    left: 16.6666666667%;
+  }
+  
+  .row .col.offset-s3 {
+    margin-left: 25%;
+  }
+  
+  .row .col.pull-s3 {
+    right: 25%;
+  }
+  
+  .row .col.push-s3 {
+    left: 25%;
+  }
+  
+  .row .col.offset-s4 {
+    margin-left: 33.3333333333%;
+  }
+  
+  .row .col.pull-s4 {
+    right: 33.3333333333%;
+  }
+  
+  .row .col.push-s4 {
+    left: 33.3333333333%;
+  }
+  
+  .row .col.offset-s5 {
+    margin-left: 41.6666666667%;
+  }
+  
+  .row .col.pull-s5 {
+    right: 41.6666666667%;
+  }
+  
+  .row .col.push-s5 {
+    left: 41.6666666667%;
+  }
+  
+  .row .col.offset-s6 {
+    margin-left: 50%;
+  }
+  
+  .row .col.pull-s6 {
+    right: 50%;
+  }
+  
+  .row .col.push-s6 {
+    left: 50%;
+  }
+  
+  .row .col.offset-s7 {
+    margin-left: 58.3333333333%;
+  }
+  
+  .row .col.pull-s7 {
+    right: 58.3333333333%;
+  }
+  
+  .row .col.push-s7 {
+    left: 58.3333333333%;
+  }
+  
+  .row .col.offset-s8 {
+    margin-left: 66.6666666667%;
+  }
+  
+  .row .col.pull-s8 {
+    right: 66.6666666667%;
+  }
+  
+  .row .col.push-s8 {
+    left: 66.6666666667%;
+  }
+  
+  .row .col.offset-s9 {
+    margin-left: 75%;
+  }
+  
+  .row .col.pull-s9 {
+    right: 75%;
+  }
+  
+  .row .col.push-s9 {
+    left: 75%;
+  }
+  
+  .row .col.offset-s10 {
+    margin-left: 83.3333333333%;
+  }
+  
+  .row .col.pull-s10 {
+    right: 83.3333333333%;
+  }
+  
+  .row .col.push-s10 {
+    left: 83.3333333333%;
+  }
+  
+  .row .col.offset-s11 {
+    margin-left: 91.6666666667%;
+  }
+  
+  .row .col.pull-s11 {
+    right: 91.6666666667%;
+  }
+  
+  .row .col.push-s11 {
+    left: 91.6666666667%;
+  }
+  
+  .row .col.offset-s12 {
+    margin-left: 100%;
+  }
+  
+  .row .col.pull-s12 {
+    right: 100%;
+  }
+  
+  .row .col.push-s12 {
+    left: 100%;
+  }
+  
+  @media only screen and (min-width: 601px) {
+    .row .col.m1 {
+      width: 8.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m2 {
+      width: 16.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m3 {
+      width: 25%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m4 {
+      width: 33.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m5 {
+      width: 41.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m6 {
+      width: 50%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m7 {
+      width: 58.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m8 {
+      width: 66.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m9 {
+      width: 75%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m10 {
+      width: 83.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m11 {
+      width: 91.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.m12 {
+      width: 100%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.offset-m1 {
+      margin-left: 8.3333333333%;
+    }
+    .row .col.pull-m1 {
+      right: 8.3333333333%;
+    }
+    .row .col.push-m1 {
+      left: 8.3333333333%;
+    }
+    .row .col.offset-m2 {
+      margin-left: 16.6666666667%;
+    }
+    .row .col.pull-m2 {
+      right: 16.6666666667%;
+    }
+    .row .col.push-m2 {
+      left: 16.6666666667%;
+    }
+    .row .col.offset-m3 {
+      margin-left: 25%;
+    }
+    .row .col.pull-m3 {
+      right: 25%;
+    }
+    .row .col.push-m3 {
+      left: 25%;
+    }
+    .row .col.offset-m4 {
+      margin-left: 33.3333333333%;
+    }
+    .row .col.pull-m4 {
+      right: 33.3333333333%;
+    }
+    .row .col.push-m4 {
+      left: 33.3333333333%;
+    }
+    .row .col.offset-m5 {
+      margin-left: 41.6666666667%;
+    }
+    .row .col.pull-m5 {
+      right: 41.6666666667%;
+    }
+    .row .col.push-m5 {
+      left: 41.6666666667%;
+    }
+    .row .col.offset-m6 {
+      margin-left: 50%;
+    }
+    .row .col.pull-m6 {
+      right: 50%;
+    }
+    .row .col.push-m6 {
+      left: 50%;
+    }
+    .row .col.offset-m7 {
+      margin-left: 58.3333333333%;
+    }
+    .row .col.pull-m7 {
+      right: 58.3333333333%;
+    }
+    .row .col.push-m7 {
+      left: 58.3333333333%;
+    }
+    .row .col.offset-m8 {
+      margin-left: 66.6666666667%;
+    }
+    .row .col.pull-m8 {
+      right: 66.6666666667%;
+    }
+    .row .col.push-m8 {
+      left: 66.6666666667%;
+    }
+    .row .col.offset-m9 {
+      margin-left: 75%;
+    }
+    .row .col.pull-m9 {
+      right: 75%;
+    }
+    .row .col.push-m9 {
+      left: 75%;
+    }
+    .row .col.offset-m10 {
+      margin-left: 83.3333333333%;
+    }
+    .row .col.pull-m10 {
+      right: 83.3333333333%;
+    }
+    .row .col.push-m10 {
+      left: 83.3333333333%;
+    }
+    .row .col.offset-m11 {
+      margin-left: 91.6666666667%;
+    }
+    .row .col.pull-m11 {
+      right: 91.6666666667%;
+    }
+    .row .col.push-m11 {
+      left: 91.6666666667%;
+    }
+    .row .col.offset-m12 {
+      margin-left: 100%;
+    }
+    .row .col.pull-m12 {
+      right: 100%;
+    }
+    .row .col.push-m12 {
+      left: 100%;
+    }
+  }
+  
+  @media only screen and (min-width: 993px) {
+    .row .col.l1 {
+      width: 8.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l2 {
+      width: 16.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l3 {
+      width: 25%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l4 {
+      width: 33.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l5 {
+      width: 41.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l6 {
+      width: 50%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l7 {
+      width: 58.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l8 {
+      width: 66.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l9 {
+      width: 75%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l10 {
+      width: 83.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l11 {
+      width: 91.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.l12 {
+      width: 100%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.offset-l1 {
+      margin-left: 8.3333333333%;
+    }
+    .row .col.pull-l1 {
+      right: 8.3333333333%;
+    }
+    .row .col.push-l1 {
+      left: 8.3333333333%;
+    }
+    .row .col.offset-l2 {
+      margin-left: 16.6666666667%;
+    }
+    .row .col.pull-l2 {
+      right: 16.6666666667%;
+    }
+    .row .col.push-l2 {
+      left: 16.6666666667%;
+    }
+    .row .col.offset-l3 {
+      margin-left: 25%;
+    }
+    .row .col.pull-l3 {
+      right: 25%;
+    }
+    .row .col.push-l3 {
+      left: 25%;
+    }
+    .row .col.offset-l4 {
+      margin-left: 33.3333333333%;
+    }
+    .row .col.pull-l4 {
+      right: 33.3333333333%;
+    }
+    .row .col.push-l4 {
+      left: 33.3333333333%;
+    }
+    .row .col.offset-l5 {
+      margin-left: 41.6666666667%;
+    }
+    .row .col.pull-l5 {
+      right: 41.6666666667%;
+    }
+    .row .col.push-l5 {
+      left: 41.6666666667%;
+    }
+    .row .col.offset-l6 {
+      margin-left: 50%;
+    }
+    .row .col.pull-l6 {
+      right: 50%;
+    }
+    .row .col.push-l6 {
+      left: 50%;
+    }
+    .row .col.offset-l7 {
+      margin-left: 58.3333333333%;
+    }
+    .row .col.pull-l7 {
+      right: 58.3333333333%;
+    }
+    .row .col.push-l7 {
+      left: 58.3333333333%;
+    }
+    .row .col.offset-l8 {
+      margin-left: 66.6666666667%;
+    }
+    .row .col.pull-l8 {
+      right: 66.6666666667%;
+    }
+    .row .col.push-l8 {
+      left: 66.6666666667%;
+    }
+    .row .col.offset-l9 {
+      margin-left: 75%;
+    }
+    .row .col.pull-l9 {
+      right: 75%;
+    }
+    .row .col.push-l9 {
+      left: 75%;
+    }
+    .row .col.offset-l10 {
+      margin-left: 83.3333333333%;
+    }
+    .row .col.pull-l10 {
+      right: 83.3333333333%;
+    }
+    .row .col.push-l10 {
+      left: 83.3333333333%;
+    }
+    .row .col.offset-l11 {
+      margin-left: 91.6666666667%;
+    }
+    .row .col.pull-l11 {
+      right: 91.6666666667%;
+    }
+    .row .col.push-l11 {
+      left: 91.6666666667%;
+    }
+    .row .col.offset-l12 {
+      margin-left: 100%;
+    }
+    .row .col.pull-l12 {
+      right: 100%;
+    }
+    .row .col.push-l12 {
+      left: 100%;
+    }
+  }
+  
+  @media only screen and (min-width: 1201px) {
+    .row .col.xl1 {
+      width: 8.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl2 {
+      width: 16.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl3 {
+      width: 25%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl4 {
+      width: 33.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl5 {
+      width: 41.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl6 {
+      width: 50%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl7 {
+      width: 58.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl8 {
+      width: 66.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl9 {
+      width: 75%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl10 {
+      width: 83.3333333333%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl11 {
+      width: 91.6666666667%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.xl12 {
+      width: 100%;
+      margin-left: auto;
+      left: auto;
+      right: auto;
+    }
+    .row .col.offset-xl1 {
+      margin-left: 8.3333333333%;
+    }
+    .row .col.pull-xl1 {
+      right: 8.3333333333%;
+    }
+    .row .col.push-xl1 {
+      left: 8.3333333333%;
+    }
+    .row .col.offset-xl2 {
+      margin-left: 16.6666666667%;
+    }
+    .row .col.pull-xl2 {
+      right: 16.6666666667%;
+    }
+    .row .col.push-xl2 {
+      left: 16.6666666667%;
+    }
+    .row .col.offset-xl3 {
+      margin-left: 25%;
+    }
+    .row .col.pull-xl3 {
+      right: 25%;
+    }
+    .row .col.push-xl3 {
+      left: 25%;
+    }
+    .row .col.offset-xl4 {
+      margin-left: 33.3333333333%;
+    }
+    .row .col.pull-xl4 {
+      right: 33.3333333333%;
+    }
+    .row .col.push-xl4 {
+      left: 33.3333333333%;
+    }
+    .row .col.offset-xl5 {
+      margin-left: 41.6666666667%;
+    }
+    .row .col.pull-xl5 {
+      right: 41.6666666667%;
+    }
+    .row .col.push-xl5 {
+      left: 41.6666666667%;
+    }
+    .row .col.offset-xl6 {
+      margin-left: 50%;
+    }
+    .row .col.pull-xl6 {
+      right: 50%;
+    }
+    .row .col.push-xl6 {
+      left: 50%;
+    }
+    .row .col.offset-xl7 {
+      margin-left: 58.3333333333%;
+    }
+    .row .col.pull-xl7 {
+      right: 58.3333333333%;
+    }
+    .row .col.push-xl7 {
+      left: 58.3333333333%;
+    }
+    .row .col.offset-xl8 {
+      margin-left: 66.6666666667%;
+    }
+    .row .col.pull-xl8 {
+      right: 66.6666666667%;
+    }
+    .row .col.push-xl8 {
+      left: 66.6666666667%;
+    }
+    .row .col.offset-xl9 {
+      margin-left: 75%;
+    }
+    .row .col.pull-xl9 {
+      right: 75%;
+    }
+    .row .col.push-xl9 {
+      left: 75%;
+    }
+    .row .col.offset-xl10 {
+      margin-left: 83.3333333333%;
+    }
+    .row .col.pull-xl10 {
+      right: 83.3333333333%;
+    }
+    .row .col.push-xl10 {
+      left: 83.3333333333%;
+    }
+    .row .col.offset-xl11 {
+      margin-left: 91.6666666667%;
+    }
+    .row .col.pull-xl11 {
+      right: 91.6666666667%;
+    }
+    .row .col.push-xl11 {
+      left: 91.6666666667%;
+    }
+    .row .col.offset-xl12 {
+      margin-left: 100%;
+    }
+    .row .col.pull-xl12 {
+      right: 100%;
+    }
+    .row .col.push-xl12 {
+      left: 100%;
+    }
+  }
+  
+  em {
+    font-style: italic;
+  }
+  
+  strong {
+    font-weight: 500;
+  }
+  
+  small {
+    font-size: 75%;
+  }
+  
+  .light {
+    font-weight: 300;
+  }
+  
+  .thin {
+    font-weight: 200;
+  }
+  
+  /*!
+   * Waves v0.6.0
+   * http://fian.my.id/Waves
+   *
+   * Copyright 2014 Alfiana E. Sibuea and other contributors
+   * Released under the MIT license
+   * https://github.com/fians/Waves/blob/master/LICENSE
+   */
+  
+  .waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    vertical-align: middle;
+    z-index: 1;
+    -webkit-transition: .3s ease-out;
+    transition: .3s ease-out;
+  }
+  
+  .waves-effect .waves-ripple {
+    position: absolute;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    opacity: 0;
+    background: rgba(0, 0, 0, 0.2);
+    -webkit-transition: all 0.7s ease-out;
+    transition: all 0.7s ease-out;
+    -webkit-transition-property: opacity, -webkit-transform;
+    transition-property: opacity, -webkit-transform;
+    transition-property: transform, opacity;
+    transition-property: transform, opacity, -webkit-transform;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    pointer-events: none;
+  }
+  
+  .waves-effect.waves-light .waves-ripple {
+    background-color: rgba(255, 255, 255, 0.45);
+  }
+  
+  .waves-effect.waves-red .waves-ripple {
+    background-color: rgba(244, 67, 54, 0.7);
+  }
+  
+  .waves-effect.waves-yellow .waves-ripple {
+    background-color: rgba(255, 235, 59, 0.7);
+  }
+  
+  .waves-effect.waves-orange .waves-ripple {
+    background-color: rgba(255, 152, 0, 0.7);
+  }
+  
+  .waves-effect.waves-purple .waves-ripple {
+    background-color: rgba(156, 39, 176, 0.7);
+  }
+  
+  .waves-effect.waves-green .waves-ripple {
+    background-color: rgba(76, 175, 80, 0.7);
+  }
+  
+  .waves-effect.waves-teal .waves-ripple {
+    background-color: rgba(0, 150, 136, 0.7);
+  }
+  
+  .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
+    border: 0;
+    font-style: normal;
+    font-size: inherit;
+    text-transform: inherit;
+    background: none;
+  }
+  
+  .waves-effect img {
+    position: relative;
+    z-index: -1;
+  }
+  
+  .waves-notransition {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+  
+  .waves-circle {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+  }
+  
+  .waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+  }
+  
+  .waves-input-wrapper .waves-button-input {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  
+  .waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+    -webkit-mask-image: none;
+  }
+  
+  .waves-block {
+    display: block;
+  }
+  
+  /* Firefox Bug: link not triggered */
+  
+  .waves-effect .waves-ripple {
+    z-index: -1;
+  }
+  
+  label {
+    font-size: 0.8rem;
+    color: #9e9e9e;
+  }
+  
+  /* Text Inputs + Textarea
+     ========================================================================== */
+  
+  /* Style Placeholders */
+  
+  ::-webkit-input-placeholder {
+    color: #d1d1d1;
+  }
+  
+  ::-moz-placeholder {
+    color: #d1d1d1;
+  }
+  
+  :-ms-input-placeholder {
+    color: #d1d1d1;
+  }
+  
+  ::-ms-input-placeholder {
+    color: #d1d1d1;
+  }
+  
+  ::placeholder {
+    color: #d1d1d1;
+  }
+  
+  .hiddendiv {
+    visibility: hidden;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    /* future version of deprecated 'word-wrap' */
+    padding-top: 1.2rem;
+    /* prevents text jump on Enter keypress */
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
\ No newline at end of file

Web/b_beauty_project/src/styles/spacing.css

+.mt-0, .my-0 {
+    margin-top: 0 !important;
+}
+
+.mr-0, .mx-0 {
+    margin-right: 0 !important;
+}
+
+.mb-0, .my-0 {
+    margin-bottom: 0 !important;
+}
+
+.ml-0, .mx-0 {
+    margin-left: 0 !important;
+}
+
+.m-1 {
+    margin: 0.25rem !important;
+}
+
+.mt-1, .my-1 {
+    margin-top: 0.25rem !important;
+}
+
+.mr-1, .mx-1 {
+    margin-right: 0.25rem !important;
+}
+
+.mb-1, .my-1 {
+    margin-bottom: 0.25rem !important;
+}
+
+.ml-1, .mx-1 {
+    margin-left: 0.25rem !important;
+}
+
+.m-2 {
+    margin: 0.5rem !important;
+}
+
+.mt-2, .my-2 {
+    margin-top: 0.5rem !important;
+}
+
+.mr-2, .mx-2 {
+    margin-right: 0.5rem !important;
+}
+
+.mb-2, .my-2 {
+    margin-bottom: 0.5rem !important;
+}
+
+.ml-2, .mx-2 {
+    margin-left: 0.5rem !important;
+}
+
+.m-3 {
+    margin: 1rem !important;
+}
+
+.mt-3, .my-3 {
+    margin-top: 1rem !important;
+}
+
+.mr-3, .mx-3 {
+    margin-right: 1rem !important;
+}
+
+.mb-3, .my-3 {
+    margin-bottom: 1rem !important;
+}
+
+.ml-3, .mx-3 {
+    margin-left: 1rem !important;
+}
+
+.m-4 {
+    margin: 1.5rem !important;
+}
+
+.mt-4, .my-4 {
+    margin-top: 1.5rem !important;
+}
+
+.mr-4, .mx-4 {
+    margin-right: 1.5rem !important;
+}
+
+.mb-4, .my-4 {
+    margin-bottom: 1.5rem !important;
+}
+
+.ml-4, .mx-4 {
+    margin-left: 1.5rem !important;
+}
+
+.m-5 {
+    margin: 3rem !important;
+}
+
+.mt-5, .my-5 {
+    margin-top: 3rem !important;
+}
+
+.mr-5, .mx-5 {
+    margin-right: 3rem !important;
+}
+
+.mb-5, .my-5 {
+    margin-bottom: 3rem !important;
+}
+
+.ml-5, .mx-5 {
+    margin-left: 3rem !important;
+}
+
+.p-0 {
+    padding: 0 !important;
+}
+
+.pt-0, .py-0 {
+    padding-top: 0 !important;
+}
+
+.pr-0, .px-0 {
+    padding-right: 0 !important;
+}
+
+.pb-0, .py-0 {
+    padding-bottom: 0 !important;
+}
+
+.pl-0, .px-0 {
+    padding-left: 0 !important;
+}
+
+.p-1 {
+    padding: 0.25rem !important;
+}
+
+.pt-1, .py-1 {
+    padding-top: 0.25rem !important;
+}
+
+.pr-1, .px-1 {
+    padding-right: 0.25rem !important;
+}
+
+.pb-1, .py-1 {
+    padding-bottom: 0.25rem !important;
+}
+
+.pl-1, .px-1 {
+    padding-left: 0.25rem !important;
+}
+
+.p-2 {
+    padding: 0.5rem !important;
+}
+
+.pt-2, .py-2 {
+    padding-top: 0.5rem !important;
+}
+
+.pr-2, .px-2 {
+    padding-right: 0.5rem !important;
+}
+
+.pb-2, .py-2 {
+    padding-bottom: 0.5rem !important;
+}
+
+.pl-2, .px-2 {
+    padding-left: 0.5rem !important;
+}
+
+.p-3 {
+    padding: 1rem !important;
+}
+
+.pt-3, .py-3 {
+    padding-top: 1rem !important;
+}
+
+.pr-3, .px-3 {
+    padding-right: 1rem !important;
+}
+
+.pb-3, .py-3 {
+    padding-bottom: 1rem !important;
+}
+
+.pl-3, .px-3 {
+    padding-left: 1rem !important;
+}
+
+.p-4 {
+    padding: 1.5rem !important;
+}
+
+.pt-4, .py-4 {
+    padding-top: 1.5rem !important;
+}
+
+.pr-4, .px-4 {
+    padding-right: 1.5rem !important;
+}
+
+.pb-4, .py-4 {
+    padding-bottom: 1.5rem !important;
+}
+
+.pl-4, .px-4 {
+    padding-left: 1.5rem !important;
+}
+
+.p-5 {
+    padding: 3rem !important;
+}
+
+.pt-5, .py-5 {
+    padding-top: 3rem !important;
+}
+
+.pr-5, .px-5 {
+    padding-right: 3rem !important;
+}
+
+.pb-5, .py-5 {
+    padding-bottom: 3rem !important;
+}
+
+.pl-5, .px-5 {
+    padding-left: 3rem !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-left {
+    text-align: left !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.no-margin {
+    margin: 0;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0;
+}
+
+.no-border {
+    border: none;
+}
+
+.no-padding {
+    padding: 0;
+}
+
+.no-pt {
+    padding-top: 0;
+}
+
+.no-pb {
+    padding-bottom: 0;
+}
+
+.no-pl {
+    padding-left: 0;
+}
\ No newline at end of file

Web/b_beauty_project/src/views/BeauticianShopPage/Addimage/index.js

+import React, { Component } from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+import MaterialTable from "material-table";
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+function createData(name, email, address, phonenumber, edit, action) {
+  return { name, email, address, phonenumber, edit, action };
+}
+
+const rows = [
+  createData(
+    "Frozen yoghurt",
+    "email@mmmj",
+    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
+    " 012455887",
+    <EditIcon />,
+    <DeleteIcon />
+  )
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
+  }
+});
+
+class Databeautician extends Component {
+  state = {
+    open: false,
+    columns: [
+      { title: "รูปภาพ", field: "img" }
+    ],
+    data: [
+      { img: "Mehmet"},
+      {
+        img: "Zerya Betül"
+        
+      }
+    ]
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        img: "Mehmet",
+       
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const { open, columns, data } = this.state;
+    return (
+      <div>
+        <MaterialTable
+          title="ภาพผลงาน"
+          columns={columns}
+          data={data}
+          options={{
+            selection: false
+          }}
+          editable={{
+           // onRowAdd: newData =>
+            //  new Promise(resolve => {
+           //     setTimeout(() => {
+            //      resolve();
+             //     this.setState(prevState => {
+              //      const data = [...prevState.data];
+              //      data.push(newData);
+              //      return { ...prevState, data };
+               //   });
+               // }, 600);
+             // }),
+            // onRowUpdate: (newData, oldData) =>
+            //   new Promise(resolve => {
+            //     setTimeout(() => {
+            //       resolve();
+            //       if (oldData) {
+            //         this.setState(prevState => {
+            //           const data = [...prevState.data];
+            //           data[data.indexOf(oldData)] = newData;
+            //           return { ...prevState, data };
+            //         });
+            //       }
+            //     }, 600);
+            //   }),
+            onRowDelete: oldData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.splice(data.indexOf(oldData), 1);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              })
+          }}
+        />
+        <div className="row">
+          <Fab
+            aria-label={"add"}
+            className={classes.fab}
+            color="primary"
+            onClick={this.handleClickOpen}
+          >
+            <AddIcon />
+          </Fab>
+
+          <Dialog
+            open={open}
+            onClose={this.handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogTitle id="alert-dialog-title">{"เพิ่มรูปภาพ"}</DialogTitle>
+            <DialogContent>
+              
+              <TextField
+                className={classes.margin}
+                id="outlined-file-input"
+                label="เพิ่มรูปภาพ"
+                type="file"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AddPhotoAlternateIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleClose} color="primary">
+                ยกเลิก
+              </Button>
+              <Button
+                onClick={this.handleCloseAndSave}
+                color="primary"
+                autoFocus
+              >
+                ยืนยัน
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Databeautician);

Web/b_beauty_project/src/views/BeauticianShopPage/Home/index.js

+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import AppBar from "@material-ui/core/AppBar";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import {
+  Divider,
+  Drawer,
+  Hidden,
+  IconButton,
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Toolbar
+} from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+import InboxIcon from "@material-ui/icons/Inbox";
+import MailIcon from "@material-ui/icons/Mail";
+import MenuIcon from "@material-ui/icons/Menu";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import Profile from "../Profile";
+import Addimage from "../Addimage";
+import Work from "../Work";
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    display: "flex"
+  },
+  drawer: {
+    [theme.breakpoints.up("sm")]: {
+      width: drawerWidth,
+      flexShrink: 0
+      // zIndex: -1
+    }
+  },
+  appBar: {
+    [theme.breakpoints.up("sm")]: {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: drawerWidth
+    }
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up("sm")]: {
+      display: "none"
+    },
+    zIndex: 2
+  },
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    width: drawerWidth
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3)
+  }
+});
+
+class ResponsiveDrawer extends Component {
+  state = {
+    mobileOpen: false,
+    path: "profile"
+    // path: "datashop"
+  };
+
+  handleDrawerToggle = () => {
+    this.setState(prevState => {
+      return { ...prevState, mobileOpen: !prevState.mobileOpen };
+    });
+  };
+
+  handleChangePath = path => {
+    this.setState({
+      path: path
+    });
+  };
+
+  drawer = () => {
+    const { classes } = this.props;
+    const { path } = this.state;
+    return (
+      <div>
+        <div
+          className={classes.toolbar}
+          style={{ backgroundColor: "#3f51b5", textAlign: "center" }}
+        >
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            Link
+            href="/"
+            style={{ color: "white" }}
+          >
+            B Beauty
+          </IconButton>
+        </div>
+
+        <Divider />
+
+        <List>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("profile");
+            }}
+            selected={path == "profile" ? true : false}
+          >
+            <ListItemIcon>
+              <InboxIcon />
+            </ListItemIcon>
+            <ListItemText primary="โปรไฟล์ร้าน" />
+          </ListItem>
+
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("work");
+            }}
+            selected={path == "work" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="ตารางงาน" />
+          </ListItem>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("addimage");
+            }}
+            selected={path == "addimage" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="ภาพผลงาน" />
+          </ListItem>
+          
+         
+         
+        </List>
+      </div>
+    );
+  };
+
+  render() {
+    const { classes, theme } = this.props;
+    const { mobileOpen, path } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <CssBaseline />
+        <nav className={classes.drawer} aria-label="mailbox folders">
+          <Hidden smUp implementation="css">
+            <Drawer
+              variant="temporary"
+              anchor={theme.direction === "rtl" ? "right" : "left"}
+              open={mobileOpen}
+              onClose={this.handleDrawerToggle}
+              classes={{
+                paper: classes.drawerPaper
+              }}
+              ModalProps={{
+                keepMounted: true // Better open performance on mobile.
+              }}
+            >
+              {this.drawer()}
+            </Drawer>
+          </Hidden>
+          <Hidden xsDown implementation="css">
+            <Drawer
+              classes={{
+                paper: classes.drawerPaper
+              }}
+              variant="permanent"
+              open
+            >
+              {this.drawer()}
+            </Drawer>
+          </Hidden>
+        </nav>
+
+        <main className={classes.content}>
+          {path == "profile" ? <Profile /> : null}
+          {path == "addimage" ? <Addimage /> : null}
+          {path == "work" ? <Work /> : null}
+        </main>
+      </div>
+    );
+  }
+}
+
+ResponsiveDrawer.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default compose(
+  withStyles(styles, { withTheme: true }),
+  withRouter
+)(ResponsiveDrawer);

Web/b_beauty_project/src/views/BeauticianShopPage/Profile/index.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+import Fab from "@material-ui/core/Fab";
+import EditIcon from "@material-ui/icons/Edit";
+import Paper from "@material-ui/core/Paper";
+import CardMedia from "@material-ui/core/CardMedia";
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function InputWithIcon() {
+  const classes = useStyles();
+
+  return (
+    <div className="row center">
+       <div className="row mt-2 mb-2">
+         <h2>โปรไฟล์ร้าน</h2>
+       </div><br />
+      <div className="row mt-2 mb-2">
+        <div className="col s12 m6 l4">
+          <div className="row center">
+          <br />
+            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTEhMVFhUVFRUVFxUVFRUVFxcWFxgWFxUWFxYYHSggGBolHRcVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OGxAQGi0mICYvLS0tLS0tLi0vLS0tLS8tLS8tLS0vLS0tLS8vNS8tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAQIDBAUGBwj/xABGEAACAQIEAgcEBgcGBgMBAAABAhEAAwQSITEFQQYTIlFhcYEykaGxBxRCcsHRFSNSYoKy8DNTVJKi4RYkg5PC0rPT4xf/xAAaAQADAQEBAQAAAAAAAAAAAAABAgMABAUG/8QAMREAAgIBAwIDBwMEAwAAAAAAAAECEQMSITEEUUFhcQUTIoGRsfAyodEUUsHxI0JD/9oADAMBAAIRAxEAPwDahKULdSxZpa2K8XSenZFFulraqWtmnBaptILIgt0oW6l9VQ6ujpNZF6uh1dS8lDLWoxD6qh1VS8tJK0KCR+qodXT5FEVoUjWM5KLJTxFFFagjOWiy07FCKFBGooopyKEUlBG4oop2KTFAIjLTGMTsN4iPfpUqKZxY7PmyD3utZLcNljbSnlSgKUKtRJsAFLApNKFMTYKOgKVFMK2Jo6VFFWoXUiP1VGEqqXpAh3Rx5EGljjlruceg/Ot8P9yHt9izy0cVXrxeyftEean8KD8ZsAwbqg+II/Cio3w19Ua/yiwiiphcZbKhusTKdmzQD5E0oXQRIIIJiVIIn0ouEl4GUkOUVJmhUxrDNJNGaKKFBsQaKlEURFAIg0RpUUUVgiaI0uKKKBhBoqXRRSsYTSSKXFEaVhExTOKGi/ft/Bwfwp+mro7Vv7/yVz+FaPKM+C0UUsUQoxVkRYoCjohRimSFYoUdEKE06EDoUU0KIDF27FPjDVOtWKfFmuOjpKsYao+K4UGObn79gTt6VeraoXbW0d5/lang6dgatGfuWXcC2pkKBy02/wBzvV7wrC9Xay/vj5UeEsRrETBPuiPhUthC+oqkJNyfoxZRSS+Q6KOmxQrGHDSm9kRTVOchTRbSddhZLgbk/wBAU+LM03FTFFLjnN8sGSo8Ef6t/Wv50RwtSqFX/OCOt9yvxFnKJpiam8R9n1HzFQZqWRJNUXxNtbgoqE0RNSosA0U0RNJJpGEOaQ3t2/vn+R6Bamw36xB4sfcI/GtHkL4LgGjBpoGlZquiTQ5mqq4nxo2rgtraLsVzaEwNSI0BPL41YZ6pbLZr95u4hR/CAD8QaeMdTSNFLxA3E8W3s2kUd51+ZHypu6MUfavR9yPy/GpTwN2Pf7RHyFRmcMCAZ1jXMfnvXUumj4tjL0Qx9Vu/4h/efzoVJ1/oChW9xAe35Fvbs0s2qkhaBFcOkhqIgShchYJ2mnjQihSNY1aIIBGx2oX9F9V+YpxIjQQOVN4r2fVf5hTY1v8AJ/YEmJzUM1Jo6UYOadU6D1pmnJ7I8zTR4foB+Auadv422g7bAeG59wqIra1A4qs5/wCL8aTG2jTipNWSOH9J8PfZVslnzEgMFIXSebQeXdVyTXM/o5WFs+RPwatOcNh47csRvme4341bG5TuhJYkmXPEGlR5j5ioVHEWgP33HuuNSaXI+PQfGqTXmHNJJoiaSTUmUDJptmoFqr8fjltiWIA8SAeQ0B3Mmpt1yOlZJe75+6mrd79YpgwFfWDuSkfI+6n+B3ZL5l1GVTsdRJP81XCkeFdeDp1OKnZDJm0uqMr0h4rjQsYHDo5Ak3bzqqA/sqsgs3qAJG/LBcN+lbE5jaxKIrJcGZ0UiFUxcRkJOviDWm+kkrewmItC7bRmvW1m4wRFIZW7TRoIUesVyjDdGAplsdgB/wBctHjATWr4ccZQJZJuMkdewXT2ybvbuILRtKytO9zM2ZTp2dAu/M++y6P4wMkzJYlifOuW8D6F3MStxbOMwbOCWdka6xAeBBbqtAcp0racI6CYi0uVsTbbvhbvruKMcMoO1uPHNF7Mn8X6T4dC7Qbiqrq0ZkCssKx27cBmjkYNVdz6SeHE6O4A0E2n/AU1034E+GwF5jcUqFUQFYa5lVQJbxritdEU2t1ROedxfwnXP/6bY/pbn5UK5FQraAf1c/I9hq00DTVltKUTXneBQSaE0hmos1IMOTTd/wBk+a/MUJpNw9k+nzp8fPyf2Flx9AstDLSgajY/GraAJBOYgCBOpMCTsNaV0tw6kuR6KF98qA+NQP0suxEGJyneJihxDEhrQI/bHyNaMk067DSTVD9q+Cah8ZxCqLkmJDx7jTeEu9oVG4qVVbtxtTkedJkAMdOURSY9wyK3oARltDmEP8rVMNxoYBbhzRP6m9rG32dKhfR9bM2j+638piug1TE3FbC5KbK1v7NdxLMdQQdWYjQ7Ug1Lxo28/wA6jla01x6GhLkaNIJpxhTTCp0PZW4/iKoQp589fwFQbz27mrOkgNlJUnKTEMDoZEHYjfwFRePgm+g5ZGJHiSIPwPvpnqKDguGgSna2LjhN4o3V2rlt2ckgZHHsrrLTA0Wot3pij9kqCQRoVI1nT7XfSujtmL2b9lLp/wBDD8awvFcHdhmGpAVw0BVCoy3CJLdpgCTsNvIV24YfB8Nr5s55zt77kTp1jbgS8rAlL99HDGAEyqf1e5JmCZrC5q0/S/MMPbDHe7J+9lM/zRTPQThpc3bzoxt27ZE5VKNclCLZLDeNYGvvq+FxhDyJ5LnM2P0JLAxT97WV9wuE/wAwrqttq5/hMJaUhApsxHsALnYpaKhiBG7xP7wGmopvjuLLdrD38ir7R7Ql5UhcrNtEyOXcdasp70NHp5NOiw+mLEZeGsP27ttfcS3/AI1wSK3PTnjjXbIssp7NzMH6zPmC5rWoGitmRzz9rcg1h6N2TyQcJaWJihS6FYmeuLKwIpTGs4nTbAAa4ywP+ov50Vzp1w8b4uz/AJp+QrztDrg69aL9jRTWYfp9w7/F2/TMf/Gk/wDH/Dv8Unuf/wBaT3Uuwda7mqBonPZbyqgwXTHA3WC28TbLHYTBPkDE1cWsSrZgDMozCNRAyg6/xCmxxalT8/sCT2JZrmfS3D8QBFsZit3svethiMrGIKr7K6nx+ddPyUCBBBFOscZNaiWSpQ0/v4nH8Pdu2bothsQ5RTmBC3T7SwBE6bnXXX0ra4pD1Gx9pfkatLfCIcvpr3fM0OPMlqwXfRV7TGJgAGTAqXu3ul2Z1PJBQjCN7d2ZTguNe6zoQBluFQdZIA385mrTix/5e/P91d/lasdw/pfh7N5nIc2mGbrAjkElndhtyLEeMUrjP0jYJ7V1ENwl1dRNsgdoEbk+NGOGa2om8kebL/oQWz4cA9nK+Yd/6sxXQxXJegnSfDNdtpnIdVeFKnXsGYPkCfSul4Hitq77Dg+G3zo1ppMDd7ofxe48/wADTJFPYg6j+uRpBoziCD2GWFMsKkkUw6yQO8x76RR3GcjK43M2LYR2VtLrr++zH3RSSwEzUd8OUa9edi2bE3rasd+rthLYGmg7QuaADfxmtJjUt3rbLcUaqSSGYjs3Mw8fbg+kV0ZOnpW2Rjk1NpFVwHEg3LwE9nD3WjbuU/Ouc8fxV5lW2CCCGaIUNDKuQSGMyDtyrqeBw4VL723Rk6u7lAksDcNo9osZmFFZOzwFrV/r7hR2aQFuMIzFZXLEawDHkaeCUUk7+j/gKlF2729UZrpdwh8Rawi4e0OsyM94G4i5ny2pKB311YiBU/oxwfEYfA30uWb4uPcSEW1cuSuZJfsAiQAedZPprg7lu/8ArSGz5mSCTpmKxHmNPSq1MFiLZgWr6Ea6W7qke4V0w4IS5s6xwzEZWRmtOtwqOsBt3QSwAjRu6B7qq795LhcoAtw3VHVgyTK3F9g6jssN/fNa/wCja/c+oWRcuObgzlgzMXE3HKBpMjsxvWpLE76+evzp9G9lcXVPHwefunuDNrIGUqWe9oQRIW5c7/FjWQrov033pxlpBELYB0AGrO5J09K51Saa2D1Gd58jyNch0KKaFaiJoeC9HLmIXrCRbtTAciS5B1CLzjadvOrZei9nm9w+MqPwq94pjLahLVpuxbRLY3+yoHvkGfGaipfHfXmZupnqel7HzObruolJuLpeHoUmN6KIFm1cfN3OAQf4lgj3Gs++BdSVKmR3a6d47xXQrd2qx8E2IcrZvraZQfaBIYTtAnb8TTdN1UnKp8HT0XtDJKWnLx3MUlwowbYqQ3qDP4V3P6Psebtx1J9m0zATyY2+Xhl+NcVxNprd64t0DMC0ACRM6DUmAQZGprp30S2nW8WchgcNe7SnMNXtkLPeANRuPdXZOKclL1+x70JbNeh11tBJqPicSqGGIB0MSJg9w51U9KeOjDrDyuZ7VtI1LM8doxssZvGuUfSN0m629buWyQ62rR25TnGvIydxQ9x5+BSU9NWjsuM4rbtWnvXGhLalmMEwoEkwNTXIemP0gYpzcwqrbZLjzZcKRns3FIVSCfaJKydNZECtxw7FG4hzJmtshZpEqUOjb7jXaqjGdFMAt1Lgw65iVcTdvAAhgBlQPA2Gm1Dp4OSbaHywcWct6R4Mpc6s2wkKMyqFUKVVAWYLpO/a8d6qPq4HiPMV0D6SuEPfxTnDp2lt2i4Qj9YxB0j2i4XLpqCNoO+LwWDZyyE5HRHco4KtKCcsGIJFWtW0c7atpPgTwrHNh7ouWjDQwkhTAYQQAwI1HhNarhPT29ZacikHlz/2rL2+HPcUMEaDqpAWG1iRmInYj0qRgOGXu2q4e7ckSVhZHcw3Pu3pJY4y/Ug6pLhnf+h/HvrtgXsuWGZCCCNgp5/eFXxrIfRYjjAoLllrLBmXK6srEKqIHIYTJArYxUJxp0ikXaGyKZunKQ3dJ9wqSRVfxpDkEEiHUmI1We0PUTWhH4kGT2MLxm86Ye8wYzb4lAnXsuLRI15SxppulN1ic2UkrkhRl2IadZ1MRT3Sy3bXDYxnZhGMtOT2mgNbQKQkx7Sx5ioa9G2ZBcBM9l1NpQxlWMFiCSVKtqukZa6ckXJpEsbim7NFw3jlpsLinW1kFq2jtDAyswI0EaWzuOdZYdN8PiIBt5YMr1jqNerFsEQDtLe+rPCj/kseraaW7RgffbY6/b591Z7jnR61h7qLbCgdVbc59yxeDsI2+XrTSbqxXGKdLgz3S3GDE42zAUDsIMrZx27zNvA/biPCttxnh10OeoBuQVR8vVrkBA7UBp57RWM6OcAvYjGo9pVKW8QhaHthhlZXJFuc5ERqBG/dXWOJO4LIAQWbSQ42ZdpBEa+G1QeaayRpbNf5R044J4pR/Pzkfw2CbC6WmN3OftAkiCAAIPPMfdUNcRcw+Lcvca6L6W2W2WYLah7iQgJO+Uk7fKrKwDZUZ4lTm0AXn3Dc6DWNTWc6dcI+t3rKDP1aWbZulCoJy5iF1OpzsNgYJq6m/EnKMFKkc8+lfEl+I3AY7CWl0Mj2A2/8VY+tF0jcvibpfMWDZSXjNKAJ2vHs1WGwvdTckbIFHUz6svjQrUzai/fi4tYh7d3tWWIIO7W5All8JmR7vGffshdQQVIlWBkEHYg1bDhOEbDm5KNezlXZgCIgFQoI0EHfmZ7qh2rSKMojL+yIj0HKvM6jGtu5871E4RlpSaapPs9vz1KfHcSFtTDfHn3VS8K4mVxNq67CA4B12Ruy3wJrX9ZbtnMEWRzgT74pzE8cu3wbapmBERlDe/T50+FxgqSLdPmhpcVjbvZvYoen1sdeGAgkFG8Ssa/E+6rDoAhuubVm81q4MPccsuzZY7DidQQfMb01jOj+JvhAVCsmYFmLHMDGUzrMAeFaroF0ZbDXS5ZSTZuroDzA/KuqFKlZ7GHFKOJRlu0uSt6fY/iB6u3ew9yEykOim5bLAZVZbgEkwNm11MzWIu45wV61W7KC0yMCGNuWjfYjSPFQa7T9K94rwtmESLlgidvaFcU4piA+Vj2i9sGZBKsCwgke1Gu+u1UjK0Xm20k/At16WX1UWhcKrGjKR7OpgmNRJ2M1Fv8ATLFssC4VAzbEyQQNDygRI00k99VOHs9hmPIaepAiozLrHwrM2p9zU2ell1esdyGYZVUEbxlAk77ZvWrDjXEzdwj4gjUraRDIIi4GF0Dn2WBXl7NZ3o6QGdWQGVAgiTM9xq64pYYYQhLeSHUQQFETmHt7a5z3a6VG4vJVfM4tON9Ren4u/wDJluGYlrV1XtsVcHQqYOoiuh9CcU/1jEYlpmyR1gGua0oKXdPJQ/mtZXBh4GU3C0f2a3AAG/aASVIPdFaLoxhAvXPdfEqHYFlsHqnfNnLKWn2duY32qklsdae52jg9twgNz23l2G4UtlhB4KIWecTzqwrPdD0RMOoQuRNzW4zO3tc2bXaNOVWuN4hbsjNcaBMbE6n+jUZ/q/OxSLSjbJlQeKbAeNVj9LbA2Dn+E/lVfjullttkf0Un5xSxyRT3Iz6jF/fH6r+Sss8JfiC4ss+S1ce3bQFA4IsknMQSNS2f0MeWm4fwq8igMwcgZQw108m1+NZfhfSYYeyllLbkW57T9WpYmZLHOe88qeH0gOHQC0uTMA3aLMQdNIUAHn6V0LqMbpHIuoxOVKa+W/2J/H8C6YW6iwWuPbj9Xz7UysdrbxrHY3heLvHM4YkKqj9XGitm5x5V0zjh7dofv/JH/Oo7jQ08nvR1Lg838atst64txMrhjKmDHMCR4RV70X4zj1uWUTEYlLVx0XUs9vISAxUXAU0E8qdxHRzEcQx+MGHCnq3JYs2UAZgg1g66Ex3Kav8AB8QS1hreFV1a8hFsorSC4BkBttz3+dc+fLPElojduhcs3FbK2dXQggZkUzcKAxl01huzprpTiW0ZcozAB9uy3stJHkSKgdHeJDE4dSyG0Qz2ypKlhkYoTI0nQ7TFVHFOOWla9kvQlq2WVldSSwBZgBs2pHKda7aTF1NHG+LvmxF5iZm9dOaAJl21gaCd6i0QYkydzr60CdKgy6HMlCui/wDB3hRUmoejTfoxdiAfPWmbnRy1chRbQZiASFgwe4rGtaj9HN/QmnEwEEGTvO1DRvuK9Mlur+RguFcDt3FfNbUG3cbkCYUyBPMQRvWhw/BCROXKvlFWdnAWsMHftEu5aGIOrbmByquxuPe5udO4bVtEeX+x4ftL2vDpP+PGvi8vD8+ZHxGGVP2T6z/tUfryNtPLT4ijamXFRnXgfJ5Ov6nLK5ZJfVjeJvlhDEkdxJI9xqh4lwyzcEPZtnxChWHkywauboqHfrjm2t0y2DqcsXak/qzmvSXgnUFShJtxlEnUGWbK3fuYPhVJlArp/EOHriFNp2KhvtATBGoMeketc84xwxsLda08SNQwmGU7MPD8QRXb02f3ip8n2Ps7q/f46k/iX5Zqvo8tm7fvC4xU9SkkhySJGWY12j4V0bB9GrRVhn0cCYSNRsdTruffXP8A6MVK4i8GXKRZTSI3IIPqINdcwOwpMuZxyaUezDGnGyoXojhbcMz3BPio/CrnDcFwzAQJ2+1qY5mIk+NKx9jP1azBLHXuEHl5xUZ7LWva7OvtrJU+Y5GqxlJrZ7ni9Z1ebpsrcsd4+65Xr+V5l5hcKtsBUEATp51l+OY5nu5NMqAkCOZ+1PfGX0J76srHFXDAOFKHMM+YAqQJBYE6qdp7yKz+Oftuw+0TH3R2V94UGs9Sty5Ie0usxS6O1dSVJcb9/lv9isv3D31BuknnU64tRLq1wyR8viaK67M0WFt571pInNdQek6mnLgq86H8GuPiUuOjrbt9vMVKhmEZVBO+86d1VwK5Kkex0KbyxpG94os3U8Mx/wBI/Om71uFPlS716b4HcrH/AOMUvFtCMfA16jVs+kukYz6OuEXbBxeIfKVxRDW8uYtCtfJDAgQe0u01yzHFVu2g6NaYO/WZlMTEL2CNdffXfOioH1LDeNm2fVlBPzqdjOG2ry5b1tLimNHUNttvtT1sI6Zlvox14VZgL2mv+AAN67tA7h8qi9L+Aj6tfureAAL3cpQ6ZEjKNY5b1r8Jwi3ZQJZAtos5VAGUSZMDlrXPfpF6V4W1bvYQOXvOjqSklEL8mJgTBO0+NbaqYy5tc2cmW5FS7dhmVTHZbxG0wTFQGYbHfuB2HialWr7QBJAAEDuHr4RUaLx0+J6B/wCLuH/36e5vyoVwLrT/AHg/r+GhUvdvuPePzPVWOu5LbuBJVWaPIE1iU4kuIsi8qw05XXmpHj7q3ANYLo/hrBF23cTKy3CU7R7Z7a789NfWtSknZ5vtDp5ZFanppfbck/XTetrJlgSh8wdPPSKjOsd3vFDrbmHcgE5e4d2sa++pv6Qd1lXbxE6itFx/S+T5DqemxZbzucn3+FbPz+Iq3cd4ptvI+oI+Jp+6ZMnfvpGMuAkIFAyKpJIzFmZZ5yAIOwpZQRHpsPSyTnJy0rni9+K5+5GuW/u+edSP9JNRMRbUbv55VLfEkUdywEZcggOpYgaCQxExymq3il4sGVTBynXxgxXHkq6O6OPFHKoQhd07k3w9+FX+Sr4p0rsYa4BbtNddZktcyhTG3ZXfXxisd0m42cZdF0oEhAmUMW2JM68zPwqrKbTuddd9Y1ogor0IY1BUj67F0+PGlUVfekmbz6LYW9ezKD+qt7HvOYbc4Nde4bDDaK4Z0I45awr3HvEgFUUAKWzQTJ02Ikeddg4Zxa8y5rWDcggFS92ygYRIgqz7+Irly45PLdHfCaUKL3iJC5dYPbynlmykj1qlOPuayzMDuJgx8qpuOdK+Ihms/o2ydAe1iFuLB2/Y1/KmuC4vFMCcVbRCTINtw0A69oAkDzBPjzNW92nGmfP+2MXV7Zunk9uUvH5eJd3ERoZYle8DTnEGoGNbMxJMeX+9WS2lueDd42PnVNjsPBPaJ1rnyQyQWz2PA/r8WVL3kPpx9Bq6ygTJPqB6bVUW8TDhmXMAdRuCKmPaBMToB8Tr+VJyAcqgnNM0ssNS0Ro1HRnjWD0TKlq5O7KBJOwz9+2k1q2U1yJrRYQBLNsIkknXQVuuFdMUGW3i0Nh9FDHVG2Gjbe+D4V6XT5dadqj6LoOollT24LBV/Xt90/MD8KPjBixcPcjH3A0h8baW6WNxACkglgJl32nyqg6WdMMIti7b64M7W3UKgJMkEDXaumjubs0nBLeXDWF7rNoe5Fo+L8ds4RM+IcIkaE7k/sqo1YxJga6VWdF+mmCxiqlq7luAAdVc7D6DkNm2+yTTfS3ozb4k4su7ILKl8yAFgzwAO0IKkAzHNaa9tgVvuUHGvpP4feVrTWL962ZB7KoGBBB0LhogneKzGIxfBr1kWcNhrlq812wq9ZnY5WuoLkNnYeyW3ronB/o1wFhIa11783vdqfJPZA9Kw30qcNw+AuWbmGs20YtbYBRlAa2zNMDTWAD6UrurHjV0YfieDtC8VsuXzw69kplV16xQQxMnKRzqJbJU6j015dxq545gg2LV7Mm1cHWWyf7tw1xB/CS9uOXV1Z8I4JbKBsZbuqt5A9l7cNmBGY6AmNCNx4VJypWzoWJun3v9v9mb+tjub/MaFXP6Bsf3eM/7K/8AtQpdaBoZ6L6w1EFuzaE5bdsDnCr8a5G/R/il/wDtuI3fEK1yP9LKPhRp9Gasc127ec+OX5sCfjUaXcq9/A6dmw+IzKtxHKmCUZXyk7BoOlU+I4ZcttmtkH8R3EVV8A6G28I/WWcyvET1jEEdxWcpHmK1SluZHoKprhL9X1Pmus9j5VJywfen6O9n9yjurImIPNe4/iKi3z27vgVH+VEFaB8NJHOZ0y6mFLHn3A1UWMGbl65mhY7QjUmTz7jRklVnl4vZHVe6nBwptx8VwtXm/IpOMYhlKBQSTaWDGglnJ18iKyfSHHiyhBM3HBCjnrpm8hXT8RwlSssJYAAamABA2/resZ0p6PYi4ydQNJ1MqBE/anUiJ0HOudYk8ltnt4vZUlNZJ+Wy8klucvuKzMTlOpPIx4AeVHbwbsdo8SQAPWum8O6FowDXGYk7qDAB5jv0NWqdF7ERk+Jrp1o9jSzn3Rng6urOzI0uqKBmzBgQWBDKIEH4GurcOtMFCgmAAAJMQNBpUDAcBw+HZRaT9YzZpJLNl+2STJCxp3SRWmtWoqE7b5KxqhlMICZIBPiJqXbtxsIo81Ja9G9LQSPjGWyA8aZgNPExp79qrMZwt2PZmO8hR8A5NSOJ3VvIUVhmEEHcSDME8piPWl/pINoA+buCMf8AVGX408ncUjz8nszpcmT3k4K/mvsV54Xl7TKG1EjMZ5AQAB7qebBKfZyqsAgqFJMgHcz31JN1tOywGZZzZRzGsBjVVaxRCKByAnvj8vGhulZ0Q6XDB/DFfQucHgUtkMJLAaEmYneBsPQU9icGlwEMAZ7xI91N4bEhhT+aqplNPYzd3onYLaroBGWWy7k+ztzpx+jlhVgIg5eyIq5La+6m75OnmPnW1Ao59x7oAh1t/q28NUPpy9K0HBcTjsMuHysjqtkJf603HZmF26y5W3ACuACZGwjStXM6Haqy7g8zOQ0MpUDl2erQjbUbmqoRk270rJGlsDzafwFY3pnhxjijXRqkgZSVGsetWGJxAQEXFzPOkELA5ksAQeYHkah37qOB1ZeROZHCgjxDZsrDbeN6LnsBQrcosBwh7VuEbO1ljdsqwkld71n94MBmA07S/vVWYvpEPq9i0yOLlpMgfs9VctAMbZAJncrJjaRvVlxTpEuFZc1m6XIDAEi2Adx2gGn+Gah8QxqXcM+Vclq8zOAFFxsPdUh71pZI7JnrBzys/wCzFJvRS/Aq/wBOL/dn/Pb/APqoVU/VrX+KT/t3v/ShRsXc9IAUsJTy2wKUFrn0nRqGFU0sJSzRTQoFiWEFPvH4o4qBgx+vufdHzqdd1KfeHyIqDh/7d/uH4MPzq3/mif8A2JuIHZNQzbmpV99DrUYGpMcjXcHJkHK37Q5+DDZh5+kUy2Eun2rigc8ikMf4ixyjyE+NWJpJNCzUNYLCKk5QBO55nzPOpYoYa3M1MSwKFhop+JpdCg2YJnUbErBkKe/beqZMOHGYIHEwc5YkEbhgxJBFbU2htVdisB2s6xn5g7OB3+Pjy+BPK2BwyqwVtRoFUc+yAPfpUpV7yfQ6UxicIVhlBg/7yKUMYq+0Y8611sw12F4hYUn+t6rrWGDWrescwRuNTtUs44PogmQQTB5iJBGhPrvFRTbvLCogKrsWMEd0gbjfup09hWg7NvJoxG4gjYzt90+G3yqfbJqvxWBvurZbyK52ASV5aEEk+4irjCYZlRc5BfKMxEgTGsTrFFpAXIwgoXF1HmKfC7+dNXdCDSWGrF5aqMbauNdBtsqoUKtIJaQSVy8o7Te+rmmRlA1jn86spE3EqXwRVSPanVpA1P8AWnpWa4hYTNGXQ+J05GtrfxAXQ6/iOR90Vn+I2VJLHcn4nl41pSTMosok4eVlB7OuZHysnjmVuyPOl4bh+HTOtu3pcKlhL9XmUkqyKTmB1IkEaE6RpUvHYJ7iFTOpQjKYIKnQk/aJHoPPWmbeDI0JM95Y0jlQ6iNfoa1/dWP+z/8AnR0/9U8qFLqNpN5wfH3L1m3cdMjMoLLrAPOJ1jzqeGNLyxRRRHAqknQU+cMfPyrN8S6WrZLIq6qSCTzIrP3+luJumASqzyET670upApmzP1g3wuRFtLlbMZLOYJbmAgGg1mZ5Vj+J8TxiXsTdtBWyG4VRQHLWgQcoAGvs7g6aeRpunXSli9q3hLlyz9u4ynKwyDkVMiZ7xJ0rI47jmJw+Ma6LrFjvmJYMrakEH5710U9GxG1q3F8c6ZXcRdN0kqYhQpICruADz8+dTOj3T+/ZYC+xuWydSR21HeD9oeB18eVQcdwkX0OIwy9ne5aH2DzZR+z4cvKqOxhmdhbUSzGFHefy5z3UHUluZNxex6K4fdW6gcGQdal5IqF0V4abOHRDyVRr3AQKtzbrnS2Lsbw4qStN20ingKDQQCiZZoyaQbhrJAKnHcID3VuG5cAUQbQIFtu5mWNT608MCo2UCphpDCnbsCQwtqNvdtRPbp1aQx2pQiUgGnjUYg0u2xOlZSA0IYVGv1IZaZdaVsZIauXCTNNC3NPlKVbsz4VrDREv2wQJGo09OVQLvDYbMGLaCA0ad8R8auxaAnn3g1HcgzpEHTyP9D30wpUlfCiuWgRBFWLrRWrM7jQUoSL+jRQqd9XHe3+Y0KwKZomFAW6cNGKsAzfSXo6LxFy2ozjcyBI5DxOp1rIcQtHDqTcGXkM3ZE+Z5V1Og1sHcDX+uVak+QU/A82XMYLrs4mP1aA965i7nwJImKkdL7JuYsi0jMSo7KqWbmB2V9K9A3OD4djJsoT3xr76ds8Lsp7NpP8oJ95qutVSJe7d2cT6BcAxnWT1Lrb727JHiAdmH70CuocK6I2LVw3uqRXbWFkgTqd9BryUAbbwI0xFCpPdlUqVDYWgVpwiiIrBEKtGBShQIpGESRTTCnaBFADI9EVp4rSIrGTGglNlafNJK0A2M5aSg1pwijAoBI5FIiniIpD0AiWt0SCKXmpTCsjMYugVDy6+HPyqcwqMy1mFIjPbINSFRo0gUZWQD3afl/XhTyuDQs1Efqj3n3ChUqKOhYKLVt6MUKFdIgqgKOhWMBacoUKxgmoChQrGCNEKFCsYMUDQoUoRDUKOhSGEGk0VCiKhBojtR0KARlqCc6KhQHXAhqbehQpUETTw2oUKJhu7+FRjQoVjA5Hy/EU3b3HnQoUrG8CZQoUKUB//9k=" alt="flower"></img>
+          </div>
+        </div>
+        <div className="col s12 m6 l8">
+            <br />
+          <div ClassName="row">
+            <TextField
+              className={classes.margin}
+              id="outlined-uncontrolled"
+              label="ชื่อร้าน"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <AccountCircle />
+                  </InputAdornment>
+                )
+              }}
+            />
+
+            <TextField
+              className={classes.margin}
+              id="outlined-uncontrolled"
+              label="E_mail"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <MailOutlineIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+          <div>
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <VpnKeyIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="Confirm-Password"
+              type="password"
+              autoComplete="current-password"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <VpnKeyIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+          <div>
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="ที่อยู่"
+              autoComplete="address"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <BusinessIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="เบอร์โทร"
+              autoComplete="Phone number"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <ContactPhoneIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+
+          <div className="row">
+            <div className={classes.root}>
+              <Button variant="contained" color="secondary">
+                ยกเลิก
+              </Button>{" "}
+              &nbsp; &nbsp; &nbsp;
+              <Button variant="contained" color="primary">
+                ตกลง
+              </Button>
+              &nbsp; &nbsp; &nbsp;
+              <Fab color="secondary" aria-label="edit">
+                <EditIcon />
+              </Fab>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Web/b_beauty_project/src/views/BeauticianShopPage/Work/index.js

+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { DatePicker } from "@material-ui/pickers";
+import { injectIntl, FormattedRelativeTime } from "react-intl";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import {
+    MuiPickersUtilsProvider,
+    KeyboardTimePicker,
+    KeyboardDatePicker,
+  } from '@material-ui/pickers';
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  }
+});
+
+class Work extends Component {
+  state = {
+    selectedDate : new Date()
+  };
+
+  handleChangeDate = newDate => {
+    console.log("newDate: ", newDate);
+    this.setState({
+      date: newDate
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    // const tab = this.state.tab;
+    // หรือ
+    const { selectedDate  } = this.state;
+    return (
+        <div className="row center">
+        <KeyboardDatePicker
+          disableToolbar
+          variant="inline"
+          format="dd/MM/yyyy"
+          margin="normal"
+          id="date-picker-inline"
+          label="เลือกวันที่"
+          value={selectedDate}
+          onChange={this.handleDateChange}
+          KeyboardButtonProps={{
+            'aria-label': 'change date',
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Work);

Web/b_beauty_project/src/views/DataShopPage/Addimage/index.js

+import React, { Component } from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+import MaterialTable from "material-table";
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+function createData(name, email, address, phonenumber, edit, action) {
+  return { name, email, address, phonenumber, edit, action };
+}
+
+const rows = [
+  createData(
+    "Frozen yoghurt",
+    "email@mmmj",
+    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
+    " 012455887",
+    <EditIcon />,
+    <DeleteIcon />
+  )
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
+  }
+});
+
+class Databeautician extends Component {
+  state = {
+    open: false,
+    columns: [
+      { title: "รูปภาพ", field: "img" }
+    ],
+    data: [
+      { img: "Mehmet"},
+      {
+        img: "Zerya Betül"
+        
+      }
+    ]
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        img: "Mehmet",
+       
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const { open, columns, data } = this.state;
+    return (
+      <div>
+        <MaterialTable
+          title="รูปภาพร้าน"
+          columns={columns}
+          data={data}
+          options={{
+            selection: false
+          }}
+          editable={{
+           // onRowAdd: newData =>
+            //  new Promise(resolve => {
+           //     setTimeout(() => {
+            //      resolve();
+             //     this.setState(prevState => {
+              //      const data = [...prevState.data];
+              //      data.push(newData);
+              //      return { ...prevState, data };
+               //   });
+               // }, 600);
+             // }),
+            // onRowUpdate: (newData, oldData) =>
+            //   new Promise(resolve => {
+            //     setTimeout(() => {
+            //       resolve();
+            //       if (oldData) {
+            //         this.setState(prevState => {
+            //           const data = [...prevState.data];
+            //           data[data.indexOf(oldData)] = newData;
+            //           return { ...prevState, data };
+            //         });
+            //       }
+            //     }, 600);
+            //   }),
+            onRowDelete: oldData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.splice(data.indexOf(oldData), 1);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              })
+          }}
+        />
+        <div className="row">
+          <Fab
+            aria-label={"add"}
+            className={classes.fab}
+            color="primary"
+            onClick={this.handleClickOpen}
+          >
+            <AddIcon />
+          </Fab>
+
+          <Dialog
+            open={open}
+            onClose={this.handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogTitle id="alert-dialog-title">{"เพิ่มรูปภาพ"}</DialogTitle>
+            <DialogContent>
+              
+              <TextField
+                className={classes.margin}
+                id="outlined-file-input"
+                label="เพิ่มรูปภาพ"
+                type="file"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AddPhotoAlternateIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleClose} color="primary">
+                ยกเลิก
+              </Button>
+              <Button
+                onClick={this.handleCloseAndSave}
+                color="primary"
+                autoFocus
+              >
+                ยืนยัน
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Databeautician);

Web/b_beauty_project/src/views/DataShopPage/Databeautician/index.js

+import React, { Component } from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+import MaterialTable from "material-table";
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+function createData(name, email, address, phonenumber, edit, action) {
+  return { name, email, address, phonenumber, edit, action };
+}
+
+const rows = [
+  createData(
+    "Frozen yoghurt",
+    "email@mmmj",
+    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
+    " 012455887",
+    <EditIcon />,
+    <DeleteIcon />
+  )
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
+  }
+});
+
+class Databeautician extends Component {
+  state = {
+    open: false,
+    columns: [
+      { title: "Name", field: "name" },
+      { title: "E-mail", field: "surname" },
+      { title: "Address", field: "birthYear", type: "numeric" },
+      {
+        title: "Phone number",
+        field: "birthCity",
+        lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
+      }
+    ],
+    data: [
+      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
+      {
+        name: "Zerya Betül",
+        surname: "Baran",
+        birthYear: 2017,
+        birthCity: 34
+      }
+    ]
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        name: "Mehmet",
+        surname: "Baran",
+        birthYear: 1987,
+        birthCity: 63
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const { open, columns, data } = this.state;
+    return (
+      <div>
+        <MaterialTable
+          title="ข้อมูลช่าง"
+          columns={columns}
+          data={data}
+          options={{
+            selection: false
+          }}
+          editable={{
+           // onRowAdd: newData =>
+            //  new Promise(resolve => {
+           //     setTimeout(() => {
+            //      resolve();
+             //     this.setState(prevState => {
+              //      const data = [...prevState.data];
+              //      data.push(newData);
+              //      return { ...prevState, data };
+               //   });
+               // }, 600);
+             // }),
+            onRowUpdate: (newData, oldData) =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  if (oldData) {
+                    this.setState(prevState => {
+                      const data = [...prevState.data];
+                      data[data.indexOf(oldData)] = newData;
+                      return { ...prevState, data };
+                    });
+                  }
+                }, 600);
+              }),
+            onRowDelete: oldData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.splice(data.indexOf(oldData), 1);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              })
+          }}
+        />
+        <div className="row">
+          <Fab
+            aria-label={"add"}
+            className={classes.fab}
+            color="primary"
+            onClick={this.handleClickOpen}
+          >
+            <AddIcon />
+          </Fab>
+
+          <Dialog
+            open={open}
+            onClose={this.handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogTitle id="alert-dialog-title">{"ลงทะเบียนช่าง"}</DialogTitle>
+            <DialogContent>
+              <TextField
+                className={classes.margin}
+                id="outlined-uncontrolled"
+                label="ชื่อ-สกุล"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AccountCircle />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-uncontrolled"
+                label="E_mail"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <MailOutlineIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="Password"
+                type="password"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <VpnKeyIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="Confirm-Password"
+                type="password"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <VpnKeyIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="ที่อยู่"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="เบอร์โทร"
+                autoComplete="Phone number"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <ContactPhoneIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-file-input"
+                label="เพิ่มรูปภาพ"
+                type="file"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AddPhotoAlternateIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleClose} color="primary">
+                ยกเลิก
+              </Button>
+              <Button
+                onClick={this.handleCloseAndSave}
+                color="primary"
+                autoFocus
+              >
+                ยืนยัน
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Databeautician);

Web/b_beauty_project/src/views/DataShopPage/Datashop/index.js

+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
+import { Button, TextField } from "@material-ui/core";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+
+const styles = theme => ({
+  root: {
+    height: 150
+  }
+});
+
+class DataShop extends Component {
+  state = {};
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <TextField id="standard-basic" label="Standard" />
+        <Button>login</Button>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(DataShop);

Web/b_beauty_project/src/views/DataShopPage/Home/index.js

+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import AppBar from "@material-ui/core/AppBar";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import {
+  Divider,
+  Drawer,
+  Hidden,
+  IconButton,
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Toolbar
+} from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+import InboxIcon from "@material-ui/icons/Inbox";
+import MailIcon from "@material-ui/icons/Mail";
+import MenuIcon from "@material-ui/icons/Menu";
+import { withRouter } from "react-router-dom";
+import Databeautician from "../Databeautician";
+import Datashop from "../Datashop/index.js";
+import compose from "recompose/compose";
+import Profile from "../Profile";
+import Lists from "../List";
+import Managequeue from "../Managequeue";
+
+import Addimage from "../Addimage";
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    display: "flex"
+  },
+  drawer: {
+    [theme.breakpoints.up("sm")]: {
+      width: drawerWidth,
+      flexShrink: 0
+      // zIndex: -1
+    }
+  },
+  appBar: {
+    [theme.breakpoints.up("sm")]: {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: drawerWidth
+    }
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up("sm")]: {
+      display: "none"
+    },
+    zIndex: 2
+  },
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    width: drawerWidth
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3)
+  }
+});
+
+class ResponsiveDrawer extends Component {
+  state = {
+    mobileOpen: false,
+    path: "profile"
+    // path: "datashop"
+  };
+
+  handleDrawerToggle = () => {
+    this.setState(prevState => {
+      return { ...prevState, mobileOpen: !prevState.mobileOpen };
+    });
+  };
+
+  handleChangePath = path => {
+    this.setState({
+      path: path
+    });
+  };
+
+  drawer = () => {
+    const { classes } = this.props;
+    const { path } = this.state;
+    return (
+      <div>
+        <div
+          className={classes.toolbar}
+          style={{ backgroundColor: "#3f51b5", textAlign: "center" }}
+        >
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            Link
+            href="/"
+            style={{ color: "white" }}
+          >
+            B Beauty
+          </IconButton>
+        </div>
+
+        <Divider />
+
+        <List>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("profile");
+            }}
+            selected={path == "profile" ? true : false}
+          >
+            <ListItemIcon>
+              <InboxIcon />
+            </ListItemIcon>
+            <ListItemText primary="โปรไฟล์ร้าน" />
+          </ListItem>
+
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("datashop");
+            }}
+            selected={path == "datashop" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="ข้อมูลร้าน" />
+          </ListItem>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("list");
+            }}
+            selected={path == "list" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="รายการ" />
+          </ListItem>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("databeautician");
+            }}
+            selected={path == "databeautician" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="ข้อมูลช่าง" />
+          </ListItem>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("managequeue");
+            }}
+            selected={path == "managequeue" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="จัดการคิว" />
+          </ListItem>
+          <ListItem
+            button
+            onClick={() => {
+              this.handleChangePath("addimage");
+            }}
+            selected={path == "addimage" ? true : false}
+          >
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="เพิ่มรูปภาพ" />
+          </ListItem>
+         
+         
+        </List>
+      </div>
+    );
+  };
+
+  render() {
+    const { classes, theme } = this.props;
+    const { mobileOpen, path } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <CssBaseline />
+        <nav className={classes.drawer} aria-label="mailbox folders">
+          <Hidden smUp implementation="css">
+            <Drawer
+              variant="temporary"
+              anchor={theme.direction === "rtl" ? "right" : "left"}
+              open={mobileOpen}
+              onClose={this.handleDrawerToggle}
+              classes={{
+                paper: classes.drawerPaper
+              }}
+              ModalProps={{
+                keepMounted: true // Better open performance on mobile.
+              }}
+            >
+              {this.drawer()}
+            </Drawer>
+          </Hidden>
+          <Hidden xsDown implementation="css">
+            <Drawer
+              classes={{
+                paper: classes.drawerPaper
+              }}
+              variant="permanent"
+              open
+            >
+              {this.drawer()}
+            </Drawer>
+          </Hidden>
+        </nav>
+
+        <main className={classes.content}>
+          {path == "profile" ? <Profile /> : null}
+          {path == "datashop" ? <Datashop /> : null}
+          {path == "list" ? <Lists /> : null}
+          {path == "databeautician" ? <Databeautician /> : null}
+          {path == "managequeue" ? <Managequeue /> : null}
+          {path == "addimage" ? <Addimage /> : null}
+       
+        </main>
+      </div>
+    );
+  }
+}
+
+ResponsiveDrawer.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default compose(
+  withStyles(styles, { withTheme: true }),
+  withRouter
+)(ResponsiveDrawer);

Web/b_beauty_project/src/views/DataShopPage/List/index.js

+import React, { Component } from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+import MaterialTable from "material-table";
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
+  }
+});
+
+class Databeautician extends Component {
+  state = {
+    open: false,
+    columns: [
+      { title: "Name", field: "name" },
+      { title: "Time", field: "time" }
+    ],
+    data: [
+      { name: "Mehmet", time: "Baran" },
+      {
+        name: "Zerya Betül",
+        time: "Baran"
+      }
+    ]
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        name: "Mehmet",
+        time: "Baran"
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const { open, columns, data } = this.state;
+    return (
+      <div>
+        <MaterialTable
+          title="รายการ"
+          columns={columns}
+          data={data}
+          options={{
+            selection: false
+          }}
+          editable={{
+            onRowAdd: newData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.push(newData);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              }),
+            onRowUpdate: (newData, oldData) =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  if (oldData) {
+                    this.setState(prevState => {
+                      const data = [...prevState.data];
+                      data[data.indexOf(oldData)] = newData;
+                      return { ...prevState, data };
+                    });
+                  }
+                }, 600);
+              }),
+            onRowDelete: oldData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.splice(data.indexOf(oldData), 1);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              })
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Databeautician);

Web/b_beauty_project/src/views/DataShopPage/Managequeue/index.js

+import React, { Component } from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+import MaterialTable from "material-table";
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    position: "absolute",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2)
+  }
+});
+const StyledTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+const StyledTableRow = withStyles(theme => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}))(TableRow);
+
+function createData(name, email, address, phonenumber, edit, action) {
+  return { name, email, address, phonenumber, edit, action };
+}
+
+const rows = [
+  createData(
+    "Frozen yoghurt",
+    "email@mmmj",
+    "ที่อยู่ 120/255 มหาวิทยาลัยุบลราชธานี ",
+    " 012455887",
+    <EditIcon />,
+    <DeleteIcon />
+  )
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700
+  }
+});
+
+class Databeautician extends Component {
+  state = {
+    open: false,
+    columns: [
+      { title: "Name", field: "name" },
+      { title: "E-mail", field: "surname" },
+      { title: "Address", field: "birthYear", type: "numeric" },
+      {
+        title: "Phone number",
+        field: "birthCity",
+        lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
+      }
+    ],
+    data: [
+      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
+      {
+        name: "Zerya Betül",
+        surname: "Baran",
+        birthYear: 2017,
+        birthCity: 34
+      }
+    ]
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+  handleCloseAndSave = () => {
+    //Save to db
+
+    this.setState(prevState => {
+      const data = [...prevState.data];
+      const newData = {
+        name: "Mehmet",
+        surname: "Baran",
+        birthYear: 1987,
+        birthCity: 63
+      };
+      data.push(newData);
+      return { ...prevState, data: data, open: false };
+    });
+
+    // this.setState({
+    //   open: false
+    // });
+  };
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    const { open, columns, data } = this.state;
+    return (
+      <div>
+        <MaterialTable
+          title="ข้อมูลช่าง"
+          columns={columns}
+          data={data}
+          options={{
+            selection: false
+          }}
+          editable={{
+           // onRowAdd: newData =>
+            //  new Promise(resolve => {
+           //     setTimeout(() => {
+            //      resolve();
+             //     this.setState(prevState => {
+              //      const data = [...prevState.data];
+              //      data.push(newData);
+              //      return { ...prevState, data };
+               //   });
+               // }, 600);
+             // }),
+            onRowUpdate: (newData, oldData) =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  if (oldData) {
+                    this.setState(prevState => {
+                      const data = [...prevState.data];
+                      data[data.indexOf(oldData)] = newData;
+                      return { ...prevState, data };
+                    });
+                  }
+                }, 600);
+              }),
+            onRowDelete: oldData =>
+              new Promise(resolve => {
+                setTimeout(() => {
+                  resolve();
+                  this.setState(prevState => {
+                    const data = [...prevState.data];
+                    data.splice(data.indexOf(oldData), 1);
+                    return { ...prevState, data };
+                  });
+                }, 600);
+              })
+          }}
+        />
+        <div className="row">
+          <Fab
+            aria-label={"add"}
+            className={classes.fab}
+            color="primary"
+            onClick={this.handleClickOpen}
+          >
+            <AddIcon />
+          </Fab>
+
+          <Dialog
+            open={open}
+            onClose={this.handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+          >
+            <DialogTitle id="alert-dialog-title">{"ลงทะเบียนช่าง"}</DialogTitle>
+            <DialogContent>
+              <TextField
+                className={classes.margin}
+                id="outlined-uncontrolled"
+                label="ชื่อ-สกุล"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AccountCircle />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-uncontrolled"
+                label="E_mail"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <MailOutlineIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="Password"
+                type="password"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <VpnKeyIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="Confirm-Password"
+                type="password"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <VpnKeyIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="ที่อยู่"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="เบอร์โทร"
+                autoComplete="Phone number"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <ContactPhoneIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <br /> <br />
+              <TextField
+                className={classes.margin}
+                id="outlined-file-input"
+                label="เพิ่มรูปภาพ"
+                type="file"
+                autoComplete="current-password"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AddPhotoAlternateIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleClose} color="primary">
+                ยกเลิก
+              </Button>
+              <Button
+                onClick={this.handleCloseAndSave}
+                color="primary"
+                autoFocus
+              >
+                ยืนยัน
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(Databeautician);

Web/b_beauty_project/src/views/DataShopPage/Profile/index.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+import Fab from "@material-ui/core/Fab";
+import EditIcon from "@material-ui/icons/Edit";
+import Paper from "@material-ui/core/Paper";
+import CardMedia from "@material-ui/core/CardMedia";
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function InputWithIcon() {
+  const classes = useStyles();
+
+  return (
+    <div className="row center">
+       <div className="row mt-2 mb-2">
+         <h2>โปรไฟล์ร้าน</h2>
+       </div><br />
+      <div className="row mt-2 mb-2">
+        <div className="col s12 m6 l4">
+          <div className="row center">
+          <br />
+            <img src="data:image/jpeg;base64,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" alt="flower"></img>
+          </div>
+        </div>
+        <div className="col s12 m6 l8">
+            <br />
+          <div ClassName="row">
+            <TextField
+              className={classes.margin}
+              id="outlined-uncontrolled"
+              label="ชื่อร้าน"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <AccountCircle />
+                  </InputAdornment>
+                )
+              }}
+            />
+
+            <TextField
+              className={classes.margin}
+              id="outlined-uncontrolled"
+              label="E_mail"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <MailOutlineIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+          <div>
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <VpnKeyIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="Confirm-Password"
+              type="password"
+              autoComplete="current-password"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <VpnKeyIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+          <div>
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="ที่อยู่"
+              autoComplete="address"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <BusinessIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+            <TextField
+              className={classes.margin}
+              id="outlined-password-input"
+              label="เบอร์โทร"
+              autoComplete="Phone number"
+              variant="outlined"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <ContactPhoneIcon />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </div>
+          <br></br>
+
+          <div className="row">
+            <div className={classes.root}>
+              <Button variant="contained" color="secondary">
+                ยกเลิก
+              </Button>{" "}
+              &nbsp; &nbsp; &nbsp;
+              <Button variant="contained" color="primary">
+                ตกลง
+              </Button>
+              &nbsp; &nbsp; &nbsp;
+              <Fab color="secondary" aria-label="edit">
+                <EditIcon />
+              </Fab>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Web/b_beauty_project/src/views/HomePage/index.js

+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
+import {
+  Dialog,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  InputBase,
+  Divider,
+  IconButton
+} from "@material-ui/core";
+import AppBra from "../../components/AppBra";
+import { withRouter } from "react-router-dom";
+import compose from "recompose/compose";
+import { DatePicker } from "@material-ui/pickers";
+import { injectIntl, FormattedRelativeTime } from "react-intl";
+import { th } from "date-fns/locale";
+import { format } from "date-fns";
+import { MenuIcon } from "@material-ui/icons/Menu";
+import TextField from "@material-ui/core/TextField";
+
+
+const styles = theme => ({
+  root: {
+    height: 150,
+    flexGrow: 1,
+    transform: "translateZ(0)",
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    "@media all and (-ms-high-contrast: none)": {
+      display: "none"
+    }
+  },
+  modal: {
+    display: "flex",
+    padding: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+class HomePage extends Component {
+  state = {
+    tab: 0,
+    date: new Date(),
+    open: false
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
+  };
+
+  componentDidMount = () => {
+    let { pathname } = this.props.location;
+    pathname = pathname.substring(1, pathname.length);
+    // console.log('pathname', pathname)
+    const tab =
+      pathname === "spa"
+        ? 0
+        : pathname === "tab2"
+        ? 1
+        : pathname === "tab3"
+        ? 2
+        : pathname === "tab4"
+        ? 3
+        : pathname === "tab5"
+        ? 4
+        : pathname === "tab6"
+        ? 5
+        : 0;
+    //   7
+
+    this.setState({
+      tab: tab
+    });
+  };
+
+  handleChangeTab = (event, newValue) => {
+    const tab =
+      newValue === 0
+        ? "spa"
+        : newValue === 1
+        ? "tab2"
+        : newValue === 2
+        ? "tab3"
+        : newValue === 3
+        ? "tab4"
+        : newValue === 4
+        ? "tab5"
+        : newValue === 5
+        ? "tab6"
+        : "spa";
+    this.setState({ tab: newValue });
+    // this.props.history.push(`/${tab}`);
+  };
+
+  handleChangeDate = newDate => {
+    console.log("newDate: ", newDate);
+    this.setState({
+      date: newDate
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    // const tab = this.state.tab;
+    // หรือ
+    const { tab, date, open, value } = this.state;
+    return (
+      <div>
+        <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />
+        <div className="row center">
+          <div className="row mt-2 mb-2">
+            <div className="col s12 m6 l6">
+              <h3>ชื่อ</h3>
+            </div>
+          </div>
+          <div className="row mt-2 mb-2">
+            <div className="col s12 m6 l6">
+              <img
+                src="https://www.smeleader.com/wp-content/uploads/2018/05/%E0%B9%81%E0%B8%9F%E0%B8%A3%E0%B8%99%E0%B9%84%E0%B8%8A%E0%B8%AA%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%A7%E0%B8%A2-%E0%B8%A3%E0%B8%A7%E0%B8%A1%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%99-%E0%B8%AA%E0%B8%B2%E0%B8%99%E0%B8%9D%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%97%E0%B8%A3%E0%B8%87%E0%B8%9C%E0%B8%A1.jpg"
+                width="70%"
+              ></img>
+            </div>
+
+            <div className="col s12 m6 l6">
+              <div className="row">
+                <h4>ที่อยู่ร้าน</h4>
+               
+              </div>
+
+              <div className="row">
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={this.handleClickOpen}
+                >
+                  จองคิว
+                </Button>
+                <Dialog
+                  open={open}
+                  onClose={this.handleClose}
+                  aria-labelledby="alert-dialog-title"
+                  aria-describedby="alert-dialog-description"
+                >
+                  <DialogTitle id="alert-dialog-title">{"จองคิว"}</DialogTitle>
+                  <DialogContent>
+                    <h6>
+                      วันที่ที่เลือกคือ{" "}
+                      {format(new Date(date), "dd MMMM yyyy", {
+                        locale: th
+                      })}
+                    </h6>
+                    <DatePicker
+                      autoOk
+                      orientation="static"
+                      variant="static"
+                      openTo="date"
+                      minDate={new Date()}
+                      value={date}
+                      onChange={this.handleChangeDate}
+                    />
+                  </DialogContent>
+                  <DialogActions>
+                    <Button onClick={this.handleClose} color="primary">
+                      Disagree
+                    </Button>
+                    <Button
+                      onClick={this.handleClose}
+                      color="primary"
+                      autoFocus
+                    >
+                      Agree
+                    </Button>
+                  </DialogActions>
+                </Dialog>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(HomePage);

Web/b_beauty_project/src/views/LoginPage/index.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    "& > *": {
+      margin: theme.spacing(1),
+      width: 200
+    }
+  }
+}));
+
+export default function BasicTextFields() {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <div className="row center">
+        <h2>เข้าสู่ระบบ</h2>
+        <div>
+          <TextField
+            className={classes.margin}
+            id="outlined-uncontrolled"
+            label="E_mail"
+            
+            variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <MailOutlineIcon />
+                </InputAdornment>
+              )
+            }}
+          />
+          </div><br></br>
+          <div>
+          <TextField
+            className={classes.margin}
+            id="outlined-password-input"
+            label="Password"
+            type="password"
+            autoComplete="current-password"
+            variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <VpnKeyIcon />
+                </InputAdornment>
+              )
+            }}
+          />
+        </div><br></br>
+        <div>
+          <Button variant="contained" color="primary" disableElevation>
+            เข้าสู่ระบบ
+          </Button>
+          <h5>หรือ</h5>
+          <Button variant="contained" color="primary" disableElevation>
+            เข้าสู่ระบบด้วย Facebook
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

Web/b_beauty_project/src/views/RigisterPage/index.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function InputWithIcon() {
+  const classes = useStyles();
+
+  return (
+    <div className="row center">
+      <h2>ลงทะเบียน</h2>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-uncontrolled"
+          label="ชื่อ-สกุล"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            )
+          }}
+        />
+
+        <TextField
+          className={classes.margin}
+          id="outlined-uncontrolled"
+          label="E_mail"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <MailOutlineIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="Password"
+          type="password"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <VpnKeyIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="Confirm-Password"
+          type="password"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <VpnKeyIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-file-input"
+          label="เพิ่มรูปภาพ"
+          type="file"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AddPhotoAlternateIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div className={classes.root}>
+        <Button variant="contained" color="secondary">
+          ยกเลิก
+        </Button>{" "}
+        &nbsp; &nbsp; &nbsp;
+        <Button variant="contained" color="primary">
+          ลงทะเบียน
+        </Button>
+      </div>
+    </div>
+  );
+}

Web/b_beauty_project/src/views/RigisterShopPage/index.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function InputWithIcon() {
+  const classes = useStyles();
+
+  return (
+    <div className="row center">
+      <h2>ลงทะเบียนธุรกิจ</h2>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-uncontrolled"
+          label="ชื่อร้าน"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AccountCircle />
+              </InputAdornment>
+            )
+          }}
+        />
+
+        <TextField
+          className={classes.margin}
+          id="outlined-uncontrolled"
+          label="E_mail"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <MailOutlineIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="Password"
+          type="password"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <VpnKeyIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="Confirm-Password"
+          type="password"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <VpnKeyIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="ที่อยู่"
+          autoComplete="address"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <BusinessIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+        <TextField
+          className={classes.margin}
+          id="outlined-password-input"
+          label="เบอร์โทร"
+          autoComplete="Phone number"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <ContactPhoneIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div>
+        <TextField
+          className={classes.margin}
+          id="outlined-file-input"
+          label="เพิ่มรูปภาพ"
+          type="file"
+          autoComplete="current-password"
+          variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AddPhotoAlternateIcon />
+              </InputAdornment>
+            )
+          }}
+        />
+      </div>
+      <br></br>
+      <div className={classes.root}>
+        <Button variant="contained" color="secondary">
+          ยกเลิก
+        </Button>{" "}
+        &nbsp; &nbsp; &nbsp;
+        <Button variant="contained" color="primary">
+          ลงทะเบียน
+        </Button>
+      </div>
+    </div>
+  );
+}

b_beauty/.editorconfig

-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.yml]
-indent_size = 2

b_beauty/.env.example

-APP_NAME=Laravel
-APP_ENV=local
-APP_KEY=
-APP_DEBUG=true
-APP_URL=http://localhost
-
-LOG_CHANNEL=stack
-
-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=laravel
-DB_USERNAME=root
-DB_PASSWORD=
-
-BROADCAST_DRIVER=log
-CACHE_DRIVER=file
-QUEUE_CONNECTION=sync
-SESSION_DRIVER=file
-SESSION_LIFETIME=120
-
-REDIS_HOST=127.0.0.1
-REDIS_PASSWORD=null
-REDIS_PORT=6379
-
-MAIL_DRIVER=smtp
-MAIL_HOST=smtp.mailtrap.io
-MAIL_PORT=2525
-MAIL_USERNAME=null
-MAIL_PASSWORD=null
-MAIL_ENCRYPTION=null
-
-AWS_ACCESS_KEY_ID=
-AWS_SECRET_ACCESS_KEY=
-AWS_DEFAULT_REGION=us-east-1
-AWS_BUCKET=
-
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
-PUSHER_APP_CLUSTER=mt1
-
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

b_beauty/.gitattributes

-* text=auto
-*.css linguist-vendored
-*.scss linguist-vendored
-*.js linguist-vendored
-CHANGELOG.md export-ignore

b_beauty/.gitignore

-/node_modules
-/public/hot
-/public/storage
-/storage/*.key
-/vendor
-.env
-.env.backup
-.phpunit.result.cache
-Homestead.json
-Homestead.yaml
-npm-debug.log
-yarn-error.log

b_beauty/.styleci.yml

-php:
-  preset: laravel
-  disabled:
-    - unused_use
-  finder:
-    not-name:
-      - index.php
-      - server.php
-js:
-  finder:
-    not-name:
-      - webpack.mix.js
-css: true

b_beauty/app/Console/Kernel.php

-<?php
-
-namespace App\Console;
-
-use Illuminate\Console\Scheduling\Schedule;
-use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
-
-class Kernel extends ConsoleKernel
-{
-    /**
-     * The Artisan commands provided by your application.
-     *
-     * @var array
-     */
-    protected $commands = [
-        //
-    ];
-
-    /**
-     * Define the application's command schedule.
-     *
-     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
-     * @return void
-     */
-    protected function schedule(Schedule $schedule)
-    {
-        // $schedule->command('inspire')
-        //          ->hourly();
-    }
-
-    /**
-     * Register the commands for the application.
-     *
-     * @return void
-     */
-    protected function commands()
-    {
-        $this->load(__DIR__.'/Commands');
-
-        require base_path('routes/console.php');
-    }
-}

b_beauty/app/Exceptions/Handler.php

-<?php
-
-namespace App\Exceptions;
-
-use Exception;
-use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
-
-class Handler extends ExceptionHandler
-{
-    /**
-     * A list of the exception types that are not reported.
-     *
-     * @var array
-     */
-    protected $dontReport = [
-        //
-    ];
-
-    /**
-     * A list of the inputs that are never flashed for validation exceptions.
-     *
-     * @var array
-     */
-    protected $dontFlash = [
-        'password',
-        'password_confirmation',
-    ];
-
-    /**
-     * Report or log an exception.
-     *
-     * @param  \Exception  $exception
-     * @return void
-     */
-    public function report(Exception $exception)
-    {
-        parent::report($exception);
-    }
-
-    /**
-     * Render an exception into an HTTP response.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \Exception  $exception
-     * @return \Illuminate\Http\Response
-     */
-    public function render($request, Exception $exception)
-    {
-        return parent::render($request, $exception);
-    }
-}

b_beauty/app/Http/Controllers/Auth/ForgotPasswordController.php

-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
-
-class ForgotPasswordController extends Controller
-{
-    /*
-    |--------------------------------------------------------------------------
-    | Password Reset Controller
-    |--------------------------------------------------------------------------
-    |
-    | This controller is responsible for handling password reset emails and
-    | includes a trait which assists in sending these notifications from
-    | your application to your users. Feel free to explore this trait.
-    |
-    */
-
-    use SendsPasswordResetEmails;
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest');
-    }
-}

b_beauty/app/Http/Controllers/Auth/LoginController.php

-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Foundation\Auth\AuthenticatesUsers;
-
-class LoginController extends Controller
-{
-    /*
-    |--------------------------------------------------------------------------
-    | Login Controller
-    |--------------------------------------------------------------------------
-    |
-    | This controller handles authenticating users for the application and
-    | redirecting them to your home screen. The controller uses a trait
-    | to conveniently provide its functionality to your applications.
-    |
-    */
-
-    use AuthenticatesUsers;
-
-    /**
-     * Where to redirect users after login.
-     *
-     * @var string
-     */
-    protected $redirectTo = '/home';
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest')->except('logout');
-    }
-}

b_beauty/app/Http/Controllers/Auth/RegisterController.php

-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\User;
-use App\Http\Controllers\Controller;
-use Illuminate\Support\Facades\Hash;
-use Illuminate\Support\Facades\Validator;
-use Illuminate\Foundation\Auth\RegistersUsers;
-
-class RegisterController extends Controller
-{
-    /*
-    |--------------------------------------------------------------------------
-    | Register Controller
-    |--------------------------------------------------------------------------
-    |
-    | This controller handles the registration of new users as well as their
-    | validation and creation. By default this controller uses a trait to
-    | provide this functionality without requiring any additional code.
-    |
-    */
-
-    use RegistersUsers;
-
-    /**
-     * Where to redirect users after registration.
-     *
-     * @var string
-     */
-    protected $redirectTo = '/home';
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest');
-    }
-
-    /**
-     * Get a validator for an incoming registration request.
-     *
-     * @param  array  $data
-     * @return \Illuminate\Contracts\Validation\Validator
-     */
-    protected function validator(array $data)
-    {
-        return Validator::make($data, [
-            'name' => ['required', 'string', 'max:255'],
-            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
-            'password' => ['required', 'string', 'min:8', 'confirmed'],
-        ]);
-    }
-
-    /**
-     * Create a new user instance after a valid registration.
-     *
-     * @param  array  $data
-     * @return \App\User
-     */
-    protected function create(array $data)
-    {
-        return User::create([
-            'name' => $data['name'],
-            'email' => $data['email'],
-            'password' => Hash::make($data['password']),
-        ]);
-    }
-}

b_beauty/app/Http/Controllers/Auth/ResetPasswordController.php

-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Foundation\Auth\ResetsPasswords;
-
-class ResetPasswordController extends Controller
-{
-    /*
-    |--------------------------------------------------------------------------
-    | Password Reset Controller
-    |--------------------------------------------------------------------------
-    |
-    | This controller is responsible for handling password reset requests
-    | and uses a simple trait to include this behavior. You're free to
-    | explore this trait and override any methods you wish to tweak.
-    |
-    */
-
-    use ResetsPasswords;
-
-    /**
-     * Where to redirect users after resetting their password.
-     *
-     * @var string
-     */
-    protected $redirectTo = '/home';
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest');
-    }
-}

b_beauty/app/Http/Controllers/Auth/VerificationController.php

-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Foundation\Auth\VerifiesEmails;
-
-class VerificationController extends Controller
-{
-    /*
-    |--------------------------------------------------------------------------
-    | Email Verification Controller
-    |--------------------------------------------------------------------------
-    |
-    | This controller is responsible for handling email verification for any
-    | user that recently registered with the application. Emails may also
-    | be re-sent if the user didn't receive the original email message.
-    |
-    */
-
-    use VerifiesEmails;
-
-    /**
-     * Where to redirect users after verification.
-     *
-     * @var string
-     */
-    protected $redirectTo = '/home';
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('auth');
-        $this->middleware('signed')->only('verify');
-        $this->middleware('throttle:6,1')->only('verify', 'resend');
-    }
-}

b_beauty/app/Http/Controllers/Controller.php

-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Foundation\Bus\DispatchesJobs;
-use Illuminate\Routing\Controller as BaseController;
-use Illuminate\Foundation\Validation\ValidatesRequests;
-use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
-
-class Controller extends BaseController
-{
-    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
-}

b_beauty/app/Http/Controllers/HomeController.php

-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-
-class HomeController extends Controller
-{
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('auth');
-    }
-
-    /**
-     * Show the application dashboard.
-     *
-     * @return \Illuminate\Contracts\Support\Renderable
-     */
-    public function index()
-    {
-        return view('home');
-    }
-}

b_beauty/app/Http/Kernel.php

-<?php
-
-namespace App\Http;
-
-use Illuminate\Foundation\Http\Kernel as HttpKernel;
-
-class Kernel extends HttpKernel
-{
-    /**
-     * The application's global HTTP middleware stack.
-     *
-     * These middleware are run during every request to your application.
-     *
-     * @var array
-     */
-    protected $middleware = [
-        \App\Http\Middleware\TrustProxies::class,
-        \App\Http\Middleware\CheckForMaintenanceMode::class,
-        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
-        \App\Http\Middleware\TrimStrings::class,
-        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
-    ];
-
-    /**
-     * The application's route middleware groups.
-     *
-     * @var array
-     */
-    protected $middlewareGroups = [
-        'web' => [
-            \App\Http\Middleware\EncryptCookies::class,
-            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
-            \Illuminate\Session\Middleware\StartSession::class,
-            // \Illuminate\Session\Middleware\AuthenticateSession::class,
-            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
-            \App\Http\Middleware\VerifyCsrfToken::class,
-            \Illuminate\Routing\Middleware\SubstituteBindings::class,
-        ],
-
-        'api' => [
-            'throttle:60,1',
-            'bindings',
-        ],
-    ];
-
-    /**
-     * The application's route middleware.
-     *
-     * These middleware may be assigned to groups or used individually.
-     *
-     * @var array
-     */
-    protected $routeMiddleware = [
-        'auth' => \App\Http\Middleware\Authenticate::class,
-        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
-        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
-        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
-        'can' => \Illuminate\Auth\Middleware\Authorize::class,
-        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
-        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
-        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
-        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
-    ];
-
-    /**
-     * The priority-sorted list of middleware.
-     *
-     * This forces non-global middleware to always be in the given order.
-     *
-     * @var array
-     */
-    protected $middlewarePriority = [
-        \Illuminate\Session\Middleware\StartSession::class,
-        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
-        \App\Http\Middleware\Authenticate::class,
-        \Illuminate\Session\Middleware\AuthenticateSession::class,
-        \Illuminate\Routing\Middleware\SubstituteBindings::class,
-        \Illuminate\Auth\Middleware\Authorize::class,
-    ];
-}

b_beauty/app/Http/Middleware/Authenticate.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Auth\Middleware\Authenticate as Middleware;
-
-class Authenticate extends Middleware
-{
-    /**
-     * Get the path the user should be redirected to when they are not authenticated.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return string
-     */
-    protected function redirectTo($request)
-    {
-        if (! $request->expectsJson()) {
-            return route('login');
-        }
-    }
-}

b_beauty/app/Http/Middleware/CheckForMaintenanceMode.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode as Middleware;
-
-class CheckForMaintenanceMode extends Middleware
-{
-    /**
-     * The URIs that should be reachable while maintenance mode is enabled.
-     *
-     * @var array
-     */
-    protected $except = [
-        //
-    ];
-}

b_beauty/app/Http/Middleware/EncryptCookies.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
-
-class EncryptCookies extends Middleware
-{
-    /**
-     * The names of the cookies that should not be encrypted.
-     *
-     * @var array
-     */
-    protected $except = [
-        //
-    ];
-}

b_beauty/app/Http/Middleware/RedirectIfAuthenticated.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Closure;
-use Illuminate\Support\Facades\Auth;
-
-class RedirectIfAuthenticated
-{
-    /**
-     * Handle an incoming request.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \Closure  $next
-     * @param  string|null  $guard
-     * @return mixed
-     */
-    public function handle($request, Closure $next, $guard = null)
-    {
-        if (Auth::guard($guard)->check()) {
-            return redirect('/home');
-        }
-
-        return $next($request);
-    }
-}

b_beauty/app/Http/Middleware/TrimStrings.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Foundation\Http\Middleware\TrimStrings as Middleware;
-
-class TrimStrings extends Middleware
-{
-    /**
-     * The names of the attributes that should not be trimmed.
-     *
-     * @var array
-     */
-    protected $except = [
-        'password',
-        'password_confirmation',
-    ];
-}

b_beauty/app/Http/Middleware/TrustProxies.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Http\Request;
-use Fideloper\Proxy\TrustProxies as Middleware;
-
-class TrustProxies extends Middleware
-{
-    /**
-     * The trusted proxies for this application.
-     *
-     * @var array|string
-     */
-    protected $proxies;
-
-    /**
-     * The headers that should be used to detect proxies.
-     *
-     * @var int
-     */
-    protected $headers = Request::HEADER_X_FORWARDED_ALL;
-}

b_beauty/app/Http/Middleware/VerifyCsrfToken.php

-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
-
-class VerifyCsrfToken extends Middleware
-{
-    /**
-     * Indicates whether the XSRF-TOKEN cookie should be set on the response.
-     *
-     * @var bool
-     */
-    protected $addHttpCookie = true;
-
-    /**
-     * The URIs that should be excluded from CSRF verification.
-     *
-     * @var array
-     */
-    protected $except = [
-        //
-    ];
-}

b_beauty/app/Providers/AppServiceProvider.php

-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\ServiceProvider;
-
-class AppServiceProvider extends ServiceProvider
-{
-    /**
-     * Register any application services.
-     *
-     * @return void
-     */
-    public function register()
-    {
-        //
-    }
-
-    /**
-     * Bootstrap any application services.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        //
-    }
-}

b_beauty/app/Providers/AuthServiceProvider.php

-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\Facades\Gate;
-use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
-
-class AuthServiceProvider extends ServiceProvider
-{
-    /**
-     * The policy mappings for the application.
-     *
-     * @var array
-     */
-    protected $policies = [
-        // 'App\Model' => 'App\Policies\ModelPolicy',
-    ];
-
-    /**
-     * Register any authentication / authorization services.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        $this->registerPolicies();
-
-        //
-    }
-}

b_beauty/app/Providers/BroadcastServiceProvider.php

-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\ServiceProvider;
-use Illuminate\Support\Facades\Broadcast;
-
-class BroadcastServiceProvider extends ServiceProvider
-{
-    /**
-     * Bootstrap any application services.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        Broadcast::routes();
-
-        require base_path('routes/channels.php');
-    }
-}

b_beauty/app/Providers/EventServiceProvider.php

-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\Facades\Event;
-use Illuminate\Auth\Events\Registered;
-use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
-use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
-
-class EventServiceProvider extends ServiceProvider
-{
-    /**
-     * The event listener mappings for the application.
-     *
-     * @var array
-     */
-    protected $listen = [
-        Registered::class => [
-            SendEmailVerificationNotification::class,
-        ],
-    ];
-
-    /**
-     * Register any events for your application.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        parent::boot();
-
-        //
-    }
-}

b_beauty/app/Providers/RouteServiceProvider.php

-<?php
-
-namespace App\Providers;
-
-use Illuminate\Support\Facades\Route;
-use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
-
-class RouteServiceProvider extends ServiceProvider
-{
-    /**
-     * This namespace is applied to your controller routes.
-     *
-     * In addition, it is set as the URL generator's root namespace.
-     *
-     * @var string
-     */
-    protected $namespace = 'App\Http\Controllers';
-
-    /**
-     * Define your route model bindings, pattern filters, etc.
-     *
-     * @return void
-     */
-    public function boot()
-    {
-        //
-
-        parent::boot();
-    }
-
-    /**
-     * Define the routes for the application.
-     *
-     * @return void
-     */
-    public function map()
-    {
-        $this->mapApiRoutes();
-
-        $this->mapWebRoutes();
-
-        //
-    }
-
-    /**
-     * Define the "web" routes for the application.
-     *
-     * These routes all receive session state, CSRF protection, etc.
-     *
-     * @return void
-     */
-    protected function mapWebRoutes()
-    {
-        Route::middleware('web')
-             ->namespace($this->namespace)
-             ->group(base_path('routes/web.php'));
-    }
-
-    /**
-     * Define the "api" routes for the application.
-     *
-     * These routes are typically stateless.
-     *
-     * @return void
-     */
-    protected function mapApiRoutes()
-    {
-        Route::prefix('api')
-             ->middleware('api')
-             ->namespace($this->namespace)
-             ->group(base_path('routes/api.php'));
-    }
-}

b_beauty/app/User.php

-<?php
-
-namespace App;
-
-use Illuminate\Notifications\Notifiable;
-use Illuminate\Contracts\Auth\MustVerifyEmail;
-use Illuminate\Foundation\Auth\User as Authenticatable;
-
-class User extends Authenticatable
-{
-    use Notifiable;
-
-    /**
-     * The attributes that are mass assignable.
-     *
-     * @var array
-     */
-    protected $fillable = [
-        'name', 'email', 'password',
-    ];
-
-    /**
-     * The attributes that should be hidden for arrays.
-     *
-     * @var array
-     */
-    protected $hidden = [
-        'password', 'remember_token',
-    ];
-
-    /**
-     * The attributes that should be cast to native types.
-     *
-     * @var array
-     */
-    protected $casts = [
-        'email_verified_at' => 'datetime',
-    ];
-}

b_beauty/artisan

-#!/usr/bin/env php
-<?php
-
-define('LARAVEL_START', microtime(true));
-
-/*
-|--------------------------------------------------------------------------
-| Register The Auto Loader
-|--------------------------------------------------------------------------
-|
-| Composer provides a convenient, automatically generated class loader
-| for our application. We just need to utilize it! We'll require it
-| into the script here so that we do not have to worry about the
-| loading of any our classes "manually". Feels great to relax.
-|
-*/
-
-require __DIR__.'/vendor/autoload.php';
-
-$app = require_once __DIR__.'/bootstrap/app.php';
-
-/*
-|--------------------------------------------------------------------------
-| Run The Artisan Application
-|--------------------------------------------------------------------------
-|
-| When we run the console application, the current CLI command will be
-| executed in this console and the response sent back to a terminal
-| or another output device for the developers. Here goes nothing!
-|
-*/
-
-$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
-
-$status = $kernel->handle(
-    $input = new Symfony\Component\Console\Input\ArgvInput,
-    new Symfony\Component\Console\Output\ConsoleOutput
-);
-
-/*
-|--------------------------------------------------------------------------
-| Shutdown The Application
-|--------------------------------------------------------------------------
-|
-| Once Artisan has finished running, we will fire off the shutdown events
-| so that any final work may be done by the application before we shut
-| down the process. This is the last thing to happen to the request.
-|
-*/
-
-$kernel->terminate($input, $status);
-
-exit($status);

b_beauty/bootstrap/app.php

-<?php
-
-/*
-|--------------------------------------------------------------------------
-| Create The Application
-|--------------------------------------------------------------------------
-|
-| The first thing we will do is create a new Laravel application instance
-| which serves as the "glue" for all the components of Laravel, and is
-| the IoC container for the system binding all of the various parts.
-|
-*/
-
-$app = new Illuminate\Foundation\Application(
-    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
-);
-
-/*
-|--------------------------------------------------------------------------
-| Bind Important Interfaces
-|--------------------------------------------------------------------------
-|
-| Next, we need to bind some important interfaces into the container so
-| we will be able to resolve them when needed. The kernels serve the
-| incoming requests to this application from both the web and CLI.
-|
-*/
-
-$app->singleton(
-    Illuminate\Contracts\Http\Kernel::class,
-    App\Http\Kernel::class
-);
-
-$app->singleton(
-    Illuminate\Contracts\Console\Kernel::class,
-    App\Console\Kernel::class
-);
-
-$app->singleton(
-    Illuminate\Contracts\Debug\ExceptionHandler::class,
-    App\Exceptions\Handler::class
-);
-
-/*
-|--------------------------------------------------------------------------
-| Return The Application
-|--------------------------------------------------------------------------
-|
-| This script returns the application instance. The instance is given to
-| the calling script so we can separate the building of the instances
-| from the actual running of the application and sending responses.
-|
-*/
-
-return $app;

b_beauty/bootstrap/cache/.gitignore

-*
-!.gitignore

b_beauty/composer.json

-{
-    "name": "laravel/laravel",
-    "type": "project",
-    "description": "The Laravel Framework.",
-    "keywords": [
-        "framework",
-        "laravel"
-    ],
-    "license": "MIT",
-    "require": {
-        "php": "^7.1.3",
-        "fideloper/proxy": "^4.0",
-        "laravel/framework": "5.8.*",
-        "laravel/tinker": "^1.0"
-    },
-    "require-dev": {
-        "beyondcode/laravel-dump-server": "^1.0",
-        "filp/whoops": "^2.0",
-        "fzaninotto/faker": "^1.4",
-        "laravel/ui": "^1.1",
-        "mockery/mockery": "^1.0",
-        "nunomaduro/collision": "^3.0",
-        "phpunit/phpunit": "^7.5"
-    },
-    "config": {
-        "optimize-autoloader": true,
-        "preferred-install": "dist",
-        "sort-packages": true
-    },
-    "extra": {
-        "laravel": {
-            "dont-discover": []
-        }
-    },
-    "autoload": {
-        "psr-4": {
-            "App\\": "app/"
-        },
-        "classmap": [
-            "database/seeds",
-            "database/factories"
-        ]
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "Tests\\": "tests/"
-        }
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true,
-    "scripts": {
-        "post-autoload-dump": [
-            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
-            "@php artisan package:discover --ansi"
-        ],
-        "post-root-package-install": [
-            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
-        ],
-        "post-create-project-cmd": [
-            "@php artisan key:generate --ansi"
-        ]
-    }
-}

b_beauty/config/app.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Name
-    |--------------------------------------------------------------------------
-    |
-    | This value is the name of your application. This value is used when the
-    | framework needs to place the application's name in a notification or
-    | any other location as required by the application or its packages.
-    |
-    */
-
-    'name' => env('APP_NAME', 'B Beauty'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Environment
-    |--------------------------------------------------------------------------
-    |
-    | This value determines the "environment" your application is currently
-    | running in. This may determine how you prefer to configure various
-    | services the application utilizes. Set this in your ".env" file.
-    |
-    */
-
-    'env' => env('APP_ENV', 'production'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Debug Mode
-    |--------------------------------------------------------------------------
-    |
-    | When your application is in debug mode, detailed error messages with
-    | stack traces will be shown on every error that occurs within your
-    | application. If disabled, a simple generic error page is shown.
-    |
-    */
-
-    'debug' => env('APP_DEBUG', false),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application URL
-    |--------------------------------------------------------------------------
-    |
-    | This URL is used by the console to properly generate URLs when using
-    | the Artisan command line tool. You should set this to the root of
-    | your application so that it is used when running Artisan tasks.
-    |
-    */
-
-    'url' => env('APP_URL', 'http://localhost'),
-
-    'asset_url' => env('ASSET_URL', null),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Timezone
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the default timezone for your application, which
-    | will be used by the PHP date and date-time functions. We have gone
-    | ahead and set this to a sensible default for you out of the box.
-    |
-    */
-
-    'timezone' => 'UTC',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Locale Configuration
-    |--------------------------------------------------------------------------
-    |
-    | The application locale determines the default locale that will be used
-    | by the translation service provider. You are free to set this value
-    | to any of the locales which will be supported by the application.
-    |
-    */
-
-    'locale' => 'en',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Application Fallback Locale
-    |--------------------------------------------------------------------------
-    |
-    | The fallback locale determines the locale to use when the current one
-    | is not available. You may change the value to correspond to any of
-    | the language folders that are provided through your application.
-    |
-    */
-
-    'fallback_locale' => 'en',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Faker Locale
-    |--------------------------------------------------------------------------
-    |
-    | This locale will be used by the Faker PHP library when generating fake
-    | data for your database seeds. For example, this will be used to get
-    | localized telephone numbers, street address information and more.
-    |
-    */
-
-    'faker_locale' => 'en_US',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Encryption Key
-    |--------------------------------------------------------------------------
-    |
-    | This key is used by the Illuminate encrypter service and should be set
-    | to a random, 32 character string, otherwise these encrypted strings
-    | will not be safe. Please do this before deploying an application!
-    |
-    */
-
-    'key' => env('APP_KEY'),
-
-    'cipher' => 'AES-256-CBC',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Autoloaded Service Providers
-    |--------------------------------------------------------------------------
-    |
-    | The service providers listed here will be automatically loaded on the
-    | request to your application. Feel free to add your own services to
-    | this array to grant expanded functionality to your applications.
-    |
-    */
-
-    'providers' => [
-
-        /*
-         * Laravel Framework Service Providers...
-         */
-        Illuminate\Auth\AuthServiceProvider::class,
-        Illuminate\Broadcasting\BroadcastServiceProvider::class,
-        Illuminate\Bus\BusServiceProvider::class,
-        Illuminate\Cache\CacheServiceProvider::class,
-        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
-        Illuminate\Cookie\CookieServiceProvider::class,
-        Illuminate\Database\DatabaseServiceProvider::class,
-        Illuminate\Encryption\EncryptionServiceProvider::class,
-        Illuminate\Filesystem\FilesystemServiceProvider::class,
-        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
-        Illuminate\Hashing\HashServiceProvider::class,
-        Illuminate\Mail\MailServiceProvider::class,
-        Illuminate\Notifications\NotificationServiceProvider::class,
-        Illuminate\Pagination\PaginationServiceProvider::class,
-        Illuminate\Pipeline\PipelineServiceProvider::class,
-        Illuminate\Queue\QueueServiceProvider::class,
-        Illuminate\Redis\RedisServiceProvider::class,
-        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
-        Illuminate\Session\SessionServiceProvider::class,
-        Illuminate\Translation\TranslationServiceProvider::class,
-        Illuminate\Validation\ValidationServiceProvider::class,
-        Illuminate\View\ViewServiceProvider::class,
-
-        /*
-         * Package Service Providers...
-         */
-
-        /*
-         * Application Service Providers...
-         */
-        App\Providers\AppServiceProvider::class,
-        App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
-        App\Providers\EventServiceProvider::class,
-        App\Providers\RouteServiceProvider::class,
-
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Class Aliases
-    |--------------------------------------------------------------------------
-    |
-    | This array of class aliases will be registered when this application
-    | is started. However, feel free to register as many as you wish as
-    | the aliases are "lazy" loaded so they don't hinder performance.
-    |
-    */
-
-    'aliases' => [
-
-        'App' => Illuminate\Support\Facades\App::class,
-        'Arr' => Illuminate\Support\Arr::class,
-        'Artisan' => Illuminate\Support\Facades\Artisan::class,
-        'Auth' => Illuminate\Support\Facades\Auth::class,
-        'Blade' => Illuminate\Support\Facades\Blade::class,
-        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
-        'Bus' => Illuminate\Support\Facades\Bus::class,
-        'Cache' => Illuminate\Support\Facades\Cache::class,
-        'Config' => Illuminate\Support\Facades\Config::class,
-        'Cookie' => Illuminate\Support\Facades\Cookie::class,
-        'Crypt' => Illuminate\Support\Facades\Crypt::class,
-        'DB' => Illuminate\Support\Facades\DB::class,
-        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
-        'Event' => Illuminate\Support\Facades\Event::class,
-        'File' => Illuminate\Support\Facades\File::class,
-        'Gate' => Illuminate\Support\Facades\Gate::class,
-        'Hash' => Illuminate\Support\Facades\Hash::class,
-        'Lang' => Illuminate\Support\Facades\Lang::class,
-        'Log' => Illuminate\Support\Facades\Log::class,
-        'Mail' => Illuminate\Support\Facades\Mail::class,
-        'Notification' => Illuminate\Support\Facades\Notification::class,
-        'Password' => Illuminate\Support\Facades\Password::class,
-        'Queue' => Illuminate\Support\Facades\Queue::class,
-        'Redirect' => Illuminate\Support\Facades\Redirect::class,
-        'Redis' => Illuminate\Support\Facades\Redis::class,
-        'Request' => Illuminate\Support\Facades\Request::class,
-        'Response' => Illuminate\Support\Facades\Response::class,
-        'Route' => Illuminate\Support\Facades\Route::class,
-        'Schema' => Illuminate\Support\Facades\Schema::class,
-        'Session' => Illuminate\Support\Facades\Session::class,
-        'Storage' => Illuminate\Support\Facades\Storage::class,
-        'Str' => Illuminate\Support\Str::class,
-        'URL' => Illuminate\Support\Facades\URL::class,
-        'Validator' => Illuminate\Support\Facades\Validator::class,
-        'View' => Illuminate\Support\Facades\View::class,
-
-    ],
-
-];

b_beauty/config/auth.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Authentication Defaults
-    |--------------------------------------------------------------------------
-    |
-    | This option controls the default authentication "guard" and password
-    | reset options for your application. You may change these defaults
-    | as required, but they're a perfect start for most applications.
-    |
-    */
-
-    'defaults' => [
-        'guard' => 'web',
-        'passwords' => 'users',
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Authentication Guards
-    |--------------------------------------------------------------------------
-    |
-    | Next, you may define every authentication guard for your application.
-    | Of course, a great default configuration has been defined for you
-    | here which uses session storage and the Eloquent user provider.
-    |
-    | All authentication drivers have a user provider. This defines how the
-    | users are actually retrieved out of your database or other storage
-    | mechanisms used by this application to persist your user's data.
-    |
-    | Supported: "session", "token"
-    |
-    */
-
-    'guards' => [
-        'web' => [
-            'driver' => 'session',
-            'provider' => 'users',
-        ],
-
-        'api' => [
-            'driver' => 'token',
-            'provider' => 'users',
-            'hash' => false,
-        ],
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | User Providers
-    |--------------------------------------------------------------------------
-    |
-    | All authentication drivers have a user provider. This defines how the
-    | users are actually retrieved out of your database or other storage
-    | mechanisms used by this application to persist your user's data.
-    |
-    | If you have multiple user tables or models you may configure multiple
-    | sources which represent each model / table. These sources may then
-    | be assigned to any extra authentication guards you have defined.
-    |
-    | Supported: "database", "eloquent"
-    |
-    */
-
-    'providers' => [
-        'users' => [
-            'driver' => 'eloquent',
-            'model' => App\User::class,
-        ],
-
-        // 'users' => [
-        //     'driver' => 'database',
-        //     'table' => 'users',
-        // ],
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Resetting Passwords
-    |--------------------------------------------------------------------------
-    |
-    | You may specify multiple password reset configurations if you have more
-    | than one user table or model in the application and you want to have
-    | separate password reset settings based on the specific user types.
-    |
-    | The expire time is the number of minutes that the reset token should be
-    | considered valid. This security feature keeps tokens short-lived so
-    | they have less time to be guessed. You may change this as needed.
-    |
-    */
-
-    'passwords' => [
-        'users' => [
-            'provider' => 'users',
-            'table' => 'password_resets',
-            'expire' => 60,
-        ],
-    ],
-
-];

b_beauty/config/broadcasting.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Broadcaster
-    |--------------------------------------------------------------------------
-    |
-    | This option controls the default broadcaster that will be used by the
-    | framework when an event needs to be broadcast. You may set this to
-    | any of the connections defined in the "connections" array below.
-    |
-    | Supported: "pusher", "redis", "log", "null"
-    |
-    */
-
-    'default' => env('BROADCAST_DRIVER', 'null'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Broadcast Connections
-    |--------------------------------------------------------------------------
-    |
-    | Here you may define all of the broadcast connections that will be used
-    | to broadcast events to other systems or over websockets. Samples of
-    | each available type of connection are provided inside this array.
-    |
-    */
-
-    'connections' => [
-
-        'pusher' => [
-            'driver' => 'pusher',
-            'key' => env('PUSHER_APP_KEY'),
-            'secret' => env('PUSHER_APP_SECRET'),
-            'app_id' => env('PUSHER_APP_ID'),
-            'options' => [
-                'cluster' => env('PUSHER_APP_CLUSTER'),
-                'useTLS' => true,
-            ],
-        ],
-
-        'redis' => [
-            'driver' => 'redis',
-            'connection' => 'default',
-        ],
-
-        'log' => [
-            'driver' => 'log',
-        ],
-
-        'null' => [
-            'driver' => 'null',
-        ],
-
-    ],
-
-];

b_beauty/config/cache.php

-<?php
-
-use Illuminate\Support\Str;
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Cache Store
-    |--------------------------------------------------------------------------
-    |
-    | This option controls the default cache connection that gets used while
-    | using this caching library. This connection is used when another is
-    | not explicitly specified when executing a given caching function.
-    |
-    | Supported: "apc", "array", "database", "file",
-    |            "memcached", "redis", "dynamodb"
-    |
-    */
-
-    'default' => env('CACHE_DRIVER', 'file'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Cache Stores
-    |--------------------------------------------------------------------------
-    |
-    | Here you may define all of the cache "stores" for your application as
-    | well as their drivers. You may even define multiple stores for the
-    | same cache driver to group types of items stored in your caches.
-    |
-    */
-
-    'stores' => [
-
-        'apc' => [
-            'driver' => 'apc',
-        ],
-
-        'array' => [
-            'driver' => 'array',
-        ],
-
-        'database' => [
-            'driver' => 'database',
-            'table' => 'cache',
-            'connection' => null,
-        ],
-
-        'file' => [
-            'driver' => 'file',
-            'path' => storage_path('framework/cache/data'),
-        ],
-
-        'memcached' => [
-            'driver' => 'memcached',
-            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
-            'sasl' => [
-                env('MEMCACHED_USERNAME'),
-                env('MEMCACHED_PASSWORD'),
-            ],
-            'options' => [
-                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
-            ],
-            'servers' => [
-                [
-                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
-                    'port' => env('MEMCACHED_PORT', 11211),
-                    'weight' => 100,
-                ],
-            ],
-        ],
-
-        'redis' => [
-            'driver' => 'redis',
-            'connection' => 'cache',
-        ],
-
-        'dynamodb' => [
-            'driver' => 'dynamodb',
-            'key' => env('AWS_ACCESS_KEY_ID'),
-            'secret' => env('AWS_SECRET_ACCESS_KEY'),
-            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
-            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
-            'endpoint' => env('DYNAMODB_ENDPOINT'),
-        ],
-
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Cache Key Prefix
-    |--------------------------------------------------------------------------
-    |
-    | When utilizing a RAM based store such as APC or Memcached, there might
-    | be other applications utilizing the same cache. So, we'll specify a
-    | value to get prefixed to all our keys so we can avoid collisions.
-    |
-    */
-
-    'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache'),
-
-];

b_beauty/config/database.php

-<?php
-
-use Illuminate\Support\Str;
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Database Connection Name
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify which of the database connections below you wish
-    | to use as your default connection for all database work. Of course
-    | you may use many connections at once using the Database library.
-    |
-    */
-
-    'default' => env('DB_CONNECTION', 'mysql'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Database Connections
-    |--------------------------------------------------------------------------
-    |
-    | Here are each of the database connections setup for your application.
-    | Of course, examples of configuring each database platform that is
-    | supported by Laravel is shown below to make development simple.
-    |
-    |
-    | All database work in Laravel is done through the PHP PDO facilities
-    | so make sure you have the driver for your particular database of
-    | choice installed on your machine before you begin development.
-    |
-    */
-
-    'connections' => [
-
-        'sqlite' => [
-            'driver' => 'sqlite',
-            'url' => env('DATABASE_URL'),
-            'database' => env('DB_DATABASE', database_path('database.sqlite')),
-            'prefix' => '',
-            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
-        ],
-
-        'mysql' => [
-            'driver' => 'mysql',
-            'url' => env('DATABASE_URL'),
-            'host' => env('DB_HOST', '127.0.0.1'),
-            'port' => env('DB_PORT', '3306'),
-            'database' => env('DB_DATABASE', 'forge'),
-            'username' => env('DB_USERNAME', 'forge'),
-            'password' => env('DB_PASSWORD', ''),
-            'unix_socket' => env('DB_SOCKET', ''),
-            'charset' => 'utf8mb4',
-            'collation' => 'utf8mb4_unicode_ci',
-            'prefix' => '',
-            'prefix_indexes' => true,
-            'strict' => true,
-            'engine' => null,
-            'options' => extension_loaded('pdo_mysql') ? array_filter([
-                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
-            ]) : [],
-        ],
-
-        'pgsql' => [
-            'driver' => 'pgsql',
-            'url' => env('DATABASE_URL'),
-            'host' => env('DB_HOST', '127.0.0.1'),
-            'port' => env('DB_PORT', '5432'),
-            'database' => env('DB_DATABASE', 'forge'),
-            'username' => env('DB_USERNAME', 'forge'),
-            'password' => env('DB_PASSWORD', ''),
-            'charset' => 'utf8',
-            'prefix' => '',
-            'prefix_indexes' => true,
-            'schema' => 'public',
-            'sslmode' => 'prefer',
-        ],
-
-        'sqlsrv' => [
-            'driver' => 'sqlsrv',
-            'url' => env('DATABASE_URL'),
-            'host' => env('DB_HOST', 'localhost'),
-            'port' => env('DB_PORT', '1433'),
-            'database' => env('DB_DATABASE', 'forge'),
-            'username' => env('DB_USERNAME', 'forge'),
-            'password' => env('DB_PASSWORD', ''),
-            'charset' => 'utf8',
-            'prefix' => '',
-            'prefix_indexes' => true,
-        ],
-
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Migration Repository Table
-    |--------------------------------------------------------------------------
-    |
-    | This table keeps track of all the migrations that have already run for
-    | your application. Using this information, we can determine which of
-    | the migrations on disk haven't actually been run in the database.
-    |
-    */
-
-    'migrations' => 'migrations',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Redis Databases
-    |--------------------------------------------------------------------------
-    |
-    | Redis is an open source, fast, and advanced key-value store that also
-    | provides a richer body of commands than a typical key-value system
-    | such as APC or Memcached. Laravel makes it easy to dig right in.
-    |
-    */
-
-    'redis' => [
-
-        'client' => env('REDIS_CLIENT', 'predis'),
-
-        'options' => [
-            'cluster' => env('REDIS_CLUSTER', 'predis'),
-            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
-        ],
-
-        'default' => [
-            'url' => env('REDIS_URL'),
-            'host' => env('REDIS_HOST', '127.0.0.1'),
-            'password' => env('REDIS_PASSWORD', null),
-            'port' => env('REDIS_PORT', 6379),
-            'database' => env('REDIS_DB', 0),
-        ],
-
-        'cache' => [
-            'url' => env('REDIS_URL'),
-            'host' => env('REDIS_HOST', '127.0.0.1'),
-            'password' => env('REDIS_PASSWORD', null),
-            'port' => env('REDIS_PORT', 6379),
-            'database' => env('REDIS_CACHE_DB', 1),
-        ],
-
-    ],
-
-];

b_beauty/config/filesystems.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Filesystem Disk
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the default filesystem disk that should be used
-    | by the framework. The "local" disk, as well as a variety of cloud
-    | based disks are available to your application. Just store away!
-    |
-    */
-
-    'default' => env('FILESYSTEM_DRIVER', 'local'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Cloud Filesystem Disk
-    |--------------------------------------------------------------------------
-    |
-    | Many applications store files both locally and in the cloud. For this
-    | reason, you may specify a default "cloud" driver here. This driver
-    | will be bound as the Cloud disk implementation in the container.
-    |
-    */
-
-    'cloud' => env('FILESYSTEM_CLOUD', 's3'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Filesystem Disks
-    |--------------------------------------------------------------------------
-    |
-    | Here you may configure as many filesystem "disks" as you wish, and you
-    | may even configure multiple disks of the same driver. Defaults have
-    | been setup for each driver as an example of the required options.
-    |
-    | Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace"
-    |
-    */
-
-    'disks' => [
-
-        'local' => [
-            'driver' => 'local',
-            'root' => storage_path('app'),
-        ],
-
-        'public' => [
-            'driver' => 'local',
-            'root' => storage_path('app/public'),
-            'url' => env('APP_URL').'/storage',
-            'visibility' => 'public',
-        ],
-
-        's3' => [
-            'driver' => 's3',
-            'key' => env('AWS_ACCESS_KEY_ID'),
-            'secret' => env('AWS_SECRET_ACCESS_KEY'),
-            'region' => env('AWS_DEFAULT_REGION'),
-            'bucket' => env('AWS_BUCKET'),
-            'url' => env('AWS_URL'),
-        ],
-
-    ],
-
-];

b_beauty/config/hashing.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Hash Driver
-    |--------------------------------------------------------------------------
-    |
-    | This option controls the default hash driver that will be used to hash
-    | passwords for your application. By default, the bcrypt algorithm is
-    | used; however, you remain free to modify this option if you wish.
-    |
-    | Supported: "bcrypt", "argon", "argon2id"
-    |
-    */
-
-    'driver' => 'bcrypt',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Bcrypt Options
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the configuration options that should be used when
-    | passwords are hashed using the Bcrypt algorithm. This will allow you
-    | to control the amount of time it takes to hash the given password.
-    |
-    */
-
-    'bcrypt' => [
-        'rounds' => env('BCRYPT_ROUNDS', 10),
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Argon Options
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the configuration options that should be used when
-    | passwords are hashed using the Argon algorithm. These will allow you
-    | to control the amount of time it takes to hash the given password.
-    |
-    */
-
-    'argon' => [
-        'memory' => 1024,
-        'threads' => 2,
-        'time' => 2,
-    ],
-
-];

b_beauty/config/logging.php

-<?php
-
-use Monolog\Handler\StreamHandler;
-use Monolog\Handler\SyslogUdpHandler;
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Log Channel
-    |--------------------------------------------------------------------------
-    |
-    | This option defines the default log channel that gets used when writing
-    | messages to the logs. The name specified in this option should match
-    | one of the channels defined in the "channels" configuration array.
-    |
-    */
-
-    'default' => env('LOG_CHANNEL', 'stack'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Log Channels
-    |--------------------------------------------------------------------------
-    |
-    | Here you may configure the log channels for your application. Out of
-    | the box, Laravel uses the Monolog PHP logging library. This gives
-    | you a variety of powerful log handlers / formatters to utilize.
-    |
-    | Available Drivers: "single", "daily", "slack", "syslog",
-    |                    "errorlog", "monolog",
-    |                    "custom", "stack"
-    |
-    */
-
-    'channels' => [
-        'stack' => [
-            'driver' => 'stack',
-            'channels' => ['daily'],
-            'ignore_exceptions' => false,
-        ],
-
-        'single' => [
-            'driver' => 'single',
-            'path' => storage_path('logs/laravel.log'),
-            'level' => 'debug',
-        ],
-
-        'daily' => [
-            'driver' => 'daily',
-            'path' => storage_path('logs/laravel.log'),
-            'level' => 'debug',
-            'days' => 14,
-        ],
-
-        'slack' => [
-            'driver' => 'slack',
-            'url' => env('LOG_SLACK_WEBHOOK_URL'),
-            'username' => 'Laravel Log',
-            'emoji' => ':boom:',
-            'level' => 'critical',
-        ],
-
-        'papertrail' => [
-            'driver' => 'monolog',
-            'level' => 'debug',
-            'handler' => SyslogUdpHandler::class,
-            'handler_with' => [
-                'host' => env('PAPERTRAIL_URL'),
-                'port' => env('PAPERTRAIL_PORT'),
-            ],
-        ],
-
-        'stderr' => [
-            'driver' => 'monolog',
-            'handler' => StreamHandler::class,
-            'formatter' => env('LOG_STDERR_FORMATTER'),
-            'with' => [
-                'stream' => 'php://stderr',
-            ],
-        ],
-
-        'syslog' => [
-            'driver' => 'syslog',
-            'level' => 'debug',
-        ],
-
-        'errorlog' => [
-            'driver' => 'errorlog',
-            'level' => 'debug',
-        ],
-    ],
-
-];

b_beauty/config/mail.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Mail Driver
-    |--------------------------------------------------------------------------
-    |
-    | Laravel supports both SMTP and PHP's "mail" function as drivers for the
-    | sending of e-mail. You may specify which one you're using throughout
-    | your application here. By default, Laravel is setup for SMTP mail.
-    |
-    | Supported: "smtp", "sendmail", "mailgun", "mandrill", "ses",
-    |            "sparkpost", "postmark", "log", "array"
-    |
-    */
-
-    'driver' => env('MAIL_DRIVER', 'smtp'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | SMTP Host Address
-    |--------------------------------------------------------------------------
-    |
-    | Here you may provide the host address of the SMTP server used by your
-    | applications. A default option is provided that is compatible with
-    | the Mailgun mail service which will provide reliable deliveries.
-    |
-    */
-
-    'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | SMTP Host Port
-    |--------------------------------------------------------------------------
-    |
-    | This is the SMTP port used by your application to deliver e-mails to
-    | users of the application. Like the host we have set this value to
-    | stay compatible with the Mailgun e-mail application by default.
-    |
-    */
-
-    'port' => env('MAIL_PORT', 587),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Global "From" Address
-    |--------------------------------------------------------------------------
-    |
-    | You may wish for all e-mails sent by your application to be sent from
-    | the same address. Here, you may specify a name and address that is
-    | used globally for all e-mails that are sent by your application.
-    |
-    */
-
-    'from' => [
-        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
-        'name' => env('MAIL_FROM_NAME', 'Example'),
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | E-Mail Encryption Protocol
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the encryption protocol that should be used when
-    | the application send e-mail messages. A sensible default using the
-    | transport layer security protocol should provide great security.
-    |
-    */
-
-    'encryption' => env('MAIL_ENCRYPTION', 'tls'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | SMTP Server Username
-    |--------------------------------------------------------------------------
-    |
-    | If your SMTP server requires a username for authentication, you should
-    | set it here. This will get used to authenticate with your server on
-    | connection. You may also set the "password" value below this one.
-    |
-    */
-
-    'username' => env('MAIL_USERNAME'),
-
-    'password' => env('MAIL_PASSWORD'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Sendmail System Path
-    |--------------------------------------------------------------------------
-    |
-    | When using the "sendmail" driver to send e-mails, we will need to know
-    | the path to where Sendmail lives on this server. A default path has
-    | been provided here, which will work well on most of your systems.
-    |
-    */
-
-    'sendmail' => '/usr/sbin/sendmail -bs',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Markdown Mail Settings
-    |--------------------------------------------------------------------------
-    |
-    | If you are using Markdown based email rendering, you may configure your
-    | theme and component paths here, allowing you to customize the design
-    | of the emails. Or, you may simply stick with the Laravel defaults!
-    |
-    */
-
-    'markdown' => [
-        'theme' => 'default',
-
-        'paths' => [
-            resource_path('views/vendor/mail'),
-        ],
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Log Channel
-    |--------------------------------------------------------------------------
-    |
-    | If you are using the "log" driver, you may specify the logging channel
-    | if you prefer to keep mail messages separate from other log entries
-    | for simpler reading. Otherwise, the default channel will be used.
-    |
-    */
-
-    'log_channel' => env('MAIL_LOG_CHANNEL'),
-
-];

b_beauty/config/queue.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Queue Connection Name
-    |--------------------------------------------------------------------------
-    |
-    | Laravel's queue API supports an assortment of back-ends via a single
-    | API, giving you convenient access to each back-end using the same
-    | syntax for every one. Here you may define a default connection.
-    |
-    */
-
-    'default' => env('QUEUE_CONNECTION', 'sync'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Queue Connections
-    |--------------------------------------------------------------------------
-    |
-    | Here you may configure the connection information for each server that
-    | is used by your application. A default configuration has been added
-    | for each back-end shipped with Laravel. You are free to add more.
-    |
-    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
-    |
-    */
-
-    'connections' => [
-
-        'sync' => [
-            'driver' => 'sync',
-        ],
-
-        'database' => [
-            'driver' => 'database',
-            'table' => 'jobs',
-            'queue' => 'default',
-            'retry_after' => 90,
-        ],
-
-        'beanstalkd' => [
-            'driver' => 'beanstalkd',
-            'host' => 'localhost',
-            'queue' => 'default',
-            'retry_after' => 90,
-            'block_for' => 0,
-        ],
-
-        'sqs' => [
-            'driver' => 'sqs',
-            'key' => env('AWS_ACCESS_KEY_ID'),
-            'secret' => env('AWS_SECRET_ACCESS_KEY'),
-            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
-            'queue' => env('SQS_QUEUE', 'your-queue-name'),
-            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
-        ],
-
-        'redis' => [
-            'driver' => 'redis',
-            'connection' => 'default',
-            'queue' => env('REDIS_QUEUE', 'default'),
-            'retry_after' => 90,
-            'block_for' => null,
-        ],
-
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Failed Queue Jobs
-    |--------------------------------------------------------------------------
-    |
-    | These options configure the behavior of failed queue job logging so you
-    | can control which database and table are used to store the jobs that
-    | have failed. You may change them to any database / table you wish.
-    |
-    */
-
-    'failed' => [
-        'database' => env('DB_CONNECTION', 'mysql'),
-        'table' => 'failed_jobs',
-    ],
-
-];

b_beauty/config/services.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Third Party Services
-    |--------------------------------------------------------------------------
-    |
-    | This file is for storing the credentials for third party services such
-    | as Mailgun, SparkPost and others. This file provides a sane default
-    | location for this type of information, allowing packages to have
-    | a conventional file to locate the various service credentials.
-    |
-    */
-
-    'mailgun' => [
-        'domain' => env('MAILGUN_DOMAIN'),
-        'secret' => env('MAILGUN_SECRET'),
-        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
-    ],
-
-    'postmark' => [
-        'token' => env('POSTMARK_TOKEN'),
-    ],
-
-    'ses' => [
-        'key' => env('AWS_ACCESS_KEY_ID'),
-        'secret' => env('AWS_SECRET_ACCESS_KEY'),
-        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
-    ],
-
-    'sparkpost' => [
-        'secret' => env('SPARKPOST_SECRET'),
-    ],
-
-];

b_beauty/config/session.php

-<?php
-
-use Illuminate\Support\Str;
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default Session Driver
-    |--------------------------------------------------------------------------
-    |
-    | This option controls the default session "driver" that will be used on
-    | requests. By default, we will use the lightweight native driver but
-    | you may specify any of the other wonderful drivers provided here.
-    |
-    | Supported: "file", "cookie", "database", "apc",
-    |            "memcached", "redis", "dynamodb", "array"
-    |
-    */
-
-    'driver' => env('SESSION_DRIVER', 'file'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Lifetime
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify the number of minutes that you wish the session
-    | to be allowed to remain idle before it expires. If you want them
-    | to immediately expire on the browser closing, set that option.
-    |
-    */
-
-    'lifetime' => env('SESSION_LIFETIME', 120),
-
-    'expire_on_close' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Encryption
-    |--------------------------------------------------------------------------
-    |
-    | This option allows you to easily specify that all of your session data
-    | should be encrypted before it is stored. All encryption will be run
-    | automatically by Laravel and you can use the Session like normal.
-    |
-    */
-
-    'encrypt' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session File Location
-    |--------------------------------------------------------------------------
-    |
-    | When using the native session driver, we need a location where session
-    | files may be stored. A default has been set for you but a different
-    | location may be specified. This is only needed for file sessions.
-    |
-    */
-
-    'files' => storage_path('framework/sessions'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Database Connection
-    |--------------------------------------------------------------------------
-    |
-    | When using the "database" or "redis" session drivers, you may specify a
-    | connection that should be used to manage these sessions. This should
-    | correspond to a connection in your database configuration options.
-    |
-    */
-
-    'connection' => env('SESSION_CONNECTION', null),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Database Table
-    |--------------------------------------------------------------------------
-    |
-    | When using the "database" session driver, you may specify the table we
-    | should use to manage the sessions. Of course, a sensible default is
-    | provided for you; however, you are free to change this as needed.
-    |
-    */
-
-    'table' => 'sessions',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Cache Store
-    |--------------------------------------------------------------------------
-    |
-    | When using the "apc", "memcached", or "dynamodb" session drivers you may
-    | list a cache store that should be used for these sessions. This value
-    | must match with one of the application's configured cache "stores".
-    |
-    */
-
-    'store' => env('SESSION_STORE', null),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Sweeping Lottery
-    |--------------------------------------------------------------------------
-    |
-    | Some session drivers must manually sweep their storage location to get
-    | rid of old sessions from storage. Here are the chances that it will
-    | happen on a given request. By default, the odds are 2 out of 100.
-    |
-    */
-
-    'lottery' => [2, 100],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Cookie Name
-    |--------------------------------------------------------------------------
-    |
-    | Here you may change the name of the cookie used to identify a session
-    | instance by ID. The name specified here will get used every time a
-    | new session cookie is created by the framework for every driver.
-    |
-    */
-
-    'cookie' => env(
-        'SESSION_COOKIE',
-        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
-    ),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Cookie Path
-    |--------------------------------------------------------------------------
-    |
-    | The session cookie path determines the path for which the cookie will
-    | be regarded as available. Typically, this will be the root path of
-    | your application but you are free to change this when necessary.
-    |
-    */
-
-    'path' => '/',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Session Cookie Domain
-    |--------------------------------------------------------------------------
-    |
-    | Here you may change the domain of the cookie used to identify a session
-    | in your application. This will determine which domains the cookie is
-    | available to in your application. A sensible default has been set.
-    |
-    */
-
-    'domain' => env('SESSION_DOMAIN', null),
-
-    /*
-    |--------------------------------------------------------------------------
-    | HTTPS Only Cookies
-    |--------------------------------------------------------------------------
-    |
-    | By setting this option to true, session cookies will only be sent back
-    | to the server if the browser has a HTTPS connection. This will keep
-    | the cookie from being sent to you if it can not be done securely.
-    |
-    */
-
-    'secure' => env('SESSION_SECURE_COOKIE', false),
-
-    /*
-    |--------------------------------------------------------------------------
-    | HTTP Access Only
-    |--------------------------------------------------------------------------
-    |
-    | Setting this value to true will prevent JavaScript from accessing the
-    | value of the cookie and the cookie will only be accessible through
-    | the HTTP protocol. You are free to modify this option if needed.
-    |
-    */
-
-    'http_only' => true,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Same-Site Cookies
-    |--------------------------------------------------------------------------
-    |
-    | This option determines how your cookies behave when cross-site requests
-    | take place, and can be used to mitigate CSRF attacks. By default, we
-    | do not enable this as other CSRF protection services are in place.
-    |
-    | Supported: "lax", "strict"
-    |
-    */
-
-    'same_site' => null,
-
-];

b_beauty/config/view.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | View Storage Paths
-    |--------------------------------------------------------------------------
-    |
-    | Most templating systems load templates from disk. Here you may specify
-    | an array of paths that should be checked for your views. Of course
-    | the usual Laravel view path has already been registered for you.
-    |
-    */
-
-    'paths' => [
-        resource_path('views'),
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Compiled View Path
-    |--------------------------------------------------------------------------
-    |
-    | This option determines where all the compiled Blade templates will be
-    | stored for your application. Typically, this is within the storage
-    | directory. However, as usual, you are free to change this value.
-    |
-    */
-
-    'compiled' => env(
-        'VIEW_COMPILED_PATH',
-        realpath(storage_path('framework/views'))
-    ),
-
-];

b_beauty/database/.gitignore

-*.sqlite
-*.sqlite-journal

b_beauty/database/New folder/2019_12_15_142918_create_users_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateUsersTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('users', function (Blueprint $table) {
-            $table->integer('u_id');
-            $table->string('u_username',50);
-            $table->string('u_password',12);
-            $table->string('u_displayname',50);
-            // $table->string('u_email',50);
-            // $table->Integer('tu_id');
-            $table->text('u_pic');
-            
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('users');
-    }
-}

b_beauty/database/New folder/2019_12_15_143242_create_typeusers_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateTypeusersTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('typeusers', function (Blueprint $table) {
-            $table->integer('tu_id',11);
-            $table->string('tu_name',50);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('typeusers');
-    }
-}

b_beauty/database/New folder/2019_12_15_144000_create_shop_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateShopTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('shop', function (Blueprint $table) {
-            $table->integer('s_id',11);
-            $table->string('s_name',50);
-            $table->integer('ts_id',11);
-            $table->text('s_address');
-            $table->text('s_tel');
-            $table->text('s_detial');
-            $table->time('s_open',6);
-            $table->time('s_close',6);
-            $table->text('s_map');
-      
-        
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('shop');
-    }
-}

b_beauty/database/New folder/2019_12_15_144034_create_typeshop_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateTypeshopTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('typeshop', function (Blueprint $table) {
-            $table->integer('ts_id');
-            $table->string('ts_name',50);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('typeshop');
-    }
-}

b_beauty/database/New folder/2019_12_15_144243_create_shop_img_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateShopImgTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('shop_img', function (Blueprint $table) {
-            $table->integer('si_id',11);
-            $table->text('si_img');
-            $table->integer('s_id',11);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('shop_img');
-    }
-}

b_beauty/database/New folder/2019_12_15_144331_create_promotion_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreatePromotionTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('promotion', function (Blueprint $table) {
-            $table->integer('p_id',11);
-            $table->String('p_name',50);
-            $table->date('p_date',11);
-            $table->text('p_detail');
-            $table->integer('s_id',11);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('promotion');
-    }
-}

b_beauty/database/New folder/2019_12_15_144447_create_booking_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateBookingTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('booking', function (Blueprint $table) {
-            $table->integer('b_id',11);
-            $table->integer('l_id',11);
-            $table->date('b_date',8);
-            $table->time('b_time',6);
-            $table->Integer('s_id',11);
-            $table->Integer('u_id',11);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('booking');
-    }
-}

b_beauty/database/New folder/2019_12_15_144523_create_list_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateListTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('list', function (Blueprint $table) {
-            $table->integer('l_id',11);
-            $table->string('l_name',50);
-            $table->string('l_price',10);
-            $table->Integer('s_id',11);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('list');
-    }
-}

b_beauty/database/New folder/2019_12_15_144629_create_reviews_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateReviewsTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('reviews', function (Blueprint $table) {
-            $table->integer('r_id',11);
-            $table->text('r_topic');
-            $table->text('r_message');
-            $table->integer('r_pont',5);
-            $table->Integer('s_id',11);
-            $table->text('r_pic');
-            $table->Integer('u_id',11);
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('reviews');
-    }
-}

b_beauty/database/factories/UserFactory.php

-<?php
-
-/** @var \Illuminate\Database\Eloquent\Factory $factory */
-use App\User;
-use Illuminate\Support\Str;
-use Faker\Generator as Faker;
-
-/*
-|--------------------------------------------------------------------------
-| Model Factories
-|--------------------------------------------------------------------------
-|
-| This directory should contain each of the model factory definitions for
-| your application. Factories provide a convenient way to generate new
-| model instances for testing / seeding your application's database.
-|
-*/
-
-$factory->define(User::class, function (Faker $faker) {
-    return [
-        'name' => $faker->name,
-        'email' => $faker->unique()->safeEmail,
-        'email_verified_at' => now(),
-        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
-        'remember_token' => Str::random(10),
-    ];
-});

b_beauty/database/migrations/2014_10_12_000000_create_users_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateUsersTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('users', function (Blueprint $table) {
-            $table->bigIncrements('id');
-            $table->string('name');
-            $table->string('email')->unique();
-            $table->timestamp('email_verified_at')->nullable();
-            $table->string('password');
-            $table->string('image')->nullable();
-            $table->rememberToken();
-            $table->timestamps();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('users');
-    }
-}

b_beauty/database/migrations/2014_10_12_100000_create_password_resets_table.php

-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreatePasswordResetsTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('password_resets', function (Blueprint $table) {
-            $table->string('email')->index();
-            $table->string('token');
-            $table->timestamp('created_at')->nullable();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('password_resets');
-    }
-}

b_beauty/database/seeds/DatabaseSeeder.php

-<?php
-
-use Illuminate\Database\Seeder;
-
-class DatabaseSeeder extends Seeder
-{
-    /**
-     * Seed the application's database.
-     *
-     * @return void
-     */
-    public function run()
-    {
-        // $this->call(UsersTableSeeder::class);
-    }
-}

b_beauty/package.json

-{
-    "private": true,
-    "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
-    "devDependencies": {
-        "axios": "^0.19",
-        "bootstrap": "^4.0.0",
-        "cross-env": "^5.1",
-        "jquery": "^3.2",
-        "laravel-mix": "^4.0.7",
-        "lodash": "^4.17.13",
-        "popper.js": "^1.12",
-        "resolve-url-loader": "^2.3.1",
-        "sass": "^1.20.1",
-        "sass-loader": "7.*",
-        "vue": "^2.5.17",
-        "vue-template-compiler": "^2.6.10"
-    }
-}

b_beauty/phpunit.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<phpunit backupGlobals="false"
-         backupStaticAttributes="false"
-         bootstrap="vendor/autoload.php"
-         colors="true"
-         convertErrorsToExceptions="true"
-         convertNoticesToExceptions="true"
-         convertWarningsToExceptions="true"
-         processIsolation="false"
-         stopOnFailure="false">
-    <testsuites>
-        <testsuite name="Unit">
-            <directory suffix="Test.php">./tests/Unit</directory>
-        </testsuite>
-
-        <testsuite name="Feature">
-            <directory suffix="Test.php">./tests/Feature</directory>
-        </testsuite>
-    </testsuites>
-    <filter>
-        <whitelist processUncoveredFilesFromWhitelist="true">
-            <directory suffix=".php">./app</directory>
-        </whitelist>
-    </filter>
-    <php>
-        <server name="APP_ENV" value="testing"/>
-        <server name="BCRYPT_ROUNDS" value="4"/>
-        <server name="CACHE_DRIVER" value="array"/>
-        <server name="MAIL_DRIVER" value="array"/>
-        <server name="QUEUE_CONNECTION" value="sync"/>
-        <server name="SESSION_DRIVER" value="array"/>
-    </php>
-</phpunit>

b_beauty/public/.htaccess

-<IfModule mod_rewrite.c>
-    <IfModule mod_negotiation.c>
-        Options -MultiViews -Indexes
-    </IfModule>
-
-    RewriteEngine On
-
-    # Handle Authorization Header
-    RewriteCond %{HTTP:Authorization} .
-    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
-
-    # Redirect Trailing Slashes If Not A Folder...
-    RewriteCond %{REQUEST_FILENAME} !-d
-    RewriteCond %{REQUEST_URI} (.+)/$
-    RewriteRule ^ %1 [L,R=301]
-
-    # Handle Front Controller...
-    RewriteCond %{REQUEST_FILENAME} !-d
-    RewriteCond %{REQUEST_FILENAME} !-f
-    RewriteRule ^ index.php [L]
-</IfModule>

b_beauty/public/index.php

-<?php
-
-/**
- * Laravel - A PHP Framework For Web Artisans
- *
- * @package  Laravel
- * @author   Taylor Otwell <taylor@laravel.com>
- */
-
-define('LARAVEL_START', microtime(true));
-
-/*
-|--------------------------------------------------------------------------
-| Register The Auto Loader
-|--------------------------------------------------------------------------
-|
-| Composer provides a convenient, automatically generated class loader for
-| our application. We just need to utilize it! We'll simply require it
-| into the script here so that we don't have to worry about manual
-| loading any of our classes later on. It feels great to relax.
-|
-*/
-
-require __DIR__.'/../vendor/autoload.php';
-
-/*
-|--------------------------------------------------------------------------
-| Turn On The Lights
-|--------------------------------------------------------------------------
-|
-| We need to illuminate PHP development, so let us turn on the lights.
-| This bootstraps the framework and gets it ready for use, then it
-| will load up this application so that we can run it and send
-| the responses back to the browser and delight our users.
-|
-*/
-
-$app = require_once __DIR__.'/../bootstrap/app.php';
-
-/*
-|--------------------------------------------------------------------------
-| Run The Application
-|--------------------------------------------------------------------------
-|
-| Once we have the application, we can handle the incoming request
-| through the kernel, and send the associated response back to
-| the client's browser allowing them to enjoy the creative
-| and wonderful application we have prepared for them.
-|
-*/
-
-$kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);
-
-$response = $kernel->handle(
-    $request = Illuminate\Http\Request::capture()
-);
-
-$response->send();
-
-$kernel->terminate($request, $response);
\ No newline at end of file

b_beauty/public/mix-manifest.json

-{
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
-}

b_beauty/public/robots.txt

-User-agent: *
-Disallow:

b_beauty/public/web.config

-<!--
-    Rewrites requires Microsoft URL Rewrite Module for IIS
-    Download: https://www.microsoft.com/en-us/download/details.aspx?id=47337
-    Debug Help: https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-failed-request-tracing-to-trace-rewrite-rules
--->
-<configuration>
-  <system.webServer>
-    <rewrite>
-      <rules>
-        <rule name="Imported Rule 1" stopProcessing="true">
-          <match url="^(.*)/$" ignoreCase="false" />
-          <conditions>
-            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
-          </conditions>
-          <action type="Redirect" redirectType="Permanent" url="/{R:1}" />
-        </rule>
-        <rule name="Imported Rule 2" stopProcessing="true">
-          <match url="^" ignoreCase="false" />
-          <conditions>
-            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
-            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
-          </conditions>
-          <action type="Rewrite" url="index.php" />
-        </rule>
-      </rules>
-    </rewrite>
-  </system.webServer>
-</configuration>

b_beauty/readme.md

-<p align="center"><img src="https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg" width="400"></p>
-
-<p align="center">
-<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/d/total.svg" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/v/stable.svg" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/license.svg" alt="License"></a>
-</p>
-
-## About Laravel
-
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
-
-- [Simple, fast routing engine](https://laravel.com/docs/routing).
-- [Powerful dependency injection container](https://laravel.com/docs/container).
-- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
-- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
-- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
-- [Robust background job processing](https://laravel.com/docs/queues).
-- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
-
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
-
-## Learning Laravel
-
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
-
-If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
-
-## Laravel Sponsors
-
-We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
-
-- **[Vehikl](https://vehikl.com/)**
-- **[Tighten Co.](https://tighten.co)**
-- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
-- **[64 Robots](https://64robots.com)**
-- **[Cubet Techno Labs](https://cubettech.com)**
-- **[Cyber-Duck](https://cyber-duck.co.uk)**
-- **[British Software Development](https://www.britishsoftware.co)**
-- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
-- **[DevSquad](https://devsquad.com)**
-- [UserInsights](https://userinsights.com)
-- [Fragrantica](https://www.fragrantica.com)
-- [SOFTonSOFA](https://softonsofa.com/)
-- [User10](https://user10.com)
-- [Soumettre.fr](https://soumettre.fr/)
-- [CodeBrisk](https://codebrisk.com)
-- [1Forge](https://1forge.com)
-- [TECPRESSO](https://tecpresso.co.jp/)
-- [Runtime Converter](http://runtimeconverter.com/)
-- [WebL'Agence](https://weblagence.com/)
-- [Invoice Ninja](https://www.invoiceninja.com)
-- [iMi digital](https://www.imi-digital.de/)
-- [Earthlink](https://www.earthlink.ro/)
-- [Steadfast Collective](https://steadfastcollective.com/)
-- [We Are The Robots Inc.](https://watr.mx/)
-- [Understand.io](https://www.understand.io/)
-- [Abdel Elrafa](https://abdelelrafa.com)
-- [Hyper Host](https://hyper.host)
-
-## Contributing
-
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Security Vulnerabilities
-
-If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
-
-## License
-
-The Laravel framework is open-source software licensed under the [MIT license](https://opensource.org/licenses/MIT).

b_beauty/resources/js/app.js

-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
-window.Vue = require('vue');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-const app = new Vue({
-    el: '#app',
-});

b_beauty/resources/js/bootstrap.js

-window._ = require('lodash');
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.Popper = require('popper.js').default;
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });

b_beauty/resources/js/components/ExampleComponent.vue

-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>

b_beauty/resources/lang/en/auth.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Authentication Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines are used during authentication for various
-    | messages that we need to display to the user. You are free to modify
-    | these language lines according to your application's requirements.
-    |
-    */
-
-    'failed' => 'These credentials do not match our records.',
-    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
-
-];

b_beauty/resources/lang/en/pagination.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Pagination Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines are used by the paginator library to build
-    | the simple pagination links. You are free to change them to anything
-    | you want to customize your views to better match your application.
-    |
-    */
-
-    'previous' => '&laquo; Previous',
-    'next' => 'Next &raquo;',
-
-];

b_beauty/resources/lang/en/passwords.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Password Reset Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines are the default lines which match reasons
-    | that are given by the password broker for a password update attempt
-    | has failed, such as for an invalid token or invalid new password.
-    |
-    */
-
-    'password' => 'Passwords must be at least eight characters and match the confirmation.',
-    'reset' => 'Your password has been reset!',
-    'sent' => 'We have e-mailed your password reset link!',
-    'token' => 'This password reset token is invalid.',
-    'user' => "We can't find a user with that e-mail address.",
-
-];

b_beauty/resources/lang/en/validation.php

-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Validation Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines contain the default error messages used by
-    | the validator class. Some of these rules have multiple versions such
-    | as the size rules. Feel free to tweak each of these messages here.
-    |
-    */
-
-    'accepted' => 'The :attribute must be accepted.',
-    'active_url' => 'The :attribute is not a valid URL.',
-    'after' => 'The :attribute must be a date after :date.',
-    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
-    'alpha' => 'The :attribute may only contain letters.',
-    'alpha_dash' => 'The :attribute may only contain letters, numbers, dashes and underscores.',
-    'alpha_num' => 'The :attribute may only contain letters and numbers.',
-    'array' => 'The :attribute must be an array.',
-    'before' => 'The :attribute must be a date before :date.',
-    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
-    'between' => [
-        'numeric' => 'The :attribute must be between :min and :max.',
-        'file' => 'The :attribute must be between :min and :max kilobytes.',
-        'string' => 'The :attribute must be between :min and :max characters.',
-        'array' => 'The :attribute must have between :min and :max items.',
-    ],
-    'boolean' => 'The :attribute field must be true or false.',
-    'confirmed' => 'The :attribute confirmation does not match.',
-    'date' => 'The :attribute is not a valid date.',
-    'date_equals' => 'The :attribute must be a date equal to :date.',
-    'date_format' => 'The :attribute does not match the format :format.',
-    'different' => 'The :attribute and :other must be different.',
-    'digits' => 'The :attribute must be :digits digits.',
-    'digits_between' => 'The :attribute must be between :min and :max digits.',
-    'dimensions' => 'The :attribute has invalid image dimensions.',
-    'distinct' => 'The :attribute field has a duplicate value.',
-    'email' => 'The :attribute must be a valid email address.',
-    'ends_with' => 'The :attribute must end with one of the following: :values',
-    'exists' => 'The selected :attribute is invalid.',
-    'file' => 'The :attribute must be a file.',
-    'filled' => 'The :attribute field must have a value.',
-    'gt' => [
-        'numeric' => 'The :attribute must be greater than :value.',
-        'file' => 'The :attribute must be greater than :value kilobytes.',
-        'string' => 'The :attribute must be greater than :value characters.',
-        'array' => 'The :attribute must have more than :value items.',
-    ],
-    'gte' => [
-        'numeric' => 'The :attribute must be greater than or equal :value.',
-        'file' => 'The :attribute must be greater than or equal :value kilobytes.',
-        'string' => 'The :attribute must be greater than or equal :value characters.',
-        'array' => 'The :attribute must have :value items or more.',
-    ],
-    'image' => 'The :attribute must be an image.',
-    'in' => 'The selected :attribute is invalid.',
-    'in_array' => 'The :attribute field does not exist in :other.',
-    'integer' => 'The :attribute must be an integer.',
-    'ip' => 'The :attribute must be a valid IP address.',
-    'ipv4' => 'The :attribute must be a valid IPv4 address.',
-    'ipv6' => 'The :attribute must be a valid IPv6 address.',
-    'json' => 'The :attribute must be a valid JSON string.',
-    'lt' => [
-        'numeric' => 'The :attribute must be less than :value.',
-        'file' => 'The :attribute must be less than :value kilobytes.',
-        'string' => 'The :attribute must be less than :value characters.',
-        'array' => 'The :attribute must have less than :value items.',
-    ],
-    'lte' => [
-        'numeric' => 'The :attribute must be less than or equal :value.',
-        'file' => 'The :attribute must be less than or equal :value kilobytes.',
-        'string' => 'The :attribute must be less than or equal :value characters.',
-        'array' => 'The :attribute must not have more than :value items.',
-    ],
-    'max' => [
-        'numeric' => 'The :attribute may not be greater than :max.',
-        'file' => 'The :attribute may not be greater than :max kilobytes.',
-        'string' => 'The :attribute may not be greater than :max characters.',
-        'array' => 'The :attribute may not have more than :max items.',
-    ],
-    'mimes' => 'The :attribute must be a file of type: :values.',
-    'mimetypes' => 'The :attribute must be a file of type: :values.',
-    'min' => [
-        'numeric' => 'The :attribute must be at least :min.',
-        'file' => 'The :attribute must be at least :min kilobytes.',
-        'string' => 'The :attribute must be at least :min characters.',
-        'array' => 'The :attribute must have at least :min items.',
-    ],
-    'not_in' => 'The selected :attribute is invalid.',
-    'not_regex' => 'The :attribute format is invalid.',
-    'numeric' => 'The :attribute must be a number.',
-    'present' => 'The :attribute field must be present.',
-    'regex' => 'The :attribute format is invalid.',
-    'required' => 'The :attribute field is required.',
-    'required_if' => 'The :attribute field is required when :other is :value.',
-    'required_unless' => 'The :attribute field is required unless :other is in :values.',
-    'required_with' => 'The :attribute field is required when :values is present.',
-    'required_with_all' => 'The :attribute field is required when :values are present.',
-    'required_without' => 'The :attribute field is required when :values is not present.',
-    'required_without_all' => 'The :attribute field is required when none of :values are present.',
-    'same' => 'The :attribute and :other must match.',
-    'size' => [
-        'numeric' => 'The :attribute must be :size.',
-        'file' => 'The :attribute must be :size kilobytes.',
-        'string' => 'The :attribute must be :size characters.',
-        'array' => 'The :attribute must contain :size items.',
-    ],
-    'starts_with' => 'The :attribute must start with one of the following: :values',
-    'string' => 'The :attribute must be a string.',
-    'timezone' => 'The :attribute must be a valid zone.',
-    'unique' => 'The :attribute has already been taken.',
-    'uploaded' => 'The :attribute failed to upload.',
-    'url' => 'The :attribute format is invalid.',
-    'uuid' => 'The :attribute must be a valid UUID.',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Custom Validation Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | Here you may specify custom validation messages for attributes using the
-    | convention "attribute.rule" to name the lines. This makes it quick to
-    | specify a specific custom language line for a given attribute rule.
-    |
-    */
-
-    'custom' => [
-        'attribute-name' => [
-            'rule-name' => 'custom-message',
-        ],
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Custom Validation Attributes
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines are used to swap our attribute placeholder
-    | with something more reader friendly such as "E-Mail Address" instead
-    | of "email". This simply helps us make our message more expressive.
-    |
-    */
-
-    'attributes' => [],
-
-];

b_beauty/resources/sass/_variables.scss

-// Body
-$body-bg: #f8fafc;
-
-// Typography
-$font-family-sans-serif: 'Nunito', sans-serif;
-$font-size-base: 0.9rem;
-$line-height-base: 1.6;
-
-// Colors
-$blue: #3490dc;
-$indigo: #6574cd;
-$purple: #9561e2;
-$pink: #f66d9b;
-$red: #e3342f;
-$orange: #f6993f;
-$yellow: #ffed4a;
-$green: #38c172;
-$teal: #4dc0b5;
-$cyan: #6cb2eb;

b_beauty/resources/sass/app.scss

-// Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito');
-
-// Variables
-@import 'variables';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';

b_beauty/resources/views/auth/login.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Login') }}</div>
-
-                <div class="card-body">
-                    <form method="POST" action="{{ route('login') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <div class="col-md-6 offset-md-4">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
-
-                                    <label class="form-check-label" for="remember">
-                                        {{ __('Remember Me') }}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Login') }}
-                                </button>
-
-                                @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif
-                            </div>
-                        </div>
-                        
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/auth/passwords/confirm.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Confirm Password') }}</div>
-
-                <div class="card-body">
-                    {{ __('Please confirm your password before continuing.') }}
-
-                    <form method="POST" action="{{ route('password.confirm') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Confirm Password') }}
-                                </button>
-
-                                @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/auth/passwords/email.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
-
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
-                        </div>
-                    @endif
-
-                    <form method="POST" action="{{ route('password.email') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Send Password Reset Link') }}
-                                </button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/auth/passwords/reset.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
-
-                <div class="card-body">
-                    <form method="POST" action="{{ route('password.update') }}">
-                        @csrf
-
-                        <input type="hidden" name="token" value="{{ $token }}">
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Reset Password') }}
-                                </button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/auth/register.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Register') }}</div>
-
-                <div class="card-body">
-                    <form method="POST" action="{{ route('register') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
-
-                                @error('name')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
-                            </div>
-                        </div>
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Image') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="image" type="file" class="form-control @error('image') is-invalid @enderror" name="image" value="{{ old('image') }}" required autocomplete="image" autofocus>
-
-                                @error('Image')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-                        <!--<div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Type User') }}</label>
-
-                            <div class="col-md-6">
-                             
-                                <select id="tu_id" class="form-control @error('image') is-invalid @enderror" name="image" required autocomplete="new-image">
-                                    <option>1</option>
-                                    <option>2</option>
-                                    <option>3</option>
-                                </select>
-                                @error('Type User')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>-->
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Register') }}
-                                </button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/auth/verify.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Verify Your Email Address') }}</div>
-
-                <div class="card-body">
-                    @if (session('resent'))
-                        <div class="alert alert-success" role="alert">
-                            {{ __('A fresh verification link has been sent to your email address.') }}
-                        </div>
-                    @endif
-
-                    {{ __('Before proceeding, please check your email for a verification link.') }}
-                    {{ __('If you did not receive the email') }}, <a href="{{ route('verification.resend') }}">{{ __('click here to request another') }}</a>.
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/home.blade.php

-@extends('layouts.app')
-
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">Dashboard</div>
-
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
-                        </div>
-                    @endif
-
-                    You are logged in!
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection

b_beauty/resources/views/layouts/app.blade.php

-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- CSRF Token -->
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-
-    <title>B Beauy</title>
-
-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
-    <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
-
-    <!-- Styles -->
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
-    
-</head>
-<body>
-    <div id="app">
-        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
-            <div class="container">
-                <a class="navbar-brand" href="{{ url('/') }}">
-                B Beauy<!--{{ config('app.name', 'B Beauy') }}-->
-                </a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <!-- Left Side Of Navbar -->
-                    <ul class="navbar-nav mr-auto">
-
-                    </ul>
-
-                    <!-- Right Side Of Navbar -->
-                    <ul class="navbar-nav ml-auto">
-                        <!-- Authentication Links -->
-                        @guest
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
-                            </li>
-                            @if (Route::has('register'))
-                                <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
-                                </li>
-                            @endif
-                        @else
-                            <li class="nav-item dropdown">
-                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                                    {{ Auth::user()->name }} <span class="caret"></span>
-                                </a>
-
-                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                                    <a class="dropdown-item" href="{{ route('logout') }}"
-                                       onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
-                                        {{ __('Logout') }}
-                                    </a>
-
-                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                                        @csrf
-                                    </form>
-                                </div>
-                            </li>
-                        @endguest
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <main class="py-4">
-            @yield('content')
-        </main>
-    </div>
-</body>
-</html>

b_beauty/resources/views/rigister.blade.php

-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-<title>จองคิวร้านเสริมสวย กับ B Beauty </title>
-
-<!-- Bootstrap -->
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
- 
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
-<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'>
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-<style type="text/css">
-body {
-    font-family: Arial;
-    color: #333;
-    font-size: 0.95em;
-    background: #696969;
-}
-
-.form-head {
-    color: #191919;
-    font-weight: normal;
-    font-weight: 400;
-    margin: 0;
-    text-align: center;    
-    font-size: 1.8em;
-    
-}
-
-.error-message {
-    padding: 7px 10px;
-    background: #fff1f2;
-    border: #ffd5da 1px solid;
-    color: #d6001c;
-    border-radius: 4px;
-    margin: 30px 0px 10px 0px;
-}
-
-.success-message {
-    padding: 7px 10px;
-    background: #cae0c4;
-    border: #c3d0b5 1px solid;
-    color: #027506;
-    border-radius: 4px;
-    margin: 30px 0px 10px 0px;
-}
-
-.demo-table {
-    background: #ffffff;
-    border-spacing: initial;
-    margin: 15px auto;
-    word-break: break-word;
-    table-layout: auto;
-    line-height: 1.8em;
-    color: #333;
-    border-radius: 4px;
-    padding: 20px 40px;
-    width: 380px;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-}
-
-.demo-table .label {
-    color: #888888;
-}
-
-.demo-table .field-column {
-    padding: 15px 0px;
-}
-
-.demo-input-box {
-    padding: 13px;
-    border: #CCC 1px solid;
-    border-radius: 4px;
-    width: 100%;
-}
-
-.btnRegister {
-    padding: 13px;
-    background-color: #5d9cec;
-    color: #f5f7fa;
-    cursor: pointer;
-    border-radius: 4px;
-    width: 100%;
-    border: #5791da 1px solid;
-    font-size: 1.1em;
-}
-
-.response-text {
-    max-width: 380px;
-    font-size: 1.5em;
-    text-align: center;
-    background: #fff3de;
-    padding: 42px;
-    border-radius: 3px;
-    border: #f5e9d4 1px solid;
-    font-family: arial;
-    line-height: 34px;
-    margin: 15px auto;
-}
-
-.terms {
-    margin-bottom: 5px;
-}
-</style>
-</head>
-<body>
-<form name="frmRegistration" method="post" action="">
-        <div class="demo-table">
-        <div class="form-head">ลงทะเบียน</div>
-            
-    <?php
-        if (! empty($errorMessage) && is_array($errorMessage)) {
-    ?>	
-            <div class="error-message">
-            <?php 
-            foreach($errorMessage as $message) {
-                echo $message . "<br/>";
-            }
-            ?>
-            </div>
-    <?php
-        }
-    ?>
-            <div class="field-column">
-                <label>ชื่อผู้ใช้งาน</label>
-                <div>
-                    <input type="text" class="demo-input-box"
-                        name="u_username" value="">
-                </div>
-            </div>
-            
-            <div class="field-column">
-                <label>รหัสผ่าน</label>
-                <div><input type="password" class="demo-input-box"
-                    name="u_password" value=""></div>
-            </div>
-            <div class="field-column">
-                <label>ยืนยันรหัสผ่าน</label>
-                <div>
-                    <input type="password" class="demo-input-box"
-                        name="confirm_password" value="">
-                </div>
-            </div>
-            <div class="field-column">
-                <label>ชื่อผู้ใช้งาน</label>
-                <div>
-                    <input type="text" class="demo-input-box"
-                        name="u_displayname"
-                        value="">
-                </div>
-
-            </div>
-            <div class="field-column">
-                <label>Email</label>
-                <div>
-                    <input type="text" name="u_email" class="demo-input-box"
-                        
-                        value="">
-                </div>
-            </div>
-            
-            <div class="input-group mb-3">
-            
-                <div class="form-group">
-                    <label for="exampleFormControlFile1">อัปโหลดรูปภาพ</label>
-                    <input type="file" name="u_pic" class="form-control-file" id="exampleFormControlFile1">
-                </div>
-
-            </div>
-            <div class="form-group">
-               <label for="exampleFormControlSelect1">ประเภทผู้ใช้งาน</label>
-                  <select class="form-control" id="tu_id">
-                        <option>1</option>
-                        <option>2</option>
-                        <option>3</option>
-                    </select>
-            </div>
-            <div class="field-column">
-                <div class="terms">
-                    <input type="checkbox" name="terms"> I accept terms
-                    and conditions
-                </div>
-                <div>
-                    <input type="submit"
-                        name="register-user" value="ลงทะเบียน"
-                        class="btnRegister">
-                </div>
-            </div>
-        </div>
-    </form>
-</body>
-<!--start footer-->
-
-<!--end footer--> 
- 
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
-<!-- Include all compiled plugins (below), or include individual files as needed -->
-</body>
-</html>
\ No newline at end of file

b_beauty/resources/views/singin.blade.php

-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-<title>จองคิวร้านเสริมสวย กับ B Beauty </title>
-
-<!-- Bootstrap -->
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
- 
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
-<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'>
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-<style type="text/css">
-@charset "utf-8";
-/* CSS Document */
-
-/* ---------- FONTAWESOME ---------- */
-/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
-/* ---------- http://weloveiconfonts.com/ ---------- */
-
-@import url(http://weloveiconfonts.com/api/?family=fontawesome);
-
-/* ---------- ERIC MEYER'S RESET CSS ---------- */
-/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */
-
-@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);
-
-/* ---------- FONTAWESOME ---------- */
-
-[class*="fontawesome-"]:before {
-  font-family: 'FontAwesome', sans-serif;
-}
-
-/* ---------- GENERAL ---------- */
-
-body {
-	background: #5f9ea0;
-	color: #5a5656;
-	font: 100%/1.5em 'Open Sans', sans-serif;
-  margin: 0;
-}
-
-a { text-decoration: none; }
-
-h1 { 
-  font-size: 3em;
-  color:#fff;
-  text-align:center;
-  
-}
-
-h1, p {
-	align:center;
-	margin-bottom: 10px;
-	padding: 13px;
-    background-color: #5d9cec;
-    color: #f5f7fa;
-    cursor: pointer;
-    border-radius: 4px;
-    width: 100%;
-    border: #5791da 1px solid;
-    font-size: 1.1em;
-    text-align: center;
-}
-
-strong {
-	font-weight: bold;
-}
-
-.uppercase { text-transform: uppercase; }
-
-/* ---------- LOGIN ---------- */
-
-#login {
-	margin: 50px auto;
-  width: 300px;
- 
-
-  
-}
-
-form fieldset input[type="text"], input[type="password"] {
-	background: #e5e5e5;
-	border: none;
-	border-radius: 3px;
-	color: #5a5656;
-	font-family: inherit;
-	font-size: 14px;
-	height: 50px;
-	outline: none;
-	padding: 0px 10px;
-	width: 280px;
-  -webkit-appearance:none;
-}
-
-form fieldset input[type="submit"] {
-	background-color: #008dde;
-	border: none;
-	border-radius: 3px;
-	color: #f4f4f4;
-	cursor: pointer;
-	font-family: inherit;
-	height: 50px;
-	text-transform: uppercase;
-	width: 300px;
-  -webkit-appearance:none;
-}
-
-form fieldset a {
-	color: #5a5656;
-	font-size: 10px;
-}
-
-form fieldset a:hover { text-decoration: underline; }
-
-.btn-round {
-	background: #5a5656;
-	border-radius: 50%;
-	color: #f4f4f4;
-	display: block;
-	font-size: 12px;
-	height: 50px;
-	line-height: 50px;
-	margin: 30px 125px;
-	text-align: center;
-	text-transform: uppercase;
-	width: 50px;
-}
-
-.facebook-before {
-	background: #0064ab;
-	border-radius: 3px 0px 0px 3px;
-	color: #f4f4f4;
-	display: block;
-	float: left;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
-	width: 50px;
-}
-
-.facebook {
-	background: #0079ce;
-	border: none;
-	border-radius: 0px 3px 3px 0px;
-	color: #f4f4f4;
-	cursor: pointer;
-	height: 50px;
-	text-transform: uppercase;
-	width: 250px;
-}
-body {
-    font-family: Arial;
-    color: #333;
-    font-size: 0.95em;
-}
-
-.form-head {
-    color: #191919;
-    font-weight: normal;
-    font-weight: 400;
-    margin: 0;
-    text-align: center;    
-    font-size: 2em;
-}
-
-.error-message {
-    padding: 7px 10px;
-    background: #fff1f2;
-    border: #ffd5da 1px solid;
-    color: #d6001c;
-    border-radius: 4px;
-    margin: 30px 0px 10px 0px;
-}
-
-.success-message {
-    padding: 7px 10px;
-    background: #cae0c4;
-    border: #c3d0b5 1px solid;
-    color: #027506;
-    border-radius: 4px;
-    margin: 30px 0px 10px 0px;
-}
-
-.demo-table {
-    background: #ffffff;
-    border-spacing: initial;
-    margin: 15px auto;
-    word-break: break-word;
-    table-layout: auto;
-    line-height: 1.8em;
-    color: #333;
-    border-radius: 4px;
-    padding: 20px 40px;
-    width: 380px;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-}
-
-.demo-table .label {
-    color: #888888;
-}
-
-.demo-table .field-column {
-    padding: 15px 0px;
-}
-
-.demo-input-box {
-    padding: 13px;
-    border: #CCC 1px solid;
-    border-radius: 4px;
-    width: 100%;
-}
-
-.btnlogin {
-    padding: 13px;
-    background-color: #5d9cec;
-    color: #f5f7fa;
-    cursor: pointer;
-    border-radius: 4px;
-    width: 100%;
-    border: #5791da 1px solid;
-    font-size: 1.1em;
-}
-
-.response-text {
-    max-width: 380px;
-    font-size: 1.5em;
-    text-align: center;
-    background: #fff3de;
-    padding: 42px;
-    border-radius: 3px;
-    border: #f5e9d4 1px solid;
-    font-family: arial;
-    line-height: 34px;
-    margin: 15px auto;
-}
-
-.terms {
-    margin-bottom: 5px;
-}
-
-
-
-
-</style>
-</head>
-<body>
-
-<div id="login">
-   <form name="frmRegistration" method="post" action="">
-        <div class="demo-table">
-        <div class="form-head">เข้าสู่ระบบ</div>
-            
-    <?php
-      if (! empty($errorMessage) && is_array($errorMessage)) {
-    ?>	
-            <div class="error-message">
-            <?php 
-            foreach($errorMessage as $message) {
-                echo $message . "<br/>";
-            }
-            ?>
-            </div>
-    <?php
-      }
-    ?>
-            <div class="field-column">
-                <label>ชื่อผู้ใช้งาน</label>
-                <div>
-				<input type="text" class="demo-input-box" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "><!-- JS because of IE support; better: placeholder="Username" -->
-                </div>
-            </div>
-            
-            <div class="field-column">
-                <label>รหัสผ่าน</label>
-                <div><input type="password" class="demo-input-box" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "><!-- JS because of IE support; better: placeholder="Password" --></div>
-            </div>
-            
-            <div class="field-column">
-                <label>  <a href="#">ลืมรหัสผ่าน?</a></label>
-               
-
-            </div>
-            
-            <div class="field-column">
-                
-                <div>
-                    <input type="submit"
-                        name="login-user" value="เข้าสู่ระบบ"
-                        class="btnlogin">
-                </div>
-            <span class="btn-round">or</span>
-			<div class="field-column">
-                
-                <div>
-				 
-				<a class="facebook-before "><span class="fontawesome-facebook"></span></a>
-				<p >
-                เข้าสู่ระบบด้วย Facebook</button>
-					 </p>
-                     
-
-                    
-                </div>
-            </div>
-			
-    </form>
-	
-
-	
-             
-                
-
-
-</div>
-	 
-
-
-
-<!--start footer-->
-
-<!--end footer--> 
-
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
-<!-- Include all compiled plugins (below), or include individual files as needed -->
-</body>
-</html>
\ No newline at end of file

b_beauty/resources/views/welcome.blade.php

-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-
-        <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
-
-        <!-- Styles -->
-        <style>
-            html, body {
-                background-color: #fff;
-                color: #636b6f;
-                font-family: 'Nunito', sans-serif;
-                font-weight: 200;
-                height: 100vh;
-                margin: 0;
-            }
-
-            .full-height {
-                height: 100vh;
-            }
-
-            .flex-center {
-                align-items: center;
-                display: flex;
-                justify-content: center;
-            }
-
-            .position-ref {
-                position: relative;
-            }
-
-            .top-right {
-                position: absolute;
-                right: 10px;
-                top: 18px;
-            }
-
-            .content {
-                text-align: center;
-            }
-
-            .title {
-                font-size: 84px;
-            }
-
-            .links > a {
-                color: #636b6f;
-                padding: 0 25px;
-                font-size: 13px;
-                font-weight: 600;
-                letter-spacing: .1rem;
-                text-decoration: none;
-                text-transform: uppercase;
-            }
-
-            .m-b-md {
-                margin-bottom: 30px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="flex-center position-ref full-height">
-            @if (Route::has('login'))
-                <div class="top-right links">
-                    @auth
-                        <a href="{{ url('/home') }}">Home</a>
-                    @else
-                        <a href="{{ route('login') }}">Login</a>
-
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}">Register</a>
-                        @endif
-                    @endauth
-                </div>
-            @endif
-
-            <div class="content">
-                <div class="title m-b-md">
-                    Laravel
-                </div>
-
-                <div class="links">
-                    <a href="https://laravel.com/docs">Docs</a>
-                    <a href="https://laracasts.com">Laracasts</a>
-                    <a href="https://laravel-news.com">News</a>
-                    <a href="https://blog.laravel.com">Blog</a>
-                    <a href="https://nova.laravel.com">Nova</a>
-                    <a href="https://forge.laravel.com">Forge</a>
-                    <a href="https://github.com/laravel/laravel">GitHub</a>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>

b_beauty/routes/api.php

-<?php
-
-use Illuminate\Http\Request;
-
-/*
-|--------------------------------------------------------------------------
-| API Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register API routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| is assigned the "api" middleware group. Enjoy building your API!
-|
-*/
-
-Route::middleware('auth:api')->get('/user', function (Request $request) {
-    return $request->user();
-});

b_beauty/routes/channels.php

-<?php
-
-/*
-|--------------------------------------------------------------------------
-| Broadcast Channels
-|--------------------------------------------------------------------------
-|
-| Here you may register all of the event broadcasting channels that your
-| application supports. The given channel authorization callbacks are
-| used to check if an authenticated user can listen to the channel.
-|
-*/
-
-Broadcast::channel('App.User.{id}', function ($user, $id) {
-    return (int) $user->id === (int) $id;
-});

b_beauty/routes/console.php

-<?php
-
-use Illuminate\Foundation\Inspiring;
-
-/*
-|--------------------------------------------------------------------------
-| Console Routes
-|--------------------------------------------------------------------------
-|
-| This file is where you may define all of your Closure based console
-| commands. Each Closure is bound to a command instance allowing a
-| simple approach to interacting with each command's IO methods.
-|
-*/
-
-Artisan::command('inspire', function () {
-    $this->comment(Inspiring::quote());
-})->describe('Display an inspiring quote');

b_beauty/routes/web.php

-<?php
-
-/*
-|--------------------------------------------------------------------------
-| Web Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register web routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| contains the "web" middleware group. Now create something great!
-|
-*/
-
-Route::get('/', function () {
-    return view('home');
-});
-Route::get('/singin', function () {
-    return view('singin');
-});
-Route::get('/rigister', function () {
-    return view('rigister');
-});
-Auth::routes();
-
-Route::get('/home', 'HomeController@index')->name('home');
-
-Auth::routes();
-
-Route::get('/home', 'HomeController@index')->name('home');
-
-Auth::routes();
-
-Route::get('/home', 'HomeController@index')->name('home');

b_beauty/server.php

-<?php
-
-/**
- * Laravel - A PHP Framework For Web Artisans
- *
- * @package  Laravel
- * @author   Taylor Otwell <taylor@laravel.com>
- */
-
-$uri = urldecode(
-    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)
-);
-
-// This file allows us to emulate Apache's "mod_rewrite" functionality from the
-// built-in PHP web server. This provides a convenient way to test a Laravel
-// application without having installed a "real" web server software here.
-if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
-    return false;
-}
-
-require_once __DIR__.'/public/index.php';

b_beauty/storage/app/.gitignore

-*
-!public/
-!.gitignore

b_beauty/storage/app/public/.gitignore

-*
-!.gitignore

b_beauty/storage/framework/.gitignore

-config.php
-routes.php
-schedule-*
-compiled.php
-services.json
-events.scanned.php
-routes.scanned.php
-down

b_beauty/storage/framework/cache/.gitignore

-*
-!data/
-!.gitignore

b_beauty/storage/framework/cache/data/.gitignore

-*
-!.gitignore

b_beauty/storage/framework/sessions/.gitignore

-*
-!.gitignore

b_beauty/storage/framework/testing/.gitignore

-*
-!.gitignore

b_beauty/storage/framework/views/.gitignore

-*
-!.gitignore

b_beauty/storage/logs/.gitignore

-*
-!.gitignore

b_beauty/tests/CreatesApplication.php

-<?php
-
-namespace Tests;
-
-use Illuminate\Contracts\Console\Kernel;
-
-trait CreatesApplication
-{
-    /**
-     * Creates the application.
-     *
-     * @return \Illuminate\Foundation\Application
-     */
-    public function createApplication()
-    {
-        $app = require __DIR__.'/../bootstrap/app.php';
-
-        $app->make(Kernel::class)->bootstrap();
-
-        return $app;
-    }
-}

b_beauty/tests/Feature/ExampleTest.php

-<?php
-
-namespace Tests\Feature;
-
-use Tests\TestCase;
-use Illuminate\Foundation\Testing\RefreshDatabase;
-
-class ExampleTest extends TestCase
-{
-    /**
-     * A basic test example.
-     *
-     * @return void
-     */
-    public function testBasicTest()
-    {
-        $response = $this->get('/');
-
-        $response->assertStatus(200);
-    }
-}

b_beauty/tests/TestCase.php

-<?php
-
-namespace Tests;
-
-use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
-
-abstract class TestCase extends BaseTestCase
-{
-    use CreatesApplication;
-}

b_beauty/tests/Unit/ExampleTest.php

-<?php
-
-namespace Tests\Unit;
-
-use Tests\TestCase;
-use Illuminate\Foundation\Testing\RefreshDatabase;
-
-class ExampleTest extends TestCase
-{
-    /**
-     * A basic test example.
-     *
-     * @return void
-     */
-    public function testBasicTest()
-    {
-        $this->assertTrue(true);
-    }
-}

b_beauty/webpack.mix.js

-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css');