Teeaseer/site
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Activity

Initial commit

Browse Source
This commit is contained in:
Developer
2025-04-21 16:03:20 +02:00
commit 2832896157
22874 changed files with 3092801 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
resources/js/Pages/Auth/Login.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<meta-head title="Авторизация">
<meta name="description" content="Авторизация">
</meta-head>
<div class="header-simple flex items-center justify-center p-2 bg-orange">
<img class="block h-12" src="/image/logotype.svg" alt="">
</div>
<div class="min-h-[calc(100vh-64px)] place-items-center grid md:pt-3"
style="background-image: url('/image/auth-bg.jpg');">
<div class="w-full md:w-auto max-w-7xl mx-auto ">
<div class="md:grid grid-cols-12 ">
<div class="col-span-7 bg-indigo-200">
<div class="p-4 lg:p-28">
<h1 class="font-medium text-xl md:text-2xl lg:text-4xl text-white text-center">Войти</h1>
<div class="auth-form mt-7">
<form @submit.prevent="submit" class="space-y-6">
<div>
<div class="relative">
<div class="absolute inset-y-0 left-5 text-gray flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="flex-shrink-0">
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
</path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<input
v-model="form.email"
autocapitalize="off"
class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
type="email" placeholder="E-mail">
</div>
<div v-if="form.errors.email" class="form-error text-sm text-red">{{ form.errors.email }}</div>
</div>
<div>
<div class="relative">
<div class="absolute inset-y-0 left-5 text-gray flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="flex-shrink-0">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<input
v-model="form.password"
class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
type="password" placeholder="Пароль">
</div>
<div v-if="form.errors.password" class="form-error text-sm text-red">{{ form.errors.password }}</div>
</div>
<div class="flex items-center">
<input id="remember" v-model="form.remember" type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="remember" class="select-none ml-3 text-gray">Запомни меня</label>
</div>
<div class="text-center">
<loading-button :loading="form.processing" class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white bg-orange focus:outline-none" type="submit">Войти</loading-button>
</div>
</form>
</div>
</div>
</div>
<div class="col-span-5 bg-center bg-cover" style="background-image: url('image/orange-auth.jpg');">
<div class="py-4 lg:py-28 px-4">
<div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">Заработай на своем
творчестве первый миллион </div>
<div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">Присоединяйся к 4Teaser
прямо сейчас!</div>
<div class="text-center mt-4 md:mt-10">
<inertia-link
:href="route('register')"
class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none">
Зарегистрироваться
</inertia-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Inertia } from "@inertiajs/inertia";
import LoadingButton from "@/Shared/Form/LoadingButton";
import MetaHead from '@/Shared/MetaHead'
export default {
components: {
MetaHead,
LoadingButton,
},
setup() {
const form = Inertia.form({
email: null,
password: null,
remember: false,
});
const submit = () => {
form.post(route("login.store"));
};
return {
form,
submit,
};
},
}
</script>

135
resources/js/Pages/Auth/Register.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<meta-head title="Авторизация">
<meta name="description" content="Авторизация">
</meta-head>
<div class="header-simple flex items-center justify-center p-2 bg-orange">
<img class="block h-12" src="/image/logotype.svg" alt="">
</div>
<div class="min-h-[calc(100vh-64px)] place-items-center grid md:pt-3"
style="background-image: url('/image/auth-bg.jpg');">
<div class="w-full md:w-auto max-w-7xl mx-auto ">
<div class="md:grid grid-cols-12 ">
<div class="col-span-7 bg-indigo-200">
<div class="p-4 lg:p-28">
<h1 class="font-medium text-xl md:text-2xl lg:text-4xl text-white text-center">Регистрация</h1>
<div class="auth-form mt-7">
<form @submit.prevent="submit" class="space-y-6">
<div>
<div class="relative">
<div class="absolute inset-y-0 left-5 text-gray flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</div>
<input
v-model="form.first_name"
autocapitalize="off"
class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
type="text" placeholder="Имя">
</div>
<div v-if="form.errors.email" class="form-error text-sm text-red">{{ form.errors.first_name }}</div>
</div>
<div>
<div class="relative">
<div class="absolute inset-y-0 left-5 text-gray flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="flex-shrink-0">
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
</path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<input
v-model="form.email"
autocapitalize="off"
class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
type="email" placeholder="E-mail">
</div>
<div v-if="form.errors.email" class="form-error text-sm text-red">{{ form.errors.email }}</div>
</div>
<div>
<div class="relative">
<div class="absolute inset-y-0 left-5 text-gray flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="flex-shrink-0">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<input
v-model="form.password"
class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
type="password" placeholder="Пароль">
</div>
<div v-if="form.errors.password" class="form-error text-sm text-red">{{ form.errors.password }}</div>
</div>
<div class="text-center">
<loading-button :loading="form.processing" class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white bg-orange focus:outline-none" type="submit">Зарегистрироваться</loading-button>
</div>
</form>
</div>
</div>
</div>
<div class="col-span-5 bg-center bg-cover" style="background-image: url('image/orange-auth.jpg');">
<div class="py-4 lg:py-28 px-4 flex flex-col h-full justify-center">
<div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">
Уже есть учетная запись?
</div>
<div class="text-center mt-4 md:mt-10">
<inertia-link
:href="route('login')"
class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none">
Войти
</inertia-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Inertia } from "@inertiajs/inertia";
import LoadingButton from "@/Shared/Form/LoadingButton";
import MetaHead from '@/Shared/MetaHead'
export default {
components: {
MetaHead,
LoadingButton,
},
setup() {
const form = Inertia.form({
first_name: null,
email: null,
password: null,
});
const submit = () => {
form.post(route("register.store"));
};
return {
form,
submit,
};
},
}
</script>

98
resources/js/Pages/Dashboard/Index.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<meta-head title="Новинки"></meta-head>
<div class="mb-6 py-3 md:py-14 xl:py-20 banner relative bg-center bg-no-repeat bg-cover"
style="background-image: url('/image/bg-home.jpg');">
<div class="h-60 lg:h-96 flex justify-center items-center text-center">
<div class="max-w-4xl text-gray px-3">
<p class="text-md md:text-2xl">Социальная сеть для творческих людей</p>
<h1
class="mt-4 md:mt-8 text-xl md:text-2xl lg:text-3xl xl:text-5xl text-white font-semibold xl:leading-relaxed">
Зарабатывай на
своем творчестве вместе с 4Teaser</h1>
<!-- <button type="button"
class="mt-8 inline-flex tracking-wide items-center px-8 md:px-12 py-3 border border-white text-sm lg:text-lg text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2">
Присоединиться
</button> -->
</div>
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
<div class=" relative mb-5">
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
</svg>
</div>
<input
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
type="search">
</div>
<div class="grid gap-2 md:gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
<inertia-link :href="route('dashboard')"
:class="[active_button == 'new' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center rounded-md text-white focus:outline-none']">
Новинки
</inertia-link >
<inertia-link :href="route('dashboard')"
:data="{ filter: 'hot' }"
:class="[active_button == 'hot' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center shadow-classic rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M14.422 6.243c-3.57-2.172-1.895-5.238-1.824-5.365A.586.586 0 0012.09 0c-1.837 0-3.276.522-4.276 1.552-1.71 1.76-1.63 4.498-1.597 5.667.004.13.007.242.007.325 0 .868.14 1.67.263 2.377.079.456.147.85.16 1.159.012.331-.048.407-.05.41-.01.01-.081.049-.276.049a.657.657 0 01-.53-.235c-.565-.634-.604-2.365-.496-3.307a.586.586 0 00-.582-.654c-1.521 0-2.658 2.488-2.658 4.712 0 1.046.21 2.07.625 3.045a8.081 8.081 0 001.7 2.527C5.894 19.157 7.89 20 10 20c2.119 0 4.114-.83 5.618-2.34a7.892 7.892 0 002.327-5.605c0-2.692-2.107-4.95-3.523-5.812zM10 18.828c-3.671 0-6.773-3.101-6.773-6.773 0-.893.213-1.83.585-2.571.086-.173.175-.322.263-.447.01.967.163 2.284.841 3.046.366.41.852.627 1.405.627.518 0 .912-.156 1.172-.466.486-.578.337-1.436.148-2.524-.115-.66-.245-1.409-.245-2.176 0-.1-.003-.22-.007-.359-.032-1.107-.099-3.412 1.265-4.817.613-.63 1.467-1.014 2.55-1.145-.123.406-.228.92-.232 1.497-.01 1.27.476 3.085 2.841 4.524 1.145.696 2.96 2.618 2.96 4.811A6.78 6.78 0 0110 18.828z" />
</svg>
Популярные
</inertia-link >
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 my-6">
<button class="button-default text-gray text-lg">Очистить фильтры</button>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<feed
:self-feed="false"
:feeds="feeds"
/>
</div>
</div>
</template>
<script>
import Feed from "@/Shared/Feed/Feed";
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
Feed
},
props: {
feeds: Array,
active_button: String,
},
methods: {
},
}
</script>

