<!DOCTYPE html>
<html>

<head>
  <title>Art Class</title> 
  <link href="icon.png" rel="icon" />
  <script async src="https://arc.io/widget.min.js#HC4S5PSX"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Press+Start+2P&family=Source+Code+Pro&display=swap');

body {
  background: #111;
  text-align: center;
  overflow: none;
  color: white;
}

#loadingdiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  margin: 0px;
  align-items: center;
}

.msg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

p {
  font-family: "DM Sans";
}

.info {
  color: #FFF;
  max-width: 600px;
  text-align: center;
  margin: 35px 0px 0px 0px;
}

.lds-dual-ring {
  display: inline-block;
  width: 160px;
  height: 160px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 128px;
  height: 128px;
  margin: 16px;
  border-radius: 50%;
  border: 12px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#caption {
  font-size: 11px;
}

#theframe {
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}



a {
  text-decoration: none;
  color: white;
  text-align: center;
}

#buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
}

.pagebutton {
  height: 50px;
  width: 50px;
  background-color: white;
  color: black;
  opacity: 0.6;
  border: none;
  border-radius: 5px;
  transition: all 0.6s;
}

.pagebutton:hover {
  opacity: 1;
  scale: 1.06;
  cursor: pointer;
}

footer {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  margin-right: auto;
  font-family: Verdana;
  font-size: 14px;
}

.link2 {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  font-family: "DM Sans";
  transition: all 0.6s;
  border-radius: 5px;
  margin-bottom: 10px;
}
.link2:hover {
  color: #333;
  background-color: #fff;
}

.spinn {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


  </style>
  <script src="https://kit.fontawesome.com/e897e5d5dc.js" crossorigin="anonymous"></script>
  <script defer data-api="/data/event" data-domain="artclass.site" src="/data/script.js"></script>
 
</head>

<body>
  <script src="js/main.js"></script>
  <div id="loadingdiv">
    <div class="msg">
      <div class="lds-dual-ring"></div>
      
      <p class="info">
        Loading content, please be patient! <br>If you're waiting for a while, try reloading the page or <a href="/utils/widgetbot.html">Join our Discord</a>. <br>
        <span id="note"></span>
      </p>
    </div>
  </div>
  
  
  <iframe id="theframe"></iframe>

  
  <script src="./uv/uv.bundle.js"></script>
  <script src="./uv/uv.config.js"></script>
  <script src="./data/games.js"></script>
  <script src="./data/apps.js"></script>
  <script src="js/cloak.js"></script>
  

  <script>
    
    const params = new URLSearchParams(window.location.search)
    if (params.get("game")) {
      games.forEach(game => {
        if (game.id != params.get("game")) return
        document.title = `${game.title} | Art Class`
        if (game.note) document.querySelector("#note").innerHTML = game.note
        if (game.fullscreen) document.querySelector("#footer").style.display = "none"
        navigator.serviceWorker.register('./loadsw.js', {
          scope: __uv$config.prefix
        }).then(() => {
          //document.querySelector("#theframe").src = __uv$config.prefix + __uv$config.encodeUrl(game.url);
          window.location.href = __uv$config.prefix + __uv$config.encodeUrl(game.url);
          
          
        });
        
      })
    } else if (params.get("app")) {
      apps.forEach(app => {
        if (app.id != params.get("app")) return
        document.title = `${app.title} | Art Class`
        navigator.serviceWorker.register('./loadsw.js', {
          scope: __uv$config.prefix
          
        }).then(() => {
          document.querySelector("#theframe").src = __uv$config.prefix + __uv$config.encodeUrl(app.url);
          document.querySelector("#loadingdiv").remove()
          if (app.fullscreen) document.querySelector("#footer").style.display = "none" 
        });
      })
    } else if (params.get('url')) {
      navigator.serviceWorker.register('./loadsw.js', {
        scope: __uv$config.prefix
        
      }).then(() => {
        document.querySelector("#theframe").src = __uv$config.prefix + __uv$config.encodeUrl(params.get("url"));
        document.querySelector("#loadingdiv").remove()
      });
    } else if (params.get("app")) {
      apps.forEach(app => {
        if (app.id != params.get("app")) return
        document.title = `${app.title} | Art Class`
        navigator.serviceWorker.register('./loadsw.js', {
          scope: __uv$config.prefix
          
        }).then(() => {
          document.querySelector("#theframe").src = __uv$config.prefix + __uv$config.encodeUrl(app.url);
          document.querySelector("#loadingdiv").remove()
          if (app.fullscreen) document.querySelector("#footer").style.display = "none" 
        });
      })
    }
    
    
  </script>
</body>

</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company