updated ui

static/css/connect.css

@@ -0,0 +1,49 @@
+.qrcode-box::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 15px;
+    border: 1px solid transparent;
+    background: linear-gradient(60deg, #ff7700 0%, #c740c7 100% ) border-box;
+    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+}
+.qrcode-box {
+    display: block;
+    position: relative;
+    width: 253px;
+    height: 241px;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    margin-top: 10px;
+    padding: 10px;
+    transition: background-color 0.5s;
+    border-radius: 15px;
+}
+.qrcode-box:hover {
+    background-color: #80808062;
+    transition: background-color 0.3s;
+}
+
+.qrcode-box-clicked::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 15px;
+    border: 1px solid transparent;
+    background: linear-gradient(60deg, #ff7700 0%, #c740c7 100% ) border-box;
+    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+}
+.qrcode-box-clicked {
+    display: block;
+    position: relative;
+    width: 253px;
+    height: 241px;
+    margin-top: 10px;
+    padding: 10px;
+    transition: background-color 0.5s;
+    border-radius: 15px;
+}

static/css/status.css

@@ -0,0 +1,37 @@
+.status-element{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 100px;
+    margin-top: 10px;
+    font-size: 15px;
+}
+.green-dot {
+    font-size: 15px;
+    color: #32a852;
+}
+.yellow-dot {
+    font-size: 15px;
+    color: #ccc731;
+}
+.editabl-content {
+    font-size: 12px; 
+    display: flex; 
+    justify-content: end; 
+    align-items: center;
+    color: #999999;
+}
+.invite-link {
+    margin-top:5px; 
+    font-size:12px; 
+    color:#c434e0; 
+    text-decoration: underline;
+}
+@media screen and (max-width: 450px) {
+    .status-element  {
+      gap: 0px;
+    }
+    main {
+        zoom: 1.1;
+    }
+}

static/css/styles.css

@@ -223,10 +223,9 @@ a {
 
 #qrcode {
   display: flex;
-  margin: auto;
   justify-content: center;
-  margin-block-start: 40px;
-  margin-block-end: 15px;
+  margin: 5px;
+  filter: blur(5px);
 }
 
 .input-group {