NFDI4Energy · Aidajafarbigloo · Sep 23, 2025 · Jun 12, 2025 · Jun 16, 2025 · Jun 20, 2025
diff --git a/meta_creator/templates/meta_creator/error.html b/meta_creator/templates/meta_creator/error.html
@@ -5,7 +5,7 @@
 {% load static %}
 
 {% block content %}
-  <div class="error-container">
+  <div class="error-container container">
     <h1>Something went wrong.</h1>
     <p>We're sorry, but there was an error while processing your request.</p>
     <p><strong>{{ error_message }}</strong></p>

diff --git a/meta_creator/templates/meta_creator/index.html b/meta_creator/templates/meta_creator/index.html
@@ -1,67 +1,104 @@
-{% extends 'base.html' %}
-
-{% load static %}
-
-{% block content %}
+{% extends 'base.html' %} {% load static %} {% block content %}
 
 <!-- Initial Form to get information from user and extract metadata -->
-<div class="InitialFormContainer" id="firstpage">
-  <h3 class="mainHeader">
-    <a href="https://github.com/NFDI4Energy/SMECS" 
-       target="_blank" 
-       title="Open SMECS GitHub" 
-       class="unstyled-link">
-      SMECS
-    </a>
-  </h3>
-  <p id="smecsSubtitle" title="SMECS"><b>S</b>oftware <b>M</b>etadata <b>E</b>xtraction and <b>C</b>uration <b>S</b>oftware</p>
-
-  <form id="form1" method="post" action="{% url 'meta_creator:getdata' %}">
-    {% csrf_token %}
-    <h6 class="custom-tooltip">
-      Project URL 
-      <span class="tooltip-text">
-        The GitHub or GitLab repository URL
-      </span>
-      <i class="fa fa-info-circle" aria-hidden="true"></i>
-    </h6>
-
-    <input type="url" id="url_input" name="repo_url" placeholder="e.g.: https://github.com/NFDI4Energy/SMECS" value="" />
-    {% if error_message_url %}
-      <span id="url_error" class="error_message">{{ error_message_url }}</span>
-    {% endif %}
-    <div class="tooltip-container">
-    <h6 class="custom-tooltip">
-      Token Key
-      <span class="tooltip-text">
-          To extract metadata from GitLab repositories, a token is required.
-          This token is not needed for GitHub, 
-          however, using one resolves rate limitations and allows for additional metadata extraction.
-          <br>
-          How to Generate a Token?
-          <br>
-          GitHub: Visit <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" target="_blank">Managing your personal access tokens</a>
-          <br>
-          GitLab: Visit <a href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#create-a-personal-access-token" target="_blank">Create a personal access token</a>
-      </span>
-      <i class="fa fa-info-circle" aria-hidden="true"></i>
-  </h6>
+<div class="InitialFormContainer container" id="firstpage">
+  <div class="row text-center">
+    <div class="col-12">
+      <h3 class="mainHeader">
+        <a
+          href="https://github.com/NFDI4Energy/SMECS"
+          target="_blank"
+          title="Open SMECS GitHub"
+          class="unstyled-link">
+          SMECS
+        </a>
+      </h3>
+    </div>
+    <div class="col-12">
+      <p id="smecsSubtitle" title="SMECS">
+        <b>S</b>oftware <b>M</b>etadata <b>E</b>xtraction and <b>C</b>uration
+        <b>S</b>oftware
+      </p>
     </div>