99
resources/js/Pages/Feed/Index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<meta-head title="Новости"></meta-head>
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
<div class="items-center grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:gap-12">
<dropdown-menu>
<MenuItems class="origin-top-left absolute left-0 mt-2 w-64 bg-indigo-300 shadow-lg max-h-60 rounded-md text-base ring-1 ring-indigo-200 overflow-auto focus:outline-none">
<MenuItem>
<inertia-link :href="route('video.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
<VideoCameraIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
Загрузить видео
</inertia-link>
</MenuItem>
<MenuItem>
<inertia-link :href="route('image.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
<PhotographIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
Загрузить изображение
</inertia-link>
</MenuItem>
<MenuItem>
<inertia-link :href="route('music.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
<MusicNoteIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
Загрузить музыку
</inertia-link>
</MenuItem>
</MenuItems>
</dropdown-menu>
<inertia-link
:href='route("feeds.layoutsidebar.image")'
:class="[active_button == 'image' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange', 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.167 3.333a.833.833 0 00-.834.834v11.666c0 .46.373.834.834.834h11.666c.46 0 .834-.373.834-.834V4.167a.833.833 0 00-.834-.834H4.167zm-2.5.834a2.5 2.5 0 012.5-2.5h11.666a2.5 2.5 0 012.5 2.5v11.666a2.5 2.5 0 01-2.5 2.5H4.167a2.5 2.5 0 01-2.5-2.5V4.167z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.083 6.667a.417.417 0 100 .833.417.417 0 000-.833zM5 7.083a2.083 2.083 0 114.167 0 2.083 2.083 0 01-4.167 0zM12.744 7.744a.833.833 0 011.179 0l4.166 4.167a.834.834 0 01-1.178 1.178l-3.578-3.577-8.577 8.577a.833.833 0 01-1.179-1.178l9.167-9.167z" />
</svg>
<span class="truncate">Изображения</span>
</inertia-link>
<inertia-link
:href='route("feeds.layoutsidebar.video")'
:class="[active_button == 'video' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.483 2.5a.983.983 0 00-.983.983v13.034c0 .543.44.983.983.983h13.034c.543 0 .983-.44.983-.983V3.483a.983.983 0 00-.983-.983H3.483zm-2.65.983a2.65 2.65 0 012.65-2.65h13.034a2.65 2.65 0 012.65 2.65v13.034a2.65 2.65 0 01-2.65 2.65H3.483a2.65 2.65 0 01-2.65-2.65V3.483z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5.833.833c.46 0 .834.373.834.834v16.666a.833.833 0 11-1.667 0V1.667c0-.46.373-.834.833-.834zM14.167.833c.46 0 .833.373.833.834v16.666a.833.833 0 11-1.667 0V1.667c0-.46.373-.834.834-.834z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M.833 10c0-.46.373-.833.834-.833h16.666a.833.833 0 010 1.666H1.667A.833.833 0 01.833 10zM.833 5.833c0-.46.373-.833.834-.833h4.166a.833.833 0 010 1.667H1.667a.833.833 0 01-.834-.834zM.833 14.167c0-.46.373-.834.834-.834h4.166a.833.833 0 010 1.667H1.667a.833.833 0 01-.834-.833zM13.333 14.167c0-.46.373-.834.834-.834h4.166a.833.833 0 010 1.667h-4.166a.833.833 0 01-.834-.833zM13.333 5.833c0-.46.373-.833.834-.833h4.166a.833.833 0 010 1.667h-4.166a.833.833 0 01-.834-.834z" /></svg>
<span class="truncate">Видео</span>
</inertia-link>
<inertia-link
:href='route("feeds.layoutsidebar.music")'
:class="[active_button == 'music' ? 'bg-orange' : 'bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-7 lg:py-5 justify-center shadow-classic text-sm rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.399 12.399a2.5 2.5 0 011.768-.732H17.5c.46 0 .833.373.833.833v1.667a2.5 2.5 0 01-2.5 2.5h-1.666a2.5 2.5 0 01-1.768-4.268zm1.768.934a.833.833 0 000 1.667h1.666a.833.833 0 00.834-.833v-.834h-2.5zm-11.768.733a2.5 2.5 0 011.768-.733H7.5c.46 0 .833.373.833.834v1.666a2.5 2.5 0 01-2.5 2.5H4.167a2.5 2.5 0 01-1.768-4.267zM4.167 15a.833.833 0 100 1.667h1.666a.833.833 0 00.834-.834V15h-2.5z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.039 1.864c.187.158.294.391.294.636v10a.833.833 0 01-1.666 0V3.484L8.333 4.873v9.294a.833.833 0 01-1.666 0v-10c0-.408.294-.755.696-.822l10-1.667a.833.833 0 01.676.186z"/></svg>
<span class="truncate">Музыка</span>
</inertia-link>
</div>
</div>
<div class="feeds-user-list mt-5 container mx-auto px-2 md:px-6 2xl:px-28 space-y-4 lg:space-y-8">
<feed-list
:self-feed="false"
:feeds="feeds"
/>
</div>
</template>
<script>
import FeedList from "@/Shared/FeedList/FeedList";
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import {
PhotographIcon,
VideoCameraIcon,
MusicNoteIcon,
} from '@heroicons/vue/solid'
import { MenuItem, MenuItems } from '@headlessui/vue'
import DropdownMenu from '@/Shared/Form/DropdownMenu'
export default {
components: {
FeedList,
MetaHead,
DropdownMenu,
MenuItem,
MenuItems,
PhotographIcon,
MusicNoteIcon,
VideoCameraIcon
},
layout: Layout,
props: {
feeds: Array,
active_button: String,
},
}
</script>

