Spaces:

j1225d
/

workout-complete

Running

App Files Files Community

j1225d commited on Aug 4, 2025

Commit

678a8a7

verified ·

1 Parent(s): 4a155cf

Can we make the "share" button save the photo to an phones images? - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +56 -7

index.html CHANGED Viewed

@@ -7,6 +7,27 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
@@ -40,6 +61,17 @@
         .gold-bg {
             background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(249, 212, 35, 0.1));
         }
     </style>
 </head>
 <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
@@ -56,8 +88,8 @@
     <canvas id="shareCanvas" class="hidden"></canvas>
     <!-- Trends Modal -->
-    <div id="trendsModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 hidden">
-        <div class="bg-gray-800 rounded-xl max-w-4xl w-full overflow-hidden shadow-2xl modal-enter">
             <!-- Modal Header -->
             <div class="gold-bg p-6 border-b gold-border">
                 <div class="flex justify-between items-center">
@@ -108,8 +140,8 @@
     </div>
     <!-- Workout Analytics Modal -->
-    <div id="workoutModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 hidden">
-        <div class="bg-gray-800 rounded-xl max-w-2xl w-full overflow-hidden shadow-2xl modal-enter">
             <!-- Modal Header -->
             <div class="gold-bg p-6 border-b gold-border">
                 <div class="flex justify-between items-center">
@@ -118,7 +150,7 @@
                         <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
-                <p class="mt-2 text-amber-200">You're stronger than yesterday! <span class="text-white">Keep shining!</span></p>
             </div>
             <!-- Modal Body -->
@@ -483,16 +515,33 @@
             ctx.ellipse(canvas.width - 100, canvas.height - 150, 120, 50, -Math.PI/4, 0, Math.PI * 2);
             ctx.fill();
-            // Convert canvas to image and download
             canvas.toBlob((blob) => {
                 const url = URL.createObjectURL(blob);
                 const link = document.createElement('a');
-                link.download = 'my-kintsugi-workout.png';
                 link.href = url;
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
                 URL.revokeObjectURL(url);
             }, 'image/png', 1);
         });

     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @media (max-width: 640px) {
+            .modal-enter {
+                width: 95%;
+                margin: 0 auto;
+            }
+            .grid.grid-cols-2.md\\:grid-cols-4 {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 0.5rem;
+            }
+            .flex.flex-col.sm\\:flex-row {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            button {
+                padding: 0.75rem 1rem;
+            }
+        }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         .gold-bg {
             background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(249, 212, 35, 0.1));
         }
+        @keyframes fadeInOut {
+            0% { opacity: 0; transform: translateY(20px) translateX(-50%); }
+            10% { opacity: 1; transform: translateY(0) translateX(-50%); }
+            90% { opacity: 1; transform: translateY(0) translateX(-50%); }
+            100% { opacity: 0; transform: translateY(-20px) translateX(-50%); }
+        }
+        .fixed.bottom-4 {
+            animation: fadeInOut 3s ease forwards;
+        }
     </style>
 </head>
 <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
     <canvas id="shareCanvas" class="hidden"></canvas>
     <!-- Trends Modal -->
+    <div id="trendsModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 hidden z-50 overflow-y-auto">
+        <div class="bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] mx-4 overflow-y-auto shadow-2xl modal-enter">
             <!-- Modal Header -->
             <div class="gold-bg p-6 border-b gold-border">
                 <div class="flex justify-between items-center">
     </div>
     <!-- Workout Analytics Modal -->
+    <div id="workoutModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 hidden overflow-y-auto">
+        <div class="bg-gray-800 rounded-xl max-w-2xl w-full max-h-[90vh] mx-4 overflow-y-auto shadow-2xl modal-enter">
             <!-- Modal Header -->
             <div class="gold-bg p-6 border-b gold-border">
                 <div class="flex justify-between items-center">
                         <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
+                <p class="mt-2 text-amber-200">You're stronger than yesterday! <span class="text-white">Keep going!</span></p>
             </div>
             <!-- Modal Body -->
             ctx.ellipse(canvas.width - 100, canvas.height - 150, 120, 50, -Math.PI/4, 0, Math.PI * 2);
             ctx.fill();
+            // Convert canvas to image and download with timestamp
+            const now = new Date();
+            const timestamp = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2,'0')}${now.getDate().toString().padStart(2,'0')}_${now.getHours().toString().padStart(2,'0')}${now.getMinutes().toString().padStart(2,'0')}`;
             canvas.toBlob((blob) => {
                 const url = URL.createObjectURL(blob);
                 const link = document.createElement('a');
+                link.download = `kintsugi_workout_${timestamp}.png`;
                 link.href = url;
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
                 URL.revokeObjectURL(url);
+                // Show success notification
+                const notification = document.createElement('div');
+                notification.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
+                notification.innerHTML = `
+                    <i class="fas fa-check-circle mr-2"></i>
+                    <span>Saved to Photos as kintsugi_workout_${timestamp}.png</span>
+                `;
+                document.body.appendChild(notification);
+                // Remove notification after 3 seconds
+                setTimeout(() => {
+                    notification.remove();
+                }, 3000);
             }, 'image/png', 1);
         });