mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
Merge 23341b07b7a768aa0a9f639aad972a3b36345a64 into 89e91169177213ef6668bff2c90eb27f1f502257
This commit is contained in:
irchen4
GitHub
commit
5cae12e976
@ -29,6 +29,11 @@
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Our CSS -->
|
||||
<link
|
||||
href="./src/assets/css/linkedmin.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "2.11.5",
|
||||
"axios": "^1.4.0",
|
||||
"bootstrap": "5.1.3",
|
||||
"pinia": "2.0.14",
|
||||
"prismjs": "1.28.0",
|
||||
|
||||
11
src/assets/css/linkedmin.css
Normal file
11
src/assets/css/linkedmin.css
Normal file
@ -0,0 +1,11 @@
|
||||
@font-face {
|
||||
font-family: 'PressStart2P' ;
|
||||
src: url('../fonts/PressStart2P-Regular.ttf') format('truetype') ;
|
||||
}
|
||||
@font-face{
|
||||
font-family: SpaceMono;
|
||||
src:url('./fonts/SpaceMono-Regular.ttf') format('truetype') ;
|
||||
}
|
||||
h1{
|
||||
font-family: 'PressStart2P';
|
||||
}
|
||||
BIN
src/assets/fonts/PressStart2P-Regular.ttf
Normal file
BIN
src/assets/fonts/PressStart2P-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/SpaceMono-Bold.ttf
Normal file
BIN
src/assets/fonts/SpaceMono-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/SpaceMono-Regular.ttf
Normal file
BIN
src/assets/fonts/SpaceMono-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/img/space-background.jpg
Normal file
BIN
src/assets/img/space-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 591 KiB |
BIN
src/assets/img/ufo.jpg
Normal file
BIN
src/assets/img/ufo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
src/assets/img/ultraviolet.jpg
Normal file
BIN
src/assets/img/ultraviolet.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
50
src/examples/cards/ProjectCard.vue
Normal file
50
src/examples/cards/ProjectCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="project-card">
|
||||
<h2>{{ project.title }}</h2>
|
||||
<img :src="project.featured_image" alt="Project Image">
|
||||
<p>{{ project.description }}</p>
|
||||
<p>Vote Total: {{ project.vote_total }}</p>
|
||||
<p>Vote Ratio: {{ project.vote_ratio }}</p>
|
||||
<p>Created: {{ project.created }}</p>
|
||||
<p>Owner: {{ project.owner }}</p>
|
||||
<p>Tags: {{ project.tags.join(', ') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'ProjectCard',
|
||||
setup() {
|
||||
const project = ref({
|
||||
id: 1,
|
||||
title: "kateschka's project updated",
|
||||
description: "КРУТОЙ ВЕБ-САЙТ",
|
||||
featured_image: "http://somebodyhire.me/default.jpg",
|
||||
demo_link: null,
|
||||
source_link: null,
|
||||
vote_total: 0,
|
||||
vote_ratio: 0,
|
||||
created: "2023-05-10T19:58:30.084115",
|
||||
owner: 3,
|
||||
tags: []
|
||||
})
|
||||
|
||||
return { project }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-card {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.project-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -12,33 +12,7 @@ defineProps({
|
||||
route: "/"
|
||||
})
|
||||
},
|
||||
socials: {
|
||||
type: Array,
|
||||
icon: String,
|
||||
link: String,
|
||||
default: () => [
|
||||
{
|
||||
icon: '<i class="fab fa-facebook text-lg opacity-8"></i>',
|
||||
link: "https://www.facebook.com/CreativeTim/"
|
||||
},
|
||||
{
|
||||
icon: '<i class="fab fa-twitter text-lg opacity-8"></i>',
|
||||
link: "https://twitter.com/creativetim"
|
||||
},
|
||||
{
|
||||
icon: '<i class="fab fa-dribbble text-lg opacity-8"></i>',
|
||||
link: "https://dribbble.com/creativetim"
|
||||
},
|
||||
{
|
||||
icon: '<i class="fab fa-github text-lg opacity-8"></i>',
|
||||
link: "https://github.com/creativetimofficial"
|
||||
},
|
||||
{
|
||||
icon: '<i class="fab fa-youtube text-lg opacity-8"></i>',
|
||||
link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
menus: {
|
||||
type: Array,
|
||||
name: String,
|
||||
@ -127,51 +101,17 @@ defineProps({
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-4 ms-auto">
|
||||
<div>
|
||||
<a :href="brand.route">
|
||||
<img :src="brand.logo" class="mb-3 footer-logo" alt="main_logo" />
|
||||
</a>
|
||||
<h6 class="font-weight-bolder mb-4">{{ brand.name }}</h6>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="d-flex flex-row ms-n3 nav">
|
||||
<li
|
||||
class="nav-item"
|
||||
v-for="{ icon, link } of socials"
|
||||
:key="link"
|
||||
>
|
||||
<a
|
||||
class="nav-link pe-1"
|
||||
:href="link"
|
||||
target="_blank"
|
||||
v-html="icon"
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-2 col-sm-6 col-6 mb-4"
|
||||
v-for="{ name, items } of menus"
|
||||
:key="name"
|
||||
>
|
||||
<h6 class="text-sm">{{ name }}</h6>
|
||||
<ul class="flex-column ms-n3 nav">
|
||||
<li class="nav-item" v-for="item of items" :key="item.name">
|
||||
<a class="nav-link" :href="item.href" target="_blank">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<p class="text-dark my-4 text-sm font-weight-normal">
|
||||
All rights reserved. Copyright ©
|
||||
Екатерина Кузнецова, Ирина Комарова.
|
||||
{{ new Date().getFullYear() }}
|
||||
Material Kit by
|
||||
. Использованы материалы
|
||||
<a href="https://www.creative-tim.com" target="_blank"
|
||||
>Creative Tim</a
|
||||
>.
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<script setup>
|
||||
import { RouterLink } from "vue-router";
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useWindowsWidth } from "../../assets/js/useWindowsWidth";
|
||||
|
||||
// images
|
||||
import ArrDark from "@/assets/img/down-arrow-dark.svg";
|
||||
import downArrow from "@/assets/img/down-arrow.svg";
|
||||
|
||||
import DownArrWhite from "@/assets/img/down-arrow-white.svg";
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
type: Object,
|
||||
@ -15,9 +17,9 @@ const props = defineProps({
|
||||
color: String,
|
||||
label: String,
|
||||
default: () => ({
|
||||
route: "https://www.creative-tim.com/product/vue-material-kit",
|
||||
route: "/pages/landing-pages/basic",
|
||||
color: "bg-gradient-success",
|
||||
label: "Free Download"
|
||||
label: "Вход / Регистрация"
|
||||
})
|
||||
},
|
||||
transparent: {
|
||||
@ -120,7 +122,7 @@ watch(
|
||||
title="Designed and Coded by Creative Tim"
|
||||
data-placement="bottom"
|
||||
>
|
||||
Material Kit 2
|
||||
LinkedMin
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="navbar-brand d-block d-md-none"
|
||||
@ -134,12 +136,12 @@ watch(
|
||||
title="Designed and Coded by Creative Tim"
|
||||
data-placement="bottom"
|
||||
>
|
||||
Material Design
|
||||
LinkedMin
|
||||
</RouterLink>
|
||||
<a
|
||||
href="https://www.creative-tim.com/product/vue-material-kit-pro"
|
||||
href="/pages/landing-pages/basic"
|
||||
class="btn btn-sm bg-gradient-success mb-0 ms-auto d-lg-none d-block"
|
||||
>Buy Now</a
|
||||
>Вход/Регистрация</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler shadow-none ms-2"
|
||||
@ -175,7 +177,7 @@ watch(
|
||||
:class="getTextColor()"
|
||||
>dashboard</i
|
||||
>
|
||||
Pages
|
||||
Пользователи
|
||||
<img
|
||||
:src="getArrowColor()"
|
||||
alt="down-arrow"
|
||||
@ -198,37 +200,20 @@ watch(
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
|
||||
>
|
||||
Landing Pages
|
||||
Все пользователи
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="{ name: 'about' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>About Us</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'contactus' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Contact Us</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'author' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Author</span>
|
||||
</RouterLink>
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-0 mt-3"
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
|
||||
>
|
||||
Account
|
||||
Все пользователи
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="{ name: 'signin-basic' }"
|
||||
:to="{ name: 'profiles' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Sign In</span>
|
||||
<span>Все пользователи</span>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -237,55 +222,35 @@ watch(
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-0"
|
||||
>
|
||||
Landing Pages
|
||||
Все пользователи
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="{ name: 'about' }"
|
||||
:to="{ name: 'profiles' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>About Us</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'contactus' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Contact Us</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'author' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Author</span>
|
||||
</RouterLink>
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-0 mt-3"
|
||||
>
|
||||
Account
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="{ name: 'signin-basic' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Sign In</span>
|
||||
<span>Все пользователи</span>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a
|
||||
role="button"
|
||||
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||
:class="getTextColor()"
|
||||
id="dropdownMenuBlocks"
|
||||
id="dropdownMenuPages"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
class="material-icons opacity-6 me-2 text-md"
|
||||
:class="getTextColor()"
|
||||
>view_day</i
|
||||
>dashboard</i
|
||||
>
|
||||
Sections
|
||||
Проекты
|
||||
<img
|
||||
:src="getArrowColor()"
|
||||
alt="down-arrow"
|
||||
@ -298,477 +263,84 @@ watch(
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3"
|
||||
aria-labelledby="dropdownMenuBlocks"
|
||||
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||
aria-labelledby="dropdownMenuPages"
|
||||
>
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0"
|
||||
>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="javascript:;"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Page Sections
|
||||
</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img
|
||||
:src="downArrow"
|
||||
alt="down-arrow"
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="row d-none d-lg-block">
|
||||
<div class="col-12 px-4 py-2">
|
||||
<div class="row">
|
||||
<div class="position-relative">
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
|
||||
>
|
||||
Все проекты
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'page-headers' }"
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
|
||||
>
|
||||
Page Headers
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'page-features' }"
|
||||
>
|
||||
Features
|
||||
</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0"
|
||||
>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="javascript:;"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Navigation
|
||||
</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img
|
||||
:src="downArrow"
|
||||
alt="down-arrow"
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
Все проекты
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-navbars' }"
|
||||
:to="{ name: 'projects' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
Navbars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-navtabs' }"
|
||||
>
|
||||
Nav Tabs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-pagination' }"
|
||||
>
|
||||
Pagination
|
||||
<span>Все проекты</span>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0"
|
||||
>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="javascript:;"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Input Areas
|
||||
</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img
|
||||
:src="downArrow"
|
||||
alt="down-arrow"
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isAuthenticated" class="position-relative">
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
|
||||
>
|
||||
Мои проекты
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'inputareas-inputs' }"
|
||||
:to="{ name: 'myprojects' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
Inputs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'inputareas-forms' }"
|
||||
>
|
||||
Forms
|
||||
<span>Мои проекты</span>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0"
|
||||
>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="javascript:;"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Attention Catchers
|
||||
</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img
|
||||
:src="downArrow"
|
||||
alt="down-arrow"
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-alerts' }"
|
||||
>
|
||||
Alerts
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-modals' }"
|
||||
>
|
||||
Modals
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-tooltips-popovers' }"
|
||||
>
|
||||
Tooltips & Popovers
|
||||
</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0"
|
||||
>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="javascript:;"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Elements
|
||||
</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img
|
||||
:src="downArrow"
|
||||
alt="down-arrow"
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-avatars' }"
|
||||
>
|
||||
Avatars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-badges' }"
|
||||
>
|
||||
Badges
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-breadcrumbs' }"
|
||||
>
|
||||
Breadcrumbs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-buttons' }"
|
||||
>
|
||||
Buttons
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-button-groups' }"
|
||||
>
|
||||
Button Groups
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-dropdowns' }"
|
||||
>
|
||||
Dropdowns
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-progress-bars' }"
|
||||
>
|
||||
Progress Bars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-toggles' }"
|
||||
>
|
||||
Toggles
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-typography' }"
|
||||
>
|
||||
Typography
|
||||
</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Page Sections
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'page-headers' }"
|
||||
>
|
||||
Page Headers
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'page-features' }"
|
||||
>
|
||||
Features
|
||||
</RouterLink>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Navigation
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-navbars' }"
|
||||
>
|
||||
Navbars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-navtabs' }"
|
||||
>
|
||||
Nav Tabs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'navigation-pagination' }"
|
||||
>
|
||||
Pagination
|
||||
</RouterLink>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Input Areas
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'inputareas-inputs' }"
|
||||
>
|
||||
Inputs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'inputareas-forms' }"
|
||||
>
|
||||
Forms
|
||||
</RouterLink>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Attention Catchers
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-alerts' }"
|
||||
>
|
||||
Alerts
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-modals' }"
|
||||
>
|
||||
Modals
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'ac-tooltips-popovers' }"
|
||||
>
|
||||
Tooltips & Popovers
|
||||
</RouterLink>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div
|
||||
class="w-100 d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Elements
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-avatars' }"
|
||||
>
|
||||
Avatars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-badges' }"
|
||||
>
|
||||
Badges
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-breadcrumbs' }"
|
||||
>
|
||||
Breadcrumbs
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-buttons' }"
|
||||
>
|
||||
Buttons
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-button-groups' }"
|
||||
>
|
||||
Button Groups
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-dropdowns' }"
|
||||
>
|
||||
Dropdowns
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-progress-bars' }"
|
||||
>
|
||||
Progress Bars
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-toggles' }"
|
||||
>
|
||||
Toggles
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item ps-3 border-radius-md mb-1"
|
||||
:to="{ name: 'el-typography' }"
|
||||
>
|
||||
Typography
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<div
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-0"
|
||||
>
|
||||
Все проекты
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="{ name: 'projects' }"
|
||||
class="dropdown-item border-radius-md"
|
||||
>
|
||||
<span>Все проекты</span>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
|
||||
|
||||
|
||||
<li v-if="isAuthenticated" class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a
|
||||
role="button"
|
||||
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||
:class="getTextColor()"
|
||||
id="dropdownMenuDocs"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
aria-expanded="false">
|
||||
<i
|
||||
class="material-icons opacity-6 me-2 text-md"
|
||||
:class="getTextColor()"
|
||||
>article</i
|
||||
>
|
||||
Docs
|
||||
>
|
||||
Профиль
|
||||
<img
|
||||
:src="getArrowColor()"
|
||||
alt="down-arrow"
|
||||
@ -789,146 +361,98 @@ watch(
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href=" https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
|
||||
href="/ViewMyProfile"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Getting Started
|
||||
Мой Профиль
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>All about overview, quick start, license and
|
||||
contents</span
|
||||
>Просмотр</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href=" https://www.creative-tim.com/learning-lab/vue/colors/material-kit/"
|
||||
href="/EditMyProfile"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Foundation
|
||||
Мой Профиль
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>See our colors, icons and typography</span
|
||||
>Редактирование</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href=" https://www.creative-tim.com/learning-lab/vue/alerts/material-kit/"
|
||||
href="/CreateProject"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Components
|
||||
Создать проект
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>Explore our collection of fully designed
|
||||
components</span
|
||||
>Страница добавления проекта</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="./pages/about-us.html"
|
||||
href="/ViewMyProfile"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Getting Started
|
||||
Мой профиль
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>All about overview, quick start, license and
|
||||
contents</span
|
||||
>Просмотр</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="./pages/about-us.html"
|
||||
href="/ViewMyProfile"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Foundation
|
||||
Мой профиль
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>See our colors, icons and typography</span
|
||||
>Редактирование</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="./pages/about-us.html"
|
||||
href="/CreateProject"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Components
|
||||
Создать проект
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>Explore our collection of fully designed components</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="./pages/about-us.html"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Plugins
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>Check how you can integrate our plugins</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
class="dropdown-item py-2 ps-3 border-radius-md"
|
||||
href="./pages/about-us.html"
|
||||
>
|
||||
<h6
|
||||
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
|
||||
>
|
||||
Utility Classes
|
||||
</h6>
|
||||
<span class="text-sm"
|
||||
>For those who want flexibility, use our utility
|
||||
classes</span
|
||||
>Страница добавления проекта</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a
|
||||
href="https://www.github.com/creativetimofficial/vue-material-kit"
|
||||
class="nav-link d-flex cursor-pointer align-items-center"
|
||||
>
|
||||
<svg
|
||||
width="20px"
|
||||
height="20px"
|
||||
class="material-icons me-2 opacity-6"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
data-testid="GitHubIcon"
|
||||
:fill="props.transparent && '#fff'"
|
||||
>
|
||||
<path
|
||||
d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"
|
||||
></path>
|
||||
</svg>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<ul class="navbar-nav d-lg-block d-none">
|
||||
<li class="nav-item">
|
||||
@ -945,4 +469,4 @@ watch(
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
</template>
|
||||
</template>
|
||||
@ -6,9 +6,12 @@ import router from "./router";
|
||||
// Nucleo Icons
|
||||
import "./assets/css/nucleo-icons.css";
|
||||
import "./assets/css/nucleo-svg.css";
|
||||
import "./assets/css/linkedmin.css";
|
||||
|
||||
import materialKit from "./material-kit";
|
||||
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia());
|
||||
|
||||
@ -1,28 +1,20 @@
|
||||
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 PageHeaders from "../layouts/sections/page-sections/page-headers/HeadersView.vue";
|
||||
import PageFeatures from "../layouts/sections/page-sections/features/FeaturesView.vue";
|
||||
import NavigationNavbars from "../layouts/sections/navigation/navbars/NavbarsView.vue";
|
||||
import NavigationNavTabs from "../layouts/sections/navigation/nav-tabs/NavTabsView.vue";
|
||||
import NavigationPagination from "../layouts/sections/navigation/pagination/PaginationView.vue";
|
||||
import InputAreasInputs from "../layouts/sections/input-areas/inputs/InputsView.vue";
|
||||
import InputAreasForms from "../layouts/sections/input-areas/forms/FormsView.vue";
|
||||
import ACAlerts from "../layouts/sections/attention-catchers/alerts/AlertsView.vue";
|
||||
import ACModals from "../layouts/sections/attention-catchers/modals/ModalsView.vue";
|
||||
import ACTooltipsPopovers from "../layouts/sections/attention-catchers/tooltips-popovers/TooltipsPopoversView.vue";
|
||||
import ElAvatars from "../layouts/sections/elements/avatars/AvatarsView.vue";
|
||||
import ElBadges from "../layouts/sections/elements/badges/BadgesView.vue";
|
||||
import ElBreadcrumbs from "../layouts/sections/elements/breadcrumbs/BreadcrumbsView.vue";
|
||||
import ElButtons from "../layouts/sections/elements/buttons/ButtonsView.vue";
|
||||
import ElButtonGroups from "../layouts/sections/elements/button-groups/ButtonGroupsView.vue";
|
||||
import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vue";
|
||||
import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
|
||||
import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
|
||||
import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
|
||||
import Project from "../views/LandingPages/Project/Project.vue";
|
||||
import Profile from "../views/LandingPages/Profile/Profile.vue";
|
||||
import TopSecretProject from "../views/LandingPages/Project/TopSecretProject.vue";
|
||||
import BasicRegister from "../views/LandingPages/SignIn/BasicRegister.vue";
|
||||
import ForgotPassword from "../views/LandingPages/SignIn/ForgotPassword.vue";
|
||||
import Projects from "../views/LandingPages/Project/AllProjects.vue";
|
||||
import Profiles from "../views/LandingPages/Profile/AllProfiles.vue";
|
||||
import ViewMyProfile from "../views/LandingPages/Profile/AdmireProfile.vue";
|
||||
import EditMyProfile from "../views/LandingPages/Profile/EditProfile.vue";
|
||||
import CreateProject from "../views/LandingPages/Project/AddProject.vue";
|
||||
import EditProject from "../views/LandingPages/Project/EditProject.vue";
|
||||
import MyProjects from "../views/LandingPages/Project/MyProjects.vue";
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@ -31,121 +23,86 @@ const router = createRouter({
|
||||
name: "presentation",
|
||||
component: PresentationView,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/pages/landing-pages/about-us",
|
||||
name: "about",
|
||||
component: AboutView,
|
||||
path: '/project/:id',
|
||||
name: 'project',
|
||||
component: Project
|
||||
},
|
||||
|
||||
{
|
||||
path: "/pages/landing-pages/contact-us",
|
||||
name: "contactus",
|
||||
component: ContactView,
|
||||
path: '/projects',
|
||||
name: 'projects',
|
||||
component: Projects
|
||||
},
|
||||
|
||||
{
|
||||
path: "/pages/landing-pages/author",
|
||||
name: "author",
|
||||
component: AuthorView,
|
||||
path: '/myprojects',
|
||||
name: 'myprojects',
|
||||
component: MyProjects
|
||||
},
|
||||
|
||||
{
|
||||
path: '/CreateProject',
|
||||
name: 'createproject',
|
||||
component: CreateProject
|
||||
},
|
||||
|
||||
{
|
||||
path: '/EditProject/:id',
|
||||
name: 'editproject',
|
||||
component: EditProject
|
||||
},
|
||||
|
||||
{
|
||||
path: '/TopSecret',
|
||||
name: 'topsecretproject',
|
||||
component: TopSecretProject
|
||||
},
|
||||
|
||||
{
|
||||
path: '/profile/:id',
|
||||
name: 'profile',
|
||||
component: Profile
|
||||
},
|
||||
|
||||
{
|
||||
path: '/ViewMyProfile',
|
||||
name: 'viewmyprofile',
|
||||
component: ViewMyProfile
|
||||
},
|
||||
|
||||
{
|
||||
path: '/EditMyProfile',
|
||||
name: 'editmyprofile',
|
||||
component: EditMyProfile
|
||||
},
|
||||
|
||||
{
|
||||
path: '/profiles',
|
||||
name: 'profiles',
|
||||
component: Profiles
|
||||
},
|
||||
|
||||
{
|
||||
path: "/register",
|
||||
name: "register",
|
||||
component: BasicRegister,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/forgot",
|
||||
name: "forgot",
|
||||
component: ForgotPassword,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/pages/landing-pages/basic",
|
||||
name: "signin-basic",
|
||||
component: SignInBasicView,
|
||||
},
|
||||
{
|
||||
path: "/sections/page-sections/page-headers",
|
||||
name: "page-headers",
|
||||
component: PageHeaders,
|
||||
},
|
||||
{
|
||||
path: "/sections/page-sections/features",
|
||||
name: "page-features",
|
||||
component: PageFeatures,
|
||||
},
|
||||
{
|
||||
path: "/sections/navigation/navbars",
|
||||
name: "navigation-navbars",
|
||||
component: NavigationNavbars,
|
||||
},
|
||||
{
|
||||
path: "/sections/navigation/nav-tabs",
|
||||
name: "navigation-navtabs",
|
||||
component: NavigationNavTabs,
|
||||
},
|
||||
{
|
||||
path: "/sections/navigation/pagination",
|
||||
name: "navigation-pagination",
|
||||
component: NavigationPagination,
|
||||
},
|
||||
{
|
||||
path: "/sections/input-areas/inputs",
|
||||
name: "inputareas-inputs",
|
||||
component: InputAreasInputs,
|
||||
},
|
||||
{
|
||||
path: "/sections/input-areas/forms",
|
||||
name: "inputareas-forms",
|
||||
component: InputAreasForms,
|
||||
},
|
||||
{
|
||||
path: "/sections/attention-catchers/alerts",
|
||||
name: "ac-alerts",
|
||||
component: ACAlerts,
|
||||
},
|
||||
{
|
||||
path: "/sections/attention-catchers/modals",
|
||||
name: "ac-modals",
|
||||
component: ACModals,
|
||||
},
|
||||
{
|
||||
path: "/sections/attention-catchers/tooltips-popovers",
|
||||
name: "ac-tooltips-popovers",
|
||||
component: ACTooltipsPopovers,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/avatars",
|
||||
name: "el-avatars",
|
||||
component: ElAvatars,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/badges",
|
||||
name: "el-badges",
|
||||
component: ElBadges,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/breadcrumbs",
|
||||
name: "el-breadcrumbs",
|
||||
component: ElBreadcrumbs,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/buttons",
|
||||
name: "el-buttons",
|
||||
component: ElButtons,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/button-groups",
|
||||
name: "el-button-groups",
|
||||
component: ElButtonGroups,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/dropdowns",
|
||||
name: "el-dropdowns",
|
||||
component: ElDropdowns,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/progress-bars",
|
||||
name: "el-progress-bars",
|
||||
component: ElProgressBars,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/toggles",
|
||||
name: "el-toggles",
|
||||
component: ElToggles,
|
||||
},
|
||||
{
|
||||
path: "/sections/elements/typography",
|
||||
name: "el-typography",
|
||||
component: ElTypography,
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@ -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">
|
||||
Work with an amazing <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>
|
||||
108
src/views/LandingPages/Profile/AdmireProfile.vue
Normal file
108
src/views/LandingPages/Profile/AdmireProfile.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
|
||||
const profileData = ref([]);
|
||||
|
||||
|
||||
const getProfile = async () => {
|
||||
const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`);
|
||||
profileData.value = processProfileData(profileDataRecieved.data);
|
||||
};
|
||||
|
||||
const processProfileData = (data) => {
|
||||
return {
|
||||
...data,
|
||||
name: data.name || '🤷 No Name Provided',
|
||||
location: data.location || '🌍 No Location Provided',
|
||||
short_intro: data.short_intro || '📝 No Short Intro Provided',
|
||||
bio: data.bio || '📘 No Bio Provided',
|
||||
profile_image: data.profile_image || '📷 No Image Provided',
|
||||
social_github: data.social_github || '👨💻 No Github Provided',
|
||||
social_twitter: data.social_twitter || '🐦 No Twitter Provided',
|
||||
social_vk: data.social_vk || '🔵 No VK Provided',
|
||||
social_youtube: data.social_youtube || '▶️ No YouTube Provided',
|
||||
social_website: data.social_website || '🌐 No Website Provided',
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
await getProfile();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h2>Профиль пользователя {{ loggedUserName }}</h2>
|
||||
<h2>{{ profileData.username }}</h2>
|
||||
<p>{{ profileData.email }}</p>
|
||||
<P>Имя: {{ profileData.name }}</P>
|
||||
<img :src="profileData.profile_image" alt="Profile Image">
|
||||
<p>Местоположение: {{ profileData.location }}</p>
|
||||
<p>Краткое описание: {{ profileData.short_intro }}</p>
|
||||
<p>Биография: {{ profileData.bio }}</p>
|
||||
<!--<p>Ссылка на изображение: {{ profileData.profile_image }}</p>-->
|
||||
<p>Ссылка на GitHub: {{ profileData.social_github }}</p>
|
||||
<p>Ссылка на Twitter: {{ profileData.social_twitter }}</p>
|
||||
<p>Ссылка на VK: {{ profileData.social_vk }}</p>
|
||||
<p>Ссылка на YouTube: {{ profileData.social_youtube }}</p>
|
||||
<p>Ссылка на сайт: {{ profileData.social_website }}</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
width: 50%;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(6, 104, 14, 0.281);
|
||||
margin: 5% auto;
|
||||
background-color: #ffffff57;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
/*font-family: 'PressStart2P';*/
|
||||
color:rgb(70, 104, 105);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
p{
|
||||
font-family: 'SpaceMono' monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
button{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
</style>
|
||||
153
src/views/LandingPages/Profile/AllProfiles.vue
Normal file
153
src/views/LandingPages/Profile/AllProfiles.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import axios from 'axios';
|
||||
import { ref } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchResultProjects = ref([]);
|
||||
const searchResultUsers = ref([]);
|
||||
|
||||
const search = async () => {
|
||||
try {
|
||||
const projectsResponse = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${searchQuery.value}`);
|
||||
searchResultProjects.value = projectsResponse.data;
|
||||
|
||||
const usersResponse = await axios.get(`http://somebodyhire.me/api/search/profiles/?search_query=${searchQuery.value}`);
|
||||
searchResultUsers.value = usersResponse.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the search results', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
search();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div>
|
||||
|
||||
<h2 class="result-header">Найдено людей: {{ searchResultUsers.length}} </h2>
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="user in searchResultUsers" :key="user.id">
|
||||
<div class="profile-name"> <h3>{{ user.username }} with id {{ user.id }}</h3></div>
|
||||
<p>{{ user.email }}</p>
|
||||
<a :href="`/profile/${user.id}`">Открыть профиль</a>
|
||||
<a :href="`/profile/${user.id}`">Отправить сообщение</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.searchBar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
/* Makes the search input take up the maximum available width */
|
||||
flex-grow: 1;
|
||||
/* Adds some padding inside the input field */
|
||||
padding: 10px;
|
||||
/* Adds some margin to the right side of the input field */
|
||||
margin-right: 10px;
|
||||
/* Increased the font size a bit */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
/* Adds some padding inside the button */
|
||||
padding: 10px 20px;
|
||||
/* Changes the font size */
|
||||
font-size: 16px;
|
||||
/* Changes the background color of the button */
|
||||
background-color: #3d9132;
|
||||
/* Changes the color of the text inside the button */
|
||||
color: white;
|
||||
/* Makes the border corners rounded */
|
||||
border-radius: 4px;
|
||||
/* Removes the default button border */
|
||||
border: none;
|
||||
/* Changes the cursor to a hand pointer when hovering over the button */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchButton:hover {
|
||||
/* Changes the background color of the button when hovering over it */
|
||||
background-color: #25581e;
|
||||
}
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color:#3d9132;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #3d913248;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
}
|
||||
.profile-name{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
h3{
|
||||
color:rgb(87, 87, 87);
|
||||
}
|
||||
a{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
p{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.result-card {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
200
src/views/LandingPages/Profile/EditProfile.vue
Normal file
200
src/views/LandingPages/Profile/EditProfile.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
const token = computed(() => sessionStorage.getItem('access_token'));
|
||||
|
||||
const profileData = ref([]);
|
||||
const router = useRouter();
|
||||
const debugText = ref('');
|
||||
const selectedImage = ref(null);
|
||||
|
||||
const getProfile = async () => {
|
||||
const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`);
|
||||
profileData.value = processProfileData(profileDataRecieved.data);
|
||||
};
|
||||
|
||||
const processProfileData = (data) => {
|
||||
return {
|
||||
name: data.name || '',
|
||||
email: data.email || '',
|
||||
username: data.username || '',
|
||||
location: data.location || '',
|
||||
short_intro: data.short_intro || '',
|
||||
bio: data.bio || '',
|
||||
social_github: data.social_github || '',
|
||||
social_twitter: data.social_twitter || '',
|
||||
social_vk: data.social_vk || '',
|
||||
social_youtube: data.social_youtube || '',
|
||||
social_website: data.social_website || '',
|
||||
};
|
||||
};
|
||||
|
||||
axios.interceptors.request.use((request) => {
|
||||
if (request.data instanceof FormData) {
|
||||
const formData = request.data;
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value instanceof File) {
|
||||
debugText.value += `\nFile being sent: ${value.name}, size: ${value.size} bytes`;
|
||||
} else {
|
||||
debugText.value += `\n${key}: ${value}`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2);
|
||||
}
|
||||
return request;
|
||||
});
|
||||
|
||||
axios.interceptors.response.use((response) => {
|
||||
debugText.value += '\n\nResponse:\n' + JSON.stringify(response, null, 2);
|
||||
return response;
|
||||
}, (error) => {
|
||||
debugText.value += '\n\nResponse Error:\n' + JSON.stringify(error.toJSON(), null, 2);
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
const onFileChange = (event) => {
|
||||
selectedImage.value = event.target.files[0];
|
||||
debugText.value = `Selected image: ${selectedImage.value.name}`;
|
||||
};
|
||||
|
||||
const updateProfile = async () => {
|
||||
try {
|
||||
const tokenValue = token.value;
|
||||
const headers = {
|
||||
'Authorization': `Bearer ${tokenValue}`,
|
||||
'Content-Type': 'multipart/form-data'
|
||||
};
|
||||
|
||||
// Create a new FormData object
|
||||
const formData = new FormData();
|
||||
|
||||
// Append the profile data
|
||||
Object.entries(profileData.value).forEach(([key, value]) => {
|
||||
formData.append(key, 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');
|
||||
} catch (error) {
|
||||
debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelUpdate = () => {
|
||||
router.push('/ViewMyProfile');
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
await getProfile();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>User Profile: {{ loggedUserName }}</h1>
|
||||
<!--
|
||||
Это поле, в которое выводится весь обмен, происходящий между клиентом и сервером. Нужно для отладки.
|
||||
<textarea readonly v-model="debugText"></textarea> -->
|
||||
|
||||
<!-- Событие происходит в момент загрузки файла. В этот момент в переменную selectedImage записывается файл, который был выбран. -->
|
||||
<input type="file" accept="image/*" @change="onFileChange">
|
||||
|
||||
<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="Полное имя">
|
||||
<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>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: 5% 10%;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(6, 104, 14, 0.281);
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.profile-container input, .profile-container textarea {
|
||||
width: 100%; /* Make inputs and textareas take up the full width of the container */
|
||||
padding: 10px; /* Add some padding */
|
||||
margin-bottom: 15px; /* Add some margin */
|
||||
box-sizing: border-box; /* Ensure padding doesn't affect final dimensions */
|
||||
border: 1px solid #2ca33c; /* Add a border */
|
||||
border-radius: 5px; /* Add rounded corners */
|
||||
}
|
||||
|
||||
/* Style for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.profile-container {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-submit {
|
||||
color: #fff;
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
color: #fff;
|
||||
background-color: #f44336;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
105
src/views/LandingPages/Profile/Profile.vue
Normal file
105
src/views/LandingPages/Profile/Profile.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import NavbarDefault from '../../../examples/navbars/NavbarDefault.vue';
|
||||
|
||||
const profileId = ref(null);
|
||||
const route = useRoute();
|
||||
const profileData = ref([]);
|
||||
|
||||
onMounted(async() => {
|
||||
profileId.value = route.params.id;
|
||||
await getProfile();
|
||||
});
|
||||
|
||||
|
||||
const getProfile = async () => {
|
||||
const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${profileId.value}/`);
|
||||
profileData.value = processProfileData(profileDataRecieved.data);
|
||||
|
||||
};
|
||||
const processProfileData = (data) => {
|
||||
return {
|
||||
...data,
|
||||
name: data.name || '🤷 No Name Provided',
|
||||
location: data.location || '🌍 No Location Provided',
|
||||
short_intro: data.short_intro || '📝 No Short Intro Provided',
|
||||
bio: data.bio || '📘 No Bio Provided',
|
||||
profile_image: data.profile_image || '📷 No Image Provided',
|
||||
social_github: data.social_github || '👨💻 No Github Provided',
|
||||
social_twitter: data.social_twitter || '🐦 No Twitter Provided',
|
||||
social_vk: data.social_vk || '🔵 No VK Provided',
|
||||
social_youtube: data.social_youtube || '▶️ No YouTube Provided',
|
||||
social_website: data.social_website || '🌐 No Website Provided',
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>Профиль пользователя</h1>
|
||||
<h2>{{ profileData.username }}</h2>
|
||||
<p>{{ profileData.email }}</p>
|
||||
<P>Имя: {{ profileData.name }}</P>
|
||||
<p>Местоположение: {{ profileData.location }}</p>
|
||||
<p>Краткое описание: {{ profileData.short_intro }}</p>
|
||||
<p>Биография: {{ profileData.bio }}</p>
|
||||
<!--<p>Ссылка на изображение: {{ profileData.profile_image }}</p>-->
|
||||
<p>Ссылка на GitHub: {{ profileData.social_github }}</p>
|
||||
<p>Ссылка на Twitter: {{ profileData.social_twitter }}</p>
|
||||
<p>Ссылка на VK: {{ profileData.social_vk }}</p>
|
||||
<p>Ссылка на YouTube: {{ profileData.social_youtube }}</p>
|
||||
<p>Ссылка на сайт: {{ profileData.social_website }}</p>
|
||||
<button>Message</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
width: 50%;
|
||||
margin: 5% 25%;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(6, 104, 14, 0.281);
|
||||
background-color: #ffffff57;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
/*font-family: 'PressStart2P';*/
|
||||
color:rgb(70, 104, 105);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
p{
|
||||
font-family: 'SpaceMono' monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
button{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 25%;
|
||||
}
|
||||
button:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
</style>
|
||||
147
src/views/LandingPages/Project/AddProject.vue
Normal file
147
src/views/LandingPages/Project/AddProject.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref, computed } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
const token = computed(() => sessionStorage.getItem('access_token'));
|
||||
|
||||
const projectData = ref({
|
||||
title: "",
|
||||
description: "",
|
||||
featured_image: "",
|
||||
demo_link: null,
|
||||
source_link: null,
|
||||
vote_total: 0,
|
||||
vote_ratio: 0,
|
||||
owner: userId.value,
|
||||
tags: []
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const debugText = ref('');
|
||||
|
||||
// Axios request and response interceptors
|
||||
axios.interceptors.request.use((request) => {
|
||||
debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2);
|
||||
return request;
|
||||
});
|
||||
|
||||
axios.interceptors.response.use((response) => {
|
||||
debugText.value += '\n\nResponse:\n' + JSON.stringify(response, null, 2);
|
||||
return response;
|
||||
}, (error) => {
|
||||
debugText.value += '\n\nResponse Error:\n' + JSON.stringify(error.toJSON(), null, 2);
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
const createProject = async () => {
|
||||
try {
|
||||
const headers = { 'Authorization': `Bearer ${token.value}` };
|
||||
const data = {
|
||||
title: projectData.value.title,
|
||||
description: projectData.value.description,
|
||||
demo_link: projectData.value.demo_link,
|
||||
source_link: projectData.value.source_link,
|
||||
vote_total: projectData.value.vote_total,
|
||||
vote_ratio: projectData.value.vote_ratio,
|
||||
owner: userId.value
|
||||
};
|
||||
const response = await axios.post('http://somebodyhire.me/api/projects/create/', data, { headers });
|
||||
router.push(`/project/${response.data.id}`);
|
||||
} catch (error) {
|
||||
debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelCreate = () => {
|
||||
router.push('/projects');
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>Create a Project for {{ loggedUserName }}</h1>
|
||||
<textarea readonly v-model="debugText"></textarea>
|
||||
<input type="text" v-model="projectData.title" placeholder="Title">
|
||||
<input type="text" v-model="projectData.description" placeholder="Description">
|
||||
<textarea v-model="projectData.featured_image" placeholder="Link to featured image"></textarea>
|
||||
<textarea v-model="projectData.demo_link" placeholder="Demo link"></textarea>
|
||||
<textarea v-model="projectData.source_link" placeholder="Source code link"></textarea>
|
||||
<button @click="createProject" class="btn-submit">Submit</button>
|
||||
<button @click="cancelCreate" class="btn-cancel">Cancel</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.profile-container input, .profile-container textarea {
|
||||
width: 100%; /* Make inputs and textareas take up the full width of the container */
|
||||
padding: 10px; /* Add some padding */
|
||||
margin-bottom: 15px; /* Add some margin */
|
||||
box-sizing: border-box; /* Ensure padding doesn't affect final dimensions */
|
||||
border: 1px solid #ccc; /* Add a border */
|
||||
border-radius: 5px; /* Add rounded corners */
|
||||
}
|
||||
|
||||
/* Style for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.profile-container {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-submit {
|
||||
color: #fff;
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
color: #fff;
|
||||
background-color: #f44336;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
152
src/views/LandingPages/Project/AllProjects.vue
Normal file
152
src/views/LandingPages/Project/AllProjects.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import axios from 'axios';
|
||||
import { ref } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchResultProjects = ref([]);
|
||||
const searchResultUsers = ref([]);
|
||||
|
||||
const search = async () => {
|
||||
try {
|
||||
const projectsResponse = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${searchQuery.value}`);
|
||||
searchResultProjects.value = projectsResponse.data;
|
||||
|
||||
const usersResponse = await axios.get(`http://somebodyhire.me/api/search/profiles/?search_query=${searchQuery.value}`);
|
||||
searchResultUsers.value = usersResponse.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the search results', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
search();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div>
|
||||
<h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="project in searchResultProjects" :key="project.id">
|
||||
<div class="project-title"> <h3>{{ project.title }} with ID {{ project.id }}</h3></div>
|
||||
<p>{{ project.description }}</p>
|
||||
<a :href="`/project/${project.id}`">Страница проекта</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.searchBar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
/* Makes the search input take up the maximum available width */
|
||||
flex-grow: 1;
|
||||
/* Adds some padding inside the input field */
|
||||
padding: 10px;
|
||||
/* Adds some margin to the right side of the input field */
|
||||
margin-right: 10px;
|
||||
/* Increased the font size a bit */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
/* Adds some padding inside the button */
|
||||
padding: 10px 20px;
|
||||
/* Changes the font size */
|
||||
font-size: 16px;
|
||||
/* Changes the background color of the button */
|
||||
background-color: #3d9132;
|
||||
/* Changes the color of the text inside the button */
|
||||
color: white;
|
||||
/* Makes the border corners rounded */
|
||||
border-radius: 4px;
|
||||
/* Removes the default button border */
|
||||
border: none;
|
||||
/* Changes the cursor to a hand pointer when hovering over the button */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchButton:hover {
|
||||
/* Changes the background color of the button when hovering over it */
|
||||
background-color: #25581e;
|
||||
}
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color:#3d9132;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #3d913248;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
}
|
||||
.project-title{
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
h3{
|
||||
color:rgb(87, 87, 87);
|
||||
}
|
||||
a{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
p{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.result-card {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
164
src/views/LandingPages/Project/EditProject.vue
Normal file
164
src/views/LandingPages/Project/EditProject.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
const token = computed(() => sessionStorage.getItem('access_token'));
|
||||
|
||||
const projectData = ref([]);
|
||||
const router = useRouter();
|
||||
const debugText = ref('');
|
||||
const projectId = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
|
||||
axios.interceptors.request.use((request) => {
|
||||
debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2);
|
||||
return request;
|
||||
});
|
||||
|
||||
axios.interceptors.response.use((response) => {
|
||||
debugText.value += '\n\nResponse:\n' + JSON.stringify(response, null, 2);
|
||||
return response;
|
||||
}, (error) => {
|
||||
debugText.value += '\n\nResponse Error:\n' + JSON.stringify(error.toJSON(), null, 2);
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
const getProject = async () => {
|
||||
try {
|
||||
const projectDataRecieved = await axios.get(`http://somebodyhire.me/api/projects/${projectId.value}/`);
|
||||
projectData.value = projectDataRecieved.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the project data', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const updateProject = async () => {
|
||||
try {
|
||||
const headers = { 'Authorization': `Bearer ${token.value}` };
|
||||
const data = {
|
||||
title: projectData.value.title,
|
||||
description: projectData.value.description,
|
||||
demo_link: projectData.value.demo_link,
|
||||
source_link: projectData.value.source_link,
|
||||
tags: projectData.value.tags,
|
||||
|
||||
};
|
||||
const response = await axios.patch(`http://somebodyhire.me/api/projects/${projectId.value}/`, data, { headers });
|
||||
router.push(`/project/${response.data.id}`);
|
||||
} catch (error) {
|
||||
debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelUpdate = () => {
|
||||
router.push('/myprojects');
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
projectId.value = route.params.id;
|
||||
await getProject();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<H1> Страница Редактирования Проекта {{ projectId }}</H1>
|
||||
<div v-if="!isAuthenticated">
|
||||
<h1>Вы не авторизованы</h1>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if = "userId == projectData.owner">
|
||||
<h1>User Profile: {{ loggedUserName }}</h1>
|
||||
<textarea readonly v-model="debugText"></textarea>
|
||||
<input type="text" v-model="projectData.title" placeholder="Title">
|
||||
<input type="text" v-model="projectData.description" placeholder="Description">
|
||||
<textarea v-model="projectData.demo_link" placeholder="Demo link"></textarea>
|
||||
<textarea v-model="projectData.source_link" placeholder="Source code link"></textarea>
|
||||
<textarea v-model="projectData.tags" placeholder="Tags"></textarea>
|
||||
<button @click="updateProject" class="btn-submit">Update</button>
|
||||
<button @click="cancelUpdate" class="btn-cancel">Cancel</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Вы не являетесь владельцем проекта</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.profile-container input, .profile-container textarea {
|
||||
width: 100%; /* Make inputs and textareas take up the full width of the container */
|
||||
padding: 10px; /* Add some padding */
|
||||
margin-bottom: 15px; /* Add some margin */
|
||||
box-sizing: border-box; /* Ensure padding doesn't affect final dimensions */
|
||||
border: 1px solid #ccc; /* Add a border */
|
||||
border-radius: 5px; /* Add rounded corners */
|
||||
}
|
||||
|
||||
/* Style for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.profile-container {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-submit {
|
||||
color: #fff;
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
color: #fff;
|
||||
background-color: #f44336;
|
||||
border: none;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
102
src/views/LandingPages/Project/MyProjects.vue
Normal file
102
src/views/LandingPages/Project/MyProjects.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, computed } from "vue";
|
||||
import axios from 'axios';
|
||||
import { ref } from "vue";
|
||||
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchResultProjects = ref([]);
|
||||
const searchResultUsers = ref([]);
|
||||
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const username = computed(() => sessionStorage.getItem('username'));
|
||||
|
||||
const search = async () => {
|
||||
try {
|
||||
const projectsResponse = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${searchQuery.value}`);
|
||||
searchResultProjects.value = projectsResponse.data;
|
||||
|
||||
const usersResponse = await axios.get(`http://somebodyhire.me/api/search/profiles/?search_query=${searchQuery.value}`);
|
||||
searchResultUsers.value = usersResponse.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the search results', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
search();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div>
|
||||
<h2 class="result-header">Проекты пользователя {{ username }}</h2>
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="project in searchResultProjects" :key="project.id">
|
||||
<div v-if = "project.owner == userId" class="project-owner-note">
|
||||
<h3>{{ project.title }} with ID {{ project.id }}</h3>
|
||||
<p>{{ project.description }}</p>
|
||||
<p>Создатель: {{ project.owner }} </p>
|
||||
<a :href="`/project/${project.id}`">Страница проекта</a>
|
||||
<p></p>
|
||||
<a :href="`/editproject/${project.id}`">Редактирование проекта</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.searchBar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(92, 90, 90, 0.5);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.result-card {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
171
src/views/LandingPages/Project/Project.vue
Normal file
171
src/views/LandingPages/Project/Project.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import NavbarDefault from '../../../examples/navbars/NavbarDefault.vue';
|
||||
|
||||
|
||||
const projectId = ref(null);
|
||||
const route = useRoute();
|
||||
const projectData = ref([]);
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
const token = computed(() => sessionStorage.getItem('access_token'));
|
||||
|
||||
onMounted(async() => {
|
||||
projectId.value = route.params.id;
|
||||
await getProject();
|
||||
});
|
||||
|
||||
|
||||
const getProject = async () => {
|
||||
try {
|
||||
const projectDataRecieved = await axios.get(`http://somebodyhire.me/api/projects/${projectId.value}/`);
|
||||
projectData.value = projectDataRecieved.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the project data', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div v-if="projectData" class="project-container">
|
||||
<h1 class="project-title">Проект номер: {{ projectData.id }}</h1>
|
||||
<h2 class="project-subtitle">{{ projectData.title }}</h2>
|
||||
<div v-if = "projectData.owner == userId" class="project-owner-note">
|
||||
<a :href="`/editproject/${projectData.id}`">Редактирование проекта</a>
|
||||
</div>
|
||||
<p class="project-description">{{ projectData.description }}</p>
|
||||
<img class="project-image" :src="projectData.featured_image" alt="Featured image">
|
||||
<p v-if="projectData.demo_link" class="project-demo-link">Demo Link: <a :href="projectData.demo_link">{{ projectData.demo_link }}</a></p>
|
||||
<p v-if="projectData.source_link" class="project-source-link">Source Link: <a :href="projectData.source_link">{{ projectData.source_link }}</a></p>
|
||||
<p class="project-votes">Total Votes: {{ projectData.vote_total }}</p>
|
||||
<p class="project-vote-ratio">Vote Ratio: {{ projectData.vote_ratio }}</p>
|
||||
<p class="project-created">Created On: {{ new Date(projectData.created).toLocaleDateString() }}</p>
|
||||
<p class="project-owner-id">Owner ID: {{ projectData.owner }}</p>
|
||||
<p class="project-tags">Tags:
|
||||
<span v-for="(tag, index) in projectData.tags" :key="index" class="project-tag">
|
||||
{{ tag }}<span v-if="index < projectData.tags.length - 1">, </span>
|
||||
</span>
|
||||
</p>
|
||||
<h3>Feedback</h3>
|
||||
<div class="feedback">
|
||||
<input name="username" readonly placeholder="Надо вставить username"/>
|
||||
<select id="selectvalue">
|
||||
<option>Vote Up</option>
|
||||
<option>Vote Down</option>
|
||||
</select>
|
||||
<textarea name="comment" v-model="message" placeholder="Напишите комментарий"></textarea>
|
||||
<button>Отправить</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.project-container {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
background-color: #3d913257;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.feedback {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
flex-direction: column
|
||||
}
|
||||
input, textarea, select, option{
|
||||
border: 1px solid #3d913257;
|
||||
border-radius: 5px;
|
||||
border-radius: 10px;
|
||||
width: 60%;
|
||||
margin-bottom: 1%;
|
||||
padding: 1%;
|
||||
background-color: #3d91322d;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.project-subtitle {
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.project-owner-note {
|
||||
font-size: 16px;
|
||||
color: #777;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.project-demo-link, .project-source-link {
|
||||
font-size: 16px;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-votes, .project-vote-ratio, .project-created, .project-owner-id {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.project-tags {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.project-tag {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
padding: 2px 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
/*font-family: 'PressStart2P';*/
|
||||
color:rgb(70, 104, 105);
|
||||
}
|
||||
p{
|
||||
font-family: 'SpaceMono' monospace;
|
||||
}
|
||||
button{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 60%;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
button:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
</style>
|
||||
|
||||
30
src/views/LandingPages/Project/TopSecretProject.vue
Normal file
30
src/views/LandingPages/Project/TopSecretProject.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<!-- Шаблон для страницы, содержимое которой видно только зарегистрированным пользователям -->
|
||||
|
||||
<script setup>
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
// example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import Header from "@/examples/Header.vue";
|
||||
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<DefaultNavbar />
|
||||
|
||||
<Header>
|
||||
<div v-if="isAuthenticated">
|
||||
<p>Наш главный секрет</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>здесь ничего нет</p>
|
||||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
0
src/views/LandingPages/Project/ViewProject.vue
Normal file
0
src/views/LandingPages/Project/ViewProject.vue
Normal file
177
src/views/LandingPages/SignIn/BasicRegister.vue
Normal file
177
src/views/LandingPages/SignIn/BasicRegister.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import axios from 'axios';
|
||||
import { computed } from "vue";
|
||||
|
||||
// example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import Header from "@/examples/Header.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const email = ref(''); // Add email
|
||||
const errorMessage = ref('');
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
|
||||
|
||||
|
||||
|
||||
|
||||
// New register function
|
||||
const register = async () => {
|
||||
if (!username.value || !password.value || !email.value) {
|
||||
errorMessage.value = "Please fill in all fields.";
|
||||
} else {
|
||||
const url = 'http://somebodyhire.me/api/register/';
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
const body = {
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
email: email.value, // include email in the request body
|
||||
is_staff: false
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.post(url, body, { headers });
|
||||
errorMessage.value = `Registration successful. Welcome ${response.data.username}!`; // Display success message
|
||||
sessionStorage.setItem('access_token', response.data.token); // Save the access token in sessionStorage
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
// The request was made and the server responded with a status code
|
||||
// that falls out of the range of 2xx
|
||||
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nResponse:\nStatus: ${error.response.status}\nHeaders: ${JSON.stringify(error.response.headers)}\nBody: ${JSON.stringify(error.response.data)}`;
|
||||
} else if (error.request) {
|
||||
// The request was made but no response was received
|
||||
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: No response received from server. Please try again later.`;
|
||||
} else {
|
||||
// Something happened in setting up the request that triggered an error
|
||||
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: ${error.message}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
email: '',
|
||||
errorMessage: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
register() {
|
||||
this.username = username.value;
|
||||
this.password = password.value;
|
||||
this.email = email.value;
|
||||
register(); // Call the register function
|
||||
},
|
||||
},
|
||||
};
|
||||
</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"
|
||||
>
|
||||
Регистрация
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" class="text-start">
|
||||
<div>
|
||||
<div>
|
||||
<!-- This will be displayed if the user is not authenticated -->
|
||||
<p>Пожалуйста, зарегистрируйтесь</p>
|
||||
<p>Пароль должен быть не менее 8 символов, и не быть похожим на имя пользователя или адрес почты</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<input v-model="username" type="text" placeholder="Имя пользователя" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<input v-model="password" type="password" placeholder="Пароль" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn bg-gradient-dark w-100 my-4 mb-2"
|
||||
@click="register"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="errorMessage">
|
||||
<p>{{ errorMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Уже есть аккаунт?
|
||||
<a
|
||||
href="/pages/landing-pages/basic"
|
||||
class="text-success text-gradient font-weight-bold"
|
||||
>Войти</a
|
||||
>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
@ -1,21 +1,118 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import axios from 'axios';
|
||||
import { computed } 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";
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const errorMessage = ref('');
|
||||
|
||||
//Это блок для работы с хранилищем сессии
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
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.";
|
||||
} else {
|
||||
const url = 'http://somebodyhire.me/api/token/';
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
const body = {
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.post(url, body, { headers });
|
||||
sessionStorage.setItem('access_token', response.data.access);
|
||||
sessionStorage.setItem('username', username.value);
|
||||
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) {
|
||||
errorMessage.value = "Incorrect login or password."; // Simplified error message
|
||||
} else if (error.request) {
|
||||
errorMessage.value = "No response received from server. Please try again later.";
|
||||
} else {
|
||||
errorMessage.value = error.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
sessionStorage.removeItem('access_token');
|
||||
sessionStorage.removeItem('username'); // Also clear the username from sessionStorage
|
||||
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
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
errorMessage: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (!this.username || !this.password) {
|
||||
this.errorMessage = "Please fill in both fields.";
|
||||
} else {
|
||||
// Implement login logic here
|
||||
this.errorMessage = `Can't login now, you are trying to sign in with login: ${this.username} and password: ${this.password}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<DefaultNavbar transparent />
|
||||
<Header>
|
||||
@ -41,131 +138,86 @@ onMounted(() => {
|
||||
<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>
|
||||
<div v-if="isAuthenticated">
|
||||
<!-- This will only be displayed if the user is authenticated -->
|
||||
<p>Вы вошли в аккаунт {{ loggedUserName }}</p>
|
||||
<p>
|
||||
<a href="/ViewMyProfile">Перейти в профиль.</a>
|
||||
</p>
|
||||
<!-- Это должно быть видно только админам -->
|
||||
<div v-if="isStaff">
|
||||
<p>
|
||||
<a href="/admin">Перейти в панель администратора.</a>
|
||||
</p>
|
||||
</div>
|
||||
<button @click="logout">Выход</button>
|
||||
</div>
|
||||
|
||||
<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?
|
||||
<div v-else>
|
||||
<!-- This will be displayed if the user is not authenticated -->
|
||||
<p>Пожалуйста, введите логин и пароль</p>
|
||||
|
||||
<div>
|
||||
<input v-model="username" type="text" placeholder="Имя пользователя" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input v-model="password" type="password" placeholder="Пароль" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn bg-gradient-dark w-100 my-4 mb-2"
|
||||
@click="login"
|
||||
>
|
||||
Войти
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Нет аккаунта?
|
||||
<a
|
||||
href="#"
|
||||
href="/register"
|
||||
class="text-success text-gradient font-weight-bold"
|
||||
>Sign up</a
|
||||
>Зарегистироваться</a
|
||||
>
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
|
||||
<a
|
||||
href="/forgot"
|
||||
class="text-success text-gradient font-weight-bold"
|
||||
>Забыли пароль</a
|
||||
>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="errorMessage">
|
||||
<p>{{ errorMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
|
||||
33
src/views/LandingPages/SignIn/ForgotPassword.vue
Normal file
33
src/views/LandingPages/SignIn/ForgotPassword.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<!-- Шаблон для страницы, содержимое которой видно только зарегистрированным пользователям -->
|
||||
|
||||
<script setup>
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
// example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import Header from "@/examples/Header.vue";
|
||||
|
||||
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<DefaultNavbar />
|
||||
|
||||
<Header>
|
||||
<div>
|
||||
<h1>Забыли пароль?</h1>
|
||||
</div>
|
||||
<div v-if="isAuthenticated">
|
||||
<p>Как же ты зашёл тогда?</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Очень жаль</p>
|
||||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
@ -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,33 +1,22 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import { onMounted, onUnmounted, computed, } from "vue";
|
||||
|
||||
//example components
|
||||
import NavbarDefault from "../..//examples/navbars/NavbarDefault.vue";
|
||||
import DefaultFooter from "../../examples/footers/FooterDefault.vue";
|
||||
import Header from "../../examples/Header.vue";
|
||||
import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
|
||||
|
||||
// sections
|
||||
import PresentationCounter from "./Sections/PresentationCounter.vue";
|
||||
import PresentationPages from "./Sections/PresentationPages.vue";
|
||||
import PresentationExample from "./Sections/PresentationExample.vue";
|
||||
import data from "./Sections/Data/designBlocksData";
|
||||
import BuiltByDevelopers from "./Components/BuiltByDevelopers.vue";
|
||||
import PresentationTestimonials from "./Sections/PresentationTestimonials.vue";
|
||||
import PresentationInformation from "./Sections/PresentationInformation.vue";
|
||||
import PresentationSearch from "./Sections/PresentationSearch.vue";
|
||||
|
||||
|
||||
//images
|
||||
import vueMkHeader from "@/assets/img/vue-mk-header.jpg";
|
||||
import wavesWhite from "@/assets/img/waves-white.svg";
|
||||
import logoBootstrap from "@/assets/img/logos/bootstrap5.jpg";
|
||||
import logoTailwind from "@/assets/img/logos/icon-tailwind.jpg";
|
||||
import logoVue from "@/assets/img/logos/vue.jpg";
|
||||
import logoAngular from "@/assets/img/logos/angular.jpg";
|
||||
import logoReact from "@/assets/img/logos/react.jpg";
|
||||
import logoSketch from "@/assets/img/logos/sketch.jpg";
|
||||
import vueMkHeader from "@/assets/img/space-background.jpg";
|
||||
|
||||
//authentification
|
||||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||||
|
||||
//hooks
|
||||
const body = document.getElementsByTagName("body")[0];
|
||||
@ -41,6 +30,31 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import PresentationCounter from "./Sections/PresentationCounter.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projects: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const response = await axios.get("http://somebodyhire.me/api/projects/");
|
||||
this.projects = response.data;
|
||||
}
|
||||
catch (error) {
|
||||
console.error("There was an error fetching the projects", error);
|
||||
}
|
||||
},
|
||||
components: { PresentationCounter }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
@ -55,243 +69,57 @@ onUnmounted(() => {
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 text-center mx-auto position-relative">
|
||||
<h1
|
||||
class="text-white pt-3 mt-n5 me-2"
|
||||
:style="{ display: 'inline-block ' }"
|
||||
>
|
||||
Material Kit 2
|
||||
</h1>
|
||||
<p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500' }">
|
||||
Start the Development With Bootstrap 5 Design System inspired by
|
||||
Material Design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<PresentationCounter />
|
||||
<PresentationInformation />
|
||||
<PresentationExample :data="data" />
|
||||
<PresentationPages />
|
||||
<BuiltByDevelopers />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<FilledInfoCard
|
||||
class="p-4"
|
||||
:color="{ text: 'white', background: 'bg-gradient-success' }"
|
||||
:icon="{ component: 'flag', color: 'white' }"
|
||||
title="Getting Started"
|
||||
description="Check the possible ways of working with our product and the necessary files for building your own project."
|
||||
:action="{
|
||||
route:
|
||||
'https://www.creative-tim.com/learning-lab/vue/overview/material-kit/',
|
||||
label: { text: 'Let\'s start', color: 'white' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<FilledInfoCard
|
||||
class="px-lg-1 mt-lg-0 mt-4 p-4"
|
||||
height="h-100"
|
||||
:icon="{ component: 'precision_manufacturing', color: 'success' }"
|
||||
title="Plugins"
|
||||
description="Get inspiration and have an overview about the plugins that we
|
||||
used to create the Material Kit."
|
||||
:action="{
|
||||
route:
|
||||
'https://www.creative-tim.com/learning-lab/vue/input/material-kit/',
|
||||
label: { text: 'Read more' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<FilledInfoCard
|
||||
class="px-lg-1 mt-lg-0 mt-4 p-4"
|
||||
:icon="{ component: 'receipt_long', color: 'success' }"
|
||||
title="Utility Classes"
|
||||
description="Material Kit is giving you a lot of pre-made elements. For those
|
||||
who want flexibility, we included many utility classes."
|
||||
:action="{
|
||||
route:
|
||||
'https://www.creative-tim.com/learning-lab/vue/utilities/material-kit/',
|
||||
label: { text: 'Read more' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PresentationTestimonials />
|
||||
|
||||
<div
|
||||
class="container-fluid mt-sm-5 border-radius-xl"
|
||||
:style="{
|
||||
background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))'
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
|
||||
:style="{
|
||||
backgroundImage: `url(${wavesWhite})`
|
||||
}"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark"></span>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-center p-5">
|
||||
<div class="col-lg-8 ms-lg-5 text-center">
|
||||
<h3 class="text-white">
|
||||
Do you love this awesome UI Kit from Vuejs & Bootstrap?
|
||||
</h3>
|
||||
<p class="text-white text-md">
|
||||
Cause if you do, it can be yours for FREE. Hit the button
|
||||
below to navigate to Creative Tim where you can <br />
|
||||
find the Design System in HTML. Start a new project or give an
|
||||
old Bootstrap project a new look!
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="https://www.creative-tim.com/product/vue-material-kit"
|
||||
class="btn btn-sm mb-0 bg-gradient-success px-5 py-3 mt-4"
|
||||
>Download Now</a
|
||||
>
|
||||
</div>
|
||||
<div v-if="isAuthenticated">
|
||||
<h2
|
||||
class="text-white pt-3 mt-n5 me-2"
|
||||
:style="{ display: 'inline-block ', fontFamily: 'PressStart2P, sans-serif' }"
|
||||
>
|
||||
Привет, {{ loggedUserName }}!</h2>
|
||||
<p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500', fontFamily: 'PressStart2P, sans-serif' }">
|
||||
В поисках чего-то интересного?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="d-flex flex-column w-100 text-center p-5 mb-8">
|
||||
<h3>Available on these technologies</h3>
|
||||
<div class="d-flex justify-content-center mt-3 flex-wrap">
|
||||
<a
|
||||
href="https://www.creative-tim.com/product/material-kit"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Bootstrap 5 - Most popular front-end component library"
|
||||
>
|
||||
<img
|
||||
:src="logoBootstrap"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="opacity-5 ms-3"
|
||||
href="#"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Coming Soon"
|
||||
>
|
||||
<img
|
||||
:src="logoTailwind"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/product/vue-material-kit-pro"
|
||||
class="mx-3"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Vue.js - Is a Progressive JavaScript Framework"
|
||||
>
|
||||
<img
|
||||
:src="logoVue"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="opacity-5"
|
||||
href="#"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Coming Soon"
|
||||
>
|
||||
<img
|
||||
:src="logoAngular"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/product/material-kit-react-pro"
|
||||
class="mx-3"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="React – A JavaScript library for building user interfaces"
|
||||
>
|
||||
<img
|
||||
:src="logoReact"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="opacity-5"
|
||||
href="#"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Coming Soon"
|
||||
>
|
||||
<img
|
||||
:src="logoSketch"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
:style="{ height: '90px' }"
|
||||
/>
|
||||
</a>
|
||||
<div v-else>
|
||||
<h1
|
||||
class="text-white pt-3 mt-n5 me-2"
|
||||
:style="{ display: 'inline-block ', fontFamily: 'PressStart2P, sans-serif' }">LinkedMin</h1>
|
||||
<p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500', fontFamily: 'PressStart2P, sans-serif' }">
|
||||
Показывай себя и свои проекты.
|
||||
Находи вдохновение, коллег и новые знания.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 ms-auto">
|
||||
<h4 class="mb-1">Thank you for your support!</h4>
|
||||
<p class="lead mb-0">We deliver the best web products</p>
|
||||
</div>
|
||||
<div class="col-lg-5 me-lg-auto my-lg-auto text-lg-end mt-5">
|
||||
<MaterialSocialButton
|
||||
route="https://twitter.com/intent/tweet?text=Check%20Material%20Design%20System%20made%20by%20%40CreativeTim%20%23webdesign%20%23designsystem%20%23bootstrap5&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-design-system-pro"
|
||||
component="twitter"
|
||||
color="twitter"
|
||||
label="Tweet"
|
||||
/>
|
||||
<MaterialSocialButton
|
||||
route="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-design-system-pro"
|
||||
component="facebook-square"
|
||||
color="facebook"
|
||||
label="Share"
|
||||
/>
|
||||
<MaterialSocialButton
|
||||
route=""
|
||||
component="pinterest"
|
||||
color="pinterest"
|
||||
label="Pin it"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<PresentationSearch />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
<PresentationCounter />
|
||||
<DefaultFooter />
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.project-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.project-card {
|
||||
flex-basis: calc(33.33% - 1em); /* 1em is for margin */
|
||||
margin: 0.5em;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
21
src/views/Presentation/Sections/Data/Untitled-1.js
Normal file
21
src/views/Presentation/Sections/Data/Untitled-1.js
Normal file
@ -0,0 +1,21 @@
|
||||
const axios = require('axios');
|
||||
|
||||
async function testAPI() {
|
||||
try {
|
||||
const response = await axios.get('http://somebodyhire.me/api/projects/');
|
||||
|
||||
const items = response.data.map((project) => ({
|
||||
image: project.featured_image,
|
||||
title: project.title,
|
||||
subtitle: project.description,
|
||||
route: project.id,
|
||||
pro: false // replace with actual condition for 'pro'
|
||||
}));
|
||||
|
||||
console.log(items[0]);
|
||||
} catch (error) {
|
||||
console.error('Error connecting to API:', error);
|
||||
}
|
||||
}
|
||||
|
||||
testAPI();
|
||||
@ -28,8 +28,60 @@ import imgAlert from "@/assets/img/alerts.jpg";
|
||||
import imgPopover from "@/assets/img/popovers.jpg";
|
||||
import imgModal from "@/assets/img/modals.jpg";
|
||||
import imgDropdowns from "@/assets/img/dropdowns.jpg";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
// async function getProjects() {
|
||||
// try {
|
||||
// const response = await axios.get('http://somebodyhire.me/api/projects/');
|
||||
|
||||
// // Map the response to your desired structure
|
||||
// const items = response.data.map((project) => ({
|
||||
// image: project.featured_image,
|
||||
// title: project.title,
|
||||
// subtitle: project.description,
|
||||
// route: project.id,
|
||||
// pro: false
|
||||
// }));
|
||||
|
||||
// return items;
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
// }
|
||||
|
||||
// export default async function getProjectData() {
|
||||
// const items = await getProjects();
|
||||
|
||||
// return [
|
||||
// {
|
||||
// heading: "Проекты",
|
||||
// description: "Проекты наших пользователей",
|
||||
// items: items,
|
||||
// },
|
||||
// ];
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
export default [
|
||||
{
|
||||
heading: "Проекты",
|
||||
description:
|
||||
"Проекты наших пользователей",
|
||||
items: [
|
||||
{
|
||||
image: `${imagesPrefix}/headers.jpg`,
|
||||
title: "Проект",
|
||||
subtitle: "Nope",
|
||||
route: "page-headers",
|
||||
pro: false
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
heading: "Design Blocks",
|
||||
description:
|
||||
|
||||
@ -2,6 +2,36 @@
|
||||
import DefaultCounterCard from "../../../examples/cards/counterCards/DefaultCounterCard.vue";
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectsCount: 0, // This data property will hold the count of projects
|
||||
usersCount: 0, // This data property will hold the count of users
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
// Fetch the projects data from the server
|
||||
const projectsResponse = await axios.get('http://somebodyhire.me/api/projects/');
|
||||
// Set the projectsCount to the number of projects received from the server
|
||||
this.projectsCount = projectsResponse.data.length;
|
||||
|
||||
// Fetch the users data from the server
|
||||
const usersResponse = await axios.get('http://somebodyhire.me/api/profiles/');
|
||||
// Set the usersCount to the number of users received from the server
|
||||
this.usersCount = usersResponse.data.length;
|
||||
|
||||
} catch (error) {
|
||||
// Log any errors that occur during the fetch to the console
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pt-3 pb-4" id="count-stats">
|
||||
<div class="container">
|
||||
@ -11,11 +41,9 @@ import DefaultCounterCard from "../../../examples/cards/counterCards/DefaultCoun
|
||||
<div class="col-md-4 position-relative">
|
||||
<DefaultCounterCard
|
||||
color="success"
|
||||
title="Coded Elements"
|
||||
description="From buttons, to inputs, navbars, alerts or cards, you are
|
||||
covered"
|
||||
:count="70"
|
||||
suffix="+"
|
||||
title="Проектов"
|
||||
description="Представлено на нашем сайте"
|
||||
:count="projectsCount"
|
||||
:duration="3000"
|
||||
divider="vertical"
|
||||
/>
|
||||
@ -23,11 +51,9 @@ import DefaultCounterCard from "../../../examples/cards/counterCards/DefaultCoun
|
||||
<div class="col-md-4 position-relative">
|
||||
<DefaultCounterCard
|
||||
color="success"
|
||||
title="Design Blocks"
|
||||
description="Mix the sections, change the colors and unleash your
|
||||
creativity"
|
||||
:count="15"
|
||||
suffix="+"
|
||||
title="Пользователей"
|
||||
description="Зарегистрированно с момента запуска проекта"
|
||||
:count="usersCount"
|
||||
:duration="3000"
|
||||
divider="vertical"
|
||||
/>
|
||||
@ -35,10 +61,10 @@ import DefaultCounterCard from "../../../examples/cards/counterCards/DefaultCoun
|
||||
<div class="col-md-4">
|
||||
<DefaultCounterCard
|
||||
color="success"
|
||||
title="Pages"
|
||||
description="Save 3-4 weeks of work when you use our pre-made pages for
|
||||
your website"
|
||||
:count="4"
|
||||
title="Раз"
|
||||
description="Мы прокляли день, когда сели за баранку этого пылесоса"
|
||||
:count="9000"
|
||||
suffix="+"
|
||||
:duration="3000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
167
src/views/Presentation/Sections/PresentationSearch.vue
Normal file
167
src/views/Presentation/Sections/PresentationSearch.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import axios from 'axios';
|
||||
import { ref } from "vue";
|
||||
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchResultProjects = ref([]);
|
||||
const searchResultUsers = ref([]);
|
||||
const searchButtonIsPressed = ref(false);
|
||||
const search = async () => {
|
||||
try {
|
||||
const projectsResponse = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${searchQuery.value}`);
|
||||
searchResultProjects.value = projectsResponse.data;
|
||||
|
||||
const usersResponse = await axios.get(`http://somebodyhire.me/api/search/profiles/?search_query=${searchQuery.value}`);
|
||||
searchResultUsers.value = usersResponse.data;
|
||||
searchButtonIsPressed.value = true;
|
||||
} catch (error) {
|
||||
console.error('There was an error fetching the search results', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="searchBar">
|
||||
<!-- Added @keyup.enter="search" to enable searching by pressing Enter key -->
|
||||
<!-- Added class searchInput for styling -->
|
||||
<input class="searchInput" type="text" v-model="searchQuery" @keyup.enter="search" placeholder="Поиск по проектам и людям" />
|
||||
<!-- Added class searchButton for styling -->
|
||||
<button class="searchButton" type="submit" @click="search">Погнали!</button>
|
||||
</div>
|
||||
|
||||
<div v-if="searchResultProjects.length > 0 || searchResultUsers.length > 0">
|
||||
<!--<h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>-->
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="project in searchResultProjects" :key="project.id">
|
||||
<h3>{{ project.title }} with ID {{ project.id }}</h3>
|
||||
<p>{{ project.description }}</p>
|
||||
<a :href="`http://somebodyhire.me/project/${project.id}`">Страница проекта</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--<h2 class="result-header">Найдено людей: {{ searchResultUsers.length}} </h2>-->
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="user in searchResultUsers" :key="user.id">
|
||||
<h3>{{ user.username }} with id {{ user.id }}</h3>
|
||||
<p>{{ user.email }}</p>
|
||||
<a :href="`http://somebodyhire.me/profile/${user.id}`">Страница пользователя</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if = "searchQuery.length > 0 && searchButtonIsPressed === true" >
|
||||
<h2 class="result-header">Увы и ах! Такого нет (</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.searchBar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
/* Makes the search input take up the maximum available width */
|
||||
flex-grow: 1;
|
||||
/* Adds some padding inside the input field */
|
||||
padding: 10px;
|
||||
/* Adds some margin to the right side of the input field */
|
||||
margin-right: 10px;
|
||||
margin-top: 20px;
|
||||
/* Increased the font size a bit */
|
||||
font-size: 16px;
|
||||
border-radius: 1%;
|
||||
|
||||
border: 2px solid #66FCF1;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background: #FAFAFA;
|
||||
color: #9E9C9C;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
/* Adds some padding inside the button */
|
||||
padding: 12px 20px;
|
||||
/* Changes the font size */
|
||||
font-size: 16px;
|
||||
/* Changes the background color of the button */
|
||||
background-color: #66FCF1;
|
||||
/* Changes the color of the text inside the button */
|
||||
color: rgb(90, 90, 90);
|
||||
/* Makes the border corners rounded */
|
||||
border-radius: 4px;
|
||||
/* Removes the default button border */
|
||||
border: none;
|
||||
/* Changes the cursor to a hand pointer when hovering over the button */
|
||||
cursor: pointer;
|
||||
width: 10%;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.searchButton:hover {
|
||||
/* Changes the background color of the button when hovering over it */
|
||||
background-color: #E01EB2;
|
||||
color: rgb(228, 228, 228);
|
||||
}
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
|
||||
border: 2px solid #66FCF1;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
color: #9E9C9C;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.result-card {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
.searchButton{
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
.searchButton{
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user