graylan0 · January 3, 2024 02:05
diff --git a/gistfile1.txt b/gistfile1.txt
 const express = require('express');
 const axios = require('axios');
 const fs = require('fs');
 const path = require('path');

 const app = express();
 const port = 3000;

 app.use('/images', express.static('images'));

 app.get('/', async (req, res) => {
 try {
 const imageNames = fs.readdirSync('./images').sort((a, b) => {
 const statsA = fs.statSync(path.join('./images', a));
 const statsB = fs.statSync(path.join('./images', b));
 return statsA.ctime - statsB.ctime;
 });

 const imgTags = imageNames.map(name => `<img class="fade-in" src="/images/${name}" alt="${name}">`).join('\n');

 let htmlContent = `
 <!DOCTYPE html>
 <html>
 <head>
 <title>Mechanic Replies</title>
 <style>
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ECEFF1;
    font-family: Roboto, sans-serif;
    color: #263238;
    margin: 0;
    padding: 0;
  }

  h1 {
    font-size: 5em;
    text-align: center;
    color: #263238;
    margin-bottom: 2em;
  }

  ul {
    list-style-type: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
  }

  li {
    background-color: #CFD8DC;
    margin: 1em 0;
    padding: 1em;
    border-radius: 4px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    border: 1px solid #B0BEC5;
  }

  .fade-in {
    opacity: 0;
    transition: opacity 2s;
  }

  .fade-in.visible {
    opacity: 1;
  }

  .instructions {
    font-size: 1.2em;
    text-align: center;
    margin-top: 2em;
  }
 </style>
 </head>
 <body>
 <h1>Mechanic Replies</h1>
 <ul id="replyList">
 </ul>
 <div>
 ${imgTags}
 </div>
 <p class="instructions">To use the bot "dave", type "/dave" followed by your message.</p>

 <script>
  window.addEventListener("load", function(){
    var images = document.querySelectorAll('.fade-in');
    images.forEach(function(image){
      setTimeout(() => {
        image.classList.add('visible');
      }, Math.random() * 5000);
    });
  });

  async function fetchData() {
    const response = await fetch('http://localhost:8000/get_bot_reply');
    const data = await response.json();
    let listHtml = '';
    data.bot_replies.forEach(reply => {
      listHtml += '<li>' + reply + '</li>';
    });
    document.getElementById('replyList').innerHTML = listHtml;
  }

  fetchData(); // Fetch data initially
  setInterval(fetchData, 5000); // Fetch data every 5 seconds
 </script>
 </body>
 </html>
 `;

 res.send(htmlContent);
 } catch (error) {
 console.error(error);
 res.status(500).send('An error occurred while fetching data.');
 }
 });

 app.listen(port, () => {
 console.log(`Node.js server running at http://localhost:${port}/`);
 });
	const express = require('express');
	const axios = require('axios');
	const fs = require('fs');
	const path = require('path');

	const app = express();
	const port = 3000;

	app.use('/images', express.static('images'));

	app.get('/', async (req, res) => {
	try {
	const imageNames = fs.readdirSync('./images').sort((a, b) => {
	const statsA = fs.statSync(path.join('./images', a));
	const statsB = fs.statSync(path.join('./images', b));
	return statsA.ctime - statsB.ctime;
	});

	const imgTags = imageNames.map(name => `<img class="fade-in" src="/images/${name}" alt="${name}">`).join('\n');

	let htmlContent = `
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mechanic Replies</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #ECEFF1;
	font-family: Roboto, sans-serif;
	color: #263238;
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 5em;
	text-align: center;
	color: #263238;
	margin-bottom: 2em;
	}

	ul {
	list-style-type: none;
	padding: 0;
	max-width: 600px;
	margin: 0 auto;
	}

	li {
	background-color: #CFD8DC;
	margin: 1em 0;
	padding: 1em;
	border-radius: 4px;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	border: 1px solid #B0BEC5;
	}

	.fade-in {
	opacity: 0;
	transition: opacity 2s;
	}

	.fade-in.visible {
	opacity: 1;
	}

	.instructions {
	font-size: 1.2em;
	text-align: center;
	margin-top: 2em;
	}
	</style>
	</head>
	<body>
	<h1>Mechanic Replies</h1>
	<ul id="replyList">
	</ul>
	<div>
	${imgTags}
	</div>
	<p class="instructions">To use the bot "dave", type "/dave" followed by your message.</p>

	<script>
	window.addEventListener("load", function(){
	var images = document.querySelectorAll('.fade-in');
	images.forEach(function(image){
	setTimeout(() => {
	image.classList.add('visible');
	}, Math.random() * 5000);
	});
	});

	async function fetchData() {
	const response = await fetch('http://localhost:8000/get_bot_reply');
	const data = await response.json();
	let listHtml = '';
	data.bot_replies.forEach(reply => {
	listHtml += '<li>' + reply + '</li>';
	});
	document.getElementById('replyList').innerHTML = listHtml;
	}

	fetchData(); // Fetch data initially
	setInterval(fetchData, 5000); // Fetch data every 5 seconds
	</script>
	</body>
	</html>
	`;

	res.send(htmlContent);
	} catch (error) {
	console.error(error);
	res.status(500).send('An error occurred while fetching data.');
	}
	});

	app.listen(port, () => {
	console.log(`Node.js server running at http://localhost:${port}/`);
	});