mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
lazyseal
GitHub
commit
7e259a98be
@ -1,8 +1,5 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import PresentationView from "../views/Presentation/PresentationView.vue";
|
||||
import AboutView from "../views/LandingPages/AboutUs/AboutView.vue";
|
||||
import ContactView from "../views/LandingPages/ContactUs/ContactView.vue";
|
||||
import AuthorView from "../views/LandingPages/Author/AuthorView.vue";
|
||||
import SignInBasicView from "../views/LandingPages/SignIn/BasicView.vue";
|
||||
import Project from "../views/LandingPages/Project/Project.vue";
|
||||
import Profile from "../views/LandingPages/Profile/Profile.vue";
|
||||
@ -99,21 +96,6 @@ const router = createRouter({
|
||||
component: ForgotPassword,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/pages/landing-pages/about-us",
|
||||
name: "about",
|
||||
component: AboutView,
|
||||
},
|
||||
{
|
||||
path: "/pages/landing-pages/contact-us",
|
||||
name: "contactus",
|
||||
component: ContactView,
|
||||
},
|
||||
{
|
||||
path: "/pages/landing-pages/author",
|
||||
name: "author",
|
||||
component: AuthorView,
|
||||
},
|
||||
{
|
||||
path: "/pages/landing-pages/basic",
|
||||
name: "signin-basic",
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
|
||||
//example components
|
||||
import DefaultNavbar from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import DefaultFooter from "../../../examples/footers/FooterDefault.vue";
|
||||
|
||||
//image
|
||||
import bg0 from "@/assets/img/bg9.jpg";
|
||||
|
||||
//dep
|
||||
import Typed from "typed.js";
|
||||
|
||||
//sections
|
||||
import Information from "./Sections/AboutInformation.vue";
|
||||
import AboutTeam from "./Sections/AboutTeam.vue";
|
||||
import Featuring from "./Sections/AboutFeaturing.vue";
|
||||
import Newsletter from "./Sections/AboutNewsletter.vue";
|
||||
|
||||
const body = document.getElementsByTagName("body")[0];
|
||||
//hooks
|
||||
onMounted(() => {
|
||||
body.classList.add("about-us");
|
||||
body.classList.add("bg-gray-200");
|
||||
|
||||
if (document.getElementById("typed")) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var typed = new Typed("#typed", {
|
||||
stringsElement: "#typed-strings",
|
||||
typeSpeed: 90,
|
||||
backSpeed: 90,
|
||||
backDelay: 200,
|
||||
startDelay: 500,
|
||||
loop: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
body.classList.remove("about-us");
|
||||
body.classList.remove("bg-gray-200");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar
|
||||
:action="{
|
||||
route: 'javascript:;',
|
||||
label: 'Buy Now',
|
||||
color: 'btn-white',
|
||||
}"
|
||||
transparent
|
||||
/>
|
||||
<header class="bg-gradient-dark">
|
||||
<div
|
||||
class="page-header min-vh-75"
|
||||
:style="{ backgroundImage: `url(${bg0})` }"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center mx-auto my-auto">
|
||||
<h1 class="text-white">
|
||||
We have no <span class="text-white" id="typed"></span>
|
||||
</h1>
|
||||
<div id="typed-strings">
|
||||
<h1>team</h1>
|
||||
<h1>design</h1>
|
||||
<h1>tool</h1>
|
||||
</div>
|
||||
<p class="lead mb-4 text-white opacity-8">
|
||||
We’re constantly trying to express ourselves and actualize our
|
||||
dreams. If you have the opportunity to play this game
|
||||
</p>
|
||||
<button type="submit" class="btn bg-white text-dark">
|
||||
Create Account
|
||||
</button>
|
||||
<h6 class="text-white mb-2 mt-5">Find us on</h6>
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-facebook text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-instagram text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-twitter text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-google-plus text-lg text-white"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card card-body shadow-xl mx-3 mx-md-4 mt-n6">
|
||||
<Information />
|
||||
<AboutTeam />
|
||||
<Featuring />
|
||||
<Newsletter />
|
||||
</div>
|
||||
<DefaultFooter />
|
||||
</template>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup>
|
||||
// example component
|
||||
import DefaultCounterCard from "../../../../examples/cards/counterCards/DefaultCounterCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="pt-4 pb-6" id="count-stats">
|
||||
<div class="container">
|
||||
<div class="row mb-7">
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-coinbase.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-nasa.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-netflix.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-pinterest.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-spotify.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-vodafone.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Projects"
|
||||
description="Of “high-performing” level are led by a certified project manager"
|
||||
:count="5234"
|
||||
:duration="3000"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Hours"
|
||||
description="That meets quality standards required by our users"
|
||||
:count="3400"
|
||||
suffix="+"
|
||||
:duration="3000"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Support"
|
||||
description="Actively engage team members that finishes on time"
|
||||
:count="24"
|
||||
suffix="/7"
|
||||
:duration="4000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,54 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import DefaultInfoCard from "../../../../examples/cards/infoCards/DefaultInfoCard.vue";
|
||||
import CenteredBlogCard from "../../../../examples/cards/blogCards/CenteredBlogCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-7">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="row justify-content-start">
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="public"
|
||||
title="Fully integrated"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="payments"
|
||||
title="Payments functionality"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
</div>
|
||||
<div class="row justify-content-start mt-4">
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="apps"
|
||||
title="Prebuilt components"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="3p"
|
||||
title="Improved platform"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 ms-auto mt-lg-0 mt-6">
|
||||
<CenteredBlogCard
|
||||
image="https://images.unsplash.com/photo-1544717302-de2939b7ef71?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
|
||||
title="Get insights on Search"
|
||||
description="Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,54 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 m-auto">
|
||||
<h4>Be the first to see the news</h4>
|
||||
<p class="mb-4">
|
||||
Your company may not be in the software business, but eventually, a
|
||||
software company will be in your business.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<MaterialInput
|
||||
class="input-group-outline"
|
||||
id="email"
|
||||
:label="{ text: 'Email Here...', class: 'form-label' }"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4 ps-0">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
class="mb-0 h-100 position-relative z-index-2"
|
||||
>Subscribe</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 ms-auto mt-6 md-mt-0">
|
||||
<div class="position-relative">
|
||||
<img
|
||||
class="max-width-50 w-100 position-relative z-index-2"
|
||||
src="@/assets/img/macbook.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,72 +0,0 @@
|
||||
<script setup>
|
||||
// example component
|
||||
import HorizontalTeamCard from "@/examples/cards/teamCards/HorizontalTeamCard.vue";
|
||||
|
||||
// images
|
||||
import emma from "@/assets/img/team-5.jpg";
|
||||
import william from "@/assets/img/bruce-mars.jpg";
|
||||
import ivana from "@/assets/img/ivana-squares.jpg";
|
||||
import marquez from "@/assets/img/ivana-square.jpg";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pb-5 position-relative bg-gradient-dark mx-n3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 text-start mb-5 mt-5">
|
||||
<h3 class="text-white z-index-1 position-relative">
|
||||
The Executive Team
|
||||
</h3>
|
||||
<p class="text-white opacity-8 mb-0">
|
||||
There’s nothing I really wanted to do in life that I wasn’t able to
|
||||
get good at. That’s my skill.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-4"
|
||||
:image="emma"
|
||||
:profile="{ name: 'Emma Roberts', link: 'javascript:;' }"
|
||||
:position="{ label: 'UI Designer', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-lg-4 mt-5"
|
||||
:image="william"
|
||||
:profile="{ name: 'William Pearce', link: 'javascript:;' }"
|
||||
:position="{ label: 'Boss', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-4 z-index-2"
|
||||
:image="ivana"
|
||||
:profile="{ name: 'Ivana Flow', link: 'javascript:;' }"
|
||||
:position="{ label: 'Athlete', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-lg-4 mt-5 z-index-2"
|
||||
:image="marquez"
|
||||
:profile="{ name: 'Marquez Garcia', link: 'javascript:;' }"
|
||||
:position="{ label: 'JS Developer', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,32 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import DefaultNavbar from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import Header from "../../../examples/Header.vue";
|
||||
|
||||
// sections
|
||||
import Footer from "./Sections/AuthorFooter.vue";
|
||||
import Profile from "./Sections/AuthorProfile.vue";
|
||||
import Posts from "./Sections/AuthorPosts.vue";
|
||||
import Contact from "./Sections/AuthorContact.vue";
|
||||
|
||||
// image
|
||||
import image from "@/assets/img/city-profile.jpg";
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar transparent />
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-height-400"
|
||||
:style="{ backgroundImage: `url(${image})` }"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-8"></span>
|
||||
</div>
|
||||
</Header>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 mb-4">
|
||||
<Profile />
|
||||
<Posts />
|
||||
</div>
|
||||
<Contact />
|
||||
<Footer />
|
||||
</template>
|
||||
@ -1,172 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialTextArea from "@/components/MaterialTextArea.vue";
|
||||
|
||||
// image
|
||||
import bgContact from "@/assets/img/examples/blog2.jpg";
|
||||
|
||||
// tooltip
|
||||
import setTooltip from "@/assets/js/tooltip";
|
||||
|
||||
// store
|
||||
import { useAppStore } from "@/stores";
|
||||
const store = useAppStore();
|
||||
|
||||
onMounted(() => {
|
||||
setTooltip(store.bootstrap);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card box-shadow-xl overflow-hidden mb-5">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-lg-5 position-relative bg-cover px-0"
|
||||
:style="{ backgroundImage: `url(${bgContact})` }"
|
||||
loading="lazy"
|
||||
>
|
||||
<div
|
||||
class="z-index-2 text-center d-flex h-100 w-100 d-flex m-auto justify-content-center"
|
||||
>
|
||||
<div class="mask bg-gradient-dark opacity-8"></div>
|
||||
<div
|
||||
class="p-5 ps-sm-8 position-relative text-start my-auto z-index-2"
|
||||
>
|
||||
<h3 class="text-white">Contact Information</h3>
|
||||
<p class="text-white opacity-8 mb-4">
|
||||
Fill up the form and our Team will get back to you within
|
||||
24 hours.
|
||||
</p>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-phone text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8">(+40) 772 100 200</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-envelope text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8"
|
||||
>hello@creative-tim.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-map-marker-alt text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8"
|
||||
>Dyonisie Wolf Bucharest, RO 010458</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Facebook"
|
||||
>
|
||||
<i class="fab fa-facebook"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Twitter"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Dribbble"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Instagram"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</MaterialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<form class="p-3" id="contact-form" method="post">
|
||||
<div class="card-header px-4 py-sm-5 py-3">
|
||||
<h2>Say Hi!</h2>
|
||||
<p class="lead">We'd like to talk with you.</p>
|
||||
</div>
|
||||
<div class="card-body pt-1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
label="My name is"
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
label="I'm looking for"
|
||||
type="text"
|
||||
placeholder="What you love"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialTextArea
|
||||
class="input-group-static mb-4"
|
||||
placeholder="I want to say that..."
|
||||
:rows="6"
|
||||
>Your message</MaterialTextArea
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-end ms-auto">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
type="submit"
|
||||
class="mb-0"
|
||||
>Send Message</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,88 +0,0 @@
|
||||
<script setup></script>
|
||||
<template>
|
||||
<footer class="footer py-5">
|
||||
<div class="container z-index-1 position-relative">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 me-auto mb-lg-0 mb-4 text-lg-start text-center">
|
||||
<h6 class="text-dark font-weight-bolder text-uppercase mb-lg-4 mb-3">
|
||||
Material Design
|
||||
</h6>
|
||||
<ul
|
||||
class="nav flex-row ms-n3 justify-content-lg-start justify-content-center mb-4 mt-sm-0"
|
||||
>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com"
|
||||
target="_blank"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com/presentation"
|
||||
target="_blank"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com/blog"
|
||||
target="_blank"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com"
|
||||
target="_blank"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-sm text-dark opacity-8 mb-0">
|
||||
Copyright © {{ new Date().getFullYear() }} Material Design by
|
||||
Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6 ms-auto text-lg-end text-center">
|
||||
<p class="mb-5 text-lg text-dark font-weight-bold">
|
||||
The reward for getting on the stage is fame. The price of fame is
|
||||
you can’t get off the stage.
|
||||
</p>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-twitter"></span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-dark opacity-5">
|
||||
<span class="fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@ -1,52 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import TransparentBlogCard from "../../../../examples/cards/blogCards/TransparentBlogCard.vue";
|
||||
import BackgroundBlogCard from "../../../../examples/cards/blogCards/BackgroundBlogCard.vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import post1 from "@/assets/img/examples/testimonial-6-2.jpg";
|
||||
import post2 from "@/assets/img/examples/testimonial-6-3.jpg";
|
||||
import post3 from "@/assets/img/examples/blog-9-4.jpg";
|
||||
import post4 from "@/assets/img/examples/blog2.jpg";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h3 class="mb-5">Check my latest blogposts</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post1"
|
||||
title="Rover raised $65 million"
|
||||
description="Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post2"
|
||||
title="MateLabs machine learning"
|
||||
description="If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post3"
|
||||
title="MateLabs machine learning"
|
||||
description="If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-12 col-12">
|
||||
<BackgroundBlogCard
|
||||
:image="post4"
|
||||
title="Flexible work hours"
|
||||
description="Rather than worrying about switching offices every couple years, you stay in the same place."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialAvatar from "@/components/MaterialAvatar.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// image
|
||||
import profilePic from "@/assets/img/bruce-mars.jpg";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-sm-7 py-5 position-relative">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mx-auto">
|
||||
<div class="mt-n8 mt-md-n9 text-center">
|
||||
<div class="blur-shadow-avatar">
|
||||
<MaterialAvatar
|
||||
size="xxl"
|
||||
class="shadow-xl position-relative z-index-2"
|
||||
:image="profilePic"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row py-7">
|
||||
<div
|
||||
class="col-lg-7 col-md-7 z-index-2 position-relative px-md-2 px-sm-5 mx-auto"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center mb-2"
|
||||
>
|
||||
<h3 class="mb-0">Michael Roven</h3>
|
||||
<div class="d-block">
|
||||
<MaterialButton
|
||||
class="text-nowrap mb-0"
|
||||
variant="outline"
|
||||
color="success"
|
||||
size="sm"
|
||||
>Follow</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">323</span>
|
||||
<span>Posts</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">3.5k</span>
|
||||
<span>Followers</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">260</span>
|
||||
<span>Following</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg mb-0">
|
||||
Decisions: If you can’t decide, the answer is no. If two equally
|
||||
difficult paths, choose the one more painful in the short term
|
||||
(pain avoidance is creating an illusion of equality). Choose the
|
||||
path that leaves you more equanimous.
|
||||
<br /><a
|
||||
href="javascript:;"
|
||||
class="text-success icon-move-right"
|
||||
>More about me
|
||||
<i class="fas fa-arrow-right text-sm ms-1"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,123 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
//example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
|
||||
|
||||
//image
|
||||
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||
|
||||
//material components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialTextArea from "@/components/MaterialTextArea.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DefaultNavbar
|
||||
:sticky="true"
|
||||
:action="{
|
||||
route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
|
||||
color: 'bg-gradient-success',
|
||||
label: 'Buy Now',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="page-header min-vh-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column"
|
||||
>
|
||||
<div
|
||||
class="position-relative h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
|
||||
:style="{
|
||||
backgroundImage: `url(${image})`,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
loading="lazy"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-8 col-xl-5 col-lg-6 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5"
|
||||
>
|
||||
<div
|
||||
class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5"
|
||||
>
|
||||
<div
|
||||
class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent"
|
||||
>
|
||||
<div
|
||||
class="bg-gradient-success shadow-success border-radius-lg p-3"
|
||||
>
|
||||
<h3 class="text-white text-success mb-0">Contact us</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="pb-3">
|
||||
For further questions, including partnership opportunities,
|
||||
please email hello@creative-tim.com or contact using our
|
||||
contact form.
|
||||
</p>
|
||||
<form id="contact-form" method="post" autocomplete="off">
|
||||
<div class="card-body p-0 my-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
type="text"
|
||||
label="Full Name"
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 ps-md-2">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="hello@creative-tim.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0 mt-md-0 mt-4">
|
||||
<MaterialTextArea
|
||||
id="message"
|
||||
class="input-group-static mb-4"
|
||||
:rows="6"
|
||||
placeholder="Describe your problem in at least 250 characters"
|
||||
>How can we help you?</MaterialTextArea
|
||||
>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
class="mt-3 mb-0"
|
||||
>Send Message</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<DefaultFooter />
|
||||
</template>
|
||||
@ -80,11 +80,14 @@ const updateProfile = async () => {
|
||||
formData.append(key, value);
|
||||
});
|
||||
|
||||
// Append the image file
|
||||
formData.append('profile_image', selectedImage.value);
|
||||
|
||||
if (selectedImage.value) {
|
||||
formData.append('profile_image', selectedImage.value);
|
||||
};
|
||||
|
||||
|
||||
await axios.patch(`http://somebodyhire.me/api/profile/${userId.value}/`, formData, { headers });
|
||||
// router.push('/ViewMyProfile');
|
||||
router.push('/ViewMyProfile');
|
||||
} catch (error) {
|
||||
debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
|
||||
console.error(error);
|
||||
@ -104,20 +107,28 @@ onMounted(async() => {
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>User Profile: {{ loggedUserName }}</h1>
|
||||
<textarea readonly v-model="debugText"></textarea>
|
||||
<!--
|
||||
Это поле, в которое выводится весь обмен, происходящий между клиентом и сервером. Нужно для отладки.
|
||||
<textarea readonly v-model="debugText"></textarea> -->
|
||||
|
||||
<!-- Событие происходит в момент загрузки файла. В этот момент в переменную selectedImage записывается файл, который был выбран. -->
|
||||
<input type="file" accept="image/*" @change="onFileChange">
|
||||
<input type="text" v-model="profileData.username" placeholder="Username">
|
||||
|
||||
<input type="text" v-model="profileData.username" placeholder="Имя пользователя">
|
||||
<input type="email" v-model="profileData.email" placeholder="Email">
|
||||
<input type="text" v-model="profileData.name" placeholder="Name">
|
||||
<input type="text" v-model="profileData.short_intro" placeholder="Short Introduction">
|
||||
<textarea v-model="profileData.bio" placeholder="Biography"></textarea>
|
||||
<textarea v-model="profileData.social_github" placeholder="GitHub Link"></textarea>
|
||||
<textarea v-model="profileData.social_twitter" placeholder="Twitter Link"></textarea>
|
||||
<textarea v-model="profileData.social_vk" placeholder="VK Link"></textarea>
|
||||
<textarea v-model="profileData.social_youtube" placeholder="YouTube Link"></textarea>
|
||||
<textarea v-model="profileData.social_website" placeholder="Website Link"></textarea>
|
||||
<button @click="updateProfile" class="btn-submit">Submit</button>
|
||||
<button @click="cancelUpdate" class="btn-cancel">Cancel</button>
|
||||
<input type="text" v-model="profileData.name" placeholder="Полное имя">
|
||||
<input type="text" v-model="profileData.short_intro" placeholder="Краткое описание">
|
||||
<input type="text" v-model="profileData.location" placeholder="Местоположение">
|
||||
<textarea v-model="profileData.bio" placeholder="Подробное описание"></textarea>
|
||||
<textarea v-model="profileData.social_github" placeholder="GitHub"></textarea>
|
||||
<textarea v-model="profileData.social_twitter" placeholder="Twitter"></textarea>
|
||||
<textarea v-model="profileData.social_vk" placeholder="ВКонтакте"></textarea>
|
||||
<textarea v-model="profileData.social_youtube" placeholder="YouTube"></textarea>
|
||||
<textarea v-model="profileData.social_website" placeholder="Сайт"></textarea>
|
||||
<div>
|
||||
<button @click="updateProfile" class="btn-submit">Сохранить</button>
|
||||
<button @click="cancelUpdate" class="btn-cancel">Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -17,12 +17,6 @@ const projectId = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
|
||||
// const getProfile = async () => {
|
||||
// const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`);
|
||||
// profileData.value = processProfileData(profileDataRecieved.data);
|
||||
// };
|
||||
|
||||
|
||||
axios.interceptors.request.use((request) => {
|
||||
debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2);
|
||||
return request;
|
||||
@ -45,18 +39,7 @@ const getProject = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// const updateProfile = async () => {
|
||||
// try {
|
||||
// const token = computed(() => sessionStorage.getItem('access_token'));
|
||||
// debugText.value = `Type of token: ${typeof token.value}, Value of token: ${token.value}`;
|
||||
// const headers = { 'Authorization': `Bearer ${token.value}` };
|
||||
// await axios.patch(`http://somebodyhire.me/api/profile/${userId.value}/`, profileData.value, { headers });
|
||||
// router.push('/ViewMyProfile');
|
||||
// } catch (error) {
|
||||
// debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
|
||||
// console.error(error);
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
const updateProject = async () => {
|
||||
try {
|
||||
|
||||
@ -1,171 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
// example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import Header from "@/examples/Header.vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialSwitch from "@/components/MaterialSwitch.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar transparent />
|
||||
<Header>
|
||||
<div
|
||||
class="page-header align-items-start min-vh-100"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
|
||||
}"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div
|
||||
class="card-header p-0 position-relative mt-n4 mx-3 z-index-2"
|
||||
>
|
||||
<div
|
||||
class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1"
|
||||
>
|
||||
<h4
|
||||
class="text-white font-weight-bolder text-center mt-2 mb-0"
|
||||
>
|
||||
Sign in
|
||||
</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-2 text-center ms-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-facebook text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center px-1">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-github text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center me-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-google text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" class="text-start">
|
||||
<MaterialInput
|
||||
id="email"
|
||||
class="input-group-outline my-3"
|
||||
:label="{ text: 'Email', class: 'form-label' }"
|
||||
type="email"
|
||||
/>
|
||||
<MaterialInput
|
||||
id="password"
|
||||
class="input-group-outline mb-3"
|
||||
:label="{ text: 'Password', class: 'form-label' }"
|
||||
type="password"
|
||||
/>
|
||||
<MaterialSwitch
|
||||
class="d-flex align-items-center mb-3"
|
||||
id="rememberMe"
|
||||
labelClass="mb-0 ms-3"
|
||||
checked
|
||||
>Remember me</MaterialSwitch
|
||||
>
|
||||
|
||||
<div class="text-center">
|
||||
<MaterialButton
|
||||
class="my-4 mb-2"
|
||||
variant="gradient"
|
||||
color="success"
|
||||
fullWidth
|
||||
>Sign in</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a
|
||||
href="#"
|
||||
class="text-success text-gradient font-weight-bold"
|
||||
>Sign up</a
|
||||
>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
<div class="col-12 col-md-6 my-auto">
|
||||
<div
|
||||
class="copyright text-center text-sm text-white text-lg-start"
|
||||
>
|
||||
© {{ new Date().getFullYear() }}, made with
|
||||
<i class="fa fa-heart" aria-hidden="true"></i> by
|
||||
<a
|
||||
href="https://www.creative-tim.com"
|
||||
class="font-weight-bold text-white"
|
||||
target="_blank"
|
||||
>Creative Tim</a
|
||||
>
|
||||
for a better web.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<ul
|
||||
class="nav nav-footer justify-content-center justify-content-lg-end"
|
||||
>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com"
|
||||
class="nav-link text-white"
|
||||
target="_blank"
|
||||
>Creative Tim</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation"
|
||||
class="nav-link text-white"
|
||||
target="_blank"
|
||||
>About Us</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/blog"
|
||||
class="nav-link text-white"
|
||||
target="_blank"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/license"
|
||||
class="nav-link pe-0 text-white"
|
||||
target="_blank"
|
||||
>License</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
@ -22,6 +22,13 @@ const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
const isStaff = computed(() => sessionStorage.getItem('is_staff'));
|
||||
const token = computed(() => sessionStorage.getItem('token'));
|
||||
|
||||
//Тут мы попробуем использовать local storage потому что оно должно работать между вкладками
|
||||
const isAuthenticatedLocal = computed(() => !!localStorage.getItem('access_token'));
|
||||
const userIdLocal = computed(() => localStorage.getItem('user_id'));
|
||||
const loggedUserNameLocal = computed(() => localStorage.getItem('username'));
|
||||
const isStaffLocal = computed(() => localStorage.getItem('is_staff'));
|
||||
const tokenLocal = computed(() => localStorage.getItem('token'));
|
||||
|
||||
const login = async () => {
|
||||
if (!username.value || !password.value) {
|
||||
errorMessage.value = "Please fill in both fields.";
|
||||
@ -42,6 +49,13 @@ const login = async () => {
|
||||
sessionStorage.setItem('user_id', response.data.id);
|
||||
sessionStorage.setItem('is_staff', response.data.is_staff);
|
||||
sessionStorage.setItem('token', response.data.token);
|
||||
//Дублируем всё, потому что страницы будут переползать постепенно
|
||||
localStorage.setItem('access_token', response.data.access);
|
||||
localStorage.setItem('username', username.value);
|
||||
localStorage.setItem('user_id', response.data.id);
|
||||
localStorage.setItem('is_staff', response.data.is_staff);
|
||||
localStorage.setItem('token', response.data.token);
|
||||
|
||||
location.reload(); // Refresh page
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
@ -61,6 +75,13 @@ const logout = () => {
|
||||
sessionStorage.removeItem('user_id');
|
||||
sessionStorage.setItem('is_staff', false);
|
||||
sessionStorage.removeItem('token');
|
||||
//и тут тоже не забываем продублировать
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('username'); // Also clear the username from sessionStorage
|
||||
localStorage.removeItem('user_id');
|
||||
localStorage.setItem('is_staff', false);
|
||||
localStorage.removeItem('token');
|
||||
|
||||
location.reload(); // Refresh page after logout
|
||||
};
|
||||
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: "gradient",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "success",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md",
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object],
|
||||
required: true,
|
||||
component: String,
|
||||
color: String,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
function backgroundColor(variant, color) {
|
||||
let colorValue;
|
||||
|
||||
if (variant === "gradient") {
|
||||
colorValue = "bg-gradient-" + color;
|
||||
} else if (variant === "contained") {
|
||||
colorValue = "bg-" + color;
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="p-3 info-horizontal d-flex align-items-center">
|
||||
<div
|
||||
class="icon icon-shape text-center border-radius-xl"
|
||||
:class="`icon-${size} ${backgroundColor(variant, color)} shadow-${color}`"
|
||||
>
|
||||
<i
|
||||
class="material-icons opacity-10"
|
||||
:class="typeof icon == 'object' ? icon.color : ''"
|
||||
>{{ typeof icon == "string" ? icon : icon.component }}</i
|
||||
>
|
||||
</div>
|
||||
<div class="description ps-3">
|
||||
<p class="mb-0" v-html="content" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,35 +0,0 @@
|
||||
<script setup></script>
|
||||
<template>
|
||||
<div class="container mt-sm-5">
|
||||
<div
|
||||
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg)'
|
||||
}"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark"></span>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 ms-lg-5">
|
||||
<h4 class="text-white">Built by developers</h4>
|
||||
<h1 class="text-white">Complex Documentation</h1>
|
||||
<p class="lead text-white opacity-8">
|
||||
From colors, cards, typography to complex elements, you will find
|
||||
the full documentation. Play with the utility classes and you will
|
||||
create unlimited combinations for our components.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
|
||||
class="text-white icon-move-right"
|
||||
>
|
||||
Read docs
|
||||
<i class="fas fa-arrow-right text-sm ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,98 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
// tooltip
|
||||
import setTooltip from "@/assets/js/tooltip";
|
||||
|
||||
// store
|
||||
import { useAppStore } from "@/stores";
|
||||
const store = useAppStore();
|
||||
|
||||
defineProps({
|
||||
route: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
pro: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
setTooltip(store.bootstrap);
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<RouterLink :to="{ name: route }">
|
||||
<div
|
||||
class="card move-on-hover"
|
||||
v-bind="$attrs"
|
||||
:data-bs-toggle="pro ? 'tooltip' : null"
|
||||
:data-bs-placement="pro ? 'top' : null"
|
||||
:title="pro ? 'Pro Element' : null"
|
||||
>
|
||||
<img
|
||||
class="w-100"
|
||||
:class="pro && 'opacity-6'"
|
||||
:src="image"
|
||||
:alt="title"
|
||||
loading="lazy"
|
||||
/>
|
||||
<svg
|
||||
v-if="pro"
|
||||
class="position-absolute"
|
||||
:style="{ top: 10, right: 10 }"
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g
|
||||
id="lock-black"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<circle id="Oval" fill="#1F2937" cx="12" cy="12" r="12"></circle>
|
||||
<g
|
||||
id="padlock"
|
||||
transform="translate(7.000000, 5.000000)"
|
||||
fill="#FFFFFF"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M5,0 C3.16666667,0 1.66666667,1.5 1.66666667,3.33333333 L1.66666667,4.58333333 C0.666666667,5.5 0,6.83333333 0,8.33333333 C0,11.0833333 2.25,13.3333333 5,13.3333333 C7.75,13.3333333 10,11.0833333 10,8.33333333 C10,6.83333333 9.33333333,5.5 8.33333333,4.58333333 L8.33333333,3.33333333 C8.33333333,1.5 6.83333333,0 5,0 Z M5.83333333,8.91666667 L5.83333333,10.8333333 L4.16666667,10.8333333 L4.16666667,8.91666667 C3.66666667,8.66666667 3.33333333,8.08333333 3.33333333,7.5 C3.33333333,6.58333333 4.08333333,5.83333333 5,5.83333333 C5.91666667,5.83333333 6.66666667,6.58333333 6.66666667,7.5 C6.66666667,8.08333333 6.33333333,8.66666667 5.83333333,8.91666667 Z M6.66666667,3.66666667 C6.16666667,3.41666667 5.58333333,3.33333333 5,3.33333333 C4.41666667,3.33333333 3.83333333,3.41666667 3.33333333,3.66666667 L3.33333333,3.33333333 C3.33333333,2.41666667 4.08333333,1.66666667 5,1.66666667 C5.91666667,1.66666667 6.66666667,2.41666667 6.66666667,3.33333333 L6.66666667,3.66666667 Z"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-2 ms-2">
|
||||
<h6 class="mb-0">{{ title }}</h6>
|
||||
<p class="text-secondary text-sm font-weight-normal">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
@ -1,70 +0,0 @@
|
||||
<script setup>
|
||||
import RotatingCard from "../../../examples/cards/rotatingCards/RotatingCard.vue";
|
||||
import RotatingCardFront from "../../../examples/cards/rotatingCards/RotatingCardFront.vue";
|
||||
import RotatingCardBack from "../../../examples/cards/rotatingCards/RotatingCardBack.vue";
|
||||
import DefaultInfoCard from "../../../examples/cards/infoCards/DefaultInfoCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="my-5 py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-4 ms-auto me-auto p-lg-4 mt-lg-0 mt-4">
|
||||
<RotatingCard>
|
||||
<RotatingCardFront
|
||||
image="https://images.unsplash.com/photo-1569683795645-b62e50fbf103?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
icon="touch_app"
|
||||
title="Feel the <br /> Material Kit"
|
||||
description="All the Bootstrap components that you need in a development have been
|
||||
re-design with the new look."
|
||||
/>
|
||||
|
||||
<RotatingCardBack
|
||||
image="https://images.unsplash.com/photo-1498889444388-e67ea62c464b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1365&q=80"
|
||||
title="Discover More"
|
||||
description="You will save a lot of time going from prototyping to full-functional
|
||||
code because all elements are implemented."
|
||||
:action="[
|
||||
{
|
||||
route: './/sections/page-sections/hero-sections.html',
|
||||
label: 'Start with Headers',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</RotatingCard>
|
||||
</div>
|
||||
<div class="col-lg-6 ms-auto">
|
||||
<div class="row justify-content-start">
|
||||
<DefaultInfoCard
|
||||
icon="content_copy"
|
||||
title="Full Documentation"
|
||||
description="Built by developers for developers. Check the foundation and
|
||||
you will find everything inside our documentation."
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
icon="flip_to_front"
|
||||
title="Bootstrap 5 Ready"
|
||||
description="The world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins."
|
||||
/>
|
||||
</div>
|
||||
<div class="row justify-content-start mt-5">
|
||||
<DefaultInfoCard
|
||||
class="mt-3"
|
||||
icon="price_change"
|
||||
title="Save Time & Money"
|
||||
description="Creating your design from scratch with dedicated designers can
|
||||
be very expensive. Start with our Design System."
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
class="mt-3"
|
||||
icon="devices"
|
||||
title="Fully Responsive"
|
||||
description="Regardless of the screen size, the website content will
|
||||
naturally fit the given resolution."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,80 +0,0 @@
|
||||
<script setup>
|
||||
import ExampleCard from "../Components/ExampleCard.vue";
|
||||
import MaterialBadge from "../../../components/MaterialBadge.vue";
|
||||
|
||||
// images
|
||||
import imgSigninCover from "@/assets/img/signin-cover.png";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="row text-center my-sm-5 mt-5">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<MaterialBadge color="success" class="mb-3"
|
||||
>Boost creativity</MaterialBadge
|
||||
>
|
||||
<h2 class="">With our coded pages</h2>
|
||||
<p class="lead">
|
||||
The easiest way to get started is to use one of our <br />
|
||||
pre-built example pages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
class="shadow-lg"
|
||||
title="About Us Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/about-us.jpg"
|
||||
route="about"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
class="shadow-lg"
|
||||
title="Contact Us Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/contact.jpg"
|
||||
route="contactus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
classes="mt-5"
|
||||
title="Sign In Page"
|
||||
:image="imgSigninCover"
|
||||
route="signin-basic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
classes="shadow-lg"
|
||||
title="Author Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/author.jpg"
|
||||
route="author"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mx-auto mt-md-0 mt-3">
|
||||
<div class="position-sticky" style="top: 100px !important">
|
||||
<h3>
|
||||
Presentation Pages for Company, Landing Pages, Blogs and Support
|
||||
</h3>
|
||||
<h6 class="text-secondary font-weight-normal">
|
||||
These is just a small selection of the multiple possibitilies you
|
||||
have. Focus on the business, not on the design.
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,123 +0,0 @@
|
||||
<script setup>
|
||||
import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-sm-7" id="pricing-soft-ui">
|
||||
<div class="bg-gradient-success position-relative mx-n3 overflow-hidden">
|
||||
<img
|
||||
src="@/assets/img/shapes/pattern-lines.svg"
|
||||
alt="pattern-lines"
|
||||
class="position-absolute start-0 top-md-0 w-100 opacity-6"
|
||||
/>
|
||||
<div
|
||||
class="container pb-lg-8 pb-7 pt-5 postion-relative z-index-2 position-relative"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-md-7 mx-auto text-center">
|
||||
<span class="badge bg-gradient-dark mb-2">Pricing</span>
|
||||
<h3 class="text-white">Ready to get Material Kit?</h3>
|
||||
<p class="text-white">
|
||||
Based on the license you get, you will have direct access to our
|
||||
team <br />
|
||||
of developers who built the product.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-lg-n8 mt-n6">
|
||||
<div class="container">
|
||||
<div class="row mt-5">
|
||||
<SimplePricingCard
|
||||
title="Freelancer"
|
||||
description="Good for a personal or client web/mobile app."
|
||||
:price="{ currency: '$', amount: '79' }"
|
||||
:action="{
|
||||
route: '/',
|
||||
label: 'Buy now',
|
||||
color: 'bg-gradient-dark',
|
||||
}"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Projects - 1',
|
||||
'Team size - 1',
|
||||
'Support',
|
||||
'Free Updates - 6 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
title="Startup"
|
||||
description="Build your startup or client web/mobile app."
|
||||
:price="149"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Projects - 1',
|
||||
'Team size - up to 5',
|
||||
'Support',
|
||||
'Free Updates - 12 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
color="bg-gradient-dark"
|
||||
title="Company"
|
||||
description="Perfect for web/mobile apps or SaaS projects."
|
||||
:price="249"
|
||||
:action="{ route: '', label: 'Buy now', color: 'btn-white' }"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Use in SaaS',
|
||||
'Projects - unlimited',
|
||||
'Team Size - up to 20',
|
||||
'Priority support',
|
||||
'Free Updates - 12 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
title="Enterprise"
|
||||
description="Deploy large-scale projects which include redistribution
|
||||
rights."
|
||||
:price="599"
|
||||
:action="{
|
||||
route:
|
||||
'https://secure.avangate.com/order/checkout.php?PRODS=37189144&OPTIONS37189144=ENTERPRISE&CART=1&CARD=2&CLEAN_CART=1&SHORT_FORM=1',
|
||||
label: 'Buy now',
|
||||
color: 'bg-gradient-dark',
|
||||
}"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Use in SaaS',
|
||||
'Projects - unlimited',
|
||||
'Team Size - more than 20',
|
||||
'Priority support',
|
||||
'Free Updates - 24 months',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="text-center mt-5">
|
||||
<i class="fa fa-lock" aria-hidden="true"></i> Secured Payment by
|
||||
<b> 2Checkout </b> with: <br /><br />
|
||||
<i class="fa fa-cc-paypal fa-2x me-1" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-mastercard fa-2x mx-1" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-amex fa-2x" aria-hidden="true"></i>
|
||||
</p>
|
||||
<p class="text-center max-width-500 mx-auto">
|
||||
<b>Info:</b> If you are a Registered Company inside the European
|
||||
Union you will be able to add your VAT ID after your Press "Buy
|
||||
Now"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user