128
resources/js/Pages/Image/Create.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<meta-head title="Загрузить изображение"></meta-head>
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
<form @submit.prevent="submit" class=" bg-indigo-200 shadow-classic rounded-md p-5">
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
<inertia-link :href="route('profile.user', $page.props.auth.user.username)" class="block hover:underline">
Вернуться
</inertia-link>
<span class="px-3">/</span>
<h1 class="text-gray">Загрузка изображения</h1>
</div>
<div class="space-y-5">
<div class="flex flex-col">
<text-input v-model="form.title" :error="form.errors.title" type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Название" />
</div>
<div class="flex flex-col">
<textarea-input v-model="form.body" :error="form.errors.body" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="4" label="Описание" />
</div>
<div class="flex flex-col">
<file-input-multiple
v-model="form.photos"
:error="form.errors.photos"
label="Выбрать изображения"
/>
</div>
<div class="text-gray-light">
<input class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" placeholder="#tags" type="text">
</div>
<div>
<div class="text-gray-light text-lg mb-2">Тип контента</div>
<div class="flex space-x-6">
<div class="flex items-center">
<input id="feed-paid-1" v-model="paid" value="0" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="feed-paid-1" class="select-none ml-3 text-gray">Бесплатный</label>
</div>
<div class="flex items-center">
<input id="feed-paid-2" v-model="paid" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="feed-paid-2" class="select-none ml-3 text-gray">Платный</label>
</div>
</div>
</div>
<div class="space-y-5" v-if="contentPaid == 1">
<div class="flex flex-col">
<text-input v-model="form.price" :error="form.errors.price" type="number" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Цена" />
</div>
<div class="flex flex-col">
<file-input-multiple
v-model="form.photos_paid"
:error="form.errors.photos_paid"
label="Выбрать изображения"
/>
</div>
</div>
</div>
<div class="mt-12 flex flex-wrap -my-1 -mx-3">
<progress
class="mx-3 my-1 w-full"
v-if="form.progress"
:value="form.progress.percentage"
max="100"
>
{{ form.progress.percentage }}%
</progress>
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none" type="submit">
Создать
</loading-button>
<button type="button"
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
Отменить
</button>
</div>
</form>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import TextInput from '@/Shared/Form/TextInput'
import FileInputMultiple from '@/Shared/Form/FileInputMultiple'
import TextareaInput from '@/Shared/Form/TextareaInput'
import LoadingButton from "@/Shared/Form/LoadingButton";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
components: {
MetaHead,
TextInput,
FileInputMultiple,
LoadingButton,
TextareaInput,
},
layout: Layout,
data(){
return {
paid: 0,
contentPaid: 0,
}
},
watch:{
paid(value){
this.contentPaid = value;
this.form.is_paid = value;
}
},
setup() {
const form = useForm({
title: null,
body: null,
price: null,
photos: null,
photos_paid: null,
is_paid: 0
});
const submit = () => {
form.post(route("image.store"));
};
return { form, submit }
},
}
</script>

97
resources/js/Pages/Image/Feed.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<meta-head title="Изображения"></meta-head>
<div class="mb-6 py-3 banner relative bg-center bg-no-repeat bg-cover"
style="background-image: url('/image/bg-home.jpg');">
<div class="h-52 flex justify-center items-center text-center">
<div class="max-w-4xl text-gray px-3">
<h1
class=" text-xl md:text-2xl lg:text-3xl xl:text-5xl text-white font-semibold xl:leading-relaxed">
Изображения</h1>
<inertia-link :href="route('image.create')"
class="mt-8 inline-flex tracking-wide items-center px-8 md:px-12 py-3 border border-white text-sm lg:text-lg text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2">
Загрузить
</inertia-link>
</div>
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
<div class=" relative mb-5">
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
</svg>
</div>
<input
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
type="search">
</div>
<div class="grid gap-2 md:gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
<inertia-link :href="route('list.images')"
:class="[active_button == 'new' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center rounded-md text-white focus:outline-none']">
Новинки
</inertia-link >
<inertia-link :href="route('list.images')"
:data="{ filter: 'hot' }"
:class="[active_button == 'hot' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center shadow-classic rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M14.422 6.243c-3.57-2.172-1.895-5.238-1.824-5.365A.586.586 0 0012.09 0c-1.837 0-3.276.522-4.276 1.552-1.71 1.76-1.63 4.498-1.597 5.667.004.13.007.242.007.325 0 .868.14 1.67.263 2.377.079.456.147.85.16 1.159.012.331-.048.407-.05.41-.01.01-.081.049-.276.049a.657.657 0 01-.53-.235c-.565-.634-.604-2.365-.496-3.307a.586.586 0 00-.582-.654c-1.521 0-2.658 2.488-2.658 4.712 0 1.046.21 2.07.625 3.045a8.081 8.081 0 001.7 2.527C5.894 19.157 7.89 20 10 20c2.119 0 4.114-.83 5.618-2.34a7.892 7.892 0 002.327-5.605c0-2.692-2.107-4.95-3.523-5.812zM10 18.828c-3.671 0-6.773-3.101-6.773-6.773 0-.893.213-1.83.585-2.571.086-.173.175-.322.263-.447.01.967.163 2.284.841 3.046.366.41.852.627 1.405.627.518 0 .912-.156 1.172-.466.486-.578.337-1.436.148-2.524-.115-.66-.245-1.409-.245-2.176 0-.1-.003-.22-.007-.359-.032-1.107-.099-3.412 1.265-4.817.613-.63 1.467-1.014 2.55-1.145-.123.406-.228.92-.232 1.497-.01 1.27.476 3.085 2.841 4.524 1.145.696 2.96 2.618 2.96 4.811A6.78 6.78 0 0110 18.828z" />
</svg>
Популярные
</inertia-link >
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 my-6">
<button class="button-default text-gray text-lg">Очистить фильтры</button>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<feed
:self-feed="false"
:feeds="feeds"
/>
</div>
</div>
</template>
<script>
import Feed from "@/Shared/Feed/Feed";
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
Feed
},
props: {
feeds: Array,
active_button: String,
},
methods: {
},
}
</script>

