update background

assets/logo.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="290.5274"
+   height="282.71649"
+   viewBox="0 0 76.868707 74.802072"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#ffffff"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.21024131"
+     inkscape:cx="2865.7546"
+     inkscape:cy="986.96114"
+     inkscape:window-width="1898"
+     inkscape:window-height="1000"
+     inkscape:window-x="1930"
+     inkscape:window-y="48"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(653.59347,111.6256)">
+    <path
+       id="path44-3-7-3"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.204636px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -651.77372,-111.62027 c -1.63157,0.0692 -1.81975,1.60128 -1.81975,1.60128 l 1.89398,72.005317 40.07257,0.626873 31.4593,0.563085 c 1.74953,0.02471 1.92048,-2.431844 2.21143,-4.692875 v 0 c -1.19313,-2.559882 0.0198,-4.33124 -0.13349,-4.269933 l 0.3387,-20.930447 0.15573,-29.272831 0.24348,-6.219009 c 0.11124,-2.84713 -0.18811,-4.06699 -0.18811,-4.06699 l 0.12137,-2.05464 c 1.31655,-0.28476 0.43742,-1.91151 -0.0198,-2.3562 l -7.92901,0.14584 -4.78909,0.10629 c -3.27648,1.17216 -3.00274,-0.14831 -3.00274,-0.14831 l -7.27185,-0.0297 c -1.58907,-0.25906 -3.581,0.59474 -3.581,0.59474 -2.40445,0.94598 -21.34836,-0.59722 -21.34836,-0.59722 l -7.25608,-0.0247 -1.09581,-0.36831 -1.28093,0.51464 -14.13662,-0.3562 c -1.15569,-0.60214 -2.01519,-0.80039 -2.65353,-0.77369 z m 28.01748,7.10593 13.74815,0.16315 1.4355,0.62537 1.6757,16.017828 -1.79405,1.910033 -15.24941,-0.775434 -0.65718,-16.374267 z m 35.27216,20.299869 c 0.48273,0.02471 0.92987,0.195288 1.17308,0.732182 0.70795,1.560496 0.44046,6.679524 0.40101,10.584611 -0.0385,3.905082 -0.0385,5.402053 -0.0385,5.402053 l -14.07715,0.742307 -1.07536,-1.420344 0.75629,-1.840809 -0.47889,-13.827231 11.36897,0.217521 c 0,0 1.05028,-0.610807 1.97209,-0.58954 z m -0.0344,20.225965 c 0.14164,0 0.25068,0 0.32372,0.02471 1.16967,0.07417 0.78302,1.305905 0.78302,1.305905 v 2.989256 c 0,0 0.27294,8.608582 0.14559,11.225084 -0.12754,2.616483 -2.41377,2.562358 -2.41377,2.562358 0,0 -8.26851,0.558148 -10.18232,0.302312 -1.9136,-0.2556 -2.32879,-1.891738 -2.32879,-1.891738 0,0 0.71179,-5.187744 -0.22074,-11.155378 -0.93232,-5.967379 2.54891,-5.026093 2.54891,-5.026093 0,0 9.22756,-0.337896 11.3447,-0.319855 z m -23.69741,0.04944 c 0.32051,0 0.51596,0 0.54327,0.02471 0.21902,0.09393 2.7134,-0.247187 2.78987,2.893105 0.0749,3.139543 0.40226,11.061193 0.40226,11.061193 0,0 0.20245,2.588812 -1.40337,3.835621 -1.60566,1.247073 -11.77463,0.853552 -11.77463,0.853552 l -2.0419,-4.352013 0.97867,-1.705094 -0.81803,-2.578188 -0.34838,-7.780754 1.03752,-1.8863 c 0,0 8.39011,-0.330729 10.63472,-0.352247 z m -28.77337,0.09146 c 0.59424,-0.02471 1.33719,0.06179 2.24119,0.287476 l 7.45293,-0.239768 c 0,0 2.17299,-0.345329 1.04966,2.447904 l -0.0304,13.926109 -2.28264,1.438404 -10.58781,-0.103828 -1.12473,-15.325439 0.0648,-1.55976 1.32081,-0.454584 c 0,0 0.58754,-0.400448 1.895,-0.417509 z"
+       inkscape:export-filename="../../www/repo/obs-skin/assets/logo-deblan.png"
+       inkscape:export-xdpi="89"
+       inkscape:export-ydpi="89" />
+  </g>
+</svg>

