inizio styling detail + corezione di alcuni bug

src/app/detail/detail.component.html

@@ -1,6 +1,10 @@
-<div>
+<!--
+  <div class="infos">
     <h1 class="titolo">{{test.name}}</h1>
     <p>{{test.description}}</p>
+  </div>
+
+  <div class="nav">
     <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
     <div id="nav" ng-model="showNav" *ngIf="showNav">
       <iframe
@@ -12,15 +16,33 @@
         allowfullscreen>
       </iframe>
     </div>
+  </div>
+
+  <div class="image">
+    <img src="assets/testDetail/img.jpg" alt="image">
+  </div>-->
+<div>
+  <div class="grid grid-cols-2 gap-4">
+    <div class="p-4">
+      <h1 class="text-xl font-bold mb-2">{{test.name}}</h1>
+      <p class="text-gray-700">{{test.description}}</p>
+      <div class="mb-4">
+        <p class="text-lg font-medium">Distanza: {{distance === undefined ? '...' : distance}} Km</p>
+      </div>
+    </div>
+
+    <div class="p-4">
+      <img class="w-full" src="assets/testDetail/img.png" alt="image">
+    </div>
+
+    <div class="p-4 col-start-1 col-span-2 lg:col-start-2 lg:col-span-1">
+      <div>
+        <iframe class="w-full" height="300" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" [src]='embed | safe' allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
+
 
-  <!--<label for="my-modal-6"  (click)="generateQR()">
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.334" height="23.4863">
-      <g>
-        <rect height="23.4863" opacity="0" width="17.334" x="0" y="0"/>
-        <path d="M3.06641 22.041L14.2676 22.041C16.3086 22.041 17.334 21.0254 17.334 19.0137L17.334 9.26758C17.334 7.25586 16.3086 6.24023 14.2676 6.24023L11.543 6.24023L11.543 7.8125L14.2383 7.8125C15.2051 7.8125 15.7617 8.33984 15.7617 9.35547L15.7617 18.9258C15.7617 19.9414 15.2051 20.4688 14.2383 20.4688L3.08594 20.4688C2.10938 20.4688 1.57227 19.9414 1.57227 18.9258L1.57227 9.35547C1.57227 8.33984 2.10938 7.8125 3.08594 7.8125L5.79102 7.8125L5.79102 6.24023L3.06641 6.24023C1.02539 6.24023 0 7.25586 0 9.26758L0 19.0137C0 21.0254 1.02539 22.041 3.06641 22.041ZM8.66211 14.3945C9.08203 14.3945 9.44336 14.043 9.44336 13.6328L9.44336 3.60352L9.38477 2.13867L10.0391 2.83203L11.5234 4.41406C11.6602 4.57031 11.8555 4.64844 12.0508 4.64844C12.4512 4.64844 12.7637 4.35547 12.7637 3.95508C12.7637 3.75 12.6758 3.59375 12.5293 3.44727L9.22852 0.263672C9.0332 0.0683594 8.86719 0 8.66211 0C8.4668 0 8.30078 0.0683594 8.0957 0.263672L4.79492 3.44727C4.64844 3.59375 4.57031 3.75 4.57031 3.95508C4.57031 4.35547 4.86328 4.64844 5.27344 4.64844C5.45898 4.64844 5.67383 4.57031 5.81055 4.41406L7.28516 2.83203L7.94922 2.13867L7.89062 3.60352L7.89062 13.6328C7.89062 14.043 8.24219 14.3945 8.66211 14.3945Z" fill="#000000"/>
-      </g>
-    </svg>
-  </label>-->
 
 <!-- Put this part before </body> tag -->
   <input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/>

src/app/detail/detail.component.ts

@@ -17,9 +17,9 @@ export class DetailComponent implements OnInit {
 
   test = {
     name: 'SPAI',
-    cordinates: '46.16980727184211, 8.795563727809393',
-    lat: 46.16980727184211,
-    lng: 8.795563727809393,
+    cordinates: '50.16980727184211, 10.795563727809393',
+    lat: 50.16980727184211,
+    lng: 9.795563727809393,
     description: "Lorem ipsum"
   }