x
<div data-controller="polaris-frame" class="Polaris-Frame Polaris-Frame--hasNav Polaris-Frame--hasTopBar">
<div class="Polaris-Frame__TopBar">
<div class="Polaris-TopBar">
<button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M19 11H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14H1a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"></path></svg>
</span>
</button>
<div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
<a class="Polaris-TopBar__LogoLink" style="width: 124px" href="/">
<img class="Polaris-TopBar__Logo" style="width: 124px" src="https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg" />
</a> </div>
<div class="Polaris-TopBar__Contents">
<div class="Polaris-TopBar__SearchField"></div>
<div class="Polaris-TopBar__SecondaryMenu"></div>
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<div data-controller="polaris-popover" data-polaris-popover-active-value="false" data-polaris-popover-placement-value="auto-start" data-polaris-popover-open-class="Polaris-Popover__PopoverOverlay--open" data-polaris-popover-closed-class="Polaris-Popover__PopoverOverlay--closed" style="display: inline-block;">
<div data-polaris-popover-target="activator">
<button
type="button"
class="Polaris-TopBar-Menu__Activator"
data-action="polaris-popover#toggle [email protected]>polaris-popover#hide"
>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<span role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne">
<span class="Polaris-Avatar__Initials">
<svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">
K
</text>
</svg>
</span>
</span>
</div>
<span class="Polaris-TopBar-UserMenu__Details">
<p class="Polaris-TopBar-UserMenu__Name">Kirill</p>
<p class="Polaris-TopBar-UserMenu__Detail">Platmart</p>
</span>
</button>
</div>
<div data-polaris-popover-target="popover" class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--closed">
<div class="Polaris-Popover">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div style="">
<div class="Polaris-Popover__Wrapper">
<div tabindex="-1" class="Polaris-Popover__Content">
<div data-polaris-scrollable-shadow-value="true" data-polaris-scrollable-top-shadow-class="Polaris-Scrollable--hasTopShadow" data-polaris-scrollable-bottom-shadow-class="Polaris-Scrollable--hasBottomShadow" data-controller="polaris-scrollable" style="" class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical">
<span data-polaris-scrollable-target="topEdge"></span>
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions">
<li>
<a href="/" class="Polaris-ActionList__Item">
<div class="Polaris-ActionList__Content">
<span class="Polaris-ActionList__Prefix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M10 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9.293 8.707a1 1 0 0 1 1.414-1.414l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L10.586 12H7a1 1 0 1 1 0-2h3.586L9.293 8.707z"></path></svg>
</span>
</span>
<span class="Polaris-ActionList__Text">
Log out
</span>
</div>
</a></li>
</ul>
</div>
</div>
<span data-polaris-scrollable-target="bottomEdge"></span>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-polaris-frame-target="navigation" class="Polaris-Frame__Navigation">
<nav class="Polaris-Navigation">
<div class="Polaris-Navigation__LogoContainer">
<a class="Polaris-Navigation__LogoLink" style="width: 124px" href="/">
<img class="Polaris-Navigation__Logo" style="width: 124px" src="https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg" />
</a> </div>
<div data-polaris-scrollable-shadow-value="false" data-polaris-scrollable-top-shadow-class="Polaris-Scrollable--hasTopShadow" data-polaris-scrollable-bottom-shadow-class="Polaris-Scrollable--hasBottomShadow" data-controller="polaris-scrollable" style="" class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical">
<span data-polaris-scrollable-target="topEdge"></span>
<ul class="Polaris-Navigation__Section">
<li class="Polaris-Navigation__ListItem">
<div class="Polaris-Navigation__ItemWrapper">
<a class="Polaris-Navigation__Item" tabindex="0" href="#">
<div class="Polaris-Navigation__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path></svg>
</span>
</div>
<span class="Polaris-Navigation__Text">
Back to Shopify
</span>
</a>
</div>
</li>
</ul>
<ul class="Polaris-Navigation__Section Polaris-Navigation__Section--withSeparator">
<li class="Polaris-Navigation__SectionHeading">
<span class="Polaris-Navigation__Text">
Jaded Pixel App
</span>
<button type="button" class="Polaris-Navigation__Action"><span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M13 10a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-4 0a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-4 0a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm5-8c-4.411 0-8 3.589-8 8 0 1.504.425 2.908 1.15 4.111l-1.069 2.495a1 1 0 0 0 1.314 1.313l2.494-1.069A7.939 7.939 0 0 0 10 18c4.411 0 8-3.589 8-8s-3.589-8-8-8z"></path></svg>
</span></button>
</li>
<li class="Polaris-Navigation__ListItem">
<div class="Polaris-Navigation__ItemWrapper">
<a class="Polaris-Navigation__Item" tabindex="0" href="#">
<div class="Polaris-Navigation__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"></path></svg>
</span>
</div>
<span class="Polaris-Navigation__Text">
Dashboard
</span>
</a>
</div>
</li>
<li class="Polaris-Navigation__ListItem">
<div class="Polaris-Navigation__ItemWrapper">
<a class="Polaris-Navigation__Item" tabindex="0" href="#">
<div class="Polaris-Navigation__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"></path><path d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"></path></svg>
</span>
</div>
<span class="Polaris-Navigation__Text">
Jaded Pixel Orders
</span>
</a>
</div>
</li>
</ul>
<span data-polaris-scrollable-target="bottomEdge"></span>
</div>
</nav>
<button
data-action="polaris-frame#closeMenu"
type="button"
class="Polaris-Frame__NavigationDismiss"
tabindex="-1"
>
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path></svg>
</span>
</button>
</div>
<div data-polaris-frame-target="navigationOverlay"></div>
<main class="Polaris-Frame__Main">
<div class="Polaris-Frame__Content">
<div class="Polaris-Page">
<div class="Polaris-Page-Header Polaris-Page-Header--mobileView Polaris-Page-Header--mediumTitle Polaris-Page-Header--noBreadcrumbs">
<div class="Polaris-Page-Header__Row">
<div class="Polaris-Page-Header__TitleWrapper">
<div class="">
<div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
<h1 class="Polaris-Header-Title">Account</h1>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Page__Content">
<div class="Polaris-Layout">
<div class="Polaris-Layout__AnnotatedSection">
<div class="Polaris-Layout__AnnotationWrapper">
<div class="Polaris-Layout__Annotation">
<div class="Polaris-TextContainer">
<h2 class="Polaris-Heading">Account details</h2>
<div class="Polaris-Layout__AnnotationDescription">
<p>Jaded Pixel will use this as your account information.</p>
</div>
</div>
</div>
<div class="Polaris-Layout__AnnotationContent">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-FormLayout">
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text">Full name</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField Polaris-TextField--hasValue">
<input type="text" id="" value="Jaded Pixel" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text">Email</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField Polaris-TextField--hasValue">
<input type="text" id="" value="[email protected]" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<%= polaris_frame(
logo: {
url: "/",
src: "https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg",
width: "124px"
}
) do |frame| %>
<% frame.top_bar do |top_bar| %>
<% top_bar.user_menu(name: "Kirill", detail: "Platmart") do |user_menu| %>
<% user_menu.avatar(initials: "K") %>
<%= polaris_action_list do |action_list| %>
<% action_list.item(icon: "LogOutMinor", url: "/") { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% frame.navigation do |navigation| %>
<% navigation.section do |section| %>
<% section.item(url: "#", label: "Back to Shopify", icon: "ArrowLeftMinor") %>
<% end %>
<% navigation.section(title: "Jaded Pixel App", separator: true) do |section| %>
<% section.action(icon: "ConversationMinor") %>
<% section.item(url: "#", label: "Dashboard", icon: "HomeMajor") %>
<% section.item(url: "#", label: "Jaded Pixel Orders", icon: "OrdersMajor") %>
<% end %>
<% end %>
<%= polaris_page(title: "Account") do %>
<%= polaris_layout do |layout| %>
<% layout.annotated_section(
title: "Account details",
description: "Jaded Pixel will use this as your account information."
) do %>
<%= polaris_card do %>
<%= polaris_form_layout do |form_layout| %>
<% form_layout.item do %>
<%= polaris_text_field(label: "Full name", value: "Jaded Pixel") %>
<% end %>
<% form_layout.item do %>
<%= polaris_text_field(label: "Email", value: "[email protected]") %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
No notes provided.
No params configured.