Merge pull request #100 from linea-it/89-implement-new-eds-page-from-…

…comanage-registry implement new eds page from comanage registry
linea-it · Aug 2, 2024 · f19135b · f19135b
2 parents 3f6b40a + d27141c
commit f19135b
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 34 deletions.
diff --git a/daiquiri/static/daiquiri/imgs/background.jpg b/daiquiri/static/daiquiri/imgs/background.jpg
diff --git a/daiquiri/static/daiquiri/imgs/cafe_logo.png b/daiquiri/static/daiquiri/imgs/cafe_logo.png
diff --git a/daiquiri/static/daiquiri/imgs/cilogon_logo.png b/daiquiri/static/daiquiri/imgs/cilogon_logo.png
diff --git a/daiquiri/static/daiquiri/imgs/favicon.png b/daiquiri/static/daiquiri/imgs/favicon.png
diff --git a/daiquiri/static/daiquiri/imgs/google_logo.png b/daiquiri/static/daiquiri/imgs/google_logo.png
diff --git a/daiquiri/static/daiquiri/imgs/linea-logo.png b/daiquiri/static/daiquiri/imgs/linea-logo.png
diff --git a/daiquiri/templates/core/linea_login.html b/daiquiri/templates/core/linea_login.html
@@ -4,45 +4,50 @@
 {% load core_tags %}
 
 {% block page %}
+<body style="margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url('{% static 'daiquiri/imgs/background.jpg' %}'); background-repeat: round; background-attachment: fixed; font-family: 'Roboto', sans-serif;">
+  <div class="card" style="background-color: #fff; padding: 16px; margin: 32px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);">
+    <div style="display: flex; flex-wrap: nowrap; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5); padding: 0 2rem;">
+      <div style="flex: 0 0 auto; width: 50%;">
+        <div style="max-width: 500px; margin: 5rem 5rem 0 0;">
+          <img src="{% static 'daiquiri/imgs/linea-logo.png' %}" alt="LIneA Logo" style="max-width: 100%; height: 247px; width: 300px;" />
+        </div>
+      </div>
 
-<div class="home">
+      <div style="flex: 0 0 auto; width: 50%;">
+        <div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 12px;">
+          <h3 style="margin-bottom: 0px; margin-top: 3rem; font-weight: bold;">Welcome to</h3>
+          <h3 style="font-weight: bold;">LIneA User Query</h3>
+        </div>
+
+        <div style="border: 0; display: inline-flex; padding: 0; position: relative; min-width: 0; flex-direction: column; vertical-align: top; margin: 10px 0; width: 100%;">
+          <a href="{{ AUTH_SAML2_LOGIN_URL_CAFE }}" style="width: 100%; padding: 8px 16px; font-size: 14px; box-sizing: border-box; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-weight: 700; line-height: 2; border-radius: 4px; letter-spacing: 0.02857em; text-transform: uppercase; background-color: rgb(0, 119, 181); color: #fff; display: inline-block; margin-bottom: 0; text-align: center; touch-action: manipulation; cursor: pointer; border: 1px solid transparent; user-select: none; text-decoration: none; display: flex; align-items: center;">
+            <div style="margin-right: 8px;">
+              <img src="{% static 'daiquiri/imgs/cafe_logo.png' %}" style="width: 27px; height: 30px;" />
+            </div>
+            <span style="margin-left: 80px;">Login with CAFe</span>
+          </a>
+        </div>
 
-  <div class="container" style="background-color: #fdfdfd; padding-top: 64px;">
-    <div class="row justify-content-center">
-      <div class="col-md-3"></div>
-      <div class="col-md-6">
-        <div class="panel-group">
-          <div class="panel panel-default" style="padding: 24px;">
-            <div class="panel-body">
-              <div class="media">
-                <a href="https://linea.org.br/">
-                  <img class="media-object" src="https://identity.linea.org.br/eds/images/linea-logo.png" alt="..."
-                    width="128px" class="img-responsive" style="margin:0 auto;">
-                </a>
-              </div>
-              <h4 class="card-title" style="text-align: center;">Associação Laboratório Interinstitucional de
-                e-Astronomia</h4>
-              <div>
-                <a href="{{ AUTH_SAML2_LOGIN_URL_CAFE }}" class="btn btn-primary btn-block btn-lg"
-                  style="margin-top: 32px; margin-bottom: 16px;">Login
-                  with
-                  CAFE</a>
-                <a href="{{ AUTH_SAML2_LOGIN_URL_CILOGON }}" class="btn btn-primary btn-block btn-lg"
-                  style="margin-bottom: 16px;">Login with CILogon</a>
-              </div>
-              <p> </p>
-              <p class="card-text" style="font-size: 12px">In case you have any problem authenticating or registering,
-                please <a href="mailto:[email protected]">contact our helpdesk.</a></p>
-              <p class="card-text" style="font-size: 12px">You must read, agree with, and accept all of the <a
-                  href="https://identity.linea.org.br/terms.html"> terms
-                  and conditions.</a></p>
+        <div style="border: 0; display: inline-flex; padding: 0; position: relative; min-width: 0; flex-direction: column; vertical-align: top; margin: 10px 0; width: 100%;">
+          <a href="{{ AUTH_SAML2_LOGIN_URL_CILOGON }}" style="width: 100%; padding: 8px 16px; font-size: 14px; box-sizing: border-box; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-weight: 700; line-height: 2; border-radius: 4px; letter-spacing: 0.02857em; text-transform: uppercase; background-color: rgb(0, 119, 181); color: #fff; display: inline-block; margin-bottom: 0; text-align: center; touch-action: manipulation; cursor: pointer; border: 1px solid transparent; user-select: none; text-decoration: none; display: flex; align-items: center;">
+            <div style="margin-right: 8px;">
+              <img src="{% static 'daiquiri/imgs/cilogon_logo.png' %}" style="width: 24px; height: 24px;" />
             </div>
-          </div>
+            <span style="margin-left: 70px;">Login with CILogon</span>
+          </a>
         </div>
+
+        <p style="color: #283661; text-align: center; margin-top: 10px;">
+          New user? <a href="https://docs.linea.org.br/primeiros_passos.html" target="_blank" style="color: #095ce0;">Register here</a>.
+        </p>
       </div>
-      <div class="col-md-3"></div>
     </div>
-  </div>
-</div>
 
+    <div style="margin: 0 8px; max-width: 100%; text-align: justify;">
+      <p style="color: #283661; margin-top: 2rem; margin-bottom: 0rem; text-align: center;">
+        Any problem authenticating or registering? <a href="mailto:[email protected]" target="_blank" style="color: #095ce0;">Contact our helpdesk</a>.
+      </p>
+    </div>
+  </div>
+</body>
 {% endblock %}