morphene/inventory.html at main · numbpill3d/morphene · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inventory Vault / Void Avatar Lounge</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="crt accent-cyan">

  <div class="page-shell">
    <header class="window window-top">
      <div class="window-titlebar">
        <span class="title-dot">✥</span>
        <span>MORPHENE // INVENTORY</span>
        <span class="title-right">arcane collection</span>
      </div>
      <div class="window-body window-body-split">
        <div class="panel panel-left">
          <h1 class="section-title">your artifacts</h1>
          <div class="nav-links">
            <a href="index.html">The Gateway</a>
            <a href="lounge.html">The Grid</a>
            <a href="avatar.html">Avatar Room</a>
            <a href="market.html">Bazaar</a>
            <a href="profile.html">Soul Profile</a>
          </div>
          <div class="status-box">
            <div class="status-line">SOUL: <span id="user-email"></span></div>
            <div class="status-line">MANA: <span id="user-coins"></span></div>
          </div>

          <div class="sub-window">
            <div class="sub-window-titlebar">current vessel</div>
            <div class="sub-window-body">
              <div id="inv-avatar-stage" class="avatar-stage"></div>
            </div>
          </div>

          <div class="sub-window">
            <div class="sub-window-titlebar">active incantations</div>
            <div class="sub-window-body">
              <div id="equipped-summary" class="equipped-list">
                <!-- equipped items displayed here -->
              </div>
            </div>
          </div>
        </div>

        <div class="panel panel-right">
          <div class="sub-window">
            <div class="sub-window-titlebar">the drawer of souls</div>
            <div class="sub-window-body">
              <div class="filter-bar">
                <label>
                  vessel slot
                  <select id="filter-slot">
                    <option value="all">all</option>
                    <option value="baseBody">base body</option>
                    <option value="hair">hair</option>
                    <option value="eyes">eyes</option>
                    <option value="top">top</option>
                    <option value="bottom">bottom</option>
                    <option value="shoes">shoes</option>
                    <option value="head">head</option>
                    <option value="accessory1">accessory #1</option>
                    <option value="accessory2">accessory #2</option>
                  </select>
                </label>
                <label>
                  rarity
                  <select id="filter-rarity">
                    <option value="all">all</option>
                    <option value="common">common</option>
                    <option value="uncommon">uncommon</option>
                    <option value="rare">rare</option>
                  </select>
                </label>
                <label class="filter-search">
                  search sigils
                  <input id="filter-search" placeholder="name or identifier">
                </label>
                <button id="filter-clear" class="btn btn-ghost" type="button">reset</button>
              </div>
              <div id="inventory-grid" class="inventory-grid">
                <!-- inventory items injected here -->
              </div>
              <div id="inventory-empty" class="hint-text" style="display:none;">
                The vault is empty. Visit the Black Market to trade for artifacts.
              </div>
            </div>
          </div>

          <div class="sub-window">
            <div class="sub-window-titlebar">treasury manifest</div>
            <div class="sub-window-body">
              <div id="collection-stats" class="debug-console">
                Loading manifest...
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <footer class="footer-bar">
      <span>MORPHENE v0.1-necro</span>
      <span>dungeon-wizard core. firebase grimoire.</span>
      <span>tread carefully.</span>
    </footer>
  </div>

  <script type="module" src="js/inventory.js"></script>
</body>
</html>