上传修改后的主题

spiffy_theme_backend/static/description/index.html

@@ -0,0 +1,654 @@
+<section class="" style=" border-radius: 16px;">
+    <section class="mb-4 bizople_partner_logo" style="padding:35px; background-color: #1b1b1b; border-radius: 16px;">
+        <div class="row justify-content-md-between justify-content-center align-items-center py-2 mx-0">
+          <div class="col-md-3">
+            <a href="https://www.bizople.com/" style="text-decoration:none;">
+              <img class="img img-fluid" style="text-align: center;" src="bizople-white-logo.png"></img>
+            </a>
+          </div>
+          <div class="s_btn text-center pt0 col-md-6" data-name="Button">
+            <a href="#" class="mx-1 btn btn-primary btn-lg" style="background-color: #0097a7; border: 1px solid #0097a7; color:white; font-family: Montserrat;"> <i class="fa fa-check-square-o"></i> Community</a>
+      
+            <a href="mailto:info@bizople.com" class="mx-1 btn btn-primary btn-lg" style="background-color: #0097a7; border: 1px solid #0097a7; color:white; font-family: Montserrat;">Email Us</a>
+
+            <!-- <a href="skype:live:bizoples?chat" class="mx-1 btn btn-primary btn-lg" style="background-color: #0097a7; border: 1px solid #0097a7; color:white; font-family: Montserrat;">Skype</a> -->
+          </div>
+          <div class="col-md-3">
+            <img class="img img-fluid" style="height: 80px; text-align: center;" src="odoo_ready_partner_logo.png"></img>
+          </div>
+        </div>
+    </section>
+    
+    <div class="index-main-banner text-center" >
+        <div class="gif-image">
+            <img class="img img-fluid" style="text-align:center; border-radius: 16px;" src="Index-main-banner.jpg"/>
+        </div>
+
+        <img class="img img-fluid shadow-sm my-4" style="text-align:center; border-radius: 16px;" src="spiffy-mobile-app-banner.jpg"/>
+
+        <div class="main-feature-banner p-3 p-md-5 text-center">
+            <h2 class="mb-5 w-lg-75 mx-auto" style="font-size: calc(min(40px, 5vw)); color: #0081a5;">Enhance your Productivity with the Advance Key Features</h2>
+            <img class="img img-fluid" style="text-align:center" src="feature-banner-no-split-view.png"/>
+        </div>
+    </div>
+</section>
+
+<section class="my-4 index-enterprise">
+    <div class="spiffy-enterprise-banner text-center">
+        <a href="https://apps.odoo.com/apps/themes/16.0/spiffy_theme_backend_ent/">
+            <img class="img img-fluid" style="text-align:center; border-radius: 16px;" src="spiffy-enterprise.png" />
+        </a>
+    </div>
+</section>
+
+<section class="index-tabs mt-4" style=" border-radius: 16px;">
+    <ul class="nav nav-tabs justify-content-center bg-white mb-5 d-none" id="myTab" role="tablist" style="border-bottom:1px solid #CFCFCF;">
+        <li class="nav-item">
+            <a class="nav-link active" id="spiffy-main-features" data-bs-toggle="tab" href="#main-features" role="tab" style="color:#1b1b1b;">Features</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="spiffy-faq" data-bs-toggle="tab" href="#faq" role="tab" style="color:#1b1b1b;">FAQs</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="spiffy-release-note" data-bs-toggle="tab" href="#release-note" role="tab" style="color:#1b1b1b;">Release Notes</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="spiffy-contact" data-bs-toggle="tab" href="#contact" role="tab" style="color:#1b1b1b;">Contact Us</a>
+        </li>
+    </ul>
+    <div class="tab-content" id="spiffy-index-tabs">
+        <div class="tab-pane fade show active" id="main-features" role="tabpanel">
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="theme-style.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="theme-color.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="index-responsive.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="spiffy-index-pwa.jpg"/>
+            
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="rtl-support.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="multi-tab.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="3d-icon-pack.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="notes.gif"/>
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="list-density.gif"/>
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="list-sticky-header-footer.gif"/>
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="modal-drag-resize.gif"/>
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="prevent-auto-save.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="chatter-attachment-in-list.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="app-drawer.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="drawer-global-search.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="top-menu-position.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="darklight-pin-unpin.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="branding.gif"/>
+
+            <!-- <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="split-view.gif"/> -->
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="zoom-fullscreen.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="bookmark.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="fav-apps.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="app-icon-config.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="refresh-btn.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="separator-tab-popup-styles.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="loaders-fontfamily.gif"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="fontsize-radio-checkbox.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="loginpage.gif"/>
+
+            <section class="index-alert mt-5">
+                <div class="s_alert w-100 alert-delta d-md-flex align-items-center justify-content-center p-3 shadow-sm" style="border-radius: 16px; color: #2f4752; background-color: #dee7ec; border-color: #d1dee4;">
+                    <i class="fa fa-2x fa-info border rounded-circle text-center" style="border-color: #121212 !important; min-width: 50px; width: 50px; height: 50px; line-height: 50px;"></i>
+                    <div class="s_alert_content ml-3 pt-3 pt-md-0">
+                        <p class="" style="font-size: calc(min(18px, 4vw));">
+                            <b>Note:</b> <br/> If you are using Website App and want to have web like login page design, you can purchase the <a href="https://apps.odoo.com/apps/modules/16.0/spiffy_website_login/" class="">Website Login Add-on module</a> from the store
+                        </p>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="index-spiffy-modules-link my-5">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-md-6">
+                            <div class="spiffy-ce-module">
+                                <div class="index-spiffy-modules-title text-center mb-3">
+                                    <a class="" href="https://apps.odoo.com/apps/modules/16.0/spiffy_website_login/">
+                                        <h2 class="mb-0 mx-auto" style="font-size: 23px; color: #0097a7;">Spiffy Backend Theme - Website Login Addon</h2>
+                                    </a>
+                                </div>
+                                <a class="" href="https://apps.odoo.com/apps/modules/16.0/spiffy_website_login/">
+                                    <img class="img img-fluid" src="spiffy_website_login_addon.png"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="lang-company-debug.jpg"/>
+
+            <img class="img img-fluid shadow-sm mb-4" style="text-align:center; border-radius: 16px;" src="user-level.jpg"/>
+            
+        </div>
+    </div>
+</section>
+
+<section class="index-all-features" style=" border-radius: 16px;">
+    <div class="all-feature-title text-center">
+        <h2 class="mb-5 w-lg-75 mx-auto" style="font-size: calc(min(40px, 5vw)); color: #0097a7;">All Features</h2>
+    </div>
+    <div class="container">
+        <div class="row">
+            <!-- DUMMY COL FOR FEATURE PILL -->
+            <!-- <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <img class="img img-fluid" style="width: 40px; height: 40px; object-fit: contain;" src="feature-brush-line.png" />
+                        <span class="" style="font-size: 24px; color: #0097A7;"">1.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">3 in 1 Theme Styles</span>
+                    </span>
+                </div>
+            </div> -->
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">1.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">3 in 1 Theme Styles</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">2.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Chatter Box Position</span>
+                    </span>
+                </div>
+            </div>
+            <!-- <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;"">3.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Tree-Form Split View</span>
+                    </span>
+                </div>
+            </div> -->
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">3.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Attachment in List View</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">4.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Vertical/Horizontal Menu Style</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">5.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Seprator Styles</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;"">6.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Tab Style</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;"">7.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Checkbox Style</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;"">8.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Radio Style</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;"">9.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Popup Animations</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">10.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">9 Theme Color Pallets</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">11.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Custom Theme Color option</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">12.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">9 App Drawer Color Pallet</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">13.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Custom App Drawer Color</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">14.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">13 Unique Font Styles</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">15.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Font Sizes</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">16.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">10 Loading Icons</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">17.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">4 Login Page Designs</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">18.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Configurable App Icons</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">19.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Global Search</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">20.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Full Screen</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">21.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Zoom In / Zoom Out</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">22.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Bookmarks</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">23.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Dark/Light Mode</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">24.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Language Selector</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">25.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Company Selector</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">26.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Lock/Unlock Sidebar</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">27.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Debug Activator</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">28.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">RTL Supported</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">29.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">User Access (User/Global)</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">30.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Greetings on Menubar</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">31.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Custom Branding</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">32.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">PWA with Shortcuts</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">33.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Favorite App Island</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">34.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Refresh Button</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">35.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Multiple Tab</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">36.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Notes</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">37.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">List/Tree View Density</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">38.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">List/Tree View Sticky Header &amp; Footer</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">39.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Prevent Auto Save</span>
+                    </span>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">40.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Modal Draggable &amp; Resizable</span>
+                    </span>
+                </div>
+            </div>
+            <!-- <div class="col-md-6 col-lg-4 col-xl-3 px-2 my-2">
+                <div class="align-content-center d-flex p-3 rounded-pill shadow-sm" style="font-size: 16px; background-color: #0097A7; color: #fff;">
+                    <span style="min-width: 50px; height: 50px; line-height: 50px;" class="bg-white rounded-circle shadow-sm text-center">
+                        <span class="" style="font-size: 24px; color: #0097A7;">36.</span>
+                    </span>
+                    <span class="align-content-center d-flex flex-column flex-fill px-3 my-auto">
+                        <span class="">Tree-Form Split View</span>
+                    </span>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</section>
+
+<section class="index-services-support mt-5" style=" border-radius: 16px;">
+    <p class="mb-4" style="font-size: 17px; text-align: center;">
+        <b>Note:</b> This Product is developed and tested with Odoo Addons
+    </p>
+    <section class="align-items-center g-0 justify-content-center mb-4 row py-5 px-3 px-md-5" 
+            style="background-color: #0e0e0e; color: #fff; border-radius: 16px;">
+        <div class="col-md-7">
+            <div>
+                <b style="font-size: 22px;">Spiffy Mobile App Note:</b>
+                <br/> 
+                <ul class="pt-2" style="font-size: 16px;">
+                    <li>Spiffy Mobile App is an Android and iOS application works with the Spiffy Backend Theme.</li>
+                    <li>It is a complementary / FREE application with the Spiffy Backend Theme and it has no relation with the theme working.</li>
+                    <li>The Application works well but is not satisfying the customer's specific needs it would not be considered to claim a refund for the Spiffy Backend Theme.</li>
+                    <li>
+                        Push Notification and 2-Factor Authentication functionalities are in process and will be available in the future version of Spiffy mobile Application.
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-md-5 text-center">
+            <img class="img img-fluid" width="300" height="300" src="spiffy-mobile-app-icon.png"/>
+        </div>
+    </section>
+    <img class="img img-fluid mb-4" src="support_banner.jpg" style="border-radius:6px;"/>
+    <img class="img img-fluid" src="service-banner.jpg" style="border-radius:6px;"/>
+</section>
+
+<section class="features-changelog-main mt-5 p-5" style="background-color: white; border-radius: 16px; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.075) !important;">
+    <section id="changelog">
+        <div class="log-title">
+            <p style="font-size: 30px;">Release Notes</p>
+        </div>
+        <div class="log-details">
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v2.0</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-success" style="color: #ffffff;font-size: 14px; vertical-align: middle;">New</span>Compatibility with Spiffy: Odoo Mobile Application (android/ios)</p>
+
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v16.0.0.4</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-success" style="color: #ffffff;font-size: 14px; vertical-align: middle;">New</span>New Features: Notes, List/Tree View Density, List/Tree View Sticky Header &amp; Footer, Prevent Auto Save, Modal Draggable &amp; Resizable.</p>
+
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v16.0.0.3</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-warning" style="color: #ffffff;font-size: 14px; vertical-align: middle;">Fixed</span>Improvements on Login Styles and Design.</p>
+
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v16.0.0.2</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-warning" style="color: #ffffff;font-size: 14px; vertical-align: middle;">Fixed</span>Minor bug fixes and improvements.</p>
+            
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v16.0.0.1</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-success" style="color: #ffffff;font-size: 14px; vertical-align: middle;">New</span>Multiple Tab</p>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block badge badge-warning" style="color: #ffffff;font-size: 14px; vertical-align: middle;">Fixed</span>Minor bug fixes and improvements.</p>
+
+            <h3 class="mb-3 d-flex align-items-center w-100" style="font-size: 24px;color: #1b1b1b;font-weight: 600;"><span class="text-info">v16.0.0.0</span></h3>
+            <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;">Initial Release</p>
+            
+            <!-- badge badge-warning FOR FIXES -->
+            <!-- badge badge-success FOR NEW -->
+            <!-- badge badge-info FOR UPDATES -->
+            
+            <!-- for update tag use this -->
+            <!-- <p class="d-flex align-items-center w-100" style="color: #1b1b1b;font-size: 18px;"><span class="mr-2 d-inline-block o_gradient" style="color: #ffffff;font-size: 14px; vertical-align: middle;">Update</span>Initial Release</p> -->
+        </div>
+    </section>
+</section>