-    <input type="text" id="token_input" name="personal_token_key" placeholder="(Optional) Enter your personal token key from GitHub or GitLab" value="" />
-    {% if error_message_token %}
-      <span id="token_error" class="error_message">{{ error_message_token }}</span>
-    {% endif %}
-    <button id="submitBtn" class="ExData" type="submit" title="Run the Extraction process">Extract Metadata</button>
-  </form>
+    <div class="col-12">
+      <form id="form1" method="post" action="{% url 'meta_creator:getdata' %}">
+        {% csrf_token %}
+        <h6 class="custom-tooltip">
+          Project URL
+          <span class="tooltip-text">
+            The GitHub or GitLab repository URL
+          </span>
+          <i class="fa fa-info-circle" aria-hidden="true"></i>
+        </h6>
+        <input
+          type="url"
+          id="url_input"
+          name="repo_url"
+          placeholder="e.g.: https://github.com/NFDI4Energy/SMECS"
+          value="" />
+        {% if error_message_url %}
+        <span id="url_error" class="error_message"
+          >{{ error_message_url }}</span
+        >
+        {% endif %}
+        <div class="tooltip-container">
+          <h6 class="custom-tooltip">
+            Token Key
+            <span class="tooltip-text">
+              To extract metadata from GitHub repositories token is not needed,
+              however, using one resolves rate limitations and allows for
+              additional metadata extraction.
+              <br />
+              How to Generate a Token?
+              <br />
+              GitHub: Visit
+              <a
+                href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens"
+                target="_blank"
+                >Managing your personal access tokens</a
+              >
+              <br />
+              GitLab: Visit
+              <a
+                href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#create-a-personal-access-token"
+                target="_blank"
+                >Create a personal access token</a
+              >
+            </span>
+            <i class="fa fa-info-circle" aria-hidden="true"></i>
+          </h6>
+        </div>
+        <input
+          type="text"
+          id="token_input"
+          name="personal_token_key"
+          placeholder="(Optional) Enter your personal token key from GitHub or GitLab"
+          value="" />
+        {% if error_message_token %}
+        <span id="token_error" class="error_message"
+          >{{ error_message_token }}</span
+        >
+        {% endif %}
+        <div class="d-grid col-4 mx-auto">
+          <button
+            id="submitBtn"
+            class="ExData btn"
+            type="submit"
+            title="Run the Extraction process">
+            Extract Metadata
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
 </div>
 
 <!-- Pop-up modal overlay for loading spinner -->
 <div class="overlay" id="overlay">
   <div class="loading-spinner">
     <div class="spinner"></div>
-    <p>Extracting...</p> 
+    <p>Extracting...</p>
   </div>
 </div>
 
-
 {% endblock content %}
diff --git a/meta_creator/templates/meta_creator/information.html b/meta_creator/templates/meta_creator/information.html
@@ -1,21 +1,42 @@
-{% extends 'base.html' %}
+{% extends 'base.html' %} {% load static %} {% block content %}
 
-{% load static %}
-
-{% block content %}
-
-
-<div class="info-page">
-  <div class="info-header">
-    <h3>What is SMECS ?</h3>
+<div class="info-page container overflow-auto">
+  <div class="row">
+    <div class="col-12">
+      <div class="info-header text-center"><h3>What is SMECS ?</h3></div>
+    </div>
+    <div class="col-12">
+      <div class="info-content">
+        <p>
+          Software Metadata Extraction and Curation Software or SMECS is a web
+          application to extract and curate software metadata following the
+          CodeMeta software metadata standard.
+        </p>
+        <p>
+          SMECS facilitates the extraction of software metadata from
+          repositories on GitHub/GitLab. It offers a user-friendly graphical
+          user interface for visualizing the retrieved metadata. This empowers
+          Research Software Engineers (RSE) to curate the extracted metadata
+          according to their requirements. Ultimately, SMECS delivers the
+          curated metadata in JSON format, enhancing usability and
+          accessibility.
+        </p>
+        <p>
+          To get more information about this tool and to access the source code
+          please visit
+          <a href="https://github.com/NFDI4Energy/SMECS">SMECS GitHub</a>
+        </p>
+      </div>
+    </div>
+    <div class="d-grid col-3 mx-auto">
+      <button
+        class="TrySMECS btn"
+        title="Enter a specific URL and extract metadata"
+        onclick="window.location.href = '/'">
+        Try SMECS
+      </button>
+    </div>
   </div>
