API tools faq
paste
Advertisement
Sweetening

wayback.html

Sweetening
Dec 27th, 2024
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.00 KB | None | 0 0
raw download clone embed print report
  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>The Way Back Back</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13.  
  14. body {
  15. font-family: 'Courier New', Courier, monospace;
  16. background-color: #111;
  17. color: #00FF00; /* Neon green for hacker aesthetic */
  18. text-align: center;
  19. overflow: hidden;
  20. height: 100vh;
  21. }
  22.  
  23. header {
  24. background-color: #333;
  25. color: #00FF00;
  26. padding: 30px;
  27. border-bottom: 3px solid #00FF00;
  28. box-shadow: 0 0 20px 2px #00FF00;
  29. }
  30.  
  31. h1 {
  32. font-size: 3rem;
  33. letter-spacing: 5px;
  34. text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00;
  35. }
  36.  
  37. p {
  38. font-size: 1.2rem;
  39. margin-top: 20px;
  40. }
  41.  
  42. main {
  43. padding: 40px 20px;
  44. position: relative;
  45. }
  46.  
  47. .input-section {
  48. margin-bottom: 20px;
  49. }
  50.  
  51. #url-input {
  52. width: 70%;
  53. padding: 15px;
  54. background-color: #000;
  55. border: 2px solid #00FF00;
  56. color: #00FF00;
  57. font-size: 1.5rem;
  58. border-radius: 10px;
  59. margin-bottom: 20px;
  60. text-shadow: 0 0 10px #00FF00;
  61. }
  62.  
  63. #archive-btn {
  64. padding: 12px 25px;
  65. background-color: #00FF00;
  66. color: #111;
  67. border: 2px solid #00FF00;
  68. border-radius: 10px;
  69. font-size: 1.2rem;
  70. cursor: pointer;
  71. text-transform: uppercase;
  72. letter-spacing: 2px;
  73. box-shadow: 0 0 10px #00FF00;
  74. transition: all 0.3s;
  75. }
  76.  
  77. #archive-btn:hover {
  78. background-color: #00D700;
  79. box-shadow: 0 0 20px #00FF00;
  80. transform: scale(1.05);
  81. }
  82.  
  83. .archive-results {
  84. margin-top: 20px;
  85. display: flex;
  86. justify-content: space-around;
  87. flex-wrap: wrap;
  88. }
  89.  
  90. .result {
  91. width: 45%;
  92. margin-bottom: 20px;
  93. padding: 10px;
  94. border: 2px solid #00FF00;
  95. border-radius: 10px;
  96. box-shadow: 0 0 15px 2px #00FF00;
  97. }
  98.  
  99. iframe {
  100. border: none;
  101. box-shadow: 0 0 10px #00FF00;
  102. border-radius: 5px;
  103. }
  104.  
  105. footer {
  106. background-color: #333;
  107. color: #00FF00;
  108. text-align: center;
  109. padding: 10px;
  110. position: absolute;
  111. bottom: 0;
  112. width: 100%;
  113. font-size: 1.2rem;
  114. letter-spacing: 2px;
  115. }
  116.  
  117. footer p {
  118. font-size: 1rem;
  119. }
  120.  
  121. .glitch {
  122. animation: glitch 1s infinite;
  123. }
  124.  
  125. @keyframes glitch {
  126. 0% {
  127. text-shadow: 2px 2px 10px #00FF00, -2px -2px 5px #00FF00;
  128. }
  129. 50% {
  130. text-shadow: -2px -2px 10px #00FF00, 2px 2px 5px #00FF00;
  131. }
  132. 100% {
  133. text-shadow: 2px 2px 10px #00FF00, -2px -2px 5px #00FF00;
  134. }
  135. }
  136. </style>
  137. </head>
  138. <body>
  139. <header>
  140. <h1 class="glitch">The Way Back Back</h1>
  141. <p>Hack the web archives and discover the past. Enter a URL, explore its history, and dig deep.</p>
  142. </header>
  143.  
  144. <main>
  145. <section class="input-section">
  146. <input type="url" id="url-input" placeholder="Enter a URL to explore..." />
  147. <button id="archive-btn">Explore Archives</button>
  148. </section>
  149.  
  150. <section class="archive-results">
  151. <div class="result">
  152. <h2>Wayback Machine</h2>
  153. <iframe id="wayback-frame" src="" width="100%" height="400px"></iframe>
  154. </div>
  155. <div class="result">
  156. <h2>Internet Archive</h2>
  157. <iframe id="internet-archive-frame" src="" width="100%" height="400px"></iframe>
  158. </div>
  159. </section>
  160. </main>
  161.  
  162. <footer>
  163. <p>&copy; 2024 The Way Back Back. Hacking the archives, one snapshot at a time.</p>
  164. </footer>
  165.  
  166. <script>
  167. document.getElementById('archive-btn').addEventListener('click', function() {
  168. const url = document.getElementById('url-input').value.trim();
  169.  
  170. if (url) {
  171. const waybackUrl = `/archive/wayback?url=${encodeURIComponent(url)}`;
  172. const internetArchiveUrl = `/archive/internet?url=${encodeURIComponent(url)}`;
  173.  
  174. document.getElementById('wayback-frame').src = waybackUrl;
  175. document.getElementById('internet-archive-frame').src = internetArchiveUrl;
  176. } else {
  177. alert('Please enter a valid URL');
  178. }
  179. });
  180. </script>
  181.  
  182. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  183. </body>
  184. </html>
  185.  
  186. <!-- Backend Node.js Code -->
  187. <script>
  188. const express = require('express');
  189. const axios = require('axios');
  190. const app = express();
  191. const port = 3000;
  192.  
  193. // Serve static files (HTML, CSS, JS)
  194. app.use(express.static('public'));
  195.  
  196. // Endpoint to fetch the Wayback Machine archive
  197. app.get('/archive/wayback', async (req, res) => {
  198. const url = req.query.url;
  199. try {
  200. const response = await axios.get(`https://archive.org/wayback/available?url=${url}`);
  201. const archivedUrl = response.data?.archived_snapshots?.closest?.url;
  202.  
  203. if (archivedUrl) {
  204. res.json({ success: true, url: archivedUrl });
  205. } else {
  206. res.json({ success: false, message: "No archived version found." });
  207. }
  208. } catch (error) {
  209. res.json({ success: false, message: "Error fetching Wayback Machine archive." });
  210. }
  211. });
  212.  
  213. // Endpoint to fetch the Internet Archive
  214. app.get('/archive/internet', async (req, res) => {
  215. const url = req.query.url;
  216. try {
  217. const response = await axios.get(`https://archive.org/wayback/available?url=${url}`);
  218. const archivedUrl = response.data?.archived_snapshots?.closest?.url;
  219.  
  220. if (archivedUrl) {
  221. res.json({ success: true, url: archivedUrl });
  222. } else {
  223. res.json({ success: false, message: "No archived version found." });
  224. }
  225. } catch (error) {
  226. res.json({ success: false, message: "Error fetching Internet Archive." });
  227. }
  228. });
  229.  
  230. // Start the server
  231. app.listen(port, () => {
  232. console.log(`Server running on http://localhost:${port}`);
  233. });
  234. </script>
  235.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!