diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d0fd2a4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +zakarya/videos diff --git a/component/navbar.html b/component/navbar.html index a9192c9..61397d9 100644 --- a/component/navbar.html +++ b/component/navbar.html @@ -10,7 +10,6 @@ function toggle_nav_menu() {
diff --git a/css/style.css b/css/style.css index 48946ac..057b7ec 100644 --- a/css/style.css +++ b/css/style.css @@ -121,14 +121,17 @@ main div.hero h1 a { text-decoration: none; } -main div.hero p.justify { +p.justify { text-align: justify; text-justify: auto; - width: 60%; margin-left: auto; margin-right: auto; } +main div.hero p.justify { + width: 60%; +} + main div.hero ul { margin-left: auto; margin-right: auto; @@ -202,6 +205,33 @@ div.double-linktree ul.linktree { margin: 0; } +ul.videolist { + list-style-type: none; + display: flex; + padding-left: 0; + width: min-content; +} + +ul.videolist li { + padding: 8px; +} + +ul.videolist li a { + text-decoration: none; +} + +ul.videolist li a img { + width: 250px; + height: auto; + border-radius: 8px; +} + +ul.videolist li a span { + display: block; + color: var(--text-color); + font-size: 120%; +} + div.footer { border-top: solid 1px #00000033; width: 95%; diff --git a/img/zakarya-banner.png b/img/zakarya-banner.png index 268751e..1c51cc3 100644 Binary files a/img/zakarya-banner.png and b/img/zakarya-banner.png differ diff --git a/video/css/style.css b/video/css/style.css new file mode 100644 index 0000000..a9c03d0 --- /dev/null +++ b/video/css/style.css @@ -0,0 +1,100 @@ +div.videocontainer { + display: flex; + color: var(--text-color); + width: 90%; + margin: 16px auto 16px auto; + border: solid 1px #00000033; + border-radius: 8px; + box-shadow: 1px 1px 8px #00000033; + padding: 16px; +} + +div.videocontainer video#videoplayer { + flex-grow: 1; + border-radius: 12px; + height: auto; + max-width: 55%; +} + +div.videocontainer div.videoobjects { + display: grid; + padding: 24px; +} + +div.videocontainer div.videodetails h1#videotitle { + padding: 0 12px; +} + +div.dropdown-container { + display: flex; + flex-direction: column-reverse; +} + +div.videocontainer div.download-dropdown { + position: relative; + display: inline-block; + padding: 12px; + width: 25px; + height: 25px; + background-color: #21afff; + box-shadow: 1px 1px 8px #00000033; + border-radius: 50px; + transition-duration: 0.35s; +} + +div.videocontainer div.download-dropdown:hover { + box-shadow: 1px 1px 8px #00000088; +} + +div.videocontainer div.download-dropdown img { + width: 25px; + height: 25px; +} + +div.videocontainer div.download-dropdown div.dropdown-content { + display: none; + position: absolute; + font-size: 80%; + min-width: 135px; + background-color: #edeeee; + box-shadow: 1px 1px 8px #00000033; + border-radius: 8px; + text-align: center; +} + +div.videocontainer div.download-dropdown:hover div.dropdown-content { + display: block; +} + +div.videocontainer div.download-dropdown div.dropdown-content ul { + list-style-type: none; + padding-left: 0; +} + +div.videocontainer div.download-dropdown div.dropdown-content ul li { + padding: 4px; +} + +div.videocontainer div.download-dropdown div.dropdown-content ul li:hover { + background-color: #dcdfdf; +} + +div.videocontainer div.download-dropdown div.dropdown-content ul li a { + text-decoration: none; + color: var(--text-color); +} + +@media screen and (max-width: 800px) { + div.videocontainer { + display: block; + } + div.videocontainer video#videoplayer { + width: 100%; + } + div.videocontainer div.download-dropdown { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 12px; + } +} \ No newline at end of file diff --git a/video/index.html b/video/index.html new file mode 100644 index 0000000..b91b4f5 --- /dev/null +++ b/video/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + Video Player + + + + + + + +
+ +
+
+

+

+
+
+
+ Download +
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/video/js/main.js b/video/js/main.js new file mode 100644 index 0000000..850bd3c --- /dev/null +++ b/video/js/main.js @@ -0,0 +1,48 @@ +const BASEURL = "https://files.colormatic.org/" + +var videoplayer = document.getElementById("videoplayer"); +var videotitle = document.getElementById("videotitle"); +var videodescription = document.getElementById("videodescription"); +var videodownload = document.getElementById("videodownload"); +var sourcedownload = document.getElementById("sourcedownload"); + +var params = new URLSearchParams(window.location.search); +function getParam(paramName) { + return params.get(paramName); +} + +async function getJSON(url) { + const response = await fetch(url); + if(!response.ok) + throw new Error(response.statusText); + + const data = response.json(); + return data; +} + +function getVideo(cname, vname) { + getJSON(BASEURL + cname + "/videos/data/" + vname + ".json").then((data) => { + videoURL = BASEURL + cname + "/videos/raw/" + data.video_file + "." + data.video_format; + var videosource = document.createElement("source"); + videosource.setAttribute("src", videoURL); + videosource.setAttribute("type", "video/" + data.video_format); + videoplayer.appendChild(videosource); + + document.title = data.title; + videotitle.appendChild(document.createTextNode(data.title)); + data.description.forEach((iter) => { // TODO: Detect if one of these lines contains a link and if so, make it a link + videodescription.appendChild(document.createTextNode(iter)); + videodescription.appendChild(document.createElement("br")); + }); + + videodownload.setAttribute("href", BASEURL + cname + "/videos/raw/" + data.video_file + "." + data.video_format); + videodownload.setAttribute("download", data.video_file + "." + data.video_format); + sourcedownload.setAttribute("href", BASEURL + cname + "/videos/source/" + data.source_file + "." + data.source_format); + sourcedownload.setAttribute("download", data.source_file + "." + data.source_format); + + }).catch((error) => { + console.error(error); + }); +} + +getVideo(getParam("c"), getParam("v")); \ No newline at end of file diff --git a/zakarya/index.html b/zakarya/index.html index 368b189..0fcf00e 100644 --- a/zakarya/index.html +++ b/zakarya/index.html @@ -23,6 +23,7 @@ $(document).ready(function(){
+

Links:

+
+ +
+

Featured Videos:

+