
The digital world is constantly evolving, and websites that once ruled the internet can now be lost in the waves of time. But what if you could revisit a website as it appeared on a specific date in history? Enter the Website Time Machine, a tool that offers a fascinating journey into the past of any website, thanks to the Web Archive’s API.
Follow this video for complete guidance :
Time Machine for Websites : Full Source Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website Time Machine</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <style> :root { --primary: #667eea; --secondary: #764ba2; --text-primary: #2d3748; --text-secondary: #718096; --bg-white: rgba(255, 255, 255, 0.95); --border-color: #e0e0e0; --shadow-color: rgba(0, 0, 0, 0.2); } body { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); height: 100vh; margin: 0; padding: 15px; overflow: hidden; } .main-container { height: calc(100vh - 30px); background: var(--bg-white); border-radius: 15px; box-shadow: 0 10px 30px var(--shadow-color); backdrop-filter: blur(10px); } .left-panel { padding: 2rem; border-right: 1px solid var(--border-color); height: 100%; } .right-panel { height: 100%; padding: 0; background: #f8f9fa; border-top-right-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; position: relative; } .icon-large { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; } .form-control { border-radius: 8px; padding: 8px; border: 2px solid var(--border-color); transition: all 0.3s ease; } .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25); border-color: var(--primary); } .input-group-text { border-radius: 8px; background: var(--primary); color: white; border: none; padding: 0 15px; } .btn-submit { background: linear-gradient(45deg, var(--primary), var(--secondary)); border: none; border-radius: 8px; padding: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; color: white; } .card-title { color: var(--text-primary); font-weight: 800; font-size: 2rem; margin-bottom: 0.25rem; } .form-label { font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .card-description { color: var(--text-secondary); font-size: 1rem; margin-bottom: 2rem; } .website-frame { width: 100%; height: calc(100% - 50px); border: none; background: white; } .loading-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); } .preview-header { height: 50px; padding: 0.8rem; background: white; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .preview-text { color: var(--text-secondary); font-size: 0.9rem; margin: 0; } .url-display { font-family: monospace; color: var(--text-primary); margin: 0; font-size: 0.9rem; } .placeholder-content { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.1rem; background: white; } .progressbar{ position: absolute; background: rgb(212, 38, 32); height: 5px; top: 50px; transition: width 500ms; } </style> </head> <body> <div class="container-fluid"> <div class="row main-container"> <!-- Left Panel - Form --> <div class="col-md-4 left-panel"> <div class="text-center mb-4"> <i class="fas fa-clock icon-large"></i> <h2 class="card-title">Time Machine</h2> <p class="card-description">Explore websites from the past</p> </div> <form id="timeMachineForm"> <div class="mb-4"> <label for="website" class="form-label">Website URL</label> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-globe"></i> </span> <input type="text" class="form-control" id="website" placeholder="example.com" required> </div> </div> <div class="mb-4"> <label for="date" class="form-label">Select Date</label> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-calendar"></i> </span> <input type="date" class="form-control" id="date" required> </div> </div> <div class="d-grid"> <button type="submit" class="btn btn-submit"> <i class="fas fa-history me-2"></i> View Historical Version </button> </div> </form> </div> <!-- Right Panel - Preview --> <div class="col-md-8 right-panel"> <div class="preview-header"> <p class="url-display" id="urlDisplay">Enter a URL and date to start</p> <p class="preview-text">Historical Preview</p> </div> <div class="progressbar"></div> <div id="placeholderContent" class="placeholder-content"> <div class="text-center"> <i class="fas fa-globe mb-3" style="font-size: 3rem; color: var(--border-color)"></i> <p>Website preview will appear here</p> </div> </div> <iframe id="websiteFrame" class="website-frame" style="display: none;" sandbox="allow-same-origin allow-scripts"></iframe> <div class="loading-spinner" id="loadingSpinner"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> let progress; function getDate(timestamp) { const firstPart = timestamp.slice(0, 8); const secondPart = timestamp.slice(8); let date = firstPart.slice(0, 4) + '-' + firstPart.slice(4, 6) + '-' + firstPart.slice(6, 8); date += ' ' + secondPart.slice(0, 2) + ':' + secondPart.slice(2, 4) + ':' + secondPart.slice(4); return date; } function setProgressBar(){ $(".progressbar").css('width','0%'); progress = setInterval(function(){ let width = $(".progressbar").attr('style').match(/width:\s*([0-9.]+%)/)[1]; width = parseInt(width.replace('%','')); if(width>=90){ clearInterval(progress); return; } $(".progressbar").css('width',width+2+'%'); },400); } $(document).ready(function () { $('#timeMachineForm').on('submit', function (e) { e.preventDefault(); const website = $('#website').val(); const date = $('#date').val(); $('#loadingSpinner').show(); $('#websiteFrame').hide().attr('src', ''); $('#placeholderContent').hide(); $('#urlDisplay').text(`${website}`); const formattedDate = date.replace(/-/g, '') + '000000'; const api = `https://archive.org/wayback/available?url=${website}×tamp=${formattedDate}`; setProgressBar(); $.ajax({ url: api, method: 'GET', success: function (response) { if (response.archived_snapshots && response.archived_snapshots.closest && response.archived_snapshots.closest.url) { $('#urlDisplay').text(`${website} - ${getDate(response.archived_snapshots.closest.timestamp)}`); const iframe = $('#websiteFrame'); iframe.show().attr('src', response.archived_snapshots.closest.url); iframe.on('load', function () { $('#loadingSpinner').hide(); $(".progress").css('width','100%'); }); } else { $('#websiteFrame').hide(); $('#loadingSpinner').hide(); $('#placeholderContent p').html('No preview available'); $('#placeholderContent').css('display', 'flex'); } }, error: function () { $('#loadingSpinner').hide(); $('#placeholderContent p').html('Error retrieving the data'); $('#placeholderContent').css('display', 'flex'); $(".progress").css('width','100%'); } }); }); }); </script> </body> </html>
Explore Websites From the Past
The Website Time Machine lets users explore the historical versions of websites by simply selecting a URL and a date. Whether you’re a developer wanting to see how a website has evolved, a historian looking for an old version of a website, or someone just curious about how the digital world looked in the past, this tool can take you back to the moments you’ve missed.
How Does It Work?
With the power of the Web Archive API, this tool fetches the closest snapshot of a website available on a given date. The process is simple and user-friendly. You enter the URL of a website and choose a date on the calendar. The system then fetches the historical snapshot closest to that date and displays it in an embedded frame.
Once you submit the form, the system calls the Web Archive’s API to check for the availability of a snapshot. If a snapshot exists, it is displayed in a clean, interactive frame right on the page. If no snapshot is found, the tool gracefully informs you of the unavailability. This instant feedback makes exploring the web’s history both easy and insightful.
Key Features
- Easy-to-Use Interface: The form consists of just two fields—one for the website URL and the other for the date. Once you submit your query, the website’s historical version appears within seconds.
- Loading Indicator: A smooth loading animation ensures users are not left wondering if the tool is working, providing a clear sense of progress while fetching the data.
- No Code Needed: As a user, you don’t need any technical expertise. Simply enter the website URL and select a date. The tool takes care of the rest.
- Web Archive’s API: By utilizing the Wayback Machine API from the Web Archive, this tool guarantees a reliable and robust method for retrieving historical website data. It helps you experience websites just as they were at a specific point in time.
- Progress Bar: A dynamic progress bar shows how the tool is progressing towards loading the historical snapshot, keeping users informed and engaged.
Why Use the Website Time Machine?
- Tracking Website Evolution: Developers, designers, and web enthusiasts can look back at older versions of a site to see how it has evolved in terms of design, content, and functionality.
- SEO and Marketing Analysis: Digital marketers and SEO professionals can use this tool to analyze a website’s historical content, understand past SEO strategies, and track content changes over time.
- Legal or Documentation Purposes: Sometimes, it’s necessary to view how a website looked at a certain point in time. Whether for legal reasons or documentation, this tool can prove invaluable.
- Nostalgia: For the curious minds or those just wanting to revisit an old website, this tool offers a delightful journey into the past, sparking nostalgia and offering a unique historical perspective of the web.
A Look into the Future of Web Archiving
As the internet continues to grow, the importance of web archiving becomes even more crucial. Services like the Web Archive’s Wayback Machine play a pivotal role in preserving the digital history of the internet. Tools like the Website Time Machine are an extension of this vision, enabling anyone to easily access and explore archived web pages.
In the near future, we could see more advanced features, such as side-by-side comparisons of past and present website versions, or even an AI-powered prediction of how websites might evolve. As web technologies advance, the Time Machine for Websites will only continue to improve, offering richer, more immersive experiences for users seeking a window into the past.
The Website Time Machine is more than just a tool—it’s a gateway to the past, offering valuable insights into how websites have evolved. Whether you’re conducting research, reminiscing about the internet’s earlier days, or simply curious about how a website looked years ago, this tool is your key to unlocking the history of the web.