generated from muhtadeetaron/nextjs-template
231 lines
11 KiB
Handlebars
231 lines
11 KiB
Handlebars
<link rel="stylesheet" type="text/css" href="{{asset "css/demo.css"}}" />
|
|
|
|
<settings-sidebar class="settings-sidebar">
|
|
<div class="settings-inner">
|
|
<div class="settings-item">
|
|
<label for="theme-presets" class="settings-label">
|
|
<small>Theme presets</small>
|
|
</label>
|
|
<select class="settings-select" name="theme-presets" id="theme-presets">
|
|
<option value="old-newspaper-light">Old Newspaper Light</option>
|
|
<option value="modern-newspaper-light" selected>Modern Newspaper Light</option>
|
|
<option value="old-newspaper-tinted">Old Newspaper Tinted</option>
|
|
<option value="elegant-newspaper-light">Elegant Newspaper Light</option>
|
|
<option value="elegant-newspaper-dark">Elegant Newspaper Dark</option>
|
|
<option value="old-newspaper-dark">Old Newspaper Dark</option>
|
|
<option value="modern-newspaper-dark">Modern Newspaper Dark</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="background-color" class="settings-label">
|
|
<small>Background color</small>
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<div class="colorpicker-overlay"></div>
|
|
<input type="color" id="background-color" name="background-color" value="#FFFFFF" colorpick-eyedropper-active="false">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="text-color" class="settings-label">
|
|
<small>Text color</small>
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<div class="colorpicker-overlay colorpicker-overlay-text"></div>
|
|
<input type="color" id="text-color" name="text-color" value="#000000" colorpick-eyedropper-active="false">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="fonts" class="settings-label">
|
|
<small>Fonts</small>
|
|
</label>
|
|
<input id="fonts" name="fonts" type="text" value="Open Sans, EB Garamond, Roboto Condensed" class="settings-input"/>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="announcement-bar-type" class="settings-label">
|
|
<small>Announcement bar type</small>
|
|
</label>
|
|
<select class="settings-select" name="announcement-bar-type" id="announcement-bar-type">
|
|
<option value="Normal">Normal</option>
|
|
<option value="Moving Several News" selected>Moving Several News</option>
|
|
<option value="Moving One News">Moving One News</option>
|
|
<option value="Static">Static</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="card-heading-style" class="settings-label">
|
|
<small>Card heading style</small>
|
|
</label>
|
|
<select class="settings-select" name="card-heading-style" id="card-heading-style">
|
|
<option value="uppercase">uppercase</option>
|
|
<option value="capitalize">capitalize</option>
|
|
<option value="lowercase">lowercase</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="image-style" class="settings-label">
|
|
<small>Image style</small>
|
|
</label>
|
|
<select class="settings-select" name="image-style" id="image-style">
|
|
<option value="unset">Normal</option>
|
|
<option value="grayscale(1)">Grayscale</option>
|
|
<option value="grayscale(1) sepia(0.35) contrast(0.85)">Tinted</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="use-initials" class="settings-label">
|
|
<small>Use initials</small>
|
|
</label>
|
|
<select class="settings-select" name="use-initials" id="use-initials">
|
|
<option value="true">True</option>
|
|
<option value="false" selected>False</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="use-newsletter" class="settings-label">
|
|
<small>Newsletter on homepage and post sidebar</small>
|
|
</label>
|
|
<select class="settings-select" name="use-newsletter" id="use-newsletter">
|
|
<option value="true">True</option>
|
|
<option value="false">False</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="tag-page-layout" class="settings-label">
|
|
<small>Tag page layout</small>
|
|
</label>
|
|
<div class="settings-links" name="tag-page-layout" id="tag-page-layout">
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/tag/politics">Column</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/tag/politics?tag-layout=simple">Simple</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="author-page-layout" class="settings-label">
|
|
<small>Author page layout</small>
|
|
</label>
|
|
<div class="settings-links" name="author-page-layout" id="author-page-layout">
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/author/john-doe">Column</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-left">Author Image Left</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-right">Author Image Right</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/author/katarina-smith-demo">Simple</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="account-page-layout" class="settings-label">
|
|
<small>Account page layout</small>
|
|
</label>
|
|
<div class="settings-links" name="account-page-layout" id="account-page-layout">
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/demo-account">All Data Layout</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/demo-account?no-subscribe-button=true">All Data Layout No Btn</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple">Simple Layout</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple&no-subscribe-button=true">Simple Layout No Btn</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="post-header-type" class="settings-label">
|
|
<small>Post header type</small>
|
|
</label>
|
|
<div class="settings-links" name="post-header-type" id="post-header-type">
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=false">Narrow</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=false">Wide</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=false">Featured Image Left</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=false">Featured Image Right</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=true">Narrow With Sidebar</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=true">Wide With Sidebar</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=true">Featured Image Left With Sidebar</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=true">Featured Image Right With Sidebar</a>
|
|
</small>
|
|
<small>
|
|
<a class="settings-link" href="{{@site.url}}/innovation-in-the-corporate-world-unveiling-the-latest-business-trends?post-layout=narrow&sidebar=false">Members Only Post</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="sidebar-content" class="settings-label">
|
|
<small>Sidebar content</small>
|
|
</label>
|
|
<select class="settings-select" name="sidebar-content" id="sidebar-content">
|
|
<option value="Featured Articles">Featured Articles</option>
|
|
<option value="Table Of Contents">Table Of Contents</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label for="sidebar-position" class="settings-label">
|
|
<small>Sidebar position</small>
|
|
</label>
|
|
<select class="settings-select" name="sidebar-position" id="sidebar-position">
|
|
<option value="Right">Right</option>
|
|
<option value="Left">Left</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="buy-button-wrapper">
|
|
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="button buy-button" target="_blank">Buy Newspaper</a>
|
|
</div>
|
|
</div>
|
|
</settings-sidebar>
|
|
|
|
<div class="demo-buttons-container">
|
|
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="demo-button" aria-label="Buy Newspaper" target="_blank">
|
|
<div class="demo-button-inner">
|
|
{{> "icons/download-icon"}}
|
|
</div>
|
|
</a>
|
|
|
|
<button id="settings-button" class="demo-button" aria-label="Newspaper Settings">
|
|
<div class="demo-button-inner">
|
|
{{> "icons/settings-icon"}}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<script src="{{asset "js/demo.js"}}"></script> |