Many changes

static/css/main.css

@@ -37,9 +37,9 @@ body {
 h1, h2, h3, h4, h5{
   font-family: var(--bs-ttl-font-family);
 }
-::selection, ::-moz-selection {
+/* ::selection, ::-moz-selection {
   text-shadow: none;
-}
+} */
 .navbar-toggler{
   color: var(--bs-btn-hover-bg);
 }
@@ -179,25 +179,44 @@ h1, h2, h3, h4, h5{
   padding: var(--div-padding);
   border-radius: 0.5rem;
 }
-/* #profile label{
+#profile label{
   font-weight: 700;
-} */
-#userProfileActivation{
-  padding: 1.5em;
-  background-color: var(--accent-light);
 }
-#activateUserProfile{
-  margin-left: 1em;
+#userVisibility{
+  margin-left: auto;
+}
+#userProfileActivation, #userVisibilityExtend{
+  display: flex;
+  align-items: center;
+}
+#userProfileActivation{
+/*   padding: 1.5em;
+  background-color: var(--accent-light); */
+}
+#userProfileInfos label{
+  min-width: 6em;
+}
+.form-check.form-switch{
+  margin-bottom: 0;
+}
+.form-switch:not(.form-check-reverse) input, .form-switch.form-check-reverse input{
+  margin-right: .75rem;
   margin-top: 0;
-  width: 3em;
-  height: 1.5em;
+  width: 3rem;
+  height: 1.5rem;
+}
+.form-switch.form-check-reverse input{
+  margin-left: .75rem;
+  margin-right: 0;
+}
+.form-switch + a[data-bs-toggle="tooltip"]{
+  margin-left: 0.25rem;
 }
 #tandem-meet .col{
   text-align: center;
   padding: 1.5rem;
   transition: all ease-out 0.3s;
 }
-
 #tandem-meet .col img{
   margin-bottom: 1rem;
 }
@@ -287,6 +306,9 @@ article li:not(:first-of-type){
   display: flex;
   gap: 1rem;
 }
+#avatarContainer{
+  align-items: center;
+}
 
 /* search filters */
 #searchFilters{
@@ -432,6 +454,10 @@ footer a img{
   height: 1.25em;
   margin-right: 0.65em;
 }
+.icon-ui-md{
+  width: 1.5em;
+  height: 1.5em;
+}
 nav .icon-ui{
   display: inline-flex;
   margin-right: .75rem;
@@ -473,6 +499,9 @@ nav .icon-ui{
   h1, h2, h3, h4{
     text-align: center;
   }
+  #avatarContainer{
+    text-align: center;
+  }
   .profileOptions{
     display: grid;
     gap: 0 .5rem;
@@ -550,6 +579,9 @@ nav .icon-ui{
   .partners-logo-grid{
     grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
   }
+  div:not(#userLanguage) h1, div:not(#userLanguage) h2, div:not(#userLanguage) h3, div:not(#userLanguage) h4{
+    text-align: left;
+  }
 }
 @media (hover: hover) {
   .btn-cta:hover{

static/img/icons/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1.5em" height="1.5em" >
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+</svg>

static/js/js.js

@@ -3,6 +3,7 @@ function initTooltips(section) {
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
 }
+
 function checkTermsandConditions(){
   const checkTerms = document.querySelector('#cgvCheck');
   const createAccountButton = document.querySelector('#btnCreateAccount');
@@ -10,22 +11,32 @@ function checkTermsandConditions(){
 }
 
 document.addEventListener("DOMContentLoaded", function() {
-  const offmenu = document.getElementById("offSideMenu");
-  const sidemenu = document.getElementById("secondNav");
+  const offmenu = document.getElementById("offSideMenu"),
+        sidemenu = document.getElementById("secondNav");
 
-  function toggleMenus(mediaQuery) {
-    if (!mediaQuery.matches) { 
-      offmenu.style.display = "none";
-      sidemenu.style.display = "block";
-    } else {
-      offmenu.style.display = "block";
-      sidemenu.style.display = "none";
+  const toggleMenus = ({ matches }) => {
+    if(offmenu && sidemenu){
+      offmenu.style.display = matches ? "block" : "none";
+      sidemenu.style.display = matches ? "none" : "block";
     }
-  }
+  };
 
   const mediaQuery = window.matchMedia("(max-width: 992px)");
-  toggleMenus(mediaQuery); // Initial check
-  mediaQuery.addEventListener('change', (e) => toggleMenus(e));
 
+  mediaQuery.addEventListener('change', toggleMenus);
+
+  const meetOption1 = document.getElementById('userMeetOptionReal'),
+  meetOption2 = document.getElementById('userMeetOptionVirtual'),
+  meetOption3 = document.getElementById('userMeetOptionHybrid'),
+  meetLocation = document.getElementById('userTandemMeetLocation');
+
+  const updateMeet = () => {
+    if (meetLocation) {meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; }
+  };
+
+  [meetOption1, meetOption2, meetOption3].forEach(option => { if (option) { option.addEventListener('change', updateMeet); }} );
+
+  updateMeet();
   initTooltips(document);
+  toggleMenus(mediaQuery); // Initial check
 });