mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 00:34:35 +00:00
add files page
This commit is contained in:
parent
6a7ffb1756
commit
d0ebfd56a1
44
xroom-dashboard/src/assets/main.css
Normal file
44
xroom-dashboard/src/assets/main.css
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
/* main.css */
|
||||||
|
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--white: rgba(255, 255, 255, 1);
|
||||||
|
--black: rgba(16, 16, 16, 1);
|
||||||
|
--accentcolor-accentcolor-600: rgba(230, 230, 230, 1);
|
||||||
|
--neutralcolorneutralcolor-25: rgba(198, 204, 213, 1);
|
||||||
|
--neutralcolorneutralcolor-300: rgba(141, 153, 171, 1);
|
||||||
|
--neutralcolorneutralcolor-600: rgba(102, 115, 135, 1);
|
||||||
|
--neutralcolorneutralcolor-500: rgba(113, 128, 150, 1);
|
||||||
|
--neutralcolorneutralcolor-800: rgba(79, 90, 105, 1);
|
||||||
|
--neutralcolorneutralcolor-900: rgba(68, 77, 90, 1);
|
||||||
|
--neutralcolorneutralcolor-400: rgba(127, 141, 161, 1);
|
||||||
|
--neutralcolorneutralcolor-50: rgba(184, 192, 203, 1);
|
||||||
|
--successcolor-successcolor-500: rgba(72, 187, 120, 1);
|
||||||
|
--brand-colorbrand-color-400: rgba(97, 121, 237, 1);
|
||||||
|
--neutralcolorneutralcolor-1000: rgba(45, 51, 60, 1);
|
||||||
|
--successcolor-successcolor-300: rgba(109, 201, 147, 1);
|
||||||
|
--brand-colorbrand-color-800: rgba(32, 48, 128, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #101010;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a blue color as a generic focus style */
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 2px solid #4a90e2 !important;
|
||||||
|
outline: -webkit-focus-ring-color auto 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
16
xroom-dashboard/src/axios.js
Normal file
16
xroom-dashboard/src/axios.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
// src/axios.js
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL: 'http://194.62.43.230:8000',
|
||||||
|
});
|
||||||
|
|
||||||
|
instance.interceptors.request.use(config => {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `token ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default instance;
|
||||||
BIN
xroom-dashboard/src/components.rar
Normal file
BIN
xroom-dashboard/src/components.rar
Normal file
Binary file not shown.
|
|
@ -1,150 +1,575 @@
|
||||||
|
<!-- DashboardPage.vue -->
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard-container">
|
|
||||||
<SidebarMenu />
|
<SidebarMenu />
|
||||||
|
|
||||||
<div class="content">
|
<div class="dashboard-page">
|
||||||
<div class="header">
|
<div class="content">
|
||||||
<button class="btn-subscribe">خرید اشتراک</button>
|
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
|
||||||
<div class="search-bar">
|
<p class="p">از این داشبورد، کار با XRoom را آغاز کنید.</p>
|
||||||
<input type="text" placeholder="جستجو..." />
|
<div class="frame-3">
|
||||||
</div>
|
<div class="frame-4">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
|
||||||
|
<div class="text-wrapper-5">دانیال پژوهش کیا</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="frame-wrapper">
|
||||||
<div class="dashboard-body">
|
<img class="frame-5" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
|
||||||
<div class="quick-actions">
|
</div>
|
||||||
<button class="btn-action">ایجاد جلسه جدید +</button>
|
</div>
|
||||||
<div class="guide">
|
<div class="group-2">
|
||||||
<button class="btn-guide">راهنمای شروع</button>
|
<div class="text-wrapper-6">راهنمای شروع</div>
|
||||||
<button class="btn-guide">آموزش‌ها</button>
|
<img class="tutorials" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
|
||||||
<button class="btn-guide">تغییرات نسخه</button>
|
<img class="frame-6" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
|
||||||
|
<img class="frame-7" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
|
||||||
|
<img class="frame-8" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
|
||||||
|
</div>
|
||||||
|
<p class="text-wrapper-7">
|
||||||
|
فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
|
||||||
|
</p>
|
||||||
|
<div class="text-wrapper-8">جلسات</div>
|
||||||
|
<div class="group-3">
|
||||||
|
<div class="text-wrapper-9">آخرین فایل‌ها</div>
|
||||||
|
<div class="frame-9">
|
||||||
|
<img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn-1.svg" />
|
||||||
|
<img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="frame-10">
|
||||||
|
<div class="card">
|
||||||
|
<div class="frame-11"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Pico Control</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="frame-14">
|
||||||
<div class="latest-files">
|
<div class="frame-15"></div>
|
||||||
<h3>آخرین فایل‌ها</h3>
|
<div class="frame-12">
|
||||||
<div class="files-grid">
|
<div class="text-wrapper-10">Fakor Sanat Tehran</div>
|
||||||
<div class="file-card" v-for="file in files" :key="file.id">
|
<div class="history">
|
||||||
<img :src="file.image" alt="file" />
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
<p>{{ file.name }}</p>
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
<span>{{ file.date }}</span>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-16">
|
||||||
|
<div class="frame-17"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Design Artist</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-18">
|
||||||
|
<div class="frame-19"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Flash Back</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="BTN-icon">
|
||||||
|
<img class="frame-20" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
|
||||||
|
<div class="text-wrapper-12">ایجاد جلسه جدید</div>
|
||||||
|
</div>
|
||||||
|
<div class="buy-a-subscription">
|
||||||
|
<img class="frame-21" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-6.svg" />
|
||||||
|
<div class="text-wrapper-12">خرید اشتراک</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="footer">
|
||||||
|
<div class="text-wrapper-13">All Rights Reserved ©Dadechin</div>
|
||||||
|
<div class="logo">
|
||||||
|
<div class="clip-path-group-wrapper">
|
||||||
|
<img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SidebarMenu from '@/components/SidebarMenu.vue';
|
|
||||||
|
|
||||||
export default {
|
import SidebarMenu from '@/components/SidebarMenu.vue'
|
||||||
components: {
|
|
||||||
SidebarMenu,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
files: [
|
|
||||||
{ id: 1, name: 'Flash Back', date: '24 تیر 1403', image: '@/assets/file1.jpg' },
|
|
||||||
{ id: 2, name: 'Design Artist', date: '24 تیر 1403', image: '@/assets/file2.jpg' },
|
|
||||||
{ id: 3, name: 'Fakor Sanat Tehran', date: '24 تیر 1403', image: '@/assets/file3.jpg' },
|
|
||||||
{ id: 4, name: 'Pico Control', date: '24 تیر 1403', image: '@/assets/file4.jpg' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.dashboard-container {
|
|
||||||
display: flex;
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
export default {
|
||||||
flex: 1;
|
name: 'DashboardPage',
|
||||||
padding: 20px;
|
components: {
|
||||||
}
|
SidebarMenu,
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
}
|
||||||
display: flex;
|
</script>
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-subscribe {
|
<style scoped>
|
||||||
background-color: #1a73e8;
|
.dashboard-page {
|
||||||
color: white;
|
margin-right: 360px;
|
||||||
padding: 10px 20px;
|
padding: 20px;
|
||||||
border: none;
|
direction: rtl;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar input {
|
.content {
|
||||||
padding: 10px;
|
width: 100%;
|
||||||
width: 300px;
|
height: 860px;
|
||||||
}
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 35px 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-body {
|
.line {
|
||||||
margin-top: 20px;
|
position: absolute;
|
||||||
}
|
width: calc(100% - 160px);
|
||||||
|
height: 1px;
|
||||||
|
top: 90px;
|
||||||
|
right: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.quick-actions {
|
.p {
|
||||||
margin-bottom: 30px;
|
position: absolute;
|
||||||
}
|
height: 22px;
|
||||||
|
top: 35px;
|
||||||
|
right: 80px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-action {
|
.frame-3 {
|
||||||
background-color: #1a73e8;
|
display: inline-flex;
|
||||||
color: white;
|
height: 42px;
|
||||||
padding: 15px;
|
align-items: center;
|
||||||
font-size: 16px;
|
gap: 8px;
|
||||||
border: none;
|
position: absolute;
|
||||||
cursor: pointer;
|
top: 35px;
|
||||||
}
|
right: 605px;
|
||||||
|
}
|
||||||
|
|
||||||
.guide {
|
.frame-4 {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
gap: 10px;
|
align-items: center;
|
||||||
margin-top: 20px;
|
gap: 4px;
|
||||||
}
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-guide {
|
.text-wrapper-5 {
|
||||||
background-color: #f1f1f1;
|
position: relative;
|
||||||
color: #333;
|
width: fit-content;
|
||||||
padding: 10px 20px;
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
border: none;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
color: #101010;
|
||||||
}
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.latest-files {
|
.frame-wrapper {
|
||||||
margin-top: 50px;
|
position: relative;
|
||||||
}
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #e2dee9;
|
||||||
|
}
|
||||||
|
|
||||||
.files-grid {
|
.frame-5 {
|
||||||
display: grid;
|
position: absolute;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
width: 20px;
|
||||||
gap: 20px;
|
height: 20px;
|
||||||
}
|
top: 11px;
|
||||||
|
right: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
.file-card {
|
.group-2 {
|
||||||
background-color: #fff;
|
position: absolute;
|
||||||
padding: 20px;
|
width: 522px;
|
||||||
border-radius: 10px;
|
height: 270px;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
top: 112px;
|
||||||
text-align: center;
|
right: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-card img {
|
.text-wrapper-6 {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
border-radius: 10px;
|
height: 27px;
|
||||||
height: 180px;
|
top: 0;
|
||||||
object-fit: cover;
|
right: 0px;
|
||||||
}
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.file-card p {
|
.tutorials {
|
||||||
margin-top: 10px;
|
position: absolute;
|
||||||
font-weight: bold;
|
width: 250px;
|
||||||
}
|
height: 94px;
|
||||||
</style>
|
top: 54px;
|
||||||
|
right: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-6 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 176px;
|
||||||
|
right: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-7 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 54px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-8 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 176px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-7 {
|
||||||
|
position: absolute;
|
||||||
|
width: 292px;
|
||||||
|
top: 148px;
|
||||||
|
right: 687px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4f5a69;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-8 {
|
||||||
|
position: absolute;
|
||||||
|
height: 27px;
|
||||||
|
top: 112px;
|
||||||
|
right: 689px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-3 {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 160px);
|
||||||
|
height: 341px;
|
||||||
|
top: 40px;
|
||||||
|
right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-9 {
|
||||||
|
position: absolute;
|
||||||
|
width: 116px;
|
||||||
|
height: 29px;
|
||||||
|
top: 4px;
|
||||||
|
right: 784px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-9 {
|
||||||
|
display: flex;
|
||||||
|
width: 292px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
top: 450px;
|
||||||
|
right: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BTN-2 {
|
||||||
|
position: relative;
|
||||||
|
width: 130px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-10 {
|
||||||
|
position: absolute;
|
||||||
|
width: 900px;
|
||||||
|
height: 267px;
|
||||||
|
top: 512px;
|
||||||
|
right: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-10::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 650px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-11 {
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png) 50% 50% / cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-12 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 218px;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 14px;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-10 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -1px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #444d5a;
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 21px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-11 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #7f8da1;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 18.2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-13 {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-14 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 380px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-15 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-16 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 110px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-17 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-18 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: -160px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-19 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BTN-icon {
|
||||||
|
display: flex;
|
||||||
|
width: 292px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
top: 250px;
|
||||||
|
right: 687px;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #3a57e8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-12 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -2px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-20 {
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-a-subscription {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
right: 858px;
|
||||||
|
background-color: #48bb78;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-21 {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-13 {
|
||||||
|
width: 100%;
|
||||||
|
height: 18px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 18.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 360px;
|
||||||
|
height: 45px;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clip-path-group-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clip-path-group {
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
top: 5px;
|
||||||
|
right: 105px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,94 +1,270 @@
|
||||||
|
<!-- SidebarMenu.vue -->
|
||||||
<template>
|
<template>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="sidebar-header">
|
<div class="group">
|
||||||
<img src="@/assets/logo.png" alt="XRoom" class="logo" />
|
<!-- Profile Info -->
|
||||||
<div class="profile">
|
<div class="overlap">
|
||||||
<img src="@/assets/img/profile.png" alt="User" class="profile-img" />
|
<img class="profile" src="https://c.animaapp.com/m9nvumalUMfQbN/img/profile.png" />
|
||||||
<span class="username">دانیال پژوهش کیا</span>
|
<div class="frame-2">
|
||||||
|
<div class="text-wrapper-2">خوش آمدید...</div>
|
||||||
|
<div class="text-wrapper-3">دانیال پژوهش کیا</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="notifications">
|
||||||
<div class="sidebar-nav">
|
<div class="overlap-group"><div class="text-wrapper-4">4</div></div>
|
||||||
<router-link to="/" class="nav-link">داشبورد</router-link>
|
|
||||||
<router-link to="/sessions" class="nav-link">جلسات</router-link>
|
|
||||||
<router-link to="/downloads" class="nav-link">دانلود</router-link>
|
|
||||||
<router-link to="/files" class="nav-link">فایل‌ها</router-link>
|
|
||||||
<router-link to="/teams" class="nav-link">تیم‌ها</router-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<router-link to="/settings" class="footer-link">پشتیبانی</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<!-- Menu -->
|
||||||
export default {
|
<div class="frame">
|
||||||
name: 'SidebarMenu',
|
<router-link to="/dashboard" class="nav-button" :class="{ active: isActive('/dashboard') }">
|
||||||
};
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-dashboard.svg" />
|
||||||
</script>
|
<div class="text-wrapper">داشبورد</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
<style scoped>
|
<router-link to="/spaces" class="nav-button" :class="{ active: isActive('/spaces') }">
|
||||||
.sidebar {
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-4.svg" />
|
||||||
width: 250px;
|
<div class="text-wrapper">فضاها</div>
|
||||||
height: 100vh;
|
</router-link>
|
||||||
background-color: #2f2f2f;
|
|
||||||
color: white;
|
<router-link to="/meetings" class="nav-button" :class="{ active: isActive('/meetings') }">
|
||||||
padding: 20px;
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-1.svg" />
|
||||||
|
<div class="text-wrapper">جلسات</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/download" class="nav-button" :class="{ active: isActive('/download') }">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-download.svg" />
|
||||||
|
<div class="text-wrapper">دانلود</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/dashboard/files" class="nav-button" :class="{ active: isActive('/dashboard/files') }">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-files.svg" />
|
||||||
|
<div class="text-wrapper">فایل ها</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/team" class="nav-button" :class="{ active: isActive('/team') }">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-team.svg" />
|
||||||
|
<div class="text-wrapper">تیم</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/support" class="nav-button" :class="{ active: isActive('/support') }">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-support.svg" />
|
||||||
|
<div class="text-wrapper">پشتیبانی</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SidebarMenu',
|
||||||
|
methods: {
|
||||||
|
isActive(path) {
|
||||||
|
return this.$route.path === path
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeMenu: 'dashboard'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
.sidebar-header {
|
<style scoped>
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
.nav-button {
|
||||||
width: 100px;
|
all: unset;
|
||||||
margin-bottom: 20px;
|
box-sizing: border-box;
|
||||||
}
|
display: flex;
|
||||||
|
width: 260px;
|
||||||
|
height: 57px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
background-color: #101010;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
.profile {
|
.nav-button:hover {
|
||||||
text-align: center;
|
background-color: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-img {
|
.nav-button.active {
|
||||||
width: 50px;
|
background-color: #3a57e8;
|
||||||
border-radius: 50%;
|
}
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
.sidebar {
|
||||||
display: block;
|
background-color: #101010;
|
||||||
color: white;
|
width: 360px;
|
||||||
padding: 10px 0;
|
height: 100vh;
|
||||||
text-decoration: none;
|
position: fixed;
|
||||||
margin: 10px 0;
|
right: 0;
|
||||||
font-size: 16px;
|
top: 0;
|
||||||
}
|
padding: 30px 50px;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.group {
|
||||||
background-color: #444;
|
position: relative;
|
||||||
}
|
width: 228px;
|
||||||
|
height: 88px;
|
||||||
|
margin-bottom: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-footer {
|
.overlap {
|
||||||
margin-top: auto;
|
position: absolute;
|
||||||
}
|
width: 137px;
|
||||||
|
height: 72px;
|
||||||
|
top: 16px;
|
||||||
|
right: 91px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer-link {
|
.profile {
|
||||||
color: white;
|
position: absolute;
|
||||||
text-decoration: none;
|
width: 72px;
|
||||||
font-size: 14px;
|
height: 72px;
|
||||||
}
|
top: 0;
|
||||||
</style>
|
right: -95px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-2 {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: right;
|
||||||
|
gap: 8px;
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-2 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -1px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #e6e6e6;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-3 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 19px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications {
|
||||||
|
position: absolute;
|
||||||
|
width: 31px;
|
||||||
|
height: 29px;
|
||||||
|
top: 0;
|
||||||
|
right: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlap-group {
|
||||||
|
position: relative;
|
||||||
|
height: 31px;
|
||||||
|
top: 1px;
|
||||||
|
right: -1px;
|
||||||
|
background-color: #dc3434;
|
||||||
|
border-radius: 15.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-4 {
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
right: 11px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.22px;
|
||||||
|
line-height: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 260px;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BTN {
|
||||||
|
all: unset;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
width: 260px;
|
||||||
|
height: 57px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #3a57e8;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -2px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: right;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 25.2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
all: unset;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
width: 260px;
|
||||||
|
height: 57px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #101010;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
import '@/assets/main.css'
|
||||||
|
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(router) // Make sure you use the router here
|
.use(router) // Make sure you use the router here
|
||||||
|
|
|
||||||
|
|
@ -55,24 +55,26 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async handleSubmit() {
|
async handleSubmit() {
|
||||||
// Prepare the data to match API format
|
const loginData = {
|
||||||
const signupData = {
|
mobile_number: this.form.mobileNumber,
|
||||||
first_name: this.form.firstName,
|
password: this.form.password,
|
||||||
last_name: this.form.lastName,
|
};
|
||||||
mobile_number: this.form.mobileNumber,
|
|
||||||
password: this.form.password,
|
try {
|
||||||
};
|
const response = await axios.post('http://194.62.43.230:8000/login', loginData);
|
||||||
|
const token = response.data.token;
|
||||||
|
const user = response.data.user;
|
||||||
|
|
||||||
|
localStorage.setItem('token', token);
|
||||||
|
localStorage.setItem('user', JSON.stringify(user));
|
||||||
|
|
||||||
|
this.$router.push('/dashboard');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login error:', error);
|
||||||
|
alert('خطا در ورود. لطفا دوباره تلاش کنید.');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await axios.post('http://194.62.43.230:8000/login', signupData);
|
|
||||||
console.log('Signup success:', response.data);
|
|
||||||
// Redirect to login page upon successful signup
|
|
||||||
this.$router.push('/dashboard');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Signup error:', error);
|
|
||||||
// Handle error, show alert or error message
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
341
xroom-dashboard/src/pages/dashboard/files.vue
Normal file
341
xroom-dashboard/src/pages/dashboard/files.vue
Normal file
|
|
@ -0,0 +1,341 @@
|
||||||
|
<template>
|
||||||
|
<SidebarMenu />
|
||||||
|
|
||||||
|
<div class="dashboard-page">
|
||||||
|
<div class="content">
|
||||||
|
<!-- Top Header -->
|
||||||
|
<div class="header-row">
|
||||||
|
<div class="right-actions">
|
||||||
|
<button class="subscription-button">
|
||||||
|
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-6.svg" class="button-icon" />
|
||||||
|
خرید اشتراک
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="user-info">
|
||||||
|
<span class="user-name">دانیال پژوهش کیا</span>
|
||||||
|
<div class="avatar-box">
|
||||||
|
<img class="avatar-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="page-title">فایل ها</div>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<div class="section-description">
|
||||||
|
<div class="section-title">مدیریت فایل ها</div>
|
||||||
|
<p>
|
||||||
|
فایل های خود مانند مدل های سه بعدی، تصاویر و اسناد PDF را برای استفاده در VR آماده کنید. یا یادداشت ها و تصاویر ایجاد شده در برنامه XRoom را دانلود کنید.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- File Manager Layout -->
|
||||||
|
<div class="file-manager-layout">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div class="file-sidebar">
|
||||||
|
<button class="primary-button">
|
||||||
|
فایل جدید
|
||||||
|
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="btn-icon" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="filter-buttons">
|
||||||
|
<button class="filter-btn">فایل های اخیر</button>
|
||||||
|
<button class="filter-btn">دانلودهای اخیر</button>
|
||||||
|
<button class="filter-btn">فایل های شخصی</button>
|
||||||
|
<button class="filter-btn">نشانه دار شده</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Cards Grid -->
|
||||||
|
<div class="file-grid">
|
||||||
|
<div class="file-card" v-for="(item, index) in files" :key="index">
|
||||||
|
<img :src="item.image" class="file-image" />
|
||||||
|
<div class="file-card-info">
|
||||||
|
<div class="file-title">نام فایل</div>
|
||||||
|
<div class="file-meta">
|
||||||
|
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" class="meta-icon" />
|
||||||
|
<span class="file-date">۲۳ تیر ۱۴۰۳</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="text-wrapper-13">All Rights Reserved ©Dadechin</div>
|
||||||
|
<div class="logo">
|
||||||
|
<img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SidebarMenu from '@/components/SidebarMenu.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DashboardPage',
|
||||||
|
components: {
|
||||||
|
SidebarMenu,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
files: [
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png' },
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png' },
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png' },
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png' },
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png' },
|
||||||
|
{ image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-page {
|
||||||
|
margin-right: 360px;
|
||||||
|
padding: 20px;
|
||||||
|
direction: rtl;
|
||||||
|
font-family: IRANSansXFaNum, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 35px 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-button {
|
||||||
|
background-color: #48bb78;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-box {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a202c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-description p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4a5568;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-manager-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 32px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-card {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-card:hover {
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-card-info {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a202c;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #718096;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-sidebar {
|
||||||
|
width: 180px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
background-color: #3a57e8;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover {
|
||||||
|
background-color: #2e45c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
background-color: white;
|
||||||
|
color: #1a202c;
|
||||||
|
font-size: 13px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover {
|
||||||
|
background-color: #edf2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-13 {
|
||||||
|
font-size: 13px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clip-path-group {
|
||||||
|
height: 40px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
575
xroom-dashboard/src/pages/dashboard/index.vue
Normal file
575
xroom-dashboard/src/pages/dashboard/index.vue
Normal file
|
|
@ -0,0 +1,575 @@
|
||||||
|
<!-- DashboardPage.vue -->
|
||||||
|
<template>
|
||||||
|
<SidebarMenu />
|
||||||
|
|
||||||
|
<div class="dashboard-page">
|
||||||
|
<div class="content">
|
||||||
|
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
|
||||||
|
<p class="p">از این داشبورد، کار با XRoom را آغاز کنید.</p>
|
||||||
|
<div class="frame-3">
|
||||||
|
<div class="frame-4">
|
||||||
|
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
|
||||||
|
<div class="text-wrapper-5">دانیال پژوهش کیا</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-wrapper">
|
||||||
|
<img class="frame-5" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="group-2">
|
||||||
|
<div class="text-wrapper-6">راهنمای شروع</div>
|
||||||
|
<img class="tutorials" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
|
||||||
|
<img class="frame-6" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
|
||||||
|
<img class="frame-7" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
|
||||||
|
<img class="frame-8" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
|
||||||
|
</div>
|
||||||
|
<p class="text-wrapper-7">
|
||||||
|
فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
|
||||||
|
</p>
|
||||||
|
<div class="text-wrapper-8">جلسات</div>
|
||||||
|
<div class="group-3">
|
||||||
|
<div class="text-wrapper-9">آخرین فایل‌ها</div>
|
||||||
|
<div class="frame-9">
|
||||||
|
<img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn-1.svg" />
|
||||||
|
<img class="BTN-2" src="https://c.animaapp.com/m9nvumalUMfQbN/img/btn.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="frame-10">
|
||||||
|
<div class="card">
|
||||||
|
<div class="frame-11"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Pico Control</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-14">
|
||||||
|
<div class="frame-15"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Fakor Sanat Tehran</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-16">
|
||||||
|
<div class="frame-17"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Design Artist</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="frame-18">
|
||||||
|
<div class="frame-19"></div>
|
||||||
|
<div class="frame-12">
|
||||||
|
<div class="text-wrapper-10">Flash Back</div>
|
||||||
|
<div class="history">
|
||||||
|
<img class="frame-13" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||||
|
<div class="text-wrapper-11">24 تیر 1403</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BTN-icon">
|
||||||
|
<img class="frame-20" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
|
||||||
|
<div class="text-wrapper-12">ایجاد جلسه جدید</div>
|
||||||
|
</div>
|
||||||
|
<div class="buy-a-subscription">
|
||||||
|
<img class="frame-21" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-6.svg" />
|
||||||
|
<div class="text-wrapper-12">خرید اشتراک</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="text-wrapper-13">All Rights Reserved ©Dadechin</div>
|
||||||
|
<div class="logo">
|
||||||
|
<div class="clip-path-group-wrapper">
|
||||||
|
<img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import SidebarMenu from '@/components/SidebarMenu.vue'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DashboardPage',
|
||||||
|
components: {
|
||||||
|
SidebarMenu,
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-page {
|
||||||
|
margin-right: 360px;
|
||||||
|
padding: 20px;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 860px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 35px 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 160px);
|
||||||
|
height: 1px;
|
||||||
|
top: 90px;
|
||||||
|
right: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p {
|
||||||
|
position: absolute;
|
||||||
|
height: 22px;
|
||||||
|
top: 35px;
|
||||||
|
right: 80px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-3 {
|
||||||
|
display: inline-flex;
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
right: 605px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-4 {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-5 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #e2dee9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-5 {
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
top: 11px;
|
||||||
|
right: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-2 {
|
||||||
|
position: absolute;
|
||||||
|
width: 522px;
|
||||||
|
height: 270px;
|
||||||
|
top: 112px;
|
||||||
|
right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-6 {
|
||||||
|
position: absolute;
|
||||||
|
height: 27px;
|
||||||
|
top: 0;
|
||||||
|
right: 0px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorials {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 54px;
|
||||||
|
right: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-6 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 176px;
|
||||||
|
right: 270px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-7 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 54px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-8 {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: 94px;
|
||||||
|
top: 176px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-7 {
|
||||||
|
position: absolute;
|
||||||
|
width: 292px;
|
||||||
|
top: 148px;
|
||||||
|
right: 687px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4f5a69;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-8 {
|
||||||
|
position: absolute;
|
||||||
|
height: 27px;
|
||||||
|
top: 112px;
|
||||||
|
right: 689px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-3 {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 160px);
|
||||||
|
height: 341px;
|
||||||
|
top: 40px;
|
||||||
|
right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-9 {
|
||||||
|
position: absolute;
|
||||||
|
width: 116px;
|
||||||
|
height: 29px;
|
||||||
|
top: 4px;
|
||||||
|
right: 784px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #101010;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26.6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-9 {
|
||||||
|
display: flex;
|
||||||
|
width: 292px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
top: 450px;
|
||||||
|
right: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BTN-2 {
|
||||||
|
position: relative;
|
||||||
|
width: 130px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-10 {
|
||||||
|
position: absolute;
|
||||||
|
width: 900px;
|
||||||
|
height: 267px;
|
||||||
|
top: 512px;
|
||||||
|
right: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-10::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 650px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-11 {
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png) 50% 50% / cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-12 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 218px;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 14px;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-10 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -1px;
|
||||||
|
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #444d5a;
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 21px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-11 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #7f8da1;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 18.2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-13 {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-14 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 380px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-15 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-16 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: 110px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-17 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-18 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 250px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: -160px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0.5px solid #b8c0cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-19 {
|
||||||
|
background: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png) 50% 50% / cover;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
height: 172px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BTN-icon {
|
||||||
|
display: flex;
|
||||||
|
width: 292px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
top: 250px;
|
||||||
|
right: 687px;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #3a57e8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-12 {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: -2px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 22.4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-20 {
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-a-subscription {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
right: 858px;
|
||||||
|
background-color: #48bb78;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-21 {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper-13 {
|
||||||
|
width: 100%;
|
||||||
|
height: 18px;
|
||||||
|
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 18.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 360px;
|
||||||
|
height: 45px;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clip-path-group-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clip-path-group {
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
top: 5px;
|
||||||
|
right: 105px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import SignupPage from '../components/SignupPage.vue' // Renamed
|
import SignupPage from '../pages/SignupPage.vue' // Renamed
|
||||||
import LoginPage from '../components/LoginPage.vue' // Renamed
|
import LoginPage from '../pages/LoginPage.vue' // Renamed
|
||||||
import DashboardPage from '../components/DashboardPage.vue'
|
import DashboardPage from '../pages/dashboard/index.vue'
|
||||||
import FilesPage from '@/components/FilesPage.vue'; // import the new page
|
import FilesPage from '@/pages/dashboard/files.vue'; // import the new page
|
||||||
|
import axios from '@/axios';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -20,7 +21,7 @@ const routes = [
|
||||||
name: 'DashboardPage', // Renamed
|
name: 'DashboardPage', // Renamed
|
||||||
component: DashboardPage
|
component: DashboardPage
|
||||||
},{
|
},{
|
||||||
path: '/files',
|
path: '/dashboard/files',
|
||||||
name: 'files',
|
name: 'files',
|
||||||
component: FilesPage, // link the files page
|
component: FilesPage, // link the files page
|
||||||
}
|
}
|
||||||
|
|
@ -31,4 +32,32 @@ const router = createRouter({
|
||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
|
||||||
|
// No token, redirect to login if trying to access dashboard
|
||||||
|
if (to.path === '/dashboard' && !token) {
|
||||||
|
return next('/login');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
try {
|
||||||
|
await axios.get('/getInfo');
|
||||||
|
if (to.path === '/login') {
|
||||||
|
return next('/dashboard');
|
||||||
|
}
|
||||||
|
return next();
|
||||||
|
} catch (err) {
|
||||||
|
// Invalid token, redirect to login
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
return next('/login');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user