summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/209.html2
-rw-r--r--www/404.html2
-rw-r--r--www/about/index.html1
-rw-r--r--www/blog/index.html3
-rw-r--r--www/index.html1
-rw-r--r--www/projects/index.html25
-rw-r--r--www/scripts/blog.js6
-rw-r--r--www/scripts/captcha.js2
-rw-r--r--www/scripts/constants.js2
-rw-r--r--www/scripts/video.js91
-rw-r--r--www/scripts/videoprojects.js4
-rw-r--r--www/style.css133
12 files changed, 250 insertions, 22 deletions
diff --git a/www/209.html b/www/209.html
index 59fc22f..0644f4e 100644
--- a/www/209.html
+++ b/www/209.html
@@ -21,7 +21,7 @@
<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
<a href="/about/" class="link">About Me</a>
<a href="/projects/" class="link">Projects</a>
- <a href="/blog/" class="link">(dev)Blog</a>
+ <a href="/blog/" class="link">Library</a>
</div>
</div>
<div class="sidebar" id="sidebar">
diff --git a/www/404.html b/www/404.html
index f1bf9fb..deb8591 100644
--- a/www/404.html
+++ b/www/404.html
@@ -21,7 +21,7 @@
<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
<a href="/about/" class="link">About Me</a>
<a href="/projects/" class="link">Projects</a>
- <a href="/blog/" class="link">(dev)Blog</a>
+ <a href="/blog/" class="link">Library</a>
</div>
</div>
<div class="sidebar" id="sidebar">
diff --git a/www/about/index.html b/www/about/index.html
index 9fd4ef1..e5aacf6 100644
--- a/www/about/index.html
+++ b/www/about/index.html
@@ -19,6 +19,7 @@
</head>
<body onload="addNodes();">
+ <script defer src="/scripts/constants.js"></script>
<script defer src="/scripts/scroll.js"></script>
<script defer src="/scripts/onload.js"></script>
<script defer src="/scripts/captcha.js"></script>
diff --git a/www/blog/index.html b/www/blog/index.html
index 64ef45e..ac05222 100644
--- a/www/blog/index.html
+++ b/www/blog/index.html
@@ -12,6 +12,7 @@
</head>
<body onload="library();">
+ <script defer src="/scripts/constants.js"></script>
<script defer src="/scripts/onload.js"></script>
<script defer src="/scripts/scroll.js"></script>
<script defer src="/scripts/blog.js"></script>
@@ -30,7 +31,7 @@
<span>altaf-creator</span>
</div>
<div class="sidebar-progress-container" id="progressContainer"></div>
- <section style="border-top: none;">
+ <section style="border-top: none;" class="top-section-margin">
<div class="center-grid">
<div class="div-sizing">
<div class="flex-container flex-container-column flex-center-content" id="blog-container">
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 @@
</head>
<body onload="index();">
+ <script defer src="/scripts/constants.js"></script>
<script defer src="/scripts/onload.js"></script>
<script defer src="/scripts/scroll.js"></script>
<script defer src="/scripts/blog.js"></script>
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 @@
</head>
<body onload="addNodes();">
+ <script defer src="/scripts/constants.js"></script>
<script defer src="/scripts/onload.js"></script>
<script defer src="/scripts/scroll.js"></script>
<script defer src="/scripts/videoprojects.js"></script>
@@ -312,7 +313,7 @@
<span class="heading">Videography<span class="desktop"> Projects</span></span>
<div class="flex-container flex-container-normal flex-container-dynamicwrap gap wide" style="margin-top: 1rem;">
<div class="flex video-higlight-card shadow-filter">
- <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom', 'stringsoffreedom');">⏵</button>
<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
<div class="img">
<h1>Strings of Freedom</h1>
@@ -321,7 +322,7 @@
</div>
</div>
<div class="flex video-higlight-card shadow-filter">
- <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video', 'minds');">⏵</button>
<img src="/assets/images/video-hero/minds.png" alt="">
<div class="img">
<h1>MINDS Charity Car Wash Promotional</h1>
@@ -333,50 +334,50 @@
<div class="flex video-gallery-card narrow">
<div>
<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
- <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom', 'stringsoffreedom');">⏵</button>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
- <a href="" class="link">Strings of Freedom</a>
+ <a href="/video/stringsoffreedom/" class="link">Strings of Freedom</a>
<span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>
</div>
</div>
<div class="flex video-gallery-card narrow">
<div>
<img src="/assets/images/video-hero/minds.png" alt="">
- <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video', 'minds');">⏵</button>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
- <a href="" class="link">MINDS Charity Car Wash Promotional</a>
+ <a href="/video/minds/" class="link">MINDS Charity Car Wash Promotional</a>
<span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>
</div>
</div>
<div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/paperverse.png" alt="">
- <button onclick="loadVideo('/assets/videos/paperverse.mp4', 'Paperverse Hub, a videography competition entry');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/paperverse.mp4', 'Paperverse Hub, a videography competition entry', 'paperverse');">⏵</button>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content">
- <a href="" class="link">Paperverse Hub</a>
+ <a href="/video/paperverse/" class="link">Paperverse Hub</a>
<span>2026</span>
</div>
</div>
<div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/eid2026.png" alt="">
- <button onclick="loadVideo('/assets/videos/eid2026.mp4', 'A message for this Eid');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/eid2026.mp4', 'A message for this Eid', 'eid2026');">⏵</button>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
- <a href="" class="link">A message for this Eid</a>
+ <a href="/video/eid2026/" class="link">A message for this Eid</a>
<span>2026</span>
</div>
</div>
<div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/via3rp.png" alt="">
- <button onclick="loadVideo('/assets/videos/VIA.mp4', 'Secondary 3 Class VIA Project');">⏵</button>
+ <button onclick="loadVideo('/assets/videos/VIA.mp4', 'Secondary 3 Class VIA Project', 's3via');">⏵</button>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
- <a href="" class="link">Secondary 3 VIA Project</a>
+ <a href="/video/s3via/" class="link">Secondary 3 VIA Project</a>
<span>2025</span>
</div>
</div>
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) {
<div class="flex-container-normal chip-container">
${evaluatedTags}
</div>
- <a href="/blog/post.html?post=${id}" class="link"><h2>${title}</h2></a>
+ <a href="/blog/${id}" class="link"><h2>${title}</h2></a>
<p>${date}</p>
</div>
</div>
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 = `<i class="fa-solid fa-play"></i>`;
+ video.pause();
+ } else {
+ videoPlaying = true;
+ videoControlsPlay.innerHTML = `<i class="fa-solid fa-pause"></i>`;
+ 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 = `<i class="fa-solid fa-volume-xmark"></i>`;
+ video.muted = true;
+ } else {
+ audioEnabled = true;
+ videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume"></i>`;
+ video.muted = false;
+ }
+}
+
+function toggleMaximisation() {
+ if (videoMaximised) {
+ videoMaximised = false;
+ videoControlsMaximise.innerHTML = `<i class="fa-solid fa-maximize"></i>`;
+ video.exitFullscreen();
+ video.controls = false;
+ } else {
+ videoMaximised = true;
+ videoControlsMaximise.innerHTML = `<i class="fa-solid fa-minimize"></i>`;
+ 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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-25 22:03:14 +0000