Files
yourpart3/frontend/src/views/social/EroticMediaPlaceholderView.vue

117 lines
2.6 KiB
Vue

<template>
<div class="adult-media-page">
<section class="adult-media-hero surface-card">
<span class="adult-media-eyebrow">{{ $t('socialnetwork.erotic.eyebrow') }}</span>
<h2>{{ title }}</h2>
<p>{{ $t('socialnetwork.erotic.intro') }}</p>
</section>
<section class="adult-media-panel surface-card">
<div class="adult-media-status">
<strong>{{ $t('socialnetwork.erotic.enabledTitle') }}</strong>
<span>{{ $t('socialnetwork.erotic.enabledBody') }}</span>
</div>
<div class="adult-media-roadmap">
<h3>{{ $t('socialnetwork.erotic.roadmapTitle') }}</h3>
<ul>
<li>{{ $t('socialnetwork.erotic.roadmapModeration') }}</li>
<li>{{ $t('socialnetwork.erotic.roadmapUpload') }}</li>
<li>{{ $t('socialnetwork.erotic.roadmapSeparation') }}</li>
</ul>
</div>
<router-link to="/settings/account" class="adult-media-link">
{{ $t('socialnetwork.erotic.settingsLink') }}
</router-link>
</section>
</div>
</template>
<script>
export default {
name: 'EroticMediaPlaceholderView',
props: {
mediaType: {
type: String,
default: 'pictures'
}
},
computed: {
title() {
return this.mediaType === 'videos'
? this.$t('socialnetwork.erotic.videosTitle')
: this.$t('socialnetwork.erotic.picturesTitle');
}
}
};
</script>
<style lang="scss" scoped>
.adult-media-page {
display: grid;
gap: 18px;
max-width: 920px;
}
.adult-media-hero,
.adult-media-panel {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255, 249, 244, 0.98), rgba(245, 237, 229, 0.96));
box-shadow: var(--shadow-soft);
}
.adult-media-hero {
padding: 26px 28px;
}
.adult-media-eyebrow {
display: inline-flex;
margin-bottom: 8px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(164, 98, 72, 0.14);
color: var(--color-text-secondary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.adult-media-hero p {
margin: 0;
color: var(--color-text-secondary);
}
.adult-media-panel {
display: grid;
gap: 18px;
padding: 24px;
}
.adult-media-status {
display: grid;
gap: 6px;
padding: 14px 16px;
border-radius: var(--radius-md);
background: rgba(196, 162, 108, 0.14);
}
.adult-media-roadmap h3 {
margin-bottom: 8px;
}
.adult-media-roadmap ul {
margin: 0;
padding-left: 18px;
color: var(--color-text-secondary);
}
.adult-media-link {
width: fit-content;
color: var(--color-primary);
font-weight: 600;
}
</style>