|
@@ -21,6 +21,7 @@
|
|
|
<span class="logo-text">ChatRPG</span>
|
|
<span class="logo-text">ChatRPG</span>
|
|
|
</a>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
+ <div class="form-glow">
|
|
|
<div id="register" class="standardForm" onsubmit={submit}>
|
|
<div id="register" class="standardForm" onsubmit={submit}>
|
|
|
<h2>Join The Adventure</h2>
|
|
<h2>Join The Adventure</h2>
|
|
|
|
|
|
|
@@ -46,6 +47,7 @@
|
|
|
|
|
|
|
|
<p>Already have an account? <a href="/login">Log in</a></p>
|
|
<p>Already have an account? <a href="/login">Log in</a></p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
</main>
|
|
</main>
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
@@ -85,4 +87,52 @@
|
|
|
h2{
|
|
h2{
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .form-glow {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-radius: 14px;
|
|
|
|
|
+ width: min(660px, 100%);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .form-glow::before {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: -2px;
|
|
|
|
|
+ border-radius: 14px;
|
|
|
|
|
+ background: conic-gradient(
|
|
|
|
|
+ from var(--angle, 0deg),
|
|
|
|
|
+ transparent 0%,
|
|
|
|
|
+ #c084fc 20%,
|
|
|
|
|
+ #5a5aff 40%,
|
|
|
|
|
+ transparent 60%
|
|
|
|
|
+ );
|
|
|
|
|
+ animation: spin-border 10s linear infinite;
|
|
|
|
|
+ z-index: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .form-glow::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 1px;
|
|
|
|
|
+ border-radius: 13px;
|
|
|
|
|
+ background: #1a1a2e;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .form-glow .standardForm {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ border-color: transparent;
|
|
|
|
|
+ max-width: 660px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @property --angle {
|
|
|
|
|
+ syntax: "<angle>";
|
|
|
|
|
+ inherits: false;
|
|
|
|
|
+ initial-value: 0deg;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @keyframes spin-border {
|
|
|
|
|
+ to { --angle: 360deg; }
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|