website/src/html/components/spread-tarot-card.html at main · hkeward/website · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div>
    <!-- Icon Templates -->
    <template id="element-icon-air"><svg class="icon-air element-icon">
        <title>Air</title>
      </svg></template>
    <template id="element-icon-water"><svg class="icon-water element-icon">
        <title>Water</title>
      </svg></template>
    <template id="element-icon-fire"><svg class="icon-fire element-icon">
        <title>Fire</title>
      </svg></template>
    <template id="element-icon-earth"><svg class="icon-earth element-icon">
        <title>Earth</title>
      </svg></template>
    <template id="reverse-toggle-icon"><svg class="icon-reset-svgrepo-com reverse-toggle"></svg></template>
    <template id="edit-card-icon"><svg class="icon-edit-3-svgrepo-com edit-card-btn"></svg></template>

    <!-- Spread Slot Template -->
    <template id="spread-slot-template">
      <div class="spread-card-slot">
        <div>
          <i>
            <h2 class="slot-label"></h2>
          </i>
        </div>
        <!-- Empty State -->
        <div class="slot-empty flexbox-columns">
          <div class="card-action-button">
            <!-- Default View -->
            <div class="card-action-default">
              <div class="draw-card-button"><svg class="icon-stars-03-svgrepo-com"></svg></div>
              <div class="search-card-button"><svg class="icon-major-arcana"></svg></div>
            </div>
            <!-- Search View -->
            <div class="card-action-search" style="display: none;">
              <div class="search-header">
                <div class="search-back-button"><svg class="icon-back"></svg></div>
                <div class="search-draw-button"><svg class="icon-stars-03-svgrepo-com"></svg></div>
              </div>
              <div class="suit-list">
                <button class="suit-button" data-suit="Major Arcana"><svg class="icon-major-arcana"></svg><span>Major
                    Arcana</span></button>
                <button class="suit-button" data-suit="Wands"><svg class="icon-fire"></svg><span>Wands</span></button>
                <button class="suit-button" data-suit="Cups"><svg class="icon-water"></svg><span>Cups</span></button>
                <button class="suit-button" data-suit="Swords"><svg class="icon-air"></svg><span>Swords</span></button>
                <button class="suit-button" data-suit="Pentacles"><svg
                    class="icon-earth"></svg><span>Pentacles</span></button>
              </div>
              <div class="card-list"></div>
            </div>
          </div>
        </div>
        <!-- Filled State -->
        <div class="slot-filled">
          <div class="spread-card flexbox-columns tarot-card">
            <img class="card-image" src="" alt="">
            <div class="card-name-row">
              <div class="spread-elements"></div>
              <h2 class="card-name"></h2>
            </div>
            <div><strong class="spread-keywords"></strong></div>
            <div class="spread-description"></div>
          </div>
        </div>
      </div>
    </template>
  </div>
</body>

</html>