Add unique URL sharing and beautiful footer with social media links

sunmughan · sunmughan · commit 0b95d9ed5ef5 · 2025-08-02T23:32:39.000+05:30
diff --git a/index.html b/index.html
@@ -138,5 +138,24 @@ <h3>A Message for You</h3>
     </div>
 
     <script src="script.js"></script>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-credits">
+                <p>Created with ❤️ by <strong>Sunmughan Swamy</strong></p>
+            </div>
+            <div class="footer-social">
+                <a href="https://www.instagram.com/sunmughan" target="_blank" rel="noopener noreferrer" class="social-btn instagram-btn">
+                    <i class="fab fa-instagram"></i>
+                    <span>Follow on Instagram</span>
+                </a>
+                <a href="https://www.linkedin.com/in/sunmughan" target="_blank" rel="noopener noreferrer" class="social-btn linkedin-btn">
+                    <i class="fab fa-linkedin-in"></i>
+                    <span>Follow on LinkedIn</span>
+                </a>
+            </div>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -5,13 +5,110 @@ class FriendshipGreetingApp {
         this.currentAnimation = null;
         this.uploadedFiles = [];
         this.effectInterval = null;
+        this.currentGreetingId = null;
+        this.quotes = [
+            "Friendship is born at that moment when one person says to another, 'What! You too?'",
+            "A real friend is one who walks in when the rest of the world walks out.",
+            "Friends are the family you choose."
+        ];
         
         this.init();
     }
 
     init() {
         this.bindEvents();
         this.startDefaultEffect();
+        this.checkForSharedGreeting();
+    }
+
+    generateGreetingId() {
+        return 'greeting_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+
+    saveGreeting(greetingData) {
+        const greetingId = this.generateGreetingId();
+        const greetings = JSON.parse(localStorage.getItem('friendshipGreetings') || '{}');
+        greetings[greetingId] = {
+            ...greetingData,
+            createdAt: new Date().toISOString()
+        };
+        localStorage.setItem('friendshipGreetings', JSON.stringify(greetings));
+        return greetingId;
+    }
+
+    loadGreeting(greetingId) {
+        const greetings = JSON.parse(localStorage.getItem('friendshipGreetings') || '{}');
+        return greetings[greetingId] || null;
+    }
+
+    checkForSharedGreeting() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const greetingId = urlParams.get('greeting');
+        
+        if (greetingId) {
+            const greetingData = this.loadGreeting(greetingId);
+            if (greetingData) {
+                this.loadGreetingFromData(greetingData);
+                this.currentGreetingId = greetingId;
+                // Hide the form and show only the greeting
+                document.querySelector('.form-container').style.display = 'none';
+                document.querySelector('.greeting-preview').style.width = '100%';
+                document.querySelector('.greeting-preview').style.maxWidth = '600px';
+                document.querySelector('.greeting-preview').style.margin = '0 auto';
+                
+                // Add a "Create Your Own" button
+                this.addCreateOwnButton();
+            }
+        }
+    }
+
+    loadGreetingFromData(data) {
+        // Update form fields
+        document.getElementById('friendName').value = data.friendName || '';
+        document.getElementById('memories').value = data.memories || '';
+        document.getElementById('message').value = data.message || '';
+        
+        // Set effects and styles
+        this.currentEffect = data.effect || 'hearts';
+        this.currentStyle = data.style || 'classic';
+        this.currentAnimation = data.animation || 'bounce';
+        
+        // Update the greeting display
+        this.updateFriendName(data.friendName || '');
+        this.updateMemories(data.memories || '');
+        this.updateMessage(data.message || '');
+        this.setEffect(this.currentEffect);
+        this.setStyle(this.currentStyle);
+        this.setAnimation(this.currentAnimation);
+        
+        // Handle uploaded files if any
+        if (data.uploadedFiles && data.uploadedFiles.length > 0) {
+            // Note: We can't restore actual files, but we can show placeholders
+            this.showNotification('Note: Shared greetings show text content only. Original images are not included for privacy.', 'info');
+        }
+    }
+
+    addCreateOwnButton() {
+        // Check if button already exists
+        if (document.getElementById('createOwnBtn')) return;
+        
+        const actionButtons = document.querySelector('.action-buttons');
+        const createOwnBtn = document.createElement('button');
+        createOwnBtn.id = 'createOwnBtn';
+        createOwnBtn.className = 'action-btn';
+        createOwnBtn.innerHTML = '<i class="fas fa-plus"></i> Create Your Own';
+        createOwnBtn.style.background = '#667eea';
+        createOwnBtn.style.color = 'white';
+        createOwnBtn.style.border = '2px solid #667eea';
+        
+        createOwnBtn.addEventListener('click', () => {
+            // Remove the greeting parameter from URL and reload
+            const url = new URL(window.location);
+            url.searchParams.delete('greeting');
+            window.location.href = url.toString();
+        });
+        
+        actionButtons.appendChild(createOwnBtn);
     }
 
     bindEvents() {
@@ -290,18 +387,35 @@ class FriendshipGreetingApp {
         const message = document.getElementById('message').value;
         
         if (!friendName.trim()) {
-            this.showNotification('Please enter your friend\'s name!', 'warning');
+            this.showNotification('Please enter your friend\'s name! 👤', 'error');
             return;
         }
         
+        // Save greeting data
+        const greetingData = {
+            friendName: friendName,
+            memories: memories,
+            message: message,
+            effect: this.currentEffect,
+            style: this.currentStyle,
+            animation: this.currentAnimation,
+            uploadedFiles: this.uploadedFiles.map(file => ({ name: file.name, type: file.type }))
+        };
+        
+        this.currentGreetingId = this.saveGreeting(greetingData);
+        
+        this.updateFriendName(friendName);
+        this.updateMemories(memories);
+        this.updateMessage(message);
+        
         // Add a special creation animation
         const greetingCard = document.getElementById('greetingCard');
         greetingCard.style.transform = 'scale(0.95)';
         greetingCard.style.transition = 'transform 0.3s ease';
         
         setTimeout(() => {
             greetingCard.style.transform = 'scale(1)';
-            this.showNotification('Greeting card created successfully! 🎉', 'success');
+            this.showNotification('Beautiful greeting created! 🎉 Ready to share!', 'success');
         }, 300);
         
         // Add some extra sparkle effect
@@ -352,17 +466,25 @@ class FriendshipGreetingApp {
     }
 
     shareGreeting() {
+        if (!this.currentGreetingId) {
+            this.showNotification('Please create a greeting first!', 'warning');
+            return;
+        }
+        
+        const shareUrl = `${window.location.origin}${window.location.pathname}?greeting=${this.currentGreetingId}`;
+        
         if (navigator.share) {
             navigator.share({
                 title: 'Friendship Day Greeting',
                 text: 'Check out this beautiful friendship day greeting I created!',
-                url: window.location.href
+                url: shareUrl
             });
         } else {
             // Fallback for browsers that don't support Web Share API
-            const url = window.location.href;
-            navigator.clipboard.writeText(url).then(() => {
-                this.showNotification('Link copied to clipboard! Share it with your friends! 📋', 'success');
+            navigator.clipboard.writeText(shareUrl).then(() => {
+                this.showNotification('Greeting link copied to clipboard! Share it with your friends! 📋', 'success');
+            }).catch(() => {
+                this.showNotification('Failed to copy link. Please try again.', 'error');
             });
         }
     }
diff --git a/styles.css b/styles.css
@@ -113,14 +113,19 @@ body {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
-    aspect-ratio: 1;
+    aspect-ratio: auto;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .preview-item img,
 .preview-item video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
 }
 
 .effects-section {
@@ -273,14 +278,19 @@ body {
 .media-item {
     border-radius: 10px;
     overflow: hidden;
-    aspect-ratio: 1;
+    aspect-ratio: auto;
+    max-height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .media-item img,
 .media-item video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 10px;
 }
 
 .memories-section,
@@ -552,6 +562,84 @@ body {
     }
 }
 
+/* Footer Styles */
+.footer {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px 0;
+    margin-top: 50px;
+    text-align: center;
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.footer-credits {
+    margin-bottom: 20px;
+}
+
+.footer-credits p {
+    margin: 0;
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.footer-credits strong {
+    font-weight: 600;
+    color: #fff;
+}
+
+.footer-social {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.social-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: 25px;
+    text-decoration: none;
+    color: white;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.social-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.instagram-btn:hover {
+    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+    border-color: transparent;
+}
+
+.linkedin-btn:hover {
+    background: #0077b5;
+    border-color: transparent;
+}
+
+.social-btn i {
+    font-size: 18px;
+}
+
+.social-btn span {
+    font-size: 14px;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
     .main-content {
@@ -574,4 +662,19 @@ body {
     .effect-options {
         grid-template-columns: 1fr 1fr;
     }
+    
+    .footer {
+        padding: 20px 0;
+        margin-top: 30px;
+    }
+    
+    .footer-social {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .social-btn {
+        width: 200px;
+        justify-content: center;
+    }
 }
