I-Ching/share-card.html at main · JoseAlvarezDev/I-Ching · 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
<!-- share-card.html -->
<div id="shareCardModal" class="modal share-modal" style="display: none">
  <div class="modal-content share-modal-content">
    <span class="close-modal close-share">&times;</span>
    <h2>Compartir mi Consulta del I Ching</h2>

    <div class="share-instructions">
      <p>
        ¡Tu consulta está lista para compartir! Selecciona cómo quieres
        compartir tu sabiduría:
      </p>
    </div>

    <div class="share-container">
      <div id="shareCard" class="share-card">
        <div class="share-card-header">
          <div class="yin-yang-mini">
            <div class="yin"></div>
            <div class="yang"></div>
          </div>
          <h3>Consulta del I Ching</h3>
        </div>

        <div class="share-card-question">
          <h4>Pregunta:</h4>
          <p id="shareQuestion">
            ¿Cómo puedo encontrar equilibrio entre mi trabajo y mi vida
            personal?
          </p>
        </div>

        <div class="share-card-hexagram">
          <div class="hexagram-visual" id="shareHexagramVisual">
            <!-- Se generará dinámicamente -->
          </div>
          <div class="hexagram-info">
            <div class="hexagram-number">
              #<span id="shareHexagramNumber">11</span>
            </div>
            <div class="hexagram-name" id="shareHexagramName">La Paz</div>
          </div>
        </div>

        <div class="share-card-result">
          <div class="result-section">
            <h5>Juicio</h5>
            <p id="shareJudgment">
              La Paz. Lo pequeño se va, lo grande viene. Ventura. Éxito.
            </p>
          </div>
          <div class="result-section">
            <h5>Imagen</h5>
            <p id="shareImage">
              Cielo y tierra unidos: la imagen de la Paz. Así el soberano divide
              y completa el curso del cielo y la tierra; fomenta y regula los
              dones del cielo y la tierra, y así ayuda al pueblo.
            </p>
          </div>
        </div>

        <div class="share-card-changing-lines" id="shareChangingLinesContainer">
          <h5>Líneas Mutantes</h5>
          <!-- Se generará dinámicamente -->
        </div>

        <div class="share-card-footer">
          <div class="share-date" id="shareDate">25 de agosto de 2025</div>
          <div class="share-brand">
            <div class="logo-mini"></div>
            <span>El Oráculo del I Ching</span>
          </div>
        </div>
      </div>

      <div class="share-options">
        <h4>Compartir en:</h4>
        <div class="share-platforms">
          <button class="share-btn whatsapp" data-platform="whatsapp">
            <i class="fab fa-whatsapp"></i> WhatsApp
          </button>
          <button class="share-btn twitter" data-platform="twitter">
            <i class="fab fa-x-twitter"></i> X (Twitter)
          </button>
          <button class="share-btn facebook" data-platform="facebook">
            <i class="fab fa-facebook"></i> Facebook
          </button>
          <button class="share-btn telegram" data-platform="telegram">
            <i class="fab fa-telegram"></i> Telegram
          </button>
          <button class="share-btn download" id="downloadShareCard">
            <i class="fas fa-download"></i> Descargar imagen
          </button>
        </div>
        <div class="share-warning">
          <i class="fas fa-info-circle"></i> Para Instagram, descarga la imagen
          y compártela como publicación
        </div>
      </div>
    </div>
  </div>
</div>