<!– ==========================================================================
ZYLK HEALTH — STANDALONE ACCOUNT COMPONENT (ICON + LUXURY DROPDOWN)
Can be embedded into any header, sidebar, or custom template
========================================================================== –>
<style>
.zh-acc-scope * {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.zh-acc-scope {
position: relative;
display: inline-block;
font-family: ‘Plus Jakarta Sans’, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Trigger Button */
.zh-acc-scope .zh-nav-icon-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
color: #ffffff;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
border-radius: 50%;
width: 42px;
height: 42px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.zh-acc-scope .zh-nav-icon-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(212, 169, 74, 0.5);
transform: translateY(-1.5px);
}
.zh-acc-scope .zh-nav-icon-btn svg {
height: 20px;
width: 20px;
display: block;
stroke: #ffffff;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
transition: stroke 0.2s ease;
}
.zh-acc-scope .zh-nav-icon-btn:hover svg {
stroke: #F3E5BE;
}
/* Dropdown Panel */
.zh-acc-scope .zh-account-dropdown {
display: none;
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 280px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 48px -10px rgba(7, 34, 26, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
padding: 18px;
z-index: 2147483647;
color: #1F3A2E;
animation: zhAccFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.zh-acc-scope .zh-account-dropdown.is-open {
display: block !important;
}
@keyframes zhAccFadeIn {
from {
opacity: 0;
transform: translateY(-6px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Logged In View */
.zh-acc-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid #F0ECE1;
}
.zh-acc-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #0B3D2E, #184D3C);
color: #D4A94A;
border: 2px solid #D4A94A;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(11, 61, 46, 0.2);
}
.zh-acc-user-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.zh-acc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
text-transform: uppercase;
color: #8C6D23;
background: #FDF7E7;
padding: 2px 7px;
border-radius: 12px;
font-weight: 700;
width: fit-content;
margin-bottom: 3px;
}
.zh-acc-name {
font-size: 14.5px;
font-weight: 700;
color: #0B3D2E;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zh-acc-email {
font-size: 12px;
color: #717171;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Actions Layout */
.zh-acc-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
}
.zh-btn-go-account {
display: flex;
align-items: center;
justify-content: space-between;
background: #0B3D2E;
color: #ffffff !important;
font-size: 13.5px;
font-weight: 700;
padding: 11px 16px;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(11, 61, 46, 0.18);
}
.zh-btn-go-account:hover {
background: #144B3B;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(11, 61, 46, 0.25);
}
.zh-btn-go-account svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.zh-btn-go-account:hover svg {
transform: translateX(3px);
}
.zh-btn-signout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FFF5F5;
color: #C53030 !important;
font-size: 13px;
font-weight: 600;
padding: 9px 14px;
border-radius: 10px;
text-decoration: none;
border: 1px solid #FED7D7;
transition: all 0.15s ease;
}
.zh-btn-signout:hover {
background: #FED7D7;
color: #9B2C2C !important;
}
.zh-btn-signout svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Guest View */
.zh-acc-guest {
text-align: center;
padding: 8px 4px 4px;
}
.zh-acc-guest-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #F4F1EA;
color: #0B3D2E;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.zh-acc-guest-icon svg {
width: 22px;
height: 22px;
stroke: #0B3D2E;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.zh-acc-guest h4 {
font-size: 17px;
font-weight: 700;
color: #0B3D2E;
margin: 0 0 6px;
}
.zh-acc-guest p {
font-size: 12.5px;
color: #666;
margin: 0 0 16px;
line-height: 1.45;
}
.zh-btn-acc-login {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #0B3D2E;
color: #ffffff !important;
text-decoration: none;
padding: 11px 18px;
border-radius: 24px;
font-size: 13.5px;
font-weight: 700;
box-shadow: 0 4px 14px rgba(11, 61, 46, 0.2);
transition: all 0.2s ease;
}
.zh-btn-acc-login:hover {
background: #144B3B;
transform: translateY(-1px);
}
</style>
<div class=”zh-acc-scope” id=”zhAccountRoot”>
<!– Trigger Button –>
<button type=”button” class=”zh-nav-icon-btn” id=”zhAccountTriggerBtn” title=”Account” aria-label=”Account”>
<svg viewBox=”0 0 24 24″>
<path d=”M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2″></path>
<circle cx=”12″ cy=”7″ r=”4″></circle>
</svg>
</button>
<!– Dropdown Card –>
<div class=”zh-account-dropdown” id=”zhAccountPopup”>
<!– 1. Logged-in State (Default Hidden) –>
<div id=”zhAccLoggedInBox” style=”display: none;”>
<div class=”zh-acc-header”>
<div class=”zh-acc-avatar” id=”zhAccAvatarLetter”>U</div>
<div class=”zh-acc-user-info”>
<span class=”zh-acc-badge”>🌿 Verified Patient</span>
<strong class=”zh-acc-name” id=”zhAccDisplayName”>Customer</strong>
<span class=”zh-acc-email” id=”zhAccDisplayEmail”>Account</span>
</div>
</div>
<div class=”zh-acc-actions”>
<a href=”/my-account/” class=”zh-btn-go-account”>
<span>Go to Account</span>
<svg viewBox=”0 0 24 24″>
<line x1=”5″ y1=”12″ x2=”19″ y2=”12″></line>
<polyline points=”12 5 19 12 12 19″></polyline>
</svg>
</a>
<a href=”/my-account/customer-logout/” class=”zh-btn-signout”>
<svg viewBox=”0 0 24 24″>
<path d=”M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4″></path>
<polyline points=”16 17 21 12 16 7″></polyline>
<line x1=”21″ y1=”12″ x2=”9″ y2=”12″></line>
</svg>
<span>Sign Out</span>
</a>
</div>
</div>
<!– 2. Guest State (Default Visible) –>
<div id=”zhAccGuestBox” class=”zh-acc-guest”>
<div class=”zh-acc-guest-icon”>
<svg viewBox=”0 0 24 24″>
<path d=”M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2″></path>
<circle cx=”12″ cy=”7″ r=”4″></circle>
</svg>
</div>
<h4>Welcome to Zylk</h4>
<p>Sign in to view orders, check clinical biomarkers, and review prescriptions.</p>
<a href=”/my-account/” class=”zh-btn-acc-login”>Sign In / Register →</a>
</div>
</div>
</div>
<script>
(function() {
function initStandaloneAccount() {
var trigger = document.getElementById(‘zhAccountTriggerBtn’);
var popup = document.getElementById(‘zhAccountPopup’);
var root = document.getElementById(‘zhAccountRoot’);
if (!trigger || !popup || !root) return;
// Toggle dropdown
trigger.addEventListener(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
popup.classList.toggle(‘is-open’);
});
// Close on outside click
document.addEventListener(‘click’, function(e) {
if (!root.contains(e.target)) {
popup.classList.remove(‘is-open’);
}
});
// Close on Esc key
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’) {
popup.classList.remove(‘is-open’);
}
});
// Session Detection
var cookies = document.cookie || ”;
var isLoggedIn = cookies.indexOf(‘wordpress_logged_in_’) !== -1 || document.body.classList.contains(‘logged-in’);
var loggedInBox = document.getElementById(‘zhAccLoggedInBox’);
var guestBox = document.getElementById(‘zhAccGuestBox’);
if (isLoggedIn && loggedInBox && guestBox) {
loggedInBox.style.display = ‘block’;
guestBox.style.display = ‘none’;
// Check WP Admin bar or localStorage for username
var wpUserEl = document.querySelector(‘#wp-admin-bar-my-account .display-name’);
var nameEl = document.getElementById(‘zhAccDisplayName’);
var avatarEl = document.getElementById(‘zhAccAvatarLetter’);
var emailEl = document.getElementById(‘zhAccDisplayEmail’);
var resolvedName = ”;
if (wpUserEl && wpUserEl.textContent.trim()) {
resolvedName = wpUserEl.textContent.trim();
} else {
try {
resolvedName = localStorage.getItem(‘zylk_user_name’) || ”;
} catch(err) {}
}
if (resolvedName && nameEl && avatarEl) {
nameEl.textContent = resolvedName;
avatarEl.textContent = resolvedName.charAt(0).toUpperCase();
}
try {
var savedEmail = localStorage.getItem(‘zylk_user_email’);
if (savedEmail && emailEl) {
emailEl.textContent = savedEmail;
}
} catch(err) {}
}
}
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, initStandaloneAccount);
} else {
initStandaloneAccount();
}
})();
</script>