rynr/index.html

## index.html
<html>
  <head>
    <title>BMW EDV - Monitoring</title>
    <style>
    * {
      margin: 0;
      padding: 0;
      background: none;
      border: 0;
    }
    body {
      background: #000;
    }
    .slideshow {
      width: 100vw;
      height: 100vh;
    }
    .slideshow__item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      transition: opacity 500ms ease;
    }
    .slideshow__item.slideshow__item--active {
      opacity: 1;
    }
    </style>
  </head>
  <body>
  </body>
  <script>
  const endpoint = 'https://gist.githubusercontent.com/rynr/b77edeee7a7b14385979129ede768558/raw/urls.json';
  document.addEventListener('DOMContentLoaded', () => {
    fetch(endpoint).then((response) => response.json()).then(({ urls, interval }) => {
      let currentSlide = 0;
      document.body.insertAdjacentHTML('beforeend', `
        <div class="slideshow">
          ${urls.map((url, index) => `
            <iframe class="slideshow__item${index === currentSlide ? ' slideshow__item--active' : ''}" src="${url}"></iframe>
          `).join('')}
        </div>
      `);
      const slides = Array.from(document.querySelectorAll('.slideshow__item'));
      window.setInterval(() => {
        currentSlide++;
        if (currentSlide >= slides.length) {
          currentSlide = 0;
        }
        slides.forEach((slide, index) => {
          slide.classList.toggle('slideshow__item--active', index === currentSlide);
        });
      }, interval);
    });
  });
  </script>
</html>

## urls.json
{
  "urls": [
    "https://jira.sinnerschrader.com/secure/RapidBoard.jspa?rapidView=372&view=reporting&chart=burndownChart",
    "https://app.klipfolio.com/published/87085f75b91c6ad1599fc86fedbd1598/digital-marketing-dashboard",
    "https://www.finanzen.net/aktien/SinnerSchrader-Aktie"
  ],
  "interval": 10000
}
	<html>
	<head>
	<title>BMW EDV - Monitoring</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	}
	body {
	background: #000;
	}
	.slideshow {
	width: 100vw;
	height: 100vh;
	}
	.slideshow__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transition: opacity 500ms ease;
	}
	.slideshow__item.slideshow__item--active {
	opacity: 1;
	}
	</style>
	</head>
	<body>
	</body>
	<script>
	const endpoint = 'https://gist.githubusercontent.com/rynr/b77edeee7a7b14385979129ede768558/raw/urls.json';
	document.addEventListener('DOMContentLoaded', () => {
	fetch(endpoint).then((response) => response.json()).then(({ urls, interval }) => {
	let currentSlide = 0;
	document.body.insertAdjacentHTML('beforeend', `
	<div class="slideshow">
	${urls.map((url, index) => `
	<iframe class="slideshow__item${index === currentSlide ? ' slideshow__item--active' : ''}" src="${url}"></iframe>
	`).join('')}
	</div>
	`);
	const slides = Array.from(document.querySelectorAll('.slideshow__item'));
	window.setInterval(() => {
	currentSlide++;
	if (currentSlide >= slides.length) {
	currentSlide = 0;
	}
	slides.forEach((slide, index) => {
	slide.classList.toggle('slideshow__item--active', index === currentSlide);
	});
	}, interval);
	});
	});
	</script>
	</html>
	{
	"urls": [
	"https://jira.sinnerschrader.com/secure/RapidBoard.jspa?rapidView=372&view=reporting&chart=burndownChart",
	"https://app.klipfolio.com/published/87085f75b91c6ad1599fc86fedbd1598/digital-marketing-dashboard",
	"https://www.finanzen.net/aktien/SinnerSchrader-Aktie"
	],
	"interval": 10000
	}