custom_pages reference
This commit is contained in:
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<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=Cinzel:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box;}
|
||||
.lbl{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.04em;color:#3a3530;margin-bottom:12px;font-weight:500;}
|
||||
.lbl b{color:#6b6152;font-weight:600;}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<!-- ============================================================= FRAME 1: DESKTOP · MEMBER -->
|
||||
<div style="position:absolute;left:0px;top:0px;width:1300px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>Top bar</b> — Desktop · signed in (default). Brand strip links home.</div>
|
||||
<div style="background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;">
|
||||
<div style="height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;align-items:center;gap:36px;">
|
||||
<div style="display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:24px;height:24px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(194,163,90,0.22);"><div style="width:8px;height:8px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:0.14em;color:#e6e0d6;white-space:nowrap;">SHADOWS OVER WESTGATE</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:26px;">
|
||||
<div style="position:relative;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#e6e0d6;padding:4px 0;">News<span style="position:absolute;left:-3px;right:-3px;bottom:-22px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Gallery</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Wiki</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Forums<svg width="9" height="6" viewBox="0 0 9 6" fill="none"><path d="M1 1l3.5 3.5L8 1" stroke="#a8893f" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;white-space:nowrap;">Dev Blog</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:34px;height:34px;border-radius:6px;border:1px solid rgba(194,163,90,0.18);display:flex;align-items:center;justify-content:center;background:rgba(194,163,90,0.05);"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#b9b2a6" stroke-width="1.4"/><path d="M11 11l3 3" stroke="#b9b2a6" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2a4 4 0 00-4 4c0 4-1.5 5-1.5 5h11S13 10 13 6a4 4 0 00-4-4z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/><path d="M7.5 14a1.5 1.5 0 003 0" stroke="#b9b2a6" stroke-width="1.3"/></svg><span style="position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;border-radius:8px;background:linear-gradient(180deg,#d8bd76,#a8893f);color:#150f08;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1px solid #0f0d12;">3</span></div>
|
||||
<div style="position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 4h12v8H7l-3 3v-3H3z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/></svg><span style="position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;border-radius:8px;background:linear-gradient(180deg,#d8bd76,#a8893f);color:#150f08;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1px solid #0f0d12;">2</span></div>
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,238,190,0.22),transparent 30%),linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);box-shadow:0 0 0 2px #0f0d12,0 0 0 3px rgba(127,184,106,0.7);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= FRAME 2: DESKTOP · GUEST -->
|
||||
<div style="position:absolute;left:0px;top:170px;width:1300px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>Top bar</b> — Desktop · signed out (guest)</div>
|
||||
<div style="background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;">
|
||||
<div style="height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;align-items:center;gap:36px;">
|
||||
<div style="display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:24px;height:24px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(194,163,90,0.22);"><div style="width:8px;height:8px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:0.14em;color:#e6e0d6;white-space:nowrap;">SHADOWS OVER WESTGATE</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:26px;">
|
||||
<div style="position:relative;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#e6e0d6;padding:4px 0;">News<span style="position:absolute;left:-3px;right:-3px;bottom:-22px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Gallery</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Wiki</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Forums<svg width="9" height="6" viewBox="0 0 9 6" fill="none"><path d="M1 1l3.5 3.5L8 1" stroke="#a8893f" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;white-space:nowrap;">Dev Blog</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:34px;height:34px;border-radius:6px;border:1px solid rgba(194,163,90,0.18);display:flex;align-items:center;justify-content:center;background:rgba(194,163,90,0.05);"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#b9b2a6" stroke-width="1.4"/><path d="M11 11l3 3" stroke="#b9b2a6" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#b9b2a6;">Log In</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d8bd76,#a8893f);padding:9px 20px;border-radius:6px;border:1px solid rgba(216,194,138,0.6);box-shadow:0 2px 12px rgba(168,133,74,0.3);">Register</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= FRAME 3: FORUMS MENU OPEN -->
|
||||
<div style="position:absolute;left:0px;top:340px;width:1300px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>Forums menu</b> — replaces the category sidebar (categories are a sample to edit later)</div>
|
||||
<div style="background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;padding-bottom:30px;">
|
||||
<div style="height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;align-items:center;gap:36px;">
|
||||
<div style="display:flex;align-items:center;gap:12px;cursor:pointer;">
|
||||
<div style="width:24px;height:24px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;"><div style="width:8px;height:8px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:0.14em;color:#e6e0d6;white-space:nowrap;">SHADOWS OVER WESTGATE</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:26px;">
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">News</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Gallery</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;">Wiki</div>
|
||||
<div style="position:relative;display:flex;align-items:center;gap:6px;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#e6e0d6;padding:4px 0;">Forums<svg width="9" height="6" viewBox="0 0 9 6" fill="none"><path d="M1 1l3.5 3.5L8 1" stroke="#c2a35a" stroke-width="1.4" stroke-linecap="round"/></svg><span style="position:absolute;left:-3px;right:14px;bottom:-22px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#b9b2a6;padding:4px 0;white-space:nowrap;">Dev Blog</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;opacity:0.5;">
|
||||
<div style="width:34px;height:34px;border-radius:6px;border:1px solid rgba(194,163,90,0.18);"></div>
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:20px 0 0 290px;width:560px;background:linear-gradient(100deg,rgba(42,18,34,0.5),rgba(25,22,31,0.97) 30%,rgba(18,16,23,0.99));border:1px solid rgba(194,163,90,0.2);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.03),0 18px 40px rgba(0,0,0,0.5);padding:10px;">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
|
||||
<div style="padding:13px 16px;border-radius:6px;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">News</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">Official server announcements</div>
|
||||
</div>
|
||||
<div style="padding:13px 16px;border-radius:6px;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">Developer Blog</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">Behind-the-scenes updates</div>
|
||||
</div>
|
||||
<div style="padding:13px 16px;border-radius:6px;background:rgba(194,163,90,0.06);">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">General Discussion</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">Talk of the city and beyond</div>
|
||||
</div>
|
||||
<div style="padding:13px 16px;border-radius:6px;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">Roleplay & Stories</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">In-character journals and tales</div>
|
||||
</div>
|
||||
<div style="padding:13px 16px;border-radius:6px;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">Guilds & Factions</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">Masked guilds and noble houses</div>
|
||||
</div>
|
||||
<div style="padding:13px 16px;border-radius:6px;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;margin-bottom:3px;">Help & Support</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12.5px;color:#9a9086;">New players start here</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:14px 16px 6px;border-top:1px solid rgba(194,163,90,0.12);">
|
||||
<div style="display:flex;gap:20px;">
|
||||
<span style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#b9b2a6;">Recent</span>
|
||||
<span style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#b9b2a6;">Unread</span>
|
||||
<span style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#b9b2a6;">Tags</span>
|
||||
</div>
|
||||
<span style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#c2a35a;">All Categories →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= FRAME 4: USER MENU OPEN -->
|
||||
<div style="position:absolute;left:0px;top:800px;width:1300px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>User menu</b> — profile, bookmarks, settings, sign out</div>
|
||||
<div style="background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;padding-bottom:30px;">
|
||||
<div style="height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;align-items:center;gap:36px;opacity:0.55;">
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div style="width:24px;height:24px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;"><div style="width:8px;height:8px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:0.14em;color:#e6e0d6;white-space:nowrap;">SHADOWS OVER WESTGATE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:34px;height:34px;border-radius:6px;border:1px solid rgba(194,163,90,0.18);display:flex;align-items:center;justify-content:center;background:rgba(194,163,90,0.05);"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#b9b2a6" stroke-width="1.4"/><path d="M11 11l3 3" stroke="#b9b2a6" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="width:34px;height:34px;display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2a4 4 0 00-4 4c0 4-1.5 5-1.5 5h11S13 10 13 6a4 4 0 00-4-4z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/><path d="M7.5 14a1.5 1.5 0 003 0" stroke="#b9b2a6" stroke-width="1.3"/></svg></div>
|
||||
<div style="width:34px;height:34px;display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 4h12v8H7l-3 3v-3H3z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/></svg></div>
|
||||
<div style="position:relative;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,238,190,0.22),transparent 30%),linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);box-shadow:0 0 0 2px #0f0d12,0 0 0 3px rgba(127,184,106,0.7);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:14px 26px 0 auto;width:248px;background:linear-gradient(100deg,rgba(42,18,34,0.5),rgba(25,22,31,0.97) 30%,rgba(18,16,23,0.99));border:1px solid rgba(194,163,90,0.2);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.03),0 18px 40px rgba(0,0,0,0.5);overflow:hidden;">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(194,163,90,0.12);">
|
||||
<div style="width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,238,190,0.22),transparent 30%),linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);flex:none;"></div>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">archvillainette</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:12px;color:#c2a35a;">View profile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:8px;">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;font-family:'Jost',sans-serif;font-size:14px;color:#b9b2a6;"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="5" r="2.6" stroke="#a8893f" stroke-width="1.3"/><path d="M2.5 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="#a8893f" stroke-width="1.3"/></svg>Profile</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;font-family:'Jost',sans-serif;font-size:14px;color:#b9b2a6;"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M4 2h7v11l-3.5-2.2L4 13z" stroke="#a8893f" stroke-width="1.3" stroke-linejoin="round"/></svg>Bookmarks</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;background:rgba(194,163,90,0.06);font-family:'Jost',sans-serif;font-size:14px;color:#e6e0d6;"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="2.4" stroke="#c2a35a" stroke-width="1.3"/><path d="M7.5 1.5v2M7.5 11.5v2M1.5 7.5h2M11.5 7.5h2" stroke="#c2a35a" stroke-width="1.3" stroke-linecap="round"/></svg>Settings</div>
|
||||
<div style="height:1px;background:rgba(194,163,90,0.12);margin:7px 4px;"></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;font-family:'Jost',sans-serif;font-size:14px;color:#bf8a86;"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M6 2H3v11h3M9.5 4.5L12.5 7.5 9.5 10.5M12 7.5H6" stroke="#bf8a86" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Sign Out</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= FRAME 5: MOBILE -->
|
||||
<div style="position:absolute;left:1360px;top:0px;width:392px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>Mobile</b> — compact bar</div>
|
||||
<div style="width:390px;background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;">
|
||||
<div style="height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;flex-direction:column;gap:4px;cursor:pointer;"><span style="width:20px;height:1.6px;background:#c2a35a;display:block;"></span><span style="width:20px;height:1.6px;background:#c2a35a;display:block;"></span><span style="width:20px;height:1.6px;background:#c2a35a;display:block;"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:9px;">
|
||||
<div style="width:18px;height:18px;transform:rotate(45deg);border:1.4px solid #c2a35a;display:flex;align-items:center;justify-content:center;"><div style="width:6px;height:6px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;color:#e6e0d6;">WESTGATE</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#b9b2a6" stroke-width="1.4"/><path d="M11 11l3 3" stroke="#b9b2a6" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);box-shadow:0 0 0 2px #0f0d12,0 0 0 3px rgba(127,184,106,0.7);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= FRAME 6: MOBILE DRAWER -->
|
||||
<div style="position:absolute;left:1360px;top:150px;width:392px;">
|
||||
<div class="lbl" data-drags-parent="1"><b>Mobile</b> — drawer open</div>
|
||||
<div style="width:390px;background:#0f0d12;border:1px solid rgba(194,163,90,0.14);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,0.4);overflow:hidden;">
|
||||
<div style="height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(20,17,25,0.9),rgba(15,13,18,0.92));">
|
||||
<div style="display:flex;flex-direction:column;gap:5px;"><span style="width:20px;height:1.6px;background:#c2a35a;display:block;transform:rotate(45deg) translateY(0px);"></span><span style="width:20px;height:1.6px;background:#c2a35a;display:block;transform:rotate(-45deg);margin-top:-7px;"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:9px;">
|
||||
<div style="width:18px;height:18px;transform:rotate(45deg);border:1.4px solid #c2a35a;display:flex;align-items:center;justify-content:center;"><div style="width:6px;height:6px;background:#c2a35a;"></div></div>
|
||||
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;color:#e6e0d6;">WESTGATE</div>
|
||||
</div>
|
||||
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#6f562d,#2c1122);border:1px solid rgba(216,194,138,0.4);"></div>
|
||||
</div>
|
||||
<div style="padding:10px 14px 18px;">
|
||||
<div style="display:flex;align-items:center;gap:10px;background:rgba(8,7,10,0.5);border:1px solid rgba(194,163,90,0.18);border-radius:8px;padding:10px 12px;margin:8px 0 14px;"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="#9a9086" stroke-width="1.3"/><path d="M10 10l3 3" stroke="#9a9086" stroke-width="1.3" stroke-linecap="round"/></svg><span style="font-family:'Jost',sans-serif;font-size:13px;color:#9a9086;">Search Westgate…</span></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#e6e0d6;padding:12px 8px;border-bottom:1px solid rgba(194,163,90,0.08);">News</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#b9b2a6;padding:12px 8px;border-bottom:1px solid rgba(194,163,90,0.08);">Gallery</div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#b9b2a6;padding:12px 8px;border-bottom:1px solid rgba(194,163,90,0.08);">Wiki</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;font-family:'Jost',sans-serif;font-size:15px;color:#b9b2a6;padding:12px 8px;border-bottom:1px solid rgba(194,163,90,0.08);">Forums<svg width="9" height="6" viewBox="0 0 9 6" fill="none"><path d="M1 1l3.5 3.5L8 1" stroke="#a8893f" stroke-width="1.4" stroke-linecap="round"/></svg></div>
|
||||
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#b9b2a6;padding:12px 8px;border-bottom:1px solid rgba(194,163,90,0.08);">Dev Blog</div>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:18px;padding:0 8px;">
|
||||
<div style="position:relative;display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2a4 4 0 00-4 4c0 4-1.5 5-1.5 5h11S13 10 13 6a4 4 0 00-4-4z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/><path d="M7.5 14a1.5 1.5 0 003 0" stroke="#b9b2a6" stroke-width="1.3"/></svg>Notifications<span style="width:7px;height:7px;border-radius:50%;background:#c2a35a;"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 4h12v8H7l-3 3v-3H3z" stroke="#b9b2a6" stroke-width="1.3" stroke-linejoin="round"/></svg>Messages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user