Add QE app section + citation (#50)

Author: edan-bainglass

basehub/files/etc/jupyterhub/templates/login.html

@@ -6,9 +6,8 @@
 
 {% block main %}
 
-<!---->
-{% if is_ephemeral %}
 <div id="login-page">
+  {% if is_ephemeral %}
   <div id="warning-banner" class="alert alert-warning">
     <h2 id="warning-label">
       <i class="fa fa-exclamation-triangle"></i>
@@ -55,7 +54,7 @@ <h1>Welcome to the AiiDAlab Demo Server</h1>
       <section id="platform-information">
         <div class="info-box">
           <div class="section-header">
-            <h2>About AiiDAlab</h2>
+            <h3>About AiiDAlab</h3>
             <i id="aiidalab-icon" class="fa"></i>
           </div>
           <p>
@@ -66,7 +65,7 @@ <h2>About AiiDAlab</h2>
         </div>
         <div class="info-box">
           <div class="section-header">
-            <h2>About AiiDA</h2>
+            <h3>About AiiDA</h3>
             <i id="aiida-icon" class="fa"></i>
           </div>
           <p>
@@ -77,7 +76,7 @@ <h2>About AiiDA</h2>
         </div>
         <div class="info-box">
           <div class="section-header">
-            <h2>Resources</h2>
+            <h3>Resources</h3>
             <i class="fa fa-info-circle"></i>
           </div>
           <ul id="resource-list">
@@ -117,46 +116,89 @@ <h2>Resources</h2>
           </ul>
         </div>
       </section>
+      <section id="quantum-espresso">
+        <div class="section-header">
+          <h3>The Quantum ESPRESSO (QE) App</h3>
+        </div>
+        <p>
+          The demo server is pre-configured with the AiiDAlab
+          <a href="https://aiidalab-qe.readthedocs.io/" target="_blank"
+            >Quantum ESPRESSO app</a
+          >
+          (QE app). The QE app provides a user-friendly interface to set up and
+          run
+          <a href="https://www.quantum-espresso.org/" target="_blank"
+            >Quantum ESPRESSO</a
+          >
+          calculations, which are widely used for electronic-structure
+          calculations and materials modeling. The app allows users to easily
+          configure input parameters, submit calculations, and visualize
+          results, making it an ideal tool for both beginners and experienced
+          users in the field of computational materials science.
+        </p>
+      </section>
       <section id="acknowledgement">
         <hr />
         <p>
           This work is or has been supported by the
-          <a href="http://nccr-marvel.ch">
+          <a href="http://nccr-marvel.ch" target="_blank">
             MARVEL National Centre of Competence in Research
           </a>
           and funded by the
-          <a href="http://www.snf.ch/en">Swiss National Science Foundation</a>,
-          the MARKETPLACE project funded by
-          <a href="https://ec.europa.eu/programmes/horizon2020/">
+          <a href="http://www.snf.ch/en" target="_blank"
+            >Swiss National Science Foundation</a
+          >, the MARKETPLACE project funded by
+          <a
+            href="https://ec.europa.eu/programmes/horizon2020/"
+            target="_blank"
+          >
             Horizon 2020
           </a>
           under the H2020-NMBP-25-2017 call (Grant No.&nbsp;760173), as well as
           by the
-          <a href="http://www.max-centre.eu/">
+          <a href="http://www.max-centre.eu/" target="_blank">
             MaX European Centre of Excellence
           </a>
           funded by the Horizon 2020 EINFRA-5 program, Grant No.&nbsp;676598,
           and other
-          <a href="https://www.materialscloud.org/home#partners">
+          <a
+            href="https://www.materialscloud.org/home#partners"
+            target="_blank"
+          >
             Materials Cloud partners </a
           >.
         </p>
-        <div id="citing">
+        <div class="citations">
           <p>
             <strong>
-              We kindly ask you to cite the following publication if you use
-              AiiDA:
+              If you use AiiDAlab and/or the QE app in your research, we kindly
+              ask you to cite the following publications:
             </strong>
           </p>
-          <p>
-            A. V. Yakutovich et al., Comp. Mat. Sci. 188, 110165 (2021)
-            <a
-              href="https://doi.org/10.1016/j.commatsci.2020.110165"
-              target="_blank"
-            >
-              DOI:10.1016/j.commatsci.2020.110165
-            </a>
-          </p>
+          <ul>
+            <li>
+              A. V. Yakutovich et al. <em>Comp. Mat. Sci.</em> <b>188</b>,
+              110165 (2021)
+              <br />
+              <a
+                href="https://doi.org/10.1016/j.commatsci.2020.110165"
+                target="_blank"
+              >
+                DOI:10.1016/j.commatsci.2020.110165
+              </a>
+            </li>
+            <li>
+              Wang, X., Bainglass, E., Bonacci, M., Ortega-Guerrero, A. et al.
+              <em>npj. Comput. Mater.</em> <b>12</b>, 72 (2026)
+              <br />
+              <a
+                href="https://doi.org/10.1038/s41524-025-01936-4"
+                target="_blank"
+              >
+                DOI:10.1038/s41524-025-01936-4
+              </a>
+            </li>
+          </ul>
         </div>
         <hr />
       </section>
@@ -185,7 +227,7 @@ <h2>Resources</h2>
   }
 
   body {
-    background: url("/hub/static/external/background.jpg") center / cover
+    background: url("/hub/static/external/background.jpg") center / 250%
       no-repeat;
   }
 
@@ -199,7 +241,6 @@ <h2>Resources</h2>
     display: flex;
     flex-direction: column;
     gap: 2rem;
-    height: 100%;
   }
 
   #login-page {
@@ -222,7 +263,6 @@ <h2>Resources</h2>
 
   #main-container {
     padding: 4rem 5rem 1rem;
-    border: 1px solid #ccc;
     border-radius: 4px 4px 0 0;
     background-color: #fff;
     box-shadow: 0 0 5px #fff;
@@ -289,7 +329,7 @@ <h2>Resources</h2>
     gap: 1rem;
   }
 
-  .section-header h2,
+  .section-header h3,
   .section-header i {
     margin-top: 0;
     font-size: 24px;
@@ -325,16 +365,21 @@ <h2>Resources</h2>
     margin-right: 5px;
   }
 
+  #quantum-espresso {
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  #quantum-espresso .section-header {
+    justify-content: center;
+  }
+
   #acknowledgement {
     max-width: 600px;
     margin: 0 auto;
     font-size: smaller;
   }
 
-  #acknowledgement hr {
-    border-color: black;
-  }
-
   #acknowledgement hr:first-child {
     margin-top: 0;
   }
@@ -343,7 +388,7 @@ <h2>Resources</h2>
     margin-bottom: 0;
   }
 
-  #citing p:first-child {
+  .citations p:first-child {
     margin-bottom: 4px;
   }