added choose avatar page

This commit is contained in:
mi1468 2025-05-10 16:33:08 +03:30
parent b30442dfc9
commit fe41a8afe2
2 changed files with 5 additions and 69 deletions

View File

@ -26,6 +26,8 @@
نگران نباشید، شما می توانید ان را در هر زمان دیگری تغییر دهید. نگران نباشید، شما می توانید ان را در هر زمان دیگری تغییر دهید.
</h5> </h5>
<router-link to="/dashboard/readyplayer">ساخت آواتار به دلخواه </router-link>
<div class="avatar-selection-container"> <div class="avatar-selection-container">
<!-- Left Column - Women Models --> <!-- Left Column - Women Models -->
<div class="gender-column"> <div class="gender-column">

View File

@ -21,72 +21,6 @@
<div class="page-title">ساخت آواتار جدید</div> <div class="page-title">ساخت آواتار جدید</div>
<!-- Main Content -->
<div class="profile-edit-container">
<div class="column">
<div class="form-section">
<h3>آواتار واقعیت مجازی شما</h3>
<p class="section-description">
میتوانید با استفاده از ابزار Ready Player Me آواتار خود را شخصیسازی کنید.
</p>
<div v-if="avatarUrl" class="avatar-preview">
<img :src="getAvatarThumbnail(avatarUrl)" class="avatar-image" />
<p class="avatar-url">آواتار شما با موفقیت ایجاد شد</p>
</div>
<div v-else class="avatar-placeholder">
<p>برای ساخت آواتار روی دکمه زیر کلیک کنید</p>
</div>
<button class="save-btn" @click="openAvatarEditor" :disabled="saving">
{{ saving ? 'در حال ذخیره...' : avatarUrl ? 'ویرایش آواتار' : 'ساخت آواتار' }}
</button>
</div>
</div>
<div class="column">
<div class="form-section instructions">
<h3>راهنمای ساخت آواتار</h3>
<ul class="instruction-list">
<li>روی دکمه "ساخت آواتار" کلیک کنید</li>
<li>در پنجره باز شده، آواتار خود را شخصیسازی کنید</li>
<li>پس از اتمام، روی دکمه "Done" کلیک کنید</li>
<li>آواتار شما ذخیره شده و در این صفحه نمایش داده میشود</li>
</ul>
<div v-if="avatarUrl" class="form-section">
<h3>آواتارهای پیشفرض</h3>
<div class="default-avatars">
<h4>مردان</h4>
<div class="avatar-grid">
<div
v-for="avatar in maleAvatars"
:key="avatar.id"
class="avatar-option"
@click="selectAvatar(avatar)"
>
<img :src="getAvatarThumbnail(avatar.src)" class="avatar-thumbnail" />
<span>{{ avatar.name }}</span>
</div>
</div>
<h4>زنان</h4>
<div class="avatar-grid">
<div
v-for="avatar in femaleAvatars"
:key="avatar.id"
class="avatar-option"
@click="selectAvatar(avatar)"
>
<img :src="getAvatarThumbnail(avatar.src)" class="avatar-thumbnail" />
<span>{{ avatar.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hidden iframe for Ready Player Me --> <!-- Hidden iframe for Ready Player Me -->
<iframe <iframe
@ -94,7 +28,7 @@
class="rpm-frame" class="rpm-frame"
:src="iframeSrc" :src="iframeSrc"
allow="camera *; microphone *; clipboard-write" allow="camera *; microphone *; clipboard-write"
hidden
></iframe> ></iframe>
</div> </div>
</div> </div>
@ -409,7 +343,7 @@
.rpm-frame { .rpm-frame {
width: 100%; width: 100%;
height: 600px; height: 950px;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
} }