159
resources/js/Pages/Music/Create.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<meta-head title="Загрузить музыку"></meta-head>
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
<form @submit.prevent="submit" class=" bg-indigo-200 shadow-classic rounded-md p-5">
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
<inertia-link :href="route('profile.user', $page.props.auth.user.username)" class="block hover:underline">
Вернуться
</inertia-link>
<span class="px-3">/</span>
<h1 class="text-gray">Загрузка музыки</h1>
</div>
<div class="space-y-5">
<div class="flex flex-col">
<text-input v-model="form.title" :error="form.errors.title" type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Название" />
</div>
<div class="flex flex-col">
<textarea-input v-model="form.body" :error="form.errors.body" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="4" label="Описание" />
</div>
<div class="flex flex-col">
<file-input
v-model="form.preview"
accept="image/png, image/jpeg, image/jpg"
:error="form.errors.preview"
label="Загрузить превью"
/>
</div>
<div class="flex flex-col">
<file-input-multiple
@fileTime='saveTimeFile'
v-model="form.musics"
accept=".mp3"
:error="form.errors.musics"
label="Выбрать музыку"
/>
</div>
<div class="text-gray-light">
<input class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" placeholder="#tags" type="text">
</div>
<div>
<div class="text-gray-light text-lg mb-2">Тип контента</div>
<div class="flex space-x-6">
<div class="flex items-center">
<input id="feed-paid-1" v-model="paid" value="0" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="feed-paid-1" class="select-none ml-3 text-gray">Бесплатный</label>
</div>
<div class="flex items-center">
<input id="feed-paid-2" v-model="paid" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="feed-paid-2" class="select-none ml-3 text-gray">Платный</label>
</div>
</div>
</div>
<div class="space-y-5" v-if="contentPaid == 1">
<div class="flex flex-col">
<text-input v-model="form.price" :error="form.errors.price" type="number" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Цена" />
</div>
<div class="flex flex-col">
<file-input-multiple
@fileTime='savePaidTimeFile'
v-model="form.musics_paid"
accept=".mp3"
:error="form.errors.musics_paid"
label="Выбрать музыку"
/>
</div>
</div>
</div>
<div class="mt-12 flex flex-wrap -my-1 -mx-3">
<progress
class="mx-3 my-1 w-full"
v-if="form.progress"
:value="form.progress.percentage"
max="100"
>
{{ form.progress.percentage }}%
</progress>
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none" type="submit">
Создать
</loading-button>
<button type="button"
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
Отменить
</button>
</div>
</form>
</div>
</template>
<script>
import Layout from "@/Shared/Layout";
import MetaHead from "@/Shared/MetaHead";
import TextInput from "@/Shared/Form/TextInput";
import FileInputMultiple from "@/Shared/Form/FileInputMultiple";
import FileInput from "@/Shared/Form/FileInput";
import TextareaInput from "@/Shared/Form/TextareaInput";
import LoadingButton from "@/Shared/Form/LoadingButton";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
layout: Layout,
components: {
MetaHead,
TextInput,
FileInput,
FileInputMultiple,
LoadingButton,
TextareaInput,
},
watch: {
paid(value) {
this.contentPaid = value;
this.form.is_paid = value;
},
},
data() {
return {
paid: 0,
contentPaid: 0,
};
},
setup() {
const form = useForm({
title: null,
body: null,
preview: null,
musics: null,
musics_paid: null,
price: null,
is_paid: 0,
times: [],
times_paid: [],
});
const submit = () => {
form.post(route("music.store"));
};
const saveTimeFile = (time) => {
form.times.push(time);
};
const savePaidTimeFile = (time) => {
form.times_paid.push(time);
};
return { form, submit, saveTimeFile, savePaidTimeFile };
},
};
</script>

97
resources/js/Pages/Music/Feed.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<meta-head title="Музыка"></meta-head>
<div class="mb-6 py-3 banner relative bg-center bg-no-repeat bg-cover"
style="background-image: url('/image/bg-home.jpg');">
<div class="h-52 flex justify-center items-center text-center">
<div class="max-w-4xl text-gray px-3">
<h1
class=" text-xl md:text-2xl lg:text-3xl xl:text-5xl text-white font-semibold xl:leading-relaxed">
Музыка</h1>
<inertia-link :href="route('music.create')"
class="mt-8 inline-flex tracking-wide items-center px-8 md:px-12 py-3 border border-white text-sm lg:text-lg text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2">
Загрузить
</inertia-link>
</div>
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
<div class=" relative mb-5">
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
</svg>
</div>
<input
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
type="search">
</div>
<div class="grid gap-2 md:gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
<inertia-link :href="route('list.musics')"
:class="[active_button == 'new' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center rounded-md text-white focus:outline-none']">
Новинки
</inertia-link >
<inertia-link :href="route('list.musics')"
:data="{ filter: 'hot' }"
:class="[active_button == 'hot' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center shadow-classic rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M14.422 6.243c-3.57-2.172-1.895-5.238-1.824-5.365A.586.586 0 0012.09 0c-1.837 0-3.276.522-4.276 1.552-1.71 1.76-1.63 4.498-1.597 5.667.004.13.007.242.007.325 0 .868.14 1.67.263 2.377.079.456.147.85.16 1.159.012.331-.048.407-.05.41-.01.01-.081.049-.276.049a.657.657 0 01-.53-.235c-.565-.634-.604-2.365-.496-3.307a.586.586 0 00-.582-.654c-1.521 0-2.658 2.488-2.658 4.712 0 1.046.21 2.07.625 3.045a8.081 8.081 0 001.7 2.527C5.894 19.157 7.89 20 10 20c2.119 0 4.114-.83 5.618-2.34a7.892 7.892 0 002.327-5.605c0-2.692-2.107-4.95-3.523-5.812zM10 18.828c-3.671 0-6.773-3.101-6.773-6.773 0-.893.213-1.83.585-2.571.086-.173.175-.322.263-.447.01.967.163 2.284.841 3.046.366.41.852.627 1.405.627.518 0 .912-.156 1.172-.466.486-.578.337-1.436.148-2.524-.115-.66-.245-1.409-.245-2.176 0-.1-.003-.22-.007-.359-.032-1.107-.099-3.412 1.265-4.817.613-.63 1.467-1.014 2.55-1.145-.123.406-.228.92-.232 1.497-.01 1.27.476 3.085 2.841 4.524 1.145.696 2.96 2.618 2.96 4.811A6.78 6.78 0 0110 18.828z" />
</svg>
Популярные
</inertia-link >
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 my-6">
<button class="button-default text-gray text-lg">Очистить фильтры</button>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<feed
:self-feed="false"
:feeds="feeds"
/>
</div>
</div>
</template>
<script>
import Feed from "@/Shared/Feed/Feed";
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
Feed
},
props: {
feeds: Array,
active_button: String,
},
methods: {
},
}
</script>

45
resources/js/Pages/Profile/Index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<meta-head title="Профиль юзера"></meta-head>
<profile-header :user='user' :counts='counts' />
<profile-menu :user='user' />
<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3">
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<feed
:self-user="user.id"
:self-feed="true"
:feeds="feeds"
/>
</div>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import ProfileHeader from '@/Shared/Partials/ProfileHeader'
import ProfileMenu from '@/Shared/Partials/ProfileMenu'
import Feed from "@/Shared/Feed/Feed";
export default {
layout: Layout,
components: {
Feed,
MetaHead,
ProfileHeader,
ProfileMenu,
},
props: {
user: Object,
feeds: Array,
counts: Object,
}
}
</script>

