Skip to content

Commit

Permalink
#2179 start working on shop template
Browse files Browse the repository at this point in the history
  • Loading branch information
TheHadiAhmadi committed Oct 29, 2024
1 parent 9005840 commit 54d0e31
Show file tree
Hide file tree
Showing 42 changed files with 4,106 additions and 0 deletions.
109 changes: 109 additions & 0 deletions src/FluentCMS/Templates/Shop/AdminLayout.body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<nav class="sticky top-0 z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div id="loading-bar" class="absolute start-0 transition-transform bg-gray-100 dark:bg-gray-800 w-full overflow-hidden top-0">
<div class="loading-bar-animate w-full h-full bg-blue-500"></div>
</div>
<div class="py-3 px-3 lg:px-5 lg:pl-3">
<div class="flex justify-between items-center">
<div class="flex justify-start items-center">
<button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar"
class="hidden p-2 text-gray-600 rounded cursor-pointer lg:inline hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
<button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
class="p-2 mr-2 text-gray-600 rounded cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
<svg id="toggleSidebarMobileClose" class="hidden w-6 h-6" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<a href="/" class="flex items-center mr-14">
<img src="/images/logo.svg" class="dark:hidden mr-3 h-8" alt="FluentCMS Logo">
<img src="/images/logo-dark.svg" class="hidden dark:block mr-3 h-8"
alt="FluentCMS Logo">
</a>
</div>
<div class="flex items-center">
<button id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
<div id="tooltip-toggle" role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
Toggle dark mode
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<div class="flex items-center ml-3">
<div>
<button type="button"
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button-2" aria-expanded="false" data-dropdown-placement="bottom-end" data-dropdown-toggle="dropdown-2">
<span class="sr-only">Open user menu</span>

<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600 border border-gray-200 dark:border-gray-600">
<svg class="absolute w-12 h-12 text-gray-400 -left-[5px]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
</button>
</div>
<div class="hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
id="dropdown-2">
<div class="py-3 px-4" role="none">
<p class="text-sm text-gray-900 dark:text-white" role="none">
{{user.user_name}}
</p>
<p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
{{user.email}}
</p>
</div>
<ul class="py-1" role="menu">
<li>
<a href="/auth/profile"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem">Profile</a>
</li>
<li>
<a href="/auth/logout"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem">Log out</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="flex overflow-hidden bg-gray-50 dark:bg-gray-900">
<AdminSidebar fluentcms />
<div class="hidden fixed inset-0 z-10 bg-gray-900/50 dark:bg-gray-900/90" id="sidebarBackdrop"></div>
<div id="main-content"
class="overflow-y-auto relative w-full h-full bg-gray-50 lg:ml-64 dark:bg-gray-900 dark:text-white">
<main>
<PluginsSection Name="Main" fluentcms />
</main>
</div>
</div>
<script src="/js/flowbite.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/loadingbar.js"></script>
51 changes: 51 additions & 0 deletions src/FluentCMS/Templates/Shop/AdminLayout.head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<PageHead fluentcms />
<meta name="author" content="FluentCMS">
<meta name="apple-mobile-web-app-title" content="FluentCMS">
<meta name="application-name" content="FluentCMS">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#2d3250">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/_content/FluentCMS.Web.UI.Components/css/flowbite.min.css" />
<link rel="stylesheet" href="/css/app.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#2d3250">

<script src="/js/app.head.js"></script>
<script src="/js/tailwind.cdn.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f4f8fd',
100: '#e8f1fb',
200: '#c6ddf4',
300: '#a3c8ed',
400: '#5e9fe0',
500: '#1976d2',
600: '#176abd',
700: '#13599e',
800: '#0f477e',
900: '#0c3a67',
on: '#f4f8fd',
dark: {
DEFAULT: '#a3c8ed',
on: '#0f477e',
}
},
},
},
}
}
</script>
1 change: 1 addition & 0 deletions src/FluentCMS/Templates/Shop/AdminLayout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

