add linktree for paper

ml-research · Jul 10, 2024 · 3e8bf8c · 3e8bf8c
1 parent 1f357de
commit 3e8bf8c
Show file tree

Hide file tree

Showing 3 changed files with 332 additions and 0 deletions.
diff --git a/people/jblueml/papertrees/ocatari/cuterobot.jpg b/people/jblueml/papertrees/ocatari/cuterobot.jpg
diff --git a/people/jblueml/papertrees/ocatari/index.html b/people/jblueml/papertrees/ocatari/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCAtari: Object-Centric Atari 2600 Reinforcement Learning Environments</title>
+    <!-- Favicon -->
+    <link rel="icon" href="./cuterobot.jpg" type="image/x-icon" />
+    <!-- Font Awesome icons -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
+    <!-- Core theme CSS -->
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <!-- Parallax Pixel Background Animation -->
+    <section class="animated-background">
+      <div id="stars1"></div>
+      <div id="stars2"></div>
+      <div id="stars3"></div>
+    </section>
+    <!-- End of Parallax Pixel Background Animation -->
+
+
+
+
+    <a id="profilePicture" href="#popup">
+      <img src="./cuterobot.jpg" alt="Profile Picture">
+    </a>
+
+    <div class="overlay" id="popup">
+      <div class="popup">
+        <div class="popup-photo">
+          <a href="./cuterobot.jpg" target="_blank">
+            <img src="./cuterobot.jpg" alt="Profile Picture">
+          </a>
+        </div>
+        <div class="popup-quote">
+          Objects are great. </br> Comic created using Adobe Firefly.
+        </div>
+        <a class="popup-close" onclick="history.back()">&times;</a>
+      </div>
+    </div>
+
+
+    <div id="title">
+      OCAtari: Object-Centric Atari 2600 Reinforcement Learning Environments
+    </div>
+
+    <div id="links">
+    Paper <br><br>
+      <a class="link" href="https://arxiv.org/abs/2306.08649" target="_blank">
+        <i class="fa fa-book">&nbsp;</i>Full Paper
+      </a>
+    Corresponding Authors <br><br>
+      <a class="link" href="https://www.ml.informatik.tu-darmstadt.de/people/qdelfosse/index.html" target="_blank">
+        <i class="fa fa-user">&nbsp;</i>Quentin Delfosse
+      </a>
+      <a class="link" href="https://www.ml.informatik.tu-darmstadt.de/people/jblueml/index.html" target="_blank">
+        <i class="fa fa-user">&nbsp;</i>Jannis Blüml
+      </a>
+
+    Poster <br><br>
+     <a class="link" href="https://github.com/k4ntz/OC_Atari" target="_blank">
+      <i class="fa fa-sign">&nbsp;</i>RLC 2024
+      </a>
+
+    Code <br><br>
+     <a class="link" href="https://github.com/k4ntz/OC_Atari" target="_blank">
+      <i class="fab fa-github">&nbsp;</i>Github Repository
+      </a>
+
+      <CODE> 
+        pip install ocatari
+        ...
+      </CODE>
+      </div>
+
+    <!--
+    <div id="hashtag">
+      Blinky Text
+    </div>
+  -->
+  </body>
+</html>
diff --git a/people/jblueml/papertrees/ocatari/style.css b/people/jblueml/papertrees/ocatari/style.css
@@ -0,0 +1,247 @@
+@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
+
+:root {
+    --bgColor: #9eaff8;
+    --bgColor2: #ffffff;
+    --accentColor: #2e4291;
+    --font: 'Karla', sans-serif;
+    --delay: .3s;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family: var(--font);
+    background: radial-gradient(ellipse at bottom left, var(--bgColor) 0%, var(--bgColor2) 50%);
+    /* background-image: url("C:\Users\Jannis\Downloads\atari-controllers-atari-controllers-atari-dzhoistik-atari-dz.jpg"); */
+    opacity: 0;
+    animation: 1s ease-out var(--delay) 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */
+    animation-fill-mode: forwards;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+}
+
+code {
+    font-family: MyFancyCustomFont, monospace;
+    font-size: inherit;
+    display: block;
+    background: var(--bgColor);
+    max-width: 100%;
+    min-width: 100px;
+    padding: 10px;
+  }
+
+#profilePicture, #profilePicture img {
+    position: relative;
+    width: 200px;
+    display: block;
+    margin: 40px auto 20px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+#title {
+    color: var(--accentColor);
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.25;
+    display: block;
+    font-family: var(--font);
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+}
+
+#links {
+    max-width: 675px;
+    width: auto;
+    display: block;
+    margin: 27px auto;
+}
+
+.link {
+    position: relative;
+    background-color: transparent;
+    color: var(--accentColor);
+    border: solid var(--accentColor) 2px;
+    border-radius: 10px;
+    font-size: 1rem;
+    text-align: center;
+    display: block;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 10px; /* 17px */
+    text-decoration: none;
+    /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
+    -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) {
+    .link:hover {
+        background-color: var(--accentColor);
+        color: var(--bgColor);
+    }
+}
+
+.link:active {
+    background-color: var(--accentColor);
+    color: var(--bgColor);
+}
+
+#hashtag {
+    position: relative;
+    padding-bottom: 20px;
+    color: var(--accentColor);
+    font-size: 1rem;
+    display: block;
+    font-family: var(--font);
+    width: 100%;
+    text-align: center;
+
+    /*  animation   */
+    overflow: hidden;
+    background: linear-gradient(90deg, var(--bgColor), var(--accentColor), var(--bgColor));
+    background-repeat: no-repeat;
+    background-size: 80%;
+    animation: animate 3s linear var(--delay) infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: rgba(255, 255, 255, 0);
+}
+
+
+/*-------------------------animations-----------------------*/
+@keyframes transitionAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes animate {
+    0% {
+      background-position: -500%;
+    }
+    100% {
+      background-position: 500%;
+    }
+}
+
+@keyframes animStar {
+    from {
+        transform: translateY(0px);
+    }
+    to {
+        transform: translateY(-2000px);
+    }
+}
+
+
+/*-------------------------popup------------------------*/
+/* credits: https://www.youtube.com/watch?v=lAS2glU0xlc */
+.overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 2;
+    visibility: hidden;
+    opacity: 0;
+    overflow: hidden;
+    transition: .5s ease-in-out;
+}
+
+.popup {
+    position: relative;
+    top: -43%;
+    /* right: -100vh; */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 400px;
+    /* max-height: 500px; */
+    width: auto;
+    height: auto;
+    margin: 56px;
+    background-color: var(--bgColor);
+    /* transform: rotate(32deg); */
+    transform: scale(0);
+    transition: .5s ease-in-out;
+}
+
+.popup-quote {
+    font-family : Baskerville, Georgia, serif;
+    font-style : italic;
+    position: flex;
+    color: var(--accentColor);
+    padding: 20px;
+    text-align: center;
+    font-size: 1rem;
+}
+
+.popup-photo {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.popup-photo img {
+    width: 100%;
+    height: 100%;
+}
+
+.overlay:target {
+    visibility: visible;
+    opacity: 1;
+}
+
+.overlay:target .popup {
+    transform: scale(1);
+    top: 0;
+    /* right: 0; */
+    /* transform: rotate(0); */
+}
+
+.popup-close {
+    position: absolute;
+    right: -1rem;
+    top: -1rem;
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.7rem;
+    font-weight: 400;
+    border-radius: 100%;
+    background-color: var(--bgColor);
+    z-index: 4;
+    color: var(--accentColor);
+    line-height: 2.7rem;
+    text-align: center;
+    cursor: pointer;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) {
+    .popup-close:hover {
+        background-color: var(--accentColor);
+        color: var(--bgColor);
+    }
+}
+
+.popup-close:active {
+    background-color: var(--accentColor);
+    color: var(--bgColor);
+}
+
+