155
resources/js/Pages/Profile/Readers.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<meta-head title="Читаемые пользователи"></meta-head>
<profile-header :user='user' :counts='counts' />
<profile-menu :user='user' />
<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3">
<div class="cards-block rounded-md bg-indigo-200 shadow-classic p-2 lg:p-5">
<div class=" space-y-3 md:space-y-0 md:flex items-center">
<div class="flex-1 md:mr-10">
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center z-10">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"/> </svg>
</div>
<input v-model="form.search" class=" relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 " placeholder="Поиск" type="search"/>
</div>
</div>
<div class="flex space-x-6 md:mr-10">
<div class="flex items-center">
<input id="user-sex-1" v-model="form.leader" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-1" class="select-none ml-3 text-gray text-xs md:text-base">По лидерам</label>
</div>
<div class="flex items-center">
<input id="user-sex-2" v-model="form.leader" value="0" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-2" class="select-none ml-3 text-gray text-xs md:text-base">Не по лидерам</label>
</div>
</div>
<div class="text-gray-light">
<button @click="resetSearch()" class="default">Сбросить</button>
</div>
</div>
<div v-show="readers.length" class="mt-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid gap-2 lg:gap-4 grid-cards">
<div v-for="reader in readers" :key='reader.id' class="group mb-5 user-card relative">
<div v-if="user.is_auth_user" class="absolute inset-x-0 top-4 z-10 flex justify-center">
<toggle
@clicked='leader'
:user_id='reader.id'
:enabled="reader.is_leader"
textin='Сделать лидером' textout='Убрать лидера' />
</div>
<div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
<div class="flex flex-col items-center">
<inertia-link :href="route('profile.user', reader.username)" class="block flex-shrink-0">
<user-avatar :user='reader' size='small' class="border border-white shadow-classic h-20 w-20 text-lg" />
</inertia-link>
<inertia-link :href="route('profile.user', reader.username)" class="mt-2 block text-white text-sm text-center">
<p>{{reader.name}}</p>
<p class="text-xs">{{reader.username}}</p>
</inertia-link>
</div>
</div>
<div class="gradient-profile relative overflow-hidden">
<user-banner class="w-full h-72 bg-indigo-300" :user='reader' size='banner' />
</div>
<div v-if="user.is_auth_user" class="transition-opacity sm:opacity-0 group-hover:opacity-100 absolute w-full text-center">
<button @click="susbscribe(reader.id)" class="leading-none focus:outline-none hover:underline text-sm text-orange-dark">Отписаться</button>
</div>
</div>
</div>
</div>
<div v-show="readers.length == 0">
<p class=" text-center md:text-2xl text-gray-light">Пользователи не найдены</p>
</div>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import ProfileHeader from '@/Shared/Partials/ProfileHeader'
import ProfileMenu from '@/Shared/Partials/ProfileMenu'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import Toggle from '@/Shared/Form/Toggle'
import filter from 'lodash/filter';
import pickBy from 'lodash/pickBy';
import throttle from 'lodash/throttle';
import { Inertia } from "@inertiajs/inertia";
export default {
layout: Layout,
components: {
MetaHead,
Toggle,
UserAvatar,
UserBanner,
ProfileHeader,
ProfileMenu,
},
props: {
user: Object,
readers: Array,
counts: Object,
filters: Object,
},
data() {
return {
form: {
search: this.filters.search,
leader: this.filters.leader,
},
}
},
watch: {
form: {
handler: throttle(function() {
let query = pickBy(this.form)
const params = Object.keys(query).length ? query : { remember: 'forget' };
const url = route('profile.readers', this.user.username);
Inertia.get(url, params, { replace: true, preserveScroll: true, preserveState: true } )
}, 300),
deep: true,
},
},
methods:{
resetSearch(){
this.form.search = '';
this.form.leader = '';
},
susbscribe(user_id)
{
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
},
leader(user_id)
{
let current_user = filter(this.readers, function (x) {
return x.id === user_id;
});
if(current_user){
current_user = current_user[0];
Inertia.post(route('users.leader', user_id), {vote: current_user.is_leader}, { preserveScroll: true, preserveState: true })
}
}
}
}
</script>

136
resources/js/Pages/Profile/Subs.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<meta-head title="Подписчики"></meta-head>
<profile-header :user='user' :counts='counts' />
<profile-menu :user='user' />
<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3">
<div class="cards-block rounded-md bg-indigo-200 shadow-classic p-2 lg:p-5">
<div class=" space-y-3 md:space-y-0 md:flex items-center">
<div class="flex-1 md:mr-10">
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center z-10">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"/> </svg>
</div>
<input v-model="form.search" class=" relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 " placeholder="Поиск" type="search"/>
</div>
</div>
<div class="flex space-x-6 md:mr-10">
<div class="flex items-center">
<input id="user-sex-1" v-model="form.sub" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-1" class="select-none ml-3 text-gray text-xs md:text-base">По подписчикам</label>
</div>
<div class="flex items-center">
<input id="user-sex-2" v-model="form.sub" value="0" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-2" class="select-none ml-3 text-gray text-xs md:text-base">Не по подписчикам</label>
</div>
</div>
<div class="text-gray-light">
<button @click="resetSearch()" class="default">Сбросить</button>
</div>
</div>
<div v-show="subscribers.length" class="mt-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid gap-2 lg:gap-4 grid-cards">
<div v-for="subscriber in subscribers" :key='subscriber.id' class=" user-card relative">
<div v-if="user.is_auth_user" class="absolute inset-x-0 top-4 z-10 flex justify-center">
<toggle
@clicked='susbscribe'
:user_id='subscriber.id'
:enabled="subscriber.is_sub"
textin='Подписаться' textout='Отписаться' />
</div>
<div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
<div class="flex flex-col items-center">
<inertia-link :href="route('profile.user', subscriber.username)" class="block flex-shrink-0">
<user-avatar :user='subscriber' size='small' class="border border-white shadow-classic h-20 w-20 text-lg" />
</inertia-link>
<inertia-link :href="route('profile.user', subscriber.username)" class="mt-2 block text-white text-sm text-center">
<p>{{subscriber.name}}</p>
<p class="text-xs">{{subscriber.username}}</p>
</inertia-link>
</div>
</div>
<div class="gradient-profile relative overflow-hidden">
<user-banner class="w-full h-72 bg-indigo-300" :user='subscriber' size='banner' />
</div>
</div>
</div>
</div>
<div v-show="subscribers.length == 0">
<p class=" text-center md:text-2xl text-gray-light">Пользователи не найдены</p>
</div>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import ProfileHeader from '@/Shared/Partials/ProfileHeader'
import ProfileMenu from '@/Shared/Partials/ProfileMenu'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import Toggle from '@/Shared/Form/Toggle'
import pickBy from 'lodash/pickBy';
import throttle from 'lodash/throttle';
import { Inertia } from "@inertiajs/inertia";
export default {
layout: Layout,
components: {
MetaHead,
Toggle,
UserAvatar,
UserBanner,
ProfileHeader,
ProfileMenu,
},
props: {
user: Object,
subscribers: Array,
counts: Object,
filters: Object,
},
data() {
return {
form: {
search: this.filters.search,
sub: this.filters.sub,
},
}
},
watch: {
form: {
handler: throttle(function() {
let query = pickBy(this.form)
const params = Object.keys(query).length ? query : { remember: 'forget' };
const url = route('profile.subs', this.user.username);
Inertia.get(url, params, { replace: true, preserveScroll: true, preserveState: true } )
}, 300),
deep: true,
},
},
methods:{
resetSearch(){
this.form.search = '';
this.form.sub = '';
},
susbscribe(user_id)
{
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
},
}
}
</script>

84
resources/js/Pages/Settings/SettingsMoney.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<meta-head title="Доход"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4">
<div class="border-b border-indigo-300">
<div class="flex justify-between px-4 2xl:px-28 my-4 lg:my-8">
<div class="flex flex-col text-white">
<span class="text-lg">Баланс:</span>
<span class="text-3xl">{{$page.props.balance}}</span>
</div>
<button @click="testPaid" type="button"
class="my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-pink focus:outline-none">
Пополнить
</button>
<button type="button"
class="my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none">
Вывести
</button>
</div>
</div>
<div class="my-4 lg:my-8">
<div class="py-4 px-4 2xl:px-28 md:text-lg text-white">История операций:</div>
<div class="divide-y divide-indigo-300 ">
<div v-for="point in points" :key="point.id" class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12">
<div class="col-span-5 flex items-center">
<div class="flex-shrink-0 mr-3 lg:mr-8">
<svg :class="[point.direction == 0 ? 'text-green rotate-90' : '-rotate-90 text-red', 'transform w-8 h-8']">
<use xlink:href="#arrow-up-circle"></use>
</svg>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-gray">{{point.date}}</p>
<p class="truncate lg:mt-1 text-base text-gray-light">{{point.time}}</p>
</div>
</div>
<div class="col-span-2 text-left lg:text-center text-white xl:text-xl font-semibold">
{{point.point}}
</div>
<div class="col-span-5 text-left lg:text-right text-gray-light xl:text-lg">
{{point.type}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Inertia } from "@inertiajs/inertia";
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
SettingsMenu,
},
props:{
points: Array,
},
methods: {
testPaid(){
Inertia.post(route("users.testPaid"), {
preserveScroll: true,
preserveState: true,
});
}
},
}
</script>