-  <div class="info-content"> 
-    <p>Software Metadata Extraction and Curation Software or SMECS is a web application to extract and curate software metadata following the <a href="https://codemeta.github.io/">CodeMeta</a> <a href="https://raw.githubusercontent.com/codemeta/codemeta/3.0/codemeta.jsonld">version 3.0</a> software metadata standard.</p>
-    <p>SMECS facilitates the extraction of research software metadata from GitHub and GitLab repositories. It provides a user-friendly graphical interface for visualizing the retrieved metadata, enabling researchers and research software engineers to create high-quality metadata without reentering information already available elsewhere. The curated metadata is exported as CodeMeta-compliant JSON, ensuring integration with other tools and enhancing the discoverability, reuse, and impact of research software.
-    </p>
-    <p>To get more information about this tool and to access the source code please visit <a href="https://github.com/NFDI4Energy/SMECS">SMECS GitHub</a></p>
-  </div>
-  <button class="TrySMECS" title="Enter a specific URL and extract metadata" onclick="window.location.href = '/'">Try SMECS</button>
-</div>
 
-{% endblock content %}
+  {% endblock content %}
+</div>
diff --git a/meta_creator/templates/meta_creator/legals.html b/meta_creator/templates/meta_creator/legals.html
@@ -5,50 +5,59 @@
 {% block content %}
 
 
-<div class="info-page" role="main">
-    <div class="info-header">
-        <h3>Legals/Impressum</h3>
+<div class="info-page container" role="main">
+    <div class="row text-center ">
+        <div class="col-12">
+             <div class="info-header"> <h3>Legals/Impressum</h3></div>
+        </div>
     </div>
-    <div class="info-content">
-        <h4>Address:</h4>
-        <address>
-            OFFIS e. V.<br>
-            Escherweg 2<br>
-            26121 Oldenburg<br>
-            Germany<br>
-            Telefon: +49 441 9722-0<br>
-            Fax: +49 441 9722-102<br>
-            E-Mail: <a href="mailto:institut@offis.de">institut@offis.de</a><br>
-            Internet: <a href="http://www.offis.de" target="_blank">www.offis.de</a>
-        </address>
-
-        <h4>Board Members</h4>
-        <p>
-            Prof. Dr. Sebastian Lehnhoff (Chairman)<br>
-            Prof. Dr. techn. Susanne Boll-Westermann<br>
-            Prof. Dr.-Ing. Andreas Hein<br>
-            Prof. Dr.-Ing. Astrid Nie&szlig;e
-        </p>
-
-        <h4>Register Court</h4>
-        <p>
-            Amtsgericht Oldenburg<br>
-            Registernummer VR 1956
-        </p>
-
-        <h4>VAT Identification Number</h4>
-        <p>
-            DE 811582102
-        </p>
-
-        <h4>Responsible in the sense of press law</h4>
-        <address>
-            Dr. J&uuml;rgen Meister<br>
-            OFFIS e.V.<br>
-            Escherweg 2<br>
-            26121 Oldenburg
-        </address>
+    <div class="row">
+        <div class="co1-6">
+            <h4>Address:</h4>
+            <address>
+                OFFIS e. V.<br>
+                Escherweg 2<br>
+                26121 Oldenburg<br>
+                Germany<br>
+                Telefon: +49 441 9722-0<br>
+                Fax: +49 441 9722-102<br>
+                E-Mail: <a href="mailto:institut@offis.de">institut@offis.de</a><br>
+                Internet: <a href="http://www.offis.de" target="_blank">www.offis.de</a>
+            </address>
+        </div>
+        <div class="col-12">
+              <h4>Board Members</h4>
+                <p>
+                    Prof. Dr. Sebastian Lehnhoff (Chairman)<br>
+                    Prof. Dr. techn. Susanne Boll-Westermann<br>
+                    Prof. Dr.-Ing. Andreas Hein<br>
+                    Prof. Dr.-Ing. Astrid Nie&szlig;e
+                </p>
+        </div>
+        <div class="col-12">
+             <h4>Register Court</h4>
+            <p>
+                Amtsgericht Oldenburg<br>
+                Registernummer VR 1956
+            </p>
+        </div>
+        <div class="col-12">
+              <h4>VAT Identification Number</h4>
+                <p>
+                    DE 811582102
+                </p>
+        </div>
+        <div class="col-12">
+
+            <h4>Responsible in the sense of press law</h4>
+            <address>
+                Dr. J&uuml;rgen Meister<br>
+                OFFIS e.V.<br>
+                Escherweg 2<br>
+                26121 Oldenburg
+            </address>
+        </div>
     </div>
-</div>
+ </div>
 
 {% endblock content %}