diff --git a/www/index.html b/www/index.html index 88c51d7..bbcfae2 100644 --- a/www/index.html +++ b/www/index.html @@ -21,6 +21,7 @@ + diff --git a/www/projects/index.html b/www/projects/index.html index 301b8e5..2f788f4 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -12,6 +12,7 @@ + @@ -312,7 +313,7 @@ Videography Projects

- +

Strings of Freedom

@@ -321,7 +322,7 @@

- +

MINDS Charity Car Wash Promotional

@@ -333,50 +334,50 @@

- +

- Strings of Freedom + Strings of Freedom (2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.

- +

- MINDS Charity Car Wash Promotional + MINDS Charity Car Wash Promotional (2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.

- +

- Paperverse Hub + Paperverse Hub 2026

- +

- A message for this Eid + A message for this Eid 2026

- +

- Secondary 3 VIA Project + Secondary 3 VIA Project 2025

diff --git a/www/scripts/blog.js b/www/scripts/blog.js index 0e8fa2f..5c5ad67 100644 --- a/www/scripts/blog.js +++ b/www/scripts/blog.js @@ -1,10 +1,8 @@ var evaluatedTags = ""; const clamp = (val, min, max) => Math.min(Math.max(val, min), max) -const api_url = "https://altafcreator.com" - function postList(n = 0) { - fetch(`${api_url}/api/blogs/`, { + fetch(`${API_URL}/blogs/`, { method: "POST", headers: { "Content-Type": "application/json", @@ -47,7 +45,7 @@ function postCard(post) {

${evaluatedTags}

${title}

${date}

diff --git a/www/scripts/captcha.js b/www/scripts/captcha.js index 3ef5334..9ddc513 100644 --- a/www/scripts/captcha.js +++ b/www/scripts/captcha.js @@ -1,7 +1,7 @@ const emailUl = document.getElementById("email-list") async function emailTurnstileSuccess(token) { - const response = await fetch("https://altafcreator.com/api/email/", { + const response = await fetch(`${API_URL}/email/`, { method: 'POST', headers: { 'Content-Type': 'application/json', diff --git a/www/scripts/constants.js b/www/scripts/constants.js new file mode 100644 index 0000000..b2b7894 --- /dev/null +++ b/www/scripts/constants.js @@ -0,0 +1,2 @@ +//const API_URL = "https://altafcreator.com/api" +const API_URL = "http://localhost:9091/api" diff --git a/www/scripts/video.js b/www/scripts/video.js new file mode 100644 index 0000000..9f32e96 --- /dev/null +++ b/www/scripts/video.js @@ -0,0 +1,91 @@ +const video = document.getElementById("video"); +const videoControlsProgress = document.getElementById("video-controls-progress"); +const videoControlsPlay = document.getElementById("video-controls-play"); +const videoControlsVolume = document.getElementById("video-controls-mutetoggle"); +const videoControlsMaximise = document.getElementById("video-controls-maximise"); +const videoControlsTimeCurrent = document.getElementById("video-controls-currenttime"); +const videoControlsTimeTotal = document.getElementById("video-controls-totaltime"); + +let videoPlaying = false; +let audioEnabled = true; +let videoMaximised = false; + +function toggleVideo() { + if (videoPlaying) { + videoPlaying = false; + videoControlsPlay.innerHTML = ``; + video.pause(); + } else { + videoPlaying = true; + videoControlsPlay.innerHTML = ``; + video.play(); + } +} + +function videoUpdate() { + videoControlsProgress.value = video.currentTime / video.duration; + videoControlsTimeCurrent.innerHTML = secondsToFormatted(video.currentTime); + updateSlider(); +} + +function updateSlider() { + const value = (videoControlsProgress.value - videoControlsProgress.min) / (videoControlsProgress.max - videoControlsProgress.min) * 100; + videoControlsProgress.style.background = `linear-gradient(to right, var(--accent1) 0%, var(--accent2) ${value}%, #ddd ${value}%, #ddd 100%)`; +} + +function seekVideo() { + updateSlider(); + const time = videoControlsProgress.value * video.duration; + video.currentTime = time; +} + +function toggleAudio() { + if (audioEnabled) { + audioEnabled = false; + videoControlsVolume.innerHTML = ``; + video.muted = true; + } else { + audioEnabled = true; + videoControlsVolume.innerHTML = ``; + video.muted = false; + } +} + +function toggleMaximisation() { + if (videoMaximised) { + videoMaximised = false; + videoControlsMaximise.innerHTML = ``; + video.exitFullscreen(); + video.controls = false; + } else { + videoMaximised = true; + videoControlsMaximise.innerHTML = ``; + video.requestFullscreen(); + video.controls = true; + } +} + +function secondsToFormatted(seconds) { + seconds = Math.round(seconds); + let hours = seconds / 3600; + let hoursMod = seconds % 3600; // in seconds + let minutes = hoursMod / 60; + let secs = hoursMod % 60; + + if (hours >= 1) { + return `${Math.floor(hours)}:${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; + } else { + return `${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}` + } +} + +videoControlsProgress.value = 0; +updateSlider(); +video.addEventListener("loadeddata", function () { + videoControlsTimeTotal.innerHTML = `/${secondsToFormatted(video.duration)}` +}); +videoControlsProgress.addEventListener("input", seekVideo); +videoControlsPlay.addEventListener("click", toggleVideo); +videoControlsVolume.addEventListener("click", toggleAudio); +videoControlsMaximise.addEventListener("click", toggleMaximisation); +video.addEventListener("timeupdate", videoUpdate); diff --git a/www/scripts/videoprojects.js b/www/scripts/videoprojects.js index 1879474..019403f 100644 --- a/www/scripts/videoprojects.js +++ b/www/scripts/videoprojects.js @@ -1,6 +1,7 @@ const playerContainer = document.getElementById("full-video-player"); const playerVideo = document.getElementById("full-video-player-video"); const playerCaption = document.getElementById("full-video-player-caption"); +const playerButton = document.getElementById("full-video-player-button") function closeFullPlayer() { playerContainer.style.display = "none"; @@ -8,8 +9,9 @@ function closeFullPlayer() { playerVideo.currentTime = 0; } -function loadVideo(url, caption) { +function loadVideo(url, caption, videoPath) { playerContainer.style.display = "flex"; playerVideo.src = url; playerCaption.innerHTML = caption; + playerButton.href = `/video/${videoPath}/` } diff --git a/www/style.css b/www/style.css index 1134f0e..8bd39b9 100644 --- a/www/style.css +++ b/www/style.css @@ -210,6 +210,12 @@ li { min-height: 0; } +.video-section { + border-top: none; + padding-top: 90px; + padding-bottom: 50px; +} + .heading { font-size: 2.5rem; font-weight: 600; @@ -470,6 +476,11 @@ li { align-items: start; } +.flex-end { + align-items: end; + justify-content: end; +} + .flex-right { display: flex; flex-direction: row; @@ -1021,6 +1032,117 @@ li { /*clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) 100%, 0% 100%, 0% 100%, 0% 100%);*/ } +.video { + width: 100%; + clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); + background-color: var(--accent); + transition: clip-path .5s; +} + +/*.video:hover { + clip-path: polygon( + 0 0, 0 0, 0 0, + 100% 0, 100% 0, 100% 0, + 100% 100%, 100% 100%, 100% 100%, + 0 100%, 0 100%, 0 100% + ); +}*/ + +.video:hover ~ div>.video-controls { + opacity: 1; + transition-delay: 0s; +} + +.video-controls:hover { + opacity: 1; + transition-delay: 0s; +} + +.video-controls { + background-color: #fff; + height: 50px; + clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px)); + position: absolute; + bottom: 25px; + left: 20px; + right: 20px; + display: flex; + align-items: center; + padding: 15px; + box-sizing: border-box; + gap: 10px; + opacity: 0; + transition: opacity .2s; + transition-delay: 1s; +} + +.video-controls > button { + background: none; + border: none; + height: 1.5rem; + width: 1.5rem; + cursor: pointer; +} + +.video-controls > button:hover { + color: var(--accent); +} + +.video-controls > button:active { + opacity: .6; +} + +.video-controls > input[type="range"] { + -webkit-appearance: none; + appearance: none; + background: linear-gradient(to right, var(--accent1) 0%, var(--accent2) 50%, #ddd 50%, #ddd 100%); + height: 5px; + cursor: pointer; +} + +.video-controls > input[type="range"]::-moz-range-thumb { + appearance: none; + background-color: black; + border: none; + border-radius: 0; + transform: rotate(45deg); + transition: transform .2s; + height: 13px; + width: 13px; +} + +.video-controls > input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + background-color: black; + border: none; + border-radius: 0; + transform: rotate(45deg); + transition: transform .2s; + height: 13px; + width: 13px; +} + +.video-controls > input[type="range"]::-moz-range-thumb:hover { + transform: rotate(0deg); +} + +.video-controls > input[type="range"]::-webkit-slider-thumb:hover { + transform: rotate(0deg); +} + +.video-controls > input[type="range"]::-moz-range-thumb:active { + transform: rotate(0deg); +} + +.video-controls > input[type="range"]::-webkit-slider-thumb:active { + transform: rotate(0deg); +} + +#video-controls-progress { + width: 100%; +} + .compatibility-icon { display: none !important; } @@ -1232,10 +1354,14 @@ li { } section { - padding-inline: 10px; + padding-inline: 15px; margin-left: 0; } + .video-section { + padding-bottom: 15px !important; + } + .gallery-card { flex: 1 0 300px; } @@ -1287,6 +1413,11 @@ li { padding-top: 40px; } + .flex-end-dynamic { + align-items: start; + justify-content: start; + } + #full-video-player { padding: 20px; } -- cgit v1.2.3