modify layout for better viewing the own name

public/index.html

@@ -81,11 +81,16 @@
         <p id="pasteFilename"></p>
     </x-instructions>
     <!-- Footer -->
+    <myname class="column font-body3">
+        <h2>
+            <div id="displayName" placeholder="&nbsp;"></div>
+        </h2>
+    </myname>
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName" placeholder="&nbsp;"></div>
+        <!--div id="displayName" placeholder="&nbsp;"></div-->
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
             <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>

public/scripts/network.js

@@ -830,6 +830,15 @@ class Events {
 RTCPeer.config = {
     'sdpSemantics': 'unified-plan',
     'iceServers': [
+        {
+            urls: 'stun:stun.schuerz.at:5349'
+        },
+        {
+            urls: 'turn:turn.schuerz.at:5349',
+            username: 'local',
+            credential: 'thu2aewo1iv8uFavoP8aichaiwai7zeech7o',
+        },
+      /*
         {
             urls: 'stun:stun.l.google.com:19302'
         },
@@ -841,5 +850,6 @@ RTCPeer.config = {
             username: 'openrelayproject',
             credential: 'openrelayproject',
         },
+        */
     ]
 }

public/styles.css

@@ -357,8 +357,22 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+/* NameHeader */
+myname {
+    position: absolute;
+    top: 5%;
+    left: 0;
+    right: 0;
+    align-items: center;
+    padding: 0 0 16px 0;
+    text-align: center;
+    transition: color 300ms;
+}
 
-
+myname .font-body3 {
+    color: var(--primary-color);
+    margin: auto 32px;
+}
 /* Footer */
 
 footer {