Merge pull request #24 from csprasad/mock/update-ui

Landing page & mock iPhone blur fixes

Author: csprasad

iPhone/scripts/work.js

@@ -22,8 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
             if (mapContainer && data.experience.map_bg_image) {
                 mapContainer.style.background = `url('${data.experience.map_bg_image}') no-repeat center center`;
-                mapContainer.style.backgroundSize = "cover"; // Ensures full coverage
-                console.log("Background updated:", data.experience.map_bg_image);
+                mapContainer.style.backgroundSize = "cover"; 
             } else {
                 console.warn("Map background image not found in JSON!");
             }

iPhone/styles/about.css

@@ -37,18 +37,18 @@
     transition: all 0.3s ease;
 }
 
-ul {
+.content ul {
     list-style: none !important;
-    padding-left: 0;
-    margin: 0;
+    /* padding-left: 0; */
+    /* margin-left: -10px; */
     position: relative;
 }
 
 /* PERFECTLY ALIGNED CUSTOM BULLET */
-li::before {
+.content li::before {
     content: "◇";
     position: absolute;
-    left: 1.2em;
+    left: 0.1em;
     color: var(--accent, #3a86ff); /* Use accent color from root */
     font-size: 1em;
 }

iPhone/styles/homescreen.css

@@ -14,14 +14,15 @@
     padding-top: 3rem; /* Add padding to avoid overlap with status bar */
     padding-bottom: 2rem;
     position: relative;
-      text-decoration: none !important; /* Force remove underline */
+    text-decoration: none !important; /* Force remove underline */
   }
 
   /* Widget Styles */
   .widget {
-    background: rgba(255, 255, 255, 0.15); /* Softer blur effect */
-    backdrop-filter: blur(20px); /* Increase blur for a frosted glass effect */
-    border-radius: 1.5rem; /* More rounded like Apple’s design */
+    background: rgba(255, 255, 255, 0.15); 
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px); /* Safari specific prefix */
+    border-radius: 1.5rem; 
     padding: 1rem;
     text-align: center;
     margin-top: 1rem;
@@ -76,7 +77,7 @@
 /* iOS-style App Dock (Adjusted for Better Fit) */
 .app-dock {
   width: 95%;
-  /* max-width: 320px; */
+  max-width: 320px;
   display: flex;
   justify-content: center;
   position: absolute;

iPhone/styles/work.css

@@ -1,8 +1,44 @@
 /* Work Page */
  .back-button {
+    margin-left: 10px;
     z-index: 10;
 }
 
+/* Widget Styles */
+.widget {
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px); /* Safari specific prefix */
+    border-radius: 1rem;
+    width: 100%;
+    height: 70px;
+    display: flex;
+    margin-top: -30px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden; 
+    box-shadow: var(--icon-boxshadow)
+}
+
+.widget a {
+    padding: 0;
+}
+
+.widget h2 {
+    font-size: 1.2rem;
+    color: var(--text-dark);
+    margin: 1rem 0 0 20px;
+    font-weight: bold;
+    word-break: break-word;
+}
+
+.widget p {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-left: 1.5rem;
+}
+
 /* Map Marker Design */
 .map-marker {
     position: absolute;
@@ -21,21 +57,25 @@
     color: var(--text-dark);
     background: var(--bg-glass);
     backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px); /* Safari specific prefix */
     border-radius: 0.5rem;
     padding: 5px 12px;
     font-size: 0.9rem;
     margin-bottom: 5px;
-    white-space: nowrap; 
+    white-space: nowrap;
+    box-shadow: var(--icon-boxshadow)
 }
 
 /* Marker Pin */
 .map-marker .marker-pin {
-    width: 14px;
-    height: 14px;
+    width: 15px;
+    height: 15px;
     background-color: var(--error);
     border-radius: 50%;
     position: relative;
     transition: transform 0.2s ease;
+    box-shadow: var(--icon-boxshadow)
+
 }
 
 /* Hover Effect */
@@ -44,38 +84,6 @@
     border: 1px solid var(--error);
 }
 
-/* Widget Styles */
-.widget {
-    background: var(--bg-glass);
-    backdrop-filter: blur(2px);
-    border-radius: 1rem;
-    width: 100%;
-    height: 70px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden; 
-}
-
-.widget a {
-    padding: 0;
-}
-
-.widget h2 {
-    font-size: 1.2rem;
-    color: var(--text-dark);
-    margin: 1rem 0 0 20px;
-    font-weight: bold;
-    word-break: break-word;
-}
-
-.widget p {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    margin-left: 1.5rem;
-}
-
 /* Popup covering 80% of the screen */
 .popup {
     position: absolute;
@@ -85,6 +93,7 @@
     height: 80%;
     background: var(--bg-glass);
     backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px); /* Safari specific prefix */
     padding: 10px 10px 0 10px;
     overflow-y: auto;
     border-radius: 20px 20px 0 0;

landing.html

@@ -55,7 +55,7 @@ <h2>Hi, I'm <span class="name">C S Prasad! </span><span class="alias">(Brahmendr
                                     </span></p>
                                     <div class="call-section">
                                         <button class="book-call" onclick="warnAndEmail()">Book a call</button>
-                                        <p class="connect">Feel free to explore my portfolio and reach out - I'd love to connect!</p>
+                                        <p class="connect">Feel free to explore my portfolio and reach out<br> - I'd love to connect!</p>
                                     </div>   
                                     <!-- <h2>Recent Work</h2> -->
                                     <p>Here are some of the work I’ve done, from apps to experiments.</p>

styles/leftPanel.css

@@ -133,11 +133,12 @@ p {
 }
 
 .book-call {
+    white-space: nowrap; 
     background-color: var(--button-bg);
     color: var(--button-text);
     border: none;
     padding: 10px 20px;
-    font-size: 1.1em;
+    font-size: 1em;
     cursor: pointer;
     border-radius: 100px;
     transition: background-color 0.3s;
@@ -152,7 +153,7 @@ p {
     font-size: 1.1em;
     line-height: 1.6;
     max-width: 400px;
-    margin: 0 auto;
+    /* margin: 0 auto; */
 }
 
 /* Project Section (Glassy Card) */
@@ -163,9 +164,9 @@ p {
     /* border: 1px solid var(--border-dark); */
     border-radius: 20px;
     padding: 20px;
-    margin-top: 10px;
-    max-width: 75%;
-    height: 340px;
+    /* margin-top: 10px; */
+    max-width: 95%;
+    max-height: 375px;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
     overflow-y: auto;

styles/root.css

@@ -35,6 +35,7 @@
   --icon-gradient-end: #e6e6e6;
   --icon-shadow-outset: 0 4px 6px rgba(0, 0, 0, 0.1);
   --icon-shadow-inset: inset 0 1px 2px rgba(255, 255, 255, 0.5);
+  --icon-boxshadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.5);
 
   /* App Icon specific */
   --icon-gradient: linear-gradient(145deg, #ffffff, #e6e6e6);

styles/styles.css

@@ -1,8 +1,16 @@
+body {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+}
+
 .container {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
+    /* height: 100vh; */
     padding: 20px;
 }