panelattack.com/about.html at main · panel-attack/panelattack.com · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Meet the characters of Panel Attack - Esme, Madam Q, Magellan, and Rattles. Learn about their personalities and the world they inhabit." />
  <meta name="keywords" content="Panel Attack characters, Esme, Madam Q, Magellan, Rattles, puzzle game characters, Panel Attack lore">
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css?v=2">
  <title>About - Panel Attack</title>
  <link rel="shortcut icon" href="images/icon.png">
</head>

<body>

  <!-- SHARED HEADER - Loaded by header.js -->
  <script src="header.js"></script>

  <div id="body">

    <div class="flexContainer">


      <div class="flexItem fullWidth card gear-theme">
        <div class="card-header">
          <img src="images/gear1.png" alt="Gear" class="face face--circle" style="border-color: #B17D55;">
          <h3 class="card-name">Magical Steampunk Fantasy Realm</h3>
        </div>
        <p class="card-desc">Panel Attack takes place in a magical fantasy realm where steampunk innovations thrive. This is a land where magical crystals serve as the primary source of power for both everyday life and extraordinary feats. Towering steam-powered machinery hums alongside enchanted artifacts, creating a unique harmony between technology and magic.</p>
      </div>

      <div class="flexItem fullWidth card crystal-theme">
        <div class="card-header">
          <img src="images/circle1.png" alt="Crystal" class="face face--circle" style="border-color: #53C3AD;">
          <h3 class="card-name">Crystal Energy</h3>
        </div>
        <p class="card-desc">The magical crystals are living sources of energy that must be carefully protected from those who would use them for evil. These precious gems pulse with ancient power, their light illuminating the brass and bronze machinery that defines this steampunk world.</p>
      </div>

      <div class="flexItem fullWidth card pipe-theme">
        <div class="card-header">
          <img src="images/bronzeCircle.png" alt="Bronze Circle" class="face face--circle" style="border-color: #D4AF37;">
          <h3 class="card-name">Honorable Competition</h3>
        </div>
        <p class="card-desc">Residents of the world love to compete in Panel Attack battles as a competitive sport and a way to resolve disputes honorably. Each match is a test of one's ability to think strategically, react swiftly, and maintain calm under pressure.</p>
      </div>

      <div class="flexItem fullWidth card sharp-theme">
        <div class="card-header">
          <img src="images/panels/sharp/panel-1@2x.png" alt="Sharp Panel" class="face face--panel" style="border-color: #4A90E2;">
          <h3 class="card-name">Panel Sets</h3>
        </div>
        <div class="panel-row">
          <img src="images/panels/sharp/panel-1@2x.png" alt="Sharp Panel 1">
          <img src="images/panels/sharp/panel-2@2x.png" alt="Sharp Panel 2">
          <img src="images/panels/sharp/panel-3@2x.png" alt="Sharp Panel 3">
          <img src="images/panels/sharp/panel-4@2x.png" alt="Sharp Panel 4">
          <img src="images/panels/sharp/panel-5@2x.png" alt="Sharp Panel 5">
          <img src="images/panels/sharp/panel-6@2x.png" alt="Sharp Panel 6">
        </div>
        <p class="card-desc">Clean, geometric design with precise angles and sharp edges. Perfect for players who prefer a modern, minimalist aesthetic in their battles.</p>
        <div class="panel-row">
          <img src="images/panels/simple/panel-1@2x.png" alt="Simple Panel 1">
          <img src="images/panels/simple/panel-2@2x.png" alt="Simple Panel 2">
          <img src="images/panels/simple/panel-3@2x.png" alt="Simple Panel 3">
          <img src="images/panels/simple/panel-4@2x.png" alt="Simple Panel 4">
          <img src="images/panels/simple/panel-5@2x.png" alt="Simple Panel 5">
          <img src="images/panels/simple/panel-6@2x.png" alt="Simple Panel 6">
        </div>
        <p class="card-desc">Smooth, classic rounded design with soft curves and traditional styling. Ideal for players who appreciate timeless, elegant simplicity.</p>
      </div>

      <div class="flexItem fullWidth card esme-theme" id="esmeCard">
        <div class="character-content">
          <div class="character-portrait">
            <img src="images/characters/esme-portrait.png" alt="Esme">
          </div>
          <div class="character-info">
            <div class="card-header">
              <img src="images/characters/esme-face.png" alt="Esme Face" class="character-face" style="border-color: #53C3AD;">
              <h1 class="character-name card-name">Esme</h1>
            </div>
            <p class="card-desc">A happy, good-natured magical girl with an affinity for beautiful green gemstones.
              She doesn't go anywhere without her beloved enchanted parasol - a finely crafted steam-powered artifact that amplifies her magical abilities and helps her channel the crystal's magical energy.</p>
            <p class="card-desc">As a dedicated protector of the crystals, she doesn't take negativity or hostility lightly, especially when someone threatens the natural balance of magic. Her happy, positive, sweet, and enthusiastic personality is sure to step in whenever someone is in need of help.</p>
            <div class="character-quotes">
              ◆ "Sparkle time!"<br>
              ◆ "Always here to help"<br>
              ◆ "Embrace your flaws and shine bright like the gems we are"<br>
              ◆ "With each cut and challenge, we emerge stronger than before"
            </div>
            <div class="character-colors">
              <strong>Favorite Colors:</strong>
              <div class="color-samples">
                <div class="color-circle" style="background-color: #53C3AD;" title="Primary: #53C3AD"></div>
                <div class="color-circle" style="background-color: #7F3540;" title="Secondary: #7F3540"></div>
                <div class="color-circle" style="background-color: #FF95C7;" title="Tertiary: #FF95C7"></div>
              </div>
              <div class="color-codes">
                Primary: #53C3AD • Secondary: #7F3540 • Tertiary: #FF95C7
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexItem fullWidth card magellan-theme" id="magellanCard">
        <div class="character-content">
          <div class="character-portrait">
            <img src="images/characters/magellan-portrait.png" alt="Magellan">
          </div>
          <div class="character-info">
            <div class="card-header">
              <img src="images/characters/magellan-face.png" alt="Magellan Face" class="character-face" style="border-color: #73ABD8;">
              <h1 class="character-name card-name">Magellan</h1>
            </div>
            <p class="card-desc">Optimistic and cheery, Magellan is a penguin who loves to fly his magical airship - a marvel of steampunk engineering customized to look like a cute animal.
              His dream is to sail around the world, unobstructed and free.</p>
            <p class="card-desc">His upbeat personality and love of exploration have led him to remote locations and crystal veins.
              He takes on any challenge with enthusiasm and determination.</p>
            <div class="character-quotes">
              ◆ "Soaring!"<br>
              ◆ "Fish Feast!"<br>
              ◆ "That was a breeze!"<br>
              ◆ "We're flying high."<br>
              ◆ "Let's take to the skies."<br>
              ◆ "Time to score some penguin points."
            </div>
            <div class="character-colors">
              <strong>Favorite Colors:</strong>
              <div class="color-samples">
                <div class="color-circle" style="background-color: #73ABD8;" title="Primary: #73ABD8"></div>
                <div class="color-circle" style="background-color: #4F3860;" title="Secondary: #4F3860"></div>
                <div class="color-circle" style="background-color: #A25334;" title="Tertiary: #A25334"></div>
              </div>
              <div class="color-codes">
                Primary: #73ABD8 • Secondary: #4F3860 • Tertiary: #A25334
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexItem fullWidth card rattles-theme" id="rattlesCard">
        <div class="character-content">
          <div class="character-portrait">
            <img src="images/characters/rattles-portrait.png" alt="Rattles">
          </div>
          <div class="character-info">
            <div class="card-header">
              <img src="images/characters/rattles-face.png" alt="Rattles Face" class="character-face" style="border-color: #B17D55;">
              <h1 class="character-name card-name">Rattles</h1>
            </div>
            <p class="card-desc">A sophisticated steam-powered automaton who thinks he is the most distinguished and dangerous villain in the crystal underworld, but really comes off as comical and overly prideful.
              Built from stolen brass, bronze and bones, his mechanical frame houses both impressive engineering and a rather inflated ego that drives his criminal ambitions.</p>
            <p class="card-desc">This robotic gentleman maintains a collected and hardly impressed demeanor while plotting elaborate crystal heists.</p>
              Rattles slightly loses his composure when his "brilliant" schemes inevitably backfire, revealing the gap between his grandiose self-image and his bumbling reality.
              He seeks to build a crystal-powered empire where he can finally receive the respect he believes he deserves.</p>
            <div class="character-quotes">
              ◆ "Don't look so surprised. You're in the presence of a bona fide champion."<br>
              ◆ "Crushed it! Bones don't break!"<br>
              ◆ "Ah, victory. Quite expected, really."<br>
              ◆ "You're about tibia memory."
            </div>
            <div class="character-colors">
              <strong>Favorite Colors:</strong>
              <div class="color-samples">
                <div class="color-circle" style="background-color: #B17D55;" title="Primary: #B17D55"></div>
                <div class="color-circle" style="background-color: #EBC9A4;" title="Secondary: #EBC9A4"></div>
                <div class="color-circle" style="background-color: #DFE2F4;" title="Tertiary: #DFE2F4"></div>
              </div>
              <div class="color-codes">
                Primary: #B17D55 • Secondary: #EBC9A4 • Tertiary: #DFE2F4
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexItem fullWidth card madamq-theme" id="madamqCard">
        <div class="character-content">
          <div class="character-portrait">
            <img src="images/characters/madamq-portrait.png" alt="Madam Q">
          </div>
          <div class="character-info">
            <div class="card-header">
              <img src="images/characters/madamq-face.png" alt="Madam Q Face" class="character-face" style="border-color: #A80000;">
              <h1 class="character-name card-name">Madam Q</h1>
            </div>
            <p class="card-desc">Madam Q, her most well known alias, is an intense and dangerous enigma with her own agenda, armed with a razor-sharp magical fan and an even sharper tongue.
               Her elegant weapon is a masterpiece of dark steampunk engineering.</p>
            <p class="card-desc">Little is known about her origin, nor has anyone seen her face beneath her ornate mask.
               When she sets her sights on powerful crystals to secure for her own purposes, nothing and no one will stand in her way without paying a grave price.
              She seeks to harness crystal power for herself, believing that only she is worthy to wield such immense magical energy, and will tear down anyone who dares oppose her ambitions.</p>
            <div class="character-quotes">
              ◆ "Oh my, did you hope for a different outcome?"<br>
              ◆ "Oh, sweet child. Ignorance is not bravery. It's just embarrassing."<br>
              ◆ "Just as I surmised"<br>
              ◆ "Enchanté."
            </div>
            <div class="character-colors">
              <strong>Favorite Colors:</strong>
              <div class="color-samples">
                <div class="color-circle" style="background-color: #A80000;" title="Primary: #A80000"></div>
                <div class="color-circle" style="background-color: #24181B;" title="Secondary: #24181B"></div>
                <div class="color-circle" style="background-color: #EDF3FF;" title="Tertiary: #EDF3FF"></div>
              </div>
              <div class="color-codes">
                Primary: #A80000 • Secondary: #24181B • Tertiary: #EDF3FF
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>

  <!-- FOOTER -->
  <div style="text-align: center; color: #888; font-size: 12px; padding: 20px;">
    <script>document.write("&copy; " + new Date().getFullYear() + " Panel Attack");</script>
  </div>

</body>

</html>