Hugging Face's logo

Spaces:
Liamlarson
/
fedex-delivery-tracker-clone
Running

App Files Community
Liamlarson commited on
Commit
ad87e2b
·
verified ·
1 Parent(s): 86acef8

Generate a shareable link for the website

Browse files
Files changed (3) hide show
  1. components/navbar.js +1 -0
  2. script.js +13 -1
  3. share.html +131 -0
components/navbar.js CHANGED
@@ -75,6 +75,7 @@ class CustomNavbar extends HTMLElement {
75
  <li><a href="/ship.html"><i data-feather="shopping-bag"></i> Ship</a></li>
76
  <li><a href="https://maps.google.com" target="_blank"><i data-feather="map"></i> Locations</a></li>
77
  <li><a href="/account.html"><i data-feather="user"></i> Account</a></li>
 
78
  </ul>
79
  </div>
80
  </nav>
 
75
  <li><a href="/ship.html"><i data-feather="shopping-bag"></i> Ship</a></li>
76
  <li><a href="https://maps.google.com" target="_blank"><i data-feather="map"></i> Locations</a></li>
77
  <li><a href="/account.html"><i data-feather="user"></i> Account</a></li>
78
+ <li><a href="/share.html"><i data-feather="share-2"></i> Share</a></li>
79
  </ul>
80
  </div>
81
  </nav>
script.js CHANGED
@@ -29,9 +29,21 @@ const mockTrackingData = {
29
  ]
30
  }
31
  };
 
 
 
 
 
 
 
 
 
 
 
32
 
33
  document.addEventListener('DOMContentLoaded', () => {
34
- // Form submission handler
 
35
  const trackingForm = document.querySelector('form');
36
  if (trackingForm) {
37
  trackingForm.addEventListener('submit', (e) => {
 
29
  ]
30
  }
31
  };
32
+ // Handle tracking from URL parameter
33
+ function checkTrackingFromURL() {
34
+ const urlParams = new URLSearchParams(window.location.search);
35
+ const trackingNum = urlParams.get('track');
36
+
37
+ if (trackingNum && document.querySelector('form')) {
38
+ const input = document.querySelector('form input');
39
+ input.value = trackingNum;
40
+ document.querySelector('form').dispatchEvent(new Event('submit'));
41
+ }
42
+ }
43
 
44
  document.addEventListener('DOMContentLoaded', () => {
45
+ checkTrackingFromURL();
46
+ // Form submission handler
47
  const trackingForm = document.querySelector('form');
48
  if (trackingForm) {
49
  trackingForm.addEventListener('submit', (e) => {
share.html ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Share Tracking | FedEx Tracker</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-100">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-12">
15
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
16
+ <div class="bg-purple-600 text-white p-6">
17
+ <h1 class="text-3xl font-bold">Share Tracking</h1>
18
+ </div>
19
+
20
+ <div class="p-8 space-y-6">
21
+ <div class="flex flex-col md:flex-row gap-6">
22
+ <div class="md:w-1/2">
23
+ <h2 class="text-xl font-bold mb-4">Share Tracking Link</h2>
24
+ <div class="space-y-4">
25
+ <div>
26
+ <label class="block text-gray-700 mb-2">Tracking Number</label>
27
+ <input type="text" placeholder="Enter tracking number"
28
+ class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
29
+ id="trackingNumber"
30
+ >
31
+ </div>
32
+ <div>
33
+ <label class="block text-gray-700 mb-2">Recipient Email (optional)</label>
34
+ <input type="email" placeholder="Enter email"
35
+ class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
36
+ id="recipientEmail"
37
+ >
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="md:w-1/2">
43
+ <h2 class="text-xl font-bold mb-4">Share Options</h2>
44
+ <div class="space-y-4">
45
+ <div class="p-4 border rounded-lg">
46
+ <h3 class="font-bold mb-2">Direct Link</h3>
47
+ <div class="flex gap-2">
48
+ <input type="text" readonly
49
+ class="flex-grow px-4 py-2 border rounded-lg bg-gray-50"
50
+ id="shareableLink"
51
+ >
52
+ <button onclick="copyToClipboard()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg">
53
+ <i data-feather="copy"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="p-4 border rounded-lg">
59
+ <h3 class="font-bold mb-2">Share Via</h3>
60
+ <div class="flex gap-4">
61
+ <button class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full">
62
+ <i data-feather="facebook"></i>
63
+ </button>
64
+ <button class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full">
65
+ <i data-feather="twitter"></i>
66
+ </button>
67
+ <button class="bg-red-500 hover:bg-red-600 text-white p-3 rounded-full">
68
+ <i data-feather="mail"></i>
69
+ </button>
70
+ <button class="bg-green-500 hover:bg-green-600 text-white p-3 rounded-full">
71
+ <i data-feather="message-square"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="pt-6 border-t">
80
+ <h2 class="text-xl font-bold mb-4">Recent Shares</h2>
81
+ <div class="space-y-3">
82
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
83
+ <div>
84
+ <p class="font-medium">#1234567890</p>
85
+ <p class="text-sm text-gray-500">Shared with jane@example.com</p>
86
+ </div>
87
+ <p class="text-sm text-gray-500">Oct 15, 2023</p>
88
+ </div>
89
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
90
+ <div>
91
+ <p class="font-medium">#9876543210</p>
92
+ <p class="text-sm text-gray-500">Shared via link</p>
93
+ </div>
94
+ <p class="text-sm text-gray-500">Oct 10, 2023</p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </main>
101
+
102
+ <custom-footer></custom-footer>
103
+
104
+ <script src="components/navbar.js"></script>
105
+ <script src="components/footer.js"></script>
106
+ <script src="script.js"></script>
107
+ <script>
108
+ feather.replace();
109
+
110
+ document.getElementById('trackingNumber').addEventListener('input', function() {
111
+ const trackingNum = this.value.trim();
112
+ const shareLink = document.getElementById('shareableLink');
113
+
114
+ if (trackingNum) {
115
+ shareLink.value = `${window.location.origin}/?track=${trackingNum}`;
116
+ } else {
117
+ shareLink.value = '';
118
+ }
119
+ });
120
+
121
+ function copyToClipboard() {
122
+ const shareLink = document.getElementById('shareableLink');
123
+ if (shareLink.value) {
124
+ shareLink.select();
125
+ document.execCommand('copy');
126
+ alert('Link copied to clipboard!');
127
+ }
128
+ }
129
+ </script>
130
+ </body>
131
+ </html>