128
resources/js/Pages/Settings/SettingsNotify.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<meta-head title="Оповещения"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4">
<div data-simplebar class="max-h-[500px] overflow-auto my-4 lg:my-8">
<div class="divide-y divide-indigo-300">
<div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
<div class="col-span-4 flex items-center">
<div class="flex-shrink-0 mr-5">
<div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
<p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
</div>
</div>
<div class="col-span-6 text-white xl:text-xl">
оценил(а) вашу фотографию
</div>
<div class="col-span-2 flex lg:justify-end">
<img class="object-cover w-20 h-20" src="/image/user_card2.png" alt="">
</div>
</div>
<div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
<div class="col-span-4 flex items-center">
<div class="flex-shrink-0 mr-5">
<div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
<p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
</div>
</div>
<div class="col-span-6 flex flex-col text-white xl:text-xl">
<span>оставил(а) комментарий:</span>
<span class="truncate text-base text-gray-light">“Очень красиво”</span>
</div>
<div class="col-span-2 flex lg:justify-end">
<a href="#" class="text-pink text-lg">Перейти</a>
</div>
</div>
<div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
<div class="col-span-4 flex items-center">
<div class="flex-shrink-0 mr-5">
<div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
<p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
</div>
</div>
<div class="col-span-6 flex flex-col text-white xl:text-xl">
<span>оставил(а) комментарий:</span>
<span class="truncate text-base text-gray-light">“Очень красиво”</span>
</div>
<div class="col-span-2 flex lg:justify-end">
<a href="#" class="text-pink text-lg">Перейти</a>
</div>
</div>
<div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
<div class="col-span-4 flex items-center">
<div class="flex-shrink-0 mr-5">
<div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
<p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
</div>
</div>
<div class="col-span-6 flex flex-col text-white xl:text-xl">
<span>оставил(а) комментарий:</span>
<span class="truncate text-base text-gray-light">“Очень красиво”</span>
</div>
<div class="col-span-2 flex lg:justify-end">
<a href="#" class="text-pink text-lg">Перейти</a>
</div>
</div>
<div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
<div class="col-span-4 flex items-center">
<div class="flex-shrink-0 mr-5">
<div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
<p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
</div>
</div>
<div class="col-span-6 flex flex-col text-white xl:text-xl">
<span>оставил(а) комментарий:</span>
<span class="truncate text-base text-gray-light">“Очень красиво”</span>
</div>
<div class="col-span-2 flex lg:justify-end">
<a href="#" class="text-pink text-lg">Перейти</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
SettingsMenu,
},
methods: {
},
}
</script>

195
resources/js/Pages/Settings/SettingsProfile.vue Normal file
View File

@@ -0,0 +1,195 @@
<template>
<meta-head title="Мои настройки"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4">
<div class="m-4 lg:m-8">
<div class="flex flex-col xl:flex-row">
<div class="xl:mr-24">
<div class="flex items-center">
<div class="flex-shrink-0 mr-5">
<user-avatar :user='user' class="w-20 h-20 text-lg" />
</div>
<div class="flex flex-col">
<p class="text-base lg:text-xl font-semibold text-gray">{{user.name}}</p>
<p class="lg:mt-1 text-base text-gray-light">@{{user.username}}</p>
</div>
</div>
<input ref="fileavatar" class="hidden" accept="image/png, image/jpeg, image/jpg" type="file" @change="previewFiles">
<input ref="filebanner" class="hidden" accept="image/png, image/jpeg, image/jpg" type="file" @change="previewFilesBanner">
<div>
<div v-if="$page.props.errors.avatar" class="text-red lg:text-lg">
{{$page.props.errors.avatar}}
</div>
<button v-if="!user.photo_path" @click="changeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
Изменить фото профиля
</button>
<button v-else @click="removeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
Удалить фото
</button>
</div>
</div>
<div class="mt-5 xl:mt-0">
<div class="flex items-center">
<div class="flex-shrink-0 mr-5">
<user-banner class="w-60 lg:w-96 h-20 rounded-xl bg-indigo-300" :user='user' size='banner' />
</div>
</div>
<div>
<div v-if="$page.props.errors.banner" class="text-red lg:text-lg">
{{$page.props.errors.banner}}
</div>
<button v-if="!user.banner_path" @click="changeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
Изменить баннер профиля
</button>
<button v-else @click="removeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
Удалить баннер
</button>
</div>
</div>
</div>
<form @submit.prevent="submit" class="mt-10 grid gap-4 lg:gap-10 grid-cols-1 lg:grid-cols-2">
<div class="flex flex-col">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Имя" />
</div>
<div class="flex flex-col">
<text-input v-model="form.last_name" :error="form.errors.last_name" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Фамилия" />
</div>
<div class="flex flex-col">
<text-input v-model="form.username" :error="form.errors.username" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Тег" />
</div>
<div class="flex flex-col">
<text-input v-model="form.date_of_birth" :error="form.errors.date_of_birth" type="date" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Дата рождения" />
</div>
<div class="flex flex-col">
<text-input v-model="form.email" :error="form.errors.email" type="email" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Почта" />
</div>
<div class="flex flex-col">
<text-input v-model="form.phone" :error="form.errors.phone" type="tel" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Телефон" />
</div>
<div>
<div class="text-gray-light text-lg mb-2">Пол</div>
<div class="flex space-x-6">
<div class="flex items-center">
<input id="user-sex-1" v-model="form.sex" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-1" class="select-none ml-3 text-gray">Женский</label>
</div>
<div class="flex items-center">
<input id="user-sex-2" v-model="form.sex" value="2" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-2" class="select-none ml-3 text-gray">Мужской</label>
</div>
</div>
</div>
<div class="lg:col-span-2">
<div class="flex flex-col">
<textarea-input label="О себе" v-model="form.about" :error="form.errors.about" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="2"></textarea-input>
</div>
</div>
<div class="flex flex-wrap -my-1 -mx-3">
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none" type="submit">Сохранить</loading-button>
<button type="button"
class="mx-3 my-1 default text-lg text-orange">
Удалить аккаунт
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import LoadingButton from "@/Shared/Form/LoadingButton";
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import MetaHead from '@/Shared/MetaHead'
import TextInput from '@/Shared/Form/TextInput'
import TextareaInput from '@/Shared/Form/TextareaInput'
import { useForm } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";
import { toRefs } from "vue";
export default {
layout: Layout,
components: {
MetaHead,
UserAvatar,
UserBanner,
TextInput,
TextareaInput,
LoadingButton,
SettingsMenu,
},
props: {
user: Object,
},
methods: {
previewFilesBanner(event){
const file = event.target.files[0];
Inertia.post(route("image.banner"), {
_method: 'put',
banner: file,
})
},
previewFiles(event){
const file = event.target.files[0];
Inertia.post(route("image.avatar"), {
_method: 'put',
avatar: file,
})
},
changeBanner(){
this.$refs.filebanner.click();
},
removeBanner(){
Inertia.post(route("image.banner.remove"), {
_method: 'delete',
})
},
changeAvatar(){
this.$refs.fileavatar.click();
},
removeAvatar(){
Inertia.post(route("image.avatar.remove"), {
_method: 'delete',
})
}
},
setup(props) {
const { user } = toRefs(props);
const form = useForm({
first_name: user.value.first_name,
last_name: user.value.last_name,
username: user.value.username,
email: user.value.email,
phone: user.value.phone,
sex: user.value.sex,
date_of_birth: user.value.date_of_birth,
about: user.value.about,
password: null,
});
const submit = () => {
form.put(route("users.update", user.value.id));
};
return { form, submit }
},
}
</script>