background/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+<title>Background</title>
+<style>
+html, body {
+    background: #1a1a1a;
+}
+
+@keyframes shadow {
+    from {
+        filter: drop-shadow(0 0 5px #555555);
+    }
+
+    20% {
+        filter: drop-shadow(0 0 10px #555555);
+    }
+
+    40% {
+        filter: drop-shadow(0 0 6px #555555);
+    }
+
+    60% {
+        filter: drop-shadow(0 0 11px #555555);
+    }
+
+    to {
+        filter: drop-shadow(0 0 6px #555555);
+    }
+}
+
+video {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    filter: grayscale(100%);
+}
+
+.wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: Ubuntu;
+    font-size: 80px;
+    color: #fff;
+    text-align: center;
+}
+
+img {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+</head>
+<body>
+    <video autoplay muted loop>
+        <source src="../assets/video.mp4" type="video/mp4" />
+    </video>
+    <div class="backdrop"></div>
+    <div class="wrapper">
+        <div>
+            Le live va commencer<br>
+            <img src="../assets/logo.svg" alt="">
+        </div>
+    </div>
+</body>
+</html>

logo.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>Logo</title>
-<style>
-#wrapper {
-    width: 100%;
-    position: fixed;
-    bottom: 24px;
-    text-align: center;
-}
-
-#wrapper img {
-    margin-left: -60px;
-}
-
-#animate {
-    animation-name: position;
-    animation-duration: 4s;
-    transform: translateY(0);
-}
-
-@keyframes position {
-    from {
-        transform: translateY(0);
-    }
-
-    50% {
-        transform: translateY(120px);
-    }
-
-    to {
-        transform: translateY(0);
-    }
-}
-</style>
-</head>
-<body>
-<div id="wrapper">
-    <img src="./assets/logo-all.png">
-</div>
-<script>
-const img = document.querySelector("#wrapper img")
-
-setInterval(() => {
-    img.setAttribute('id', 'animate')
-
-    setTimeout(() => {
-        img.setAttribute('id', '')
-    }, 5000)
-}, 60000)
-</script>
-</body>
-</html>

logo/index.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Logo</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+<style>
+.wrapper {
+    width: 100%;
+    position: fixed;
+    bottom: 24px;
+    text-align: center;
+}
+
+*[data-animation="positionUpDownUp"] {
+    animation-name: positionUpDownUp;
+    animation-duration: 8s;
+    transform: translateY(0);
+}
+
+*[data-animation="positionDownUpDown"] {
+    animation-name: positionDownUpDown;
+    animation-duration: 8s;
+    transform: translateY(0);
+}
+
+#buymeacoffe {
+    transform: translateY(120px);
+}
+
+@keyframes positionUpDownUp {
+    from {
+        transform: translateY(0);
+    }
+
+    25% {
+        transform: translateY(120px);
+    }
+
+    50% {
+        transform: translateY(120px);
+    }
+
+    75% {
+        transform: translateY(120px);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes positionDownUpDown {
+    from {
+        transform: translateY(120px);
+    }
+
+    25% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(0);
+    }
+
+    75% {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(120px);
+    }
+}
+
+.block {
+    display: inline-block;
+    background: #1a1a1a;
+    max-height: 66px;
+    height: 66px;
+    line-height: 68px;
+    font-size: 18px;
+    color: #fff;
+    border-radius: 33px;
+    padding: 0 22px;
+    font-family: 'Ubuntu';
+    filter: drop-shadow(2px 2px 1px #00ced1);
+}
+
+.block img {
+    vertical-align: middle;
+    margin-top: -2px;
+}
+
+.block .mr {
+    margin-right: 7px;
+}
+
+strong {
+  font-weight: 700;
+}
+
+.square {
+    height: 6px;
+    width: 6px;
+    margin: 0 2px;
+    display: inline-block;
+    border: 2px solid #ffc700;
+    transform: rotateZ(45deg)
+}
+</style>
+</head>
+<body>
+
+<div class="wrapper">
+    <div class="block" id="logo">
+        <img src="../assets/logo-deblan.png" class="mr">
+        <strong class="mr">DEBLANTV</strong>
+        <span>
+            deblan.fr <span class="square"></span> gitnet.fr/deblan
+        </span>
+    </div>
+</div>
+<div class="wrapper">
+    <div class="block" id="buymeacoffe">
+        <img src="../assets/logo-buymeacoffe.png" class="mr">
+        buymeacoffee.com/<strong>deblan</strong>
+    </div>
+</div>
+<script>
+const logo = document.querySelector("#logo")
+const buymeacoffe = document.querySelector("#buymeacoffe")
+
+const animate = () => {
+    logo.setAttribute('data-animation', 'positionUpDownUp')
+    buymeacoffe.setAttribute('data-animation', 'positionDownUpDown')
+
+    setTimeout(() => {
+        logo.setAttribute('data-animation', '')
+        buymeacoffe.setAttribute('data-animation', '')
+    }, 10000)
+}
+
+setInterval(animate, 30000)
+setTimeout(animate, 3000)
+</script>
+</body>
+</html>