Initial commit
This commit is contained in:
andrea.terzani
806
src/views/utilities/Blocks.vue
Normal file
806
src/views/utilities/Blocks.vue
Normal file
@@ -0,0 +1,806 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const block1 = ref(` <div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
|
||||
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
|
||||
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 overflow-hidden">
|
||||
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block2 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
|
||||
<div class="mb-4 font-bold text-2xl">
|
||||
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block3 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
|
||||
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block4 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-700 dark:text-surface-100 text-center">
|
||||
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block5 = ref(` <div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
|
||||
<div class="font-bold mr-20">🔥 Hot Deals!</div>
|
||||
<div class="items-center hidden lg:flex">
|
||||
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex items-center ml-2 mr-20">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>`);
|
||||
|
||||
const block6 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
|
||||
<li>
|
||||
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
|
||||
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 lg:mt-0">
|
||||
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
|
||||
<Button label="Save" icon="pi pi-check"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block7 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block8 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4">
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" class="w-full mb-4" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
|
||||
<InputText id="password1" type="password" class="w-full mb-4" />
|
||||
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block9 = ref(` <div class="bg-surface-0 dark:bg-surface-950">
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
|
||||
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
|
||||
<Chip label="Crime" class="mr-2"></Chip>
|
||||
<Chip label="Drama" class="mr-2"></Chip>
|
||||
<Chip label="Thriller"></Chip>
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`);
|
||||
|
||||
const block10 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
|
||||
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
|
||||
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
|
||||
</div>`);
|
||||
|
||||
const checked = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<BlockViewer header="Hero" :code="block1" free>
|
||||
<div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
|
||||
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
|
||||
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 overflow-hidden">
|
||||
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Feature" :code="block2" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
|
||||
<div class="mb-4 font-bold text-2xl">
|
||||
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Pricing" :code="block3" free>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
|
||||
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Call to Action" :code="block4" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-700 dark:text-surface-100 text-center">
|
||||
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Banner" :code="block5" containerClass="bg-surface-0 dark:bg-surface-950 py-20" free>
|
||||
<div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
|
||||
<div class="font-bold mr-20">🔥 Hot Deals!</div>
|
||||
<div class="items-center hidden lg:flex">
|
||||
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex items-center ml-2 mr-20">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width: 2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Page Heading" :code="block6" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
|
||||
<li>
|
||||
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
|
||||
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 lg:mt-0">
|
||||
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
|
||||
<Button label="Save" icon="pi pi-check"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Stats" :code="block7" free>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Sign-In" :code="block8" containerClass="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 flex items-center justify-center" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4" />
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" class="w-full mb-4" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
|
||||
<InputText id="password1" type="password" class="w-full mb-4" />
|
||||
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Description List" :code="block9" containerClass="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950">
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
|
||||
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
|
||||
<Chip label="Crime" class="mr-2"></Chip>
|
||||
<Chip label="Drama" class="mr-2"></Chip>
|
||||
<Chip label="Thriller"></Chip>
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
|
||||
A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Card" :code="block10" containerClass="px-6 py-20 md:px-12 lg:px-20" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
|
||||
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
|
||||
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
</div>
|
||||
</template>
|
||||
65
src/views/utilities/Documentation.vue
Normal file
65
src/views/utilities/Documentation.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<h3>Documentation</h3>
|
||||
<p class="bg-primary text-primary-contrast rounded-border p-4">
|
||||
This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
|
||||
</p>
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
|
||||
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
</p>
|
||||
<pre class="app-code"><code> npm install </code></pre>
|
||||
|
||||
<p>or</p>
|
||||
|
||||
<pre class="app-code"><code> yarn </code></pre>
|
||||
|
||||
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
|
||||
|
||||
<pre class="app-code"><code> npm run dev </code></pre>
|
||||
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
|
||||
<ul class="leading-normal">
|
||||
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
|
||||
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
|
||||
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
|
||||
<li><span class="text-primary font-medium">public/layout</span>: Assets used in layout</li>
|
||||
<li><span class="text-primary font-medium">src/assets/demo</span>: Styles used in demos</li>
|
||||
<li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
|
||||
</ul>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
|
||||
|
||||
<h5>Integration with Existing Vite Applications</h5>
|
||||
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 991px) {
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/views/utilities/Icons.vue
Normal file
91
src/views/utilities/Icons.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
|
||||
const icons = ref(null);
|
||||
const filter = ref(null);
|
||||
|
||||
const filteredIcons = computed(() => {
|
||||
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
|
||||
else return icons.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
|
||||
.then((res) => res.json())
|
||||
.then((d) => {
|
||||
let data = d.icons.filter((value) => {
|
||||
return value.icon.tags.indexOf('deprecate') === -1;
|
||||
});
|
||||
data.sort((icon1, icon2) => {
|
||||
if (icon1.properties.name < icon2.properties.name) return -1;
|
||||
else if (icon1.properties.name > icon2.properties.name) return 1;
|
||||
else return 0;
|
||||
});
|
||||
|
||||
icons.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h2>Icons</h2>
|
||||
<p>
|
||||
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
|
||||
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
|
||||
</p>
|
||||
|
||||
<h4>Download</h4>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
|
||||
<pre class="app-code"><code>npm install primeicons --save</code></pre>
|
||||
|
||||
<h4>Getting Started</h4>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
|
||||
<h4>Size</h4>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check" style="font-size: 2rem"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h4>Spinning Animation</h4>
|
||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
||||
<pre class="app-code"><code><i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i></code></pre>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h4>List of Icons</h4>
|
||||
<p>
|
||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.
|
||||
</p>
|
||||
|
||||
<InputText v-model="filter" class="w-full p-4 mt-4 mb-8" placeholder="Search an icon" />
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 icons-list text-center">
|
||||
<div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 pb-8" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
|
||||
<div>pi-{{ icon.properties.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-list {
|
||||
i {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user