47
resources/js/Pages/Settings/SettingsPurchases.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<meta-head title="Покупки"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4">
<div class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
<inertia-link :href="route('setting.show.purchases', feed.id)" v-for="feed in feeds" :key="feed.id" class="block contain relative overflow-hidden">
<feed-header-misc :count="1" :type="feed.type" />
<div>
<feed-preview class="w-full h-36 md:h-72 object-cover" :type="feed.type" :source='feed.preview' />
</div>
<p class="mt-2 text-gray-light text-sm">Цена: {{feed.price}}</p>
<p class="mt-2 text-gray-light text-sm">Дата покупки: {{feed.purchase_date}}</p>
</inertia-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Layout from "@/Shared/Layout";
import SettingsMenu from "@/Shared/LayoutParts/SettingsMenu";
import MetaHead from "@/Shared/MetaHead";
import Feed from "@/Shared/Feed/Feed";
import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
import FeedPreview from "@/Shared/Feed/FeedPreview";
export default {
layout: Layout,
components: {
Feed,
MetaHead,
SettingsMenu,
FeedHeaderMisc,
FeedPreview,
},
props: {
feeds: Array,
},
methods: {},
};
</script>

95
resources/js/Pages/Settings/SettingsPurchasesFile.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<meta-head title="Скачать медиа контент"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4 p-5">
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
<inertia-link :href="route('setting.purchases')" class="block hover:underline">Вернуться</inertia-link>
<span class="px-3">/</span>
<h1 class="text-gray">Скачать медиа контент</h1>
</div>
<div class="my-8 flex items-center justify-between">
<inertia-link :href="route('profile.user', seller.username)" class="flex items-center">
<div class="flex-shrink-0 block mr-2 md:mr-4">
<user-avatar :user='seller' size='small' class="w-10 h-10 md:w-16 md:h-16 text-lg" />
</div>
<div class="flex flex-col">
<span class="text-sm md:text-base block font-medium text-white">{{ seller.name }}</span>
<span class="text-xs text-gray-light">продавец</span>
</div>
</inertia-link>
<div class="text-right">
<p class="mt-2 text-gray-light text-sm">Цена: {{purchase.price}}</p>
<p class="mt-2 text-gray-light text-sm">Дата покупки: {{purchase.purchase_date}}</p>
</div>
</div>
<div v-if="purchase.title" class="text-lg text-gray font-semibold">
{{purchase.title}}
</div>
<div v-if="purchase.body" class="text-lg mt-4 text-gray-light" v-html="purchase.body"></div>
<div class="mt-4 ">
<component
:is="currentTypeNode"
:purchase="purchase"
></component>
</div>
<div class="mt-12 flex -mx-3 -my-1 flex-wrap">
<a :href="route('download.purchases', purchase.id)" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none">
Скачать архив
</a>
<inertia-link :href="route('setting.purchases')"
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
Вернуться
</inertia-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Layout from "@/Shared/Layout";
import MetaHead from "@/Shared/MetaHead";
import PurchaseImages from "@/Shared/Purchase/PurchaseImages";
import PurchaseMusics from "@/Shared/Purchase/PurchaseMusics";
import SettingsMenu from "@/Shared/LayoutParts/SettingsMenu";
import UserAvatar from '@/Shared/Misc/UserAvatar'
export default {
layout: Layout,
components: {
MetaHead,
PurchaseImages,
PurchaseMusics,
SettingsMenu,
UserAvatar,
},
props: {
purchase: Object,
seller: Object,
},
computed: {
currentTypeNode() {
return "purchase-" + this.purchase.type;
},
},
};
</script>

78
resources/js/Pages/Settings/SettingsTarif.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<meta-head title="Тарифы"></meta-head>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
<settings-menu />
<div class="col-span-4">
<div class="mx-4 2xl:mx-28 my-8">
<h2 class="text-xl lg:text-2xl xl:text-4xl text-white font-semibold">
Выберите тариф, который подходит именно вам
</h2>
<p class="mt-4 lg:text-xl xl:text-2xl text-white">
Более 1 млн фотографий, видео и музыки в постоянном доступе для вас!
</p>
<p v-if="lastSubscription" class="mt-4 xl:text-xl text-green">
Дата окончания подписки:
<span class="block md:inline-block">{{ lastSubscription.endDateTime }} ({{ lastSubscription.package.name }})</span>
</p>
<div v-for="plan in plans" :key='plan.id' :class="[lastSubscription?.package.id === plan.id ? 'border-l-4 lg:border-l-8 border-orange' : '' ,'mt-7 p-7 xl:mt-14 xl:p-14 shadow-classic rounded-md bg-indigo-100']">
<div class="flex flex-col lg:grid grid-cols-6 gap-3 items-center">
<div class="col-start-1 col-end-4 flex flex-col items-center lg:items-start text-center lg:text-left">
<span class="text-xl md:text-2xl lg:text-3xl xl:text-4xl text-white font-medium">{{plan.name}}</span>
<span class="mt-4 text-lg xl:text-2xl text-gray-light">For individuals that need advanced recording & editing.</span>
</div>
<div class="col-start-5 col-end-7 flex flex-col items-center">
<span class="text-3xl lg:text-4xl xl:text-6xl text-white font-bold">{{plan.price}}</span>
<button type="button"
@click="subsPlan(plan.id)"
:class="[lastSubscription?.package.id === plan.id ? 'bg-white border border-green text-green' : 'text-white bg-pink hover:shadow-pink' , 'mt-4 my-1 transition shadow-none inline-flex items-center px-8 py-3 justify-center text-base rounded-3xl focus:outline-none']">
<span v-if="lastSubscription?.package.id === plan.id">
активен
</span>
<span v-else>
выбрать тариф
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Inertia } from "@inertiajs/inertia";
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
SettingsMenu,
},
props:{
plans: Array,
lastSubscription: Object,
},
methods: {
subsPlan(id) {
Inertia.post(route("users.plan", id), {
preserveScroll: true,
preserveState: true,
});
},
},
}
</script>

