From 05b3592f0ecb6dc24c5770aea462fd42df815805 Mon Sep 17 00:00:00 2001
From: AhmmedHesham <163453118+AhmmedHesham@users.noreply.github.com>
Date: Sat, 27 Apr 2024 03:01:39 +0300
Subject: [PATCH] added some style and hyperlinks to download the video if
 needed

---
 index.html | 70 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index f296849..7410d3d 100644
--- a/index.html
+++ b/index.html
@@ -1,23 +1,47 @@
-<figure>
-  <figcaption>Impredicativity Animation</figcaption>
-  <video controls width="250">
-    <source src="https://github.com/markNZed/codespaces-manim/raw/main/notebooks/media/videos/notebooks/480p30/ImpredicativityAnimation.mp4" type="video/mp4" />
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/notebooks/media/videos/notebooks/480p30/ImpredicativityAnimation.mp4">link to the video</a> instead.</p>
-  </video>
-</figure>
-
-<figure>
-  <figcaption>Processism</figcaption>
-  <video controls width="250">
-    <source src="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism.mp4" type="video/mp4" />
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism.mp4">link to the video</a> instead.</p>
-  </video>
-</figure>
-
-<figure>
-  <figcaption>Processism 3D</figcaption>
-  <video controls width="250">
-    <source src="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism_3D.mp4" type="video/mp4" />
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism_3D.mp4">link to the video</a> instead.</p>
-  </video>
-</figure>
\ No newline at end of file
+<style>
+  body {
+    background-color: #f0f0f0;
+  }
+  
+  figure {
+    margin: 1em 0;
+    text-align: center;
+  }
+  
+  figcaption {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+  
+  video {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 5px;
+    width: 100%;
+    max-width: 500px;
+  }
+  </style>
+  
+  <figure>
+    <figcaption><a href="https://github.com/markNZed/codespaces-manim/raw/main/notebooks/media/videos/notebooks/480p30/ImpredicativityAnimation.mp4">Impredicativity Animation</a></figcaption>
+    <video controls>
+      <source src="https://github.com/markNZed/codespaces-manim/raw/main/notebooks/media/videos/notebooks/480p30/ImpredicativityAnimation.mp4" type="video/mp4" />
+      <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/notebooks/media/videos/notebooks/480p30/ImpredicativityAnimation.mp4">link to the video</a> instead.</p>
+    </video>
+  </figure>
+  
+  <figure>
+    <figcaption><a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism.mp4">Processism</a></figcaption>
+    <video controls>
+      <source src="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism.mp4" type="video/mp4" />
+      <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism.mp4">link to the video</a> instead.</p>
+    </video>
+  </figure>
+  
+  <figure>
+    <figcaption><a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism_3D.mp4">Processism 3D</a></figcaption>
+    <video controls>
+      <source src="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism_3D.mp4" type="video/mp4" />
+      <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/media/videos/notebooks/480p30/processism_3D.mp4">link to the video</a> instead.</p>
+    </video>
+  </figure>
\ No newline at end of file