uh

uh

app/pages/signup/signup.html

@@ -6,10 +6,14 @@
 {% endblock %}
 {% block content %}
 <div id="main">
-    <div class="signup-container d-flex align-items-center justify-content-center">
-        <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
-            <h1>Nexium</h1>
-            <p>2018+ with freedom.</p>
+    <div class="signup-wrapper" style="position:relative;">
+        <!-- logo moved outside the signup card so it can overlap/escape the container -->
+        <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="logo-outside d-none d-lg-block" />
+        <div class="signup-row">
+            <div class="signup-card">
+                <div class="signup-container d-flex align-items-center justify-content-center">
+                    <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
+                        <p class="signup-subtitle">2018+ with freedom.</p>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <div>
@@ -41,7 +45,13 @@
                 <p>Already have an account? <a href="/login">Login</a>
             </div>
         </div>
-        <img style="aspect-ratio: 7/4;min-height: 400px;max-height: 550px;" class="d-lg-block d-none" src="/static/img/LoginImage2.png" alt="Signup Image">
+                    </div>
+                </div>
+            </div>
+            <div class="signup-visual d-none d-lg-block">
+                <img style="width:100%;height:100%;object-fit:cover;min-height:400px;max-height:550px;" src="/static/img/LoginImage2.png" alt="Signup Image">
+            </div>
+        </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}

app/static/css/login.css

@@ -53,7 +53,7 @@ body {
 }
 
 .login-container img {
-    min-width: 300px;
+    min-width: 500px;
 }
     
 

app/static/css/signup.css

@@ -78,4 +78,162 @@ a:hover {
     text-decoration: none !important;
     color: rgb(3, 133, 255) !important;
     transition: 0.2s;
-}
+}
+
+/* Logo outside the signup card so it can overlap/escape the container */
+.signup-wrapper { position: relative; }
+.logo-outside {
+  position: absolute;
+  right: -40px; /* push beyond the card -- adjust to taste */
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 320px;
+  width: auto;
+  height: auto;
+  z-index: 0; /* behind the card; use higher if you want it above */
+  pointer-events: none;
+}
+.signup-container { position: relative; z-index: 1; }
+.signup-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
+
+@media (max-width: 992px) {
+  .logo-outside { display: none; }
+  .signup-container { min-width: 320px; }
+}
+
+/* Two-column layout for signup: left card + right visual */
+.signup-row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.signup-card { flex: 0 0 330px; }
+.signup-visual { flex: 1 1 0; }
+.signup-visual img { display:block; width:100%; height:100%; object-fit:cover; }
+
+@media (max-width: 992px) {
+  .signup-row { display: block; }
+  .signup-card { width: 100%; }
+  .signup-visual { display: none; }
+}body {
+    background: radial-gradient(circle, #333 10%, transparent 11%),radial-gradient(circle at bottom left, #333 5%, transparent 6%),radial-gradient(circle at bottom right, #333 5%, transparent 6%),radial-gradient(circle at top left, #333 5%, transparent 6%),radial-gradient(circle at top right, #333 5%, transparent 6%);
+    background-size: 3em 3em;
+    background-color: rgb(20,20,20);
+}
+
+#main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.signup-container {
+    min-width: 330px;
+    display: inline-block;
+    background-color: rgba(25,25,25, 1);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
+}
+
+/* only align h1 tags */
+.signup-container h1 {
+    text-align: center;
+    margin-bottom: 0;
+    font-size: 3.5rem;
+    font-weight: 700;
+}
+.signup-container p {
+    text-align: center;
+    padding: 0;
+    margin-bottom: 15px; 
+    font-size: small;
+}
+
+.signup-container button {
+    width: 100%;
+    font-weight: 600;
+    font-size: larger;
+    padding: 3px;
+    margin-bottom: 0 !important;
+    color: #fff;
+}
+
+.signup-container a {
+    font-size: small;
+    font-weight: 400 !important;
+}
+
+.col {
+    padding: 0 !important;
+}
+
+#password {
+    min-width: 300px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.messagealerts {
+    background: rgba(255, 0, 0, 0.2);
+    color: rgb(226, 226, 226);
+    word-wrap: break-word;
+}
+
+.form-text {
+    /* wrap the text*/
+    word-wrap: break-word;
+}
+
+a {
+    text-decoration: none !important;
+    color: rgb(32, 147, 255) !important;
+    font-weight: 500 !important;
+    transition: 0.2s;
+}
+
+a:hover {
+    text-decoration: none !important;
+    color: rgb(3, 133, 255) !important;
+    transition: 0.2s;
+}
+
+/* Logo outside the signup card so it can overlap/escape the container */
+.signup-wrapper { position: relative; }
+.logo-outside {
+  position: absolute;
+  right: -40px; /* push beyond the card -- adjust to taste */
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 320px;
+  width: auto;
+  height: auto;
+  z-index: 0; /* behind the card; use higher if you want it above */
+  pointer-events: none;
+}
+.signup-container { position: relative; z-index: 1; }
+.signup-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
+
+@media (max-width: 992px) {
+  .logo-outside { display: none; }
+  .signup-container { min-width: 320px; }
+}
+
+/* Two-column layout for signup: left card + right visual */
+.signup-row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.signup-card { flex: 0 0 330px; }
+.signup-visual { flex: 1 1 0; }
+.signup-visual img { display:block; width:100%; height:100%; object-fit:cover; }
+
+@media (max-width: 992px) {
+  .signup-row { display: block; }
+  .signup-card { width: 100%; }
+  .signup-visual { display: none; }
+}