132
resources/js/Pages/User/Index.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<meta-head title="Пользователи"></meta-head>
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
<div class="md:flex items-center mb-5">
<div class="flex-1 relative mb-5 md:mb-0 md:mr-10">
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
</svg>
</div>
<input
v-model="form.search"
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
type="search">
</div>
<div>
<div class="flex space-x-6">
<div class="flex items-center">
<input id="user-sex-1" v-model="form.sex" value="1" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-1" class="select-none ml-3 text-gray text-xs md:text-base">Женский</label>
</div>
<div class="flex items-center">
<input id="user-sex-2" v-model="form.sex" value="2" type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent">
<label for="user-sex-2" class="select-none ml-3 text-gray text-xs md:text-base">Мужской</label>
</div>
</div>
</div>
</div>
<div v-show="users.length" class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<div v-for="user in users" :key='user.id' class=" user-card relative">
<div class="absolute inset-x-0 top-4 z-10 flex justify-center">
<toggle
@clicked='susbscribe'
:user_id='user.id'
:enabled="user.is_sub"
textin='Подписаться' textout='Отписаться' />
</div>
<div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
<div class="flex flex-col items-center">
<inertia-link :href="route('profile.user', user.username)" class="block flex-shrink-0">
<user-avatar :user='user' size='small' class="border border-white shadow-classic h-20 w-20 text-lg" />
</inertia-link>
<inertia-link :href="route('profile.user', user.username)" class="mt-2 block text-white text-sm text-center">
<p class="">{{user.name}}</p>
<p class="text-xs">{{user.username}}</p>
</inertia-link>
</div>
</div>
<div class="gradient-profile relative overflow-hidden">
<user-banner class="h-72 bg-indigo-300" :user='user' size='banner' />
</div>
</div>
</div>
<div v-show="users.length == 0">
<p class=" text-center md:text-2xl text-gray-light ">Пользователи не найдены</p>
</div>
</div>
</template>
<script>
import MetaHead from '@/Shared/MetaHead'
import Toggle from '@/Shared/Form/Toggle'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import UserBanner from '@/Shared/Misc/UserBanner'
import Layout from '@/Shared/Layout'
import throttle from 'lodash/throttle'
import pickBy from 'lodash/pickBy'
import { Inertia } from "@inertiajs/inertia";
export default {
components: {
MetaHead,
UserAvatar,
UserBanner,
Toggle,
},
layout: Layout,
props: {
users: Array,
filters: Object,
},
data() {
return {
form: {
search: this.filters.search,
sex: this.filters.sex,
},
}
},
watch: {
form: {
handler: throttle(function() {
let query = pickBy(this.form)
Inertia.get(this.route('users.index', Object.keys(query).length ? query : { remember: 'forget' }),
{},
{
preserveScroll: true,
preserveState: true,
}
)
}, 300),
deep: true,
},
},
methods:{
susbscribe(user_id)
{
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
}
}
}
</script>

101
resources/js/Pages/Video/Create.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<meta-head title="Загрузить видео"></meta-head>
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
<form @submit.prevent="submit" class=" bg-indigo-200 shadow-classic rounded-md p-5">
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
<inertia-link :href="route('profile.user', $page.props.auth.user.username)" class="block hover:underline">
Вернуться
</inertia-link>
<span class="px-3">/</span>
<h1 class="text-gray">Загрузка видео</h1>
</div>
<div class="space-y-5">
<div class="flex flex-col">
<text-input v-model="form.title" :error="form.errors.title" type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Название" />
</div>
<div class="flex flex-col">
<textarea-input v-model="form.body" :error="form.errors.body" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30" rows="4" label="Описание" />
</div>
<div class="flex flex-col">
<file-input-multiple
v-model="form.videos"
accept=".mp4"
:error="form.errors.videos"
label="Выбрать видео"
/>
</div>
<div class="flex flex-col">
<file-input
v-model="form.preview"
accept="image/png, image/jpeg, image/jpg"
:error="form.errors.preview"
label="Загрузить превью"
/>
</div>
<div class="text-gray-light">
<input class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" placeholder="#tags" type="text">
</div>
</div>
<div class="mt-12 flex flex-wrap -my-1 -mx-3">
<progress
class="mx-3 my-1 w-full"
v-if="form.progress"
:value="form.progress.percentage"
max="100"
>
{{ form.progress.percentage }}%
</progress>
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none" type="submit">
Создать
</loading-button>
<button type="button"
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
Отменить
</button>
</div>
</form>
</div>
</template>
<script>
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
import TextInput from '@/Shared/Form/TextInput'
import FileInputMultiple from '@/Shared/Form/FileInputMultiple'
import FileInput from '@/Shared/Form/FileInput'
import TextareaInput from '@/Shared/Form/TextareaInput'
import LoadingButton from "@/Shared/Form/LoadingButton";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
components: {
MetaHead,
TextInput,
FileInput,
FileInputMultiple,
LoadingButton,
TextareaInput,
},
layout: Layout,
setup() {
const form = useForm({
title: null,
body: null,
preview: null,
videos: null,
});
const submit = () => {
form.post(route("video.store"));
};
return { form, submit }
},
}
</script>

97
resources/js/Pages/Video/Feed.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<meta-head title="Видео"></meta-head>
<div class="mb-6 py-3 banner relative bg-center bg-no-repeat bg-cover"
style="background-image: url('/image/bg-home.jpg');">
<div class="h-52 flex justify-center items-center text-center">
<div class="max-w-4xl text-gray px-3">
<h1
class=" text-xl md:text-2xl lg:text-3xl xl:text-5xl text-white font-semibold xl:leading-relaxed">
Видео</h1>
<inertia-link :href="route('video.create')"
class="mt-8 inline-flex tracking-wide items-center px-8 md:px-12 py-3 border border-white text-sm lg:text-lg text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2">
Загрузить
</inertia-link>
</div>
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
<div class=" relative mb-5">
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
</svg>
</div>
<input
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
type="search">
</div>
<div class="grid gap-2 md:gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
<inertia-link :href="route('list.videos')"
:class="[active_button == 'new' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center rounded-md text-white focus:outline-none']">
Новинки
</inertia-link >
<inertia-link :href="route('list.videos')"
:data="{ filter: 'hot' }"
:class="[active_button == 'hot' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center shadow-classic rounded-md text-white focus:outline-none']">
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M14.422 6.243c-3.57-2.172-1.895-5.238-1.824-5.365A.586.586 0 0012.09 0c-1.837 0-3.276.522-4.276 1.552-1.71 1.76-1.63 4.498-1.597 5.667.004.13.007.242.007.325 0 .868.14 1.67.263 2.377.079.456.147.85.16 1.159.012.331-.048.407-.05.41-.01.01-.081.049-.276.049a.657.657 0 01-.53-.235c-.565-.634-.604-2.365-.496-3.307a.586.586 0 00-.582-.654c-1.521 0-2.658 2.488-2.658 4.712 0 1.046.21 2.07.625 3.045a8.081 8.081 0 001.7 2.527C5.894 19.157 7.89 20 10 20c2.119 0 4.114-.83 5.618-2.34a7.892 7.892 0 002.327-5.605c0-2.692-2.107-4.95-3.523-5.812zM10 18.828c-3.671 0-6.773-3.101-6.773-6.773 0-.893.213-1.83.585-2.571.086-.173.175-.322.263-.447.01.967.163 2.284.841 3.046.366.41.852.627 1.405.627.518 0 .912-.156 1.172-.466.486-.578.337-1.436.148-2.524-.115-.66-.245-1.409-.245-2.176 0-.1-.003-.22-.007-.359-.032-1.107-.099-3.412 1.265-4.817.613-.63 1.467-1.014 2.55-1.145-.123.406-.228.92-.232 1.497-.01 1.27.476 3.085 2.841 4.524 1.145.696 2.96 2.618 2.96 4.811A6.78 6.78 0 0110 18.828z" />
</svg>
Популярные
</inertia-link >
</div>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3 my-6">
<button class="button-default text-gray text-lg">Очистить фильтры</button>
</div>
<div class="xl:container xl:mx-auto px-2 md:px-3">
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
<feed
:self-feed="false"
:feeds="feeds"
/>
</div>
</div>
</template>
<script>
import Feed from "@/Shared/Feed/Feed";
import Layout from '@/Shared/Layout'
import MetaHead from '@/Shared/MetaHead'
export default {
layout: Layout,
components: {
MetaHead,
Feed
},
props: {
feeds: Array,
active_button: String,
},
methods: {
},
}
</script>