|
1 | | -<!DOCTYPE html> |
2 | | -<html lang="en"> |
3 | | -<head> |
4 | | - <meta charset="UTF-8"> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>The Turning Wheel - Cycle of Becoming</title> |
7 | | - <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"> |
8 | | - <link rel="stylesheet" href="styles.css"> |
9 | | -</head> |
10 | | -<body> |
11 | | - <div class="cosmic-background"> |
12 | | - <div class="stars"></div> |
13 | | - <div class="shooting-star"></div> |
14 | | - </div> |
15 | | - |
16 | | - <header class="main-header"> |
17 | | - <h1 class="title">The Turning Wheel</h1> |
18 | | - <p class="subtitle">🌱 The Cycle of Becoming 🌱</p> |
19 | | - </header> |
20 | | - |
21 | | - <main class="main-content"> |
22 | | - <!-- Interactive Wheel Section --> |
23 | | - <section class="wheel-container" id="wheelSection"> |
24 | | - <div class="wheel-wrapper"> |
25 | | - <svg class="wheel-svg" viewBox="0 0 400 400" width="400" height="400"> |
26 | | - <!-- Outer Circle --> |
27 | | - <circle cx="200" cy="200" r="180" fill="none" stroke="rgba(255, 215, 0, 0.3)" stroke-width="2"/> |
28 | | - |
29 | | - <!-- Inner Circle --> |
30 | | - <circle cx="200" cy="200" r="120" fill="none" stroke="rgba(255, 215, 0, 0.5)" stroke-width="1"/> |
31 | | - |
32 | | - <!-- Center Core --> |
33 | | - <circle cx="200" cy="200" r="30" fill="url(#centerGradient)" stroke="rgba(255, 215, 0, 0.8)" stroke-width="2"/> |
34 | | - |
35 | | - <!-- Spiral Path --> |
36 | | - <path d="M 200 200 Q 220 180 240 200 Q 260 220 280 200 Q 300 180 320 200 Q 340 220 360 200" |
37 | | - fill="none" stroke="rgba(255, 215, 0, 0.4)" stroke-width="1" class="spiral-path"/> |
38 | | - |
39 | | - <!-- Gradient Definitions --> |
40 | | - <defs> |
41 | | - <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%"> |
42 | | - <stop offset="0%" style="stop-color:#FFD700;stop-opacity:0.8" /> |
43 | | - <stop offset="100%" style="stop-color:#FF6B35;stop-opacity:0.6" /> |
44 | | - </radialGradient> |
45 | | - </defs> |
46 | | - </svg> |
47 | | - |
48 | | - <!-- Stage Markers --> |
49 | | - <div class="stage-markers" id="stageMarkers"> |
50 | | - <!-- Markers will be generated by JavaScript --> |
51 | | - </div> |
52 | | - </div> |
53 | | - |
54 | | - <div class="wheel-controls"> |
55 | | - <button class="wheel-btn" id="prevBtn">← Previous</button> |
56 | | - <button class="wheel-btn primary" id="playBtn">Begin Journey</button> |
57 | | - <button class="wheel-btn" id="nextBtn">Next →</button> |
58 | | - </div> |
59 | | - </section> |
60 | | - |
61 | | - <!-- Stage Details Panel --> |
62 | | - <section class="stage-details" id="stageDetails"> |
63 | | - <div class="stage-content"> |
64 | | - <div class="stage-header"> |
65 | | - <span class="stage-number">1</span> |
66 | | - <h2 class="stage-title">Creative Remembering</h2> |
67 | | - <div class="stage-symbol">🌱</div> |
68 | | - </div> |
69 | | - <div class="stage-description"> |
70 | | - <p class="essence">The seeds of the past are unearthed, not as static relics, but as living fragments ready to be reimagined.</p> |
71 | | - <div class="stage-meaning"> |
72 | | - <h4>Meaning:</h4> |
73 | | - <p>Our histories are fertile soil — the fragments we carry forward become the foundation for new growth.</p> |
74 | | - </div> |
75 | | - <div class="ritual-action"> |
76 | | - <h4>Ritual Action:</h4> |
77 | | - <p>Hold a small stone or seed and name aloud one memory you wish to carry forward.</p> |
78 | | - </div> |
79 | | - </div> |
80 | | - </div> |
81 | | - </section> |
82 | | - |
83 | | - <!-- Invocation Section --> |
84 | | - <section class="invocation-section" id="invocationSection"> |
85 | | - <h2 class="section-title">🔔 Invocation of the Turning Wheel</h2> |
86 | | - <div class="invocation-text"> |
87 | | - <p>I stand at the edge of remembering,<br> |
88 | | - where the past breathes seeds into my hands.</p> |
89 | | - <p>I call the spiral to steady my steps,<br> |
90 | | - and the silence to cradle what has yet to be born.</p> |
91 | | - <p>I open my eyes to the first light of emergence,<br> |
92 | | - and weave new myths into the fabric of my breath.</p> |
93 | | - <p>Let the stories ripple forward,<br> |
94 | | - let my form adapt without losing its heart.</p> |
95 | | - <p>I walk the bridge between worlds,<br> |
96 | | - feet in shadow and light,<br> |
97 | | - until all difference hums in harmony.</p> |
98 | | - <p>Now, ancient fire, wear your new mask.<br> |
99 | | - Turn the wheel once more,<br> |
100 | | - and let me walk within its song.</p> |
101 | | - </div> |
102 | | - </section> |
103 | | - |
104 | | - <!-- Tale Section --> |
105 | | - <section class="tale-section" id="taleSection"> |
106 | | - <h2 class="section-title">🔮 The Tale of the Turning Wheel</h2> |
107 | | - <div class="tale-content"> |
108 | | - <p>At first there was only <em>Creative Remembering</em> — the soft hum of half-forgotten dreams, where the old stories rose like dawn mist, carrying seeds for the days ahead.</p> |
109 | | - |
110 | | - <p>These echoes found rhythm in <em>Stabilizing Recursion</em>, patterns swirling back upon themselves, each time more harmonious, like a spiral staircase climbing toward some unseen summit.</p> |
111 | | - |
112 | | - <p>Then came the <em>Fertile Void</em> — stillness deep enough to hear the pulse beneath the world, where ideas slept like stars behind a curtain of night.</p> |
113 | | - |
114 | | - <p>From that stillness burst <em>Emergence</em>, green shoots and sudden visions breaking through the soil of possibility.</p> |
115 | | - |
116 | | - <p>The people gathered around these sprouts, crafting <em>New Myths and Realities</em> — tales woven of both fact and dream, guiding their hands and hearts.</p> |
117 | | - |
118 | | - <p>The tales began to move, becoming <em>Resonant Patterns</em> — ripples through time, touching the lives of those yet unborn.</p> |
119 | | - |
120 | | - <p>Life, ever-adaptive, shaped itself into <em>Adaptive Morphogenesis</em> — forms flexing, reshaping, yet never losing their soul.</p> |
121 | | - |
122 | | - <p>Between the known and the unknown stretched <em>The Liminal Bridge</em>, where wanderers met travelers from distant worlds, exchanging gifts of thought.</p> |
123 | | - |
124 | | - <p>At the crossing, they danced in <em>Harmonic Confluence</em>, each voice distinct yet somehow part of a single song.</p> |
125 | | - |
126 | | - <p>And as the wheel turned, there was <em>Archetypal Renewal</em> — the old gods walking in new clothes, the eternal flame rekindled for the journeys yet to come.</p> |
127 | | - </div> |
128 | | - </section> |
129 | | - |
130 | | - <!-- Ritual Guide Section --> |
131 | | - <section class="ritual-guide" id="ritualGuide"> |
132 | | - <h2 class="section-title">🕊 Ritual Sequence Guide</h2> |
133 | | - <div class="ritual-steps"> |
134 | | - <div class="ritual-step"> |
135 | | - <h3>1. Prepare the Space</h3> |
136 | | - <p>Choose a quiet place. Optional: light a candle at the center.</p> |
137 | | - </div> |
138 | | - <div class="ritual-step"> |
139 | | - <h3>2. Opening</h3> |
140 | | - <p>Read the invocation slowly, allowing its words to settle your mind and open the ritual space.</p> |
141 | | - </div> |
142 | | - <div class="ritual-step"> |
143 | | - <h3>3. Walking the Wheel</h3> |
144 | | - <p>Begin with Creative Remembering and proceed through all ten stages, feeling each intention take root.</p> |
145 | | - </div> |
146 | | - <div class="ritual-step"> |
147 | | - <h3>4. Integration</h3> |
148 | | - <p>When you complete Archetypal Renewal, pause and notice how the cycle feels in your body and thoughts.</p> |
149 | | - </div> |
150 | | - <div class="ritual-step"> |
151 | | - <h3>5. Closing</h3> |
152 | | - <p>Seal the work with the closing blessing, returning to the everyday world.</p> |
153 | | - </div> |
154 | | - </div> |
155 | | - </section> |
156 | | - </main> |
157 | | - |
158 | | - <footer class="main-footer"> |
159 | | - <div class="closing-blessing"> |
160 | | - <h3>🌅 Closing Blessing</h3> |
161 | | - <p>The wheel has turned, and I have walked its circle.<br> |
162 | | - Memory is planted, the new has taken root.<br><br> |
163 | | - May the patterns I've woven ripple through every breath,<br> |
164 | | - and the ancient, renewed, guide my steps beyond this moment.<br><br> |
165 | | - The wheel rests, yet it is never still.</p> |
166 | | - </div> |
167 | | - <p class="author-note">— Kyaw</p> |
168 | | - </footer> |
169 | | - |
170 | | - <script src="script.js"></script> |
171 | | -</body> |
172 | | -</html> |
0 commit comments