29 changes: 29 additions & 0 deletions src/FluentCMS/Templates/Shop/AuthLayout.body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div id="loading-bar" class="fixed start-0 transition-transform bg-gray-100 dark:bg-gray-800 w-full overflow-hidden top-0">
<div class="loading-bar-animate w-full h-full bg-blue-500"></div>
</div>
<section class="bg-white dark:bg-gray-900">
<div class="grid lg:h-screen lg:grid-cols-2">
<div class="flex justify-center items-center py-6 px-4 lg:py-0 sm:px-0">
<div class="w-full max-w-md space-y-4 md:space-y-6 xl:max-w-xl">
<PluginsSection Name="Main" fluentcms />
</div>
</div>
<div class="flex justify-center items-center py-6 px-4 2xl:px-24 bg-primary-600 lg:py-0 sm:px-0">
<div class="max-w-md xl:max-w-xl 2xl:max-w-4xl">
<a href="#" class="flex items-center mb-4 text-2xl font-semibold text-white">
<img src="/images/logo-dark.svg" class="h-10" alt="FluentCMS Logo">
</a>
<h1 class="mb-4 text-3xl font-extrabold tracking-tight leading-none text-white xl:text-5xl">
Welcome to FluentCMS
</h1>
<p class="mb-4 font-light text-primary-200 lg:mb-8">
Building and managing content has never been easier. Experience the power of AI with FluentCMS.
</p>
</div>
</div>
</div>
</section>

<script src="/js/flowbite.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/loadingbar.js"></script>
45 changes: 45 additions & 0 deletions src/FluentCMS/Templates/Shop/AuthLayout.head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-title" content="FluentCMS">
<meta name="application-name" content="FluentCMS">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#2d3250">

<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="stylesheet" href="/_content/FluentCMS.Web.UI.Components/css/flowbite.min.css" />
<link rel="stylesheet" href="/css/app.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#2d3250">
<script src="/js/tailwind.cdn.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f4f8fd',
100: '#e8f1fb',
200: '#c6ddf4',
300: '#a3c8ed',
400: '#5e9fe0',
500: '#1976d2',
600: '#176abd',
700: '#13599e',
800: '#0f477e',
900: '#0c3a67',
on: '#f4f8fd',
dark: {
DEFAULT: '#a3c8ed',
on: '#0f477e',
}
},
},
},
}
}
</script>
1 change: 1 addition & 0 deletions src/FluentCMS/Templates/Shop/AuthLayout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

32 changes: 32 additions & 0 deletions src/FluentCMS/Templates/Shop/Blocks/CTA/Default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
Let's find more that brings us together.
</h2>
<p class="mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-400" data-inline-editable>
FluentCMS helps
you connect with friends, family and communities of people who share your interests. Connecting with
your friends and family as well as discovering new ones is easy with features like Groups, Watch and
Marketplace.
</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
<a href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900"
data-inline-editable>
Get started
</a>
<a href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z">
</path>
</svg>
<span data-inline-editable>View more</span>
</a>
</div>
</div>
</div>
</section>
26 changes: 26 additions & 0 deletions src/FluentCMS/Templates/Shop/Blocks/CTA/Image and Button.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<section class="bg-white dark:bg-gray-900">
<div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<img class="w-full dark:hidden" src="/images/cta-dashboard-mockup.svg" alt="dashboard image">
<img class="w-full hidden dark:block" src="/images/cta-dashboard-mockup-dark.svg" alt="dashboard image">
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
Let's create more
tools and ideas that brings us together.
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400" data-inline-editable>
FluentCMS helps you connect with
friends and communities of people who share your interests. Connecting with your friends and family
as well as discovering new ones is easy with features like Groups.</p>
<a href="#"
class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
<span data-inline-editable>Get started</span>
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</section>
Loading

0 comments on commit 54d0e31

Please sign in to comment.