Skip to content

Create SigilMatrix.html #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Coderad32 merged 1 commit into from
Jul 3, 2025
Merged

Create SigilMatrix.html #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions SigilMatrix.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sigil Matrix</title>
</head>
<body>
<h1>Welcome to the Sigil Matrix</h1>
<p>Explore the fascinating world of sigils and their meanings.</p>
<style>
span {
display: inline-block;
margin: 4px 6px;
padding: 4px 8px;
font-size: 1.2em;
font-family: 'Fira Mono', 'Consolas', monospace;
background: #f5f5fa;
border: 1px solid #d1d5db;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
cursor: pointer;
}

span[title]:hover,
span[title]:focus {
background: #6366f1;
color: #fff;
border-color: #6366f1;
}

body {
background: #f0f1f6;
color: #22223b;
font-family: 'Segoe UI', Arial, sans-serif;
padding: 32px;
}

@media (max-width: 600px) {
span {
font-size: 1em;
padding: 3px 6px;
margin: 3px 4px;
}
}
</style>


'<span title="Exclamation">!</span> <span title="At">@</span> <span title="Hash">#</span> <span title="Dollar">$</span> <span title="Percent">%</span> <span title="Caret">^</span> <span title="Ampersand">&</span> <span title="Asterisk">*</span> <span title="Left Paren">(</span> <span title="Right Paren">!)</span>',
'<span title="Exclamation">!!</span> <span title="Exclamation At">!@</span> <span title="Exclamation Hash">!#</span> <span title="Exclamation Dollar">!$</span> <span title="Exclamation Percent">!%</span> <span title="Exclamation Caret">!^</span> <span title="Exclamation Ampersand">!&</span> <span title="Exclamation Asterisk">!*</span> <span title="Exclamation Left Paren">!(</span> <span title="At Right Paren">@)</span>',
'<span title="At Exclamation">@!</span> <span title="At At">@@</span> <span title="At Hash">@#</span> <span title="At Dollar">@$</span> <span title="At Percent">@%</span> <span title="At Caret">@^</span> <span title="At Ampersand">@&</span> <span title="At Asterisk">@*</span> <span title="At Left Paren">@ (</span> <span title="Hash Right Paren">#)</span>',
'<span title="Hash Exclamation">#!</span> <span title="Hash At">#@</span> <span title="Hash Hash">##</span> <span title="Hash Dollar">#$</span> <span title="Hash Percent">#%</span> <span title="Hash Caret">#^</span> <span title="Hash Ampersand">#&</span> <span title="Hash Asterisk">#*</span> <span title="Hash Left Paren">#(</span> <span title="Dollar Right Paren">$)</span>',
'<span title="Dollar Exclamation">$!</span> <span title="Dollar At">$@</span> <span title="Dollar Hash">#$</span> <span title="Dollar Dollar">$$</span> <span title="Dollar Percent">$%</span> <span title="Dollar Caret">$^</span> <span title="Dollar Ampersand">$&</span> <span title="Dollar Asterisk">$*</span> <span title="Dollar Left Paren">$(</span> <span title="Percent Right Paren">%)</span>',
'<span title="Percent Exclamation">%!</span> <span title="Percent At">%@</span> <span title="Percent Hash">%#</span> <span title="Percent Dollar">%$</span> <span title="Percent Percent">%%</span> <span title="Percent Caret">%^</span> <span title="Percent Ampersand">%&</span> <span title="Percent Asterisk">%*</span> <span title="Percent Left Paren">%(</span> <span title="Caret Right Paren">^)</span>',
'<span title="Caret Exclamation">^!</span> <span title="Caret At">^@</span> <span title="Caret Hash">^#</span> <span title="Caret Dollar">^$</span> <span title="Caret Percent">^%</span> <span title="Caret Caret">^^</span> <span title="Caret Ampersand">^&</span> <span title="Caret Asterisk">^*</span> <span title="Caret Left Paren">^(</span> <span title="Ampersand Right Paren">&)</span>',
'<span title="Ampersand Exclamation">&!</span> <span title="Ampersand At">&@</span> <span title="Ampersand Hash">&#</span> <span title="Ampersand Dollar">&$</span> <span title="Ampersand Percent">&%</span> <span title="Ampersand Caret">&^</span> <span title="Ampersand Ampersand">&&</span> <span title="Ampersand Asterisk">&*</span> <span title="Ampersand Left Paren">& (</span> <span title="Asterisk Right Paren">*)</span>',
'<span title="Asterisk Exclamation">*! </span><span title="Asterisk At">*@</span> <span title="Asterisk Hash">*#</span> <span title="Asterisk Dollar">*$</span> <span title="Asterisk Percent">*%</span> <span title="Asterisk Caret">*^</span> <span title="Asterisk Ampersand">*&</span> <span title="Asterisk Asterisk">**</span> <span title="Asterisk Left Paren">*(</span> <span title="Left Paren Left Paren">(()</span>',
'<span title="Left Paren Exclamation">(!</span> <span title="Left Paren At">(@</span> <span title="Left Paren Hash">(#</span> <span title="Left Paren Dollar">($</span> <span title="Left Paren Percent">(%</span> <span title="Left Paren Caret">(^</span> <span title="Left Paren Ampersand">(&</span> <span title="Left Paren Asterisk">(*</span> <span title="Left Paren Left Paren">((</span> <span title="Exclamation Right Paren">!))</span>',



</body>
</html>