diff options
| author | altaf-creator <dev@altafcreator.com> | 2026-05-21 20:45:15 +0800 |
|---|---|---|
| committer | altaf-creator <dev@altafcreator.com> | 2026-05-21 20:45:15 +0800 |
| commit | 8fea6e4be4a61cd2bfcb310166fbe6b2541b9ff4 (patch) | |
| tree | 3e144c0033200ef792b6e4284ac2789d77b18ccb /templates | |
| parent | 39c92cd0c75193465ddc7b96e9d8bbe23dff795c (diff) | |
video and blog
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/blogpost.html | 10 | ||||
| -rw-r--r-- | templates/video.html | 76 |
2 files changed, 79 insertions, 7 deletions
diff --git a/templates/blogpost.html b/templates/blogpost.html index f5b1ff1..16f908e 100644 --- a/templates/blogpost.html +++ b/templates/blogpost.html @@ -7,7 +7,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <title>Blog / Loading... • altaf-creator</title> + <title>{[{title}]} • altaf-creator</title> <link rel="stylesheet" href="/packages/fontawesome-free-7.2.0-web/css/all.css"> <script src="/packages/markdown-it-14.1.0/dist/markdown-it.js" type="module"></script> <style> @@ -18,8 +18,7 @@ </head> -<body onload="blog(getUrlVars()['post'])"> - <script defer src="/scripts/blog.js"></script> +<body onload="addNodes()"> <script defer src="/scripts/scroll.js"></script> <script defer src="/scripts/onload.js"></script> <div class="floating-nav-container"> @@ -55,10 +54,7 @@ </div> </div> </section> - <div id="content"> - <h1>Hello, world!</h1> - <p>i'm exhausted.</p> - </div> + {[{content}]} </body> </html> diff --git a/templates/video.html b/templates/video.html new file mode 100644 index 0000000..5f52065 --- /dev/null +++ b/templates/video.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <title>{[{title}]} • altaf-creator</title> + <link rel="stylesheet" href="/packages/fontawesome-free-7.2.0-web/css/all.css"> +</head> + +<body onload="addNodes()"> + <script defer src="/scripts/onload.js"></script> + <script defer src="/scripts/scroll.js"></script> + <script defer src="/scripts/video.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <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">Library</a> + </div> + </div> + <div class="sidebar" id="sidebar"> + <a href="/"> + <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> + </a> + <span>altaf-creator</span> + </div> + <div class="sidebar-progress-container" id="progressContainer"> + </div> + <section class="normal-section video-section"> + <div class="shadow-filter"> + <video class="video" id="video"> + </video> + <div class="shadow-filter"> + <div class="video-controls"> + <button id="video-controls-play"><i class="fa-solid fa-play"></i></button> + <span><span id="video-controls-currenttime">00:00</span><span id="video-controls-totaltime" class="desktop half-opacity-text">/00:00</span> + </span> + <input type="range" id="video-controls-progress" min="0" max="1" value="0" step="any"></progress> + <button id="video-controls-mutetoggle"><i class="fa-solid fa-volume"></i></button> + <button id="video-controls-maximise"><i class="fa-solid fa-maximize"></i></button> + </div> + </div> + </div> + </section> + <section class="normal-section"> + <div class="center-grid"> + <div class="div-sizing"> + <div class="flex-container flex-container-normal flex-container-dynamicwrap gap"> + <div class="flex"> + <h1>{[{video-title}]}</h1> + <p class="half-opacity-text"><i class="fa-solid fa-calendar"></i> {[{date}]}</p> + <p>{[{description}]}</p> + </div> + <div class="flex-container flex-container-column flex-end"> + <div class="flex-container flex-container-normal flex-container-dynamicwrap gap flex-end flex-end-dynamic"> + <a class="button button-inline" href="#" id="video-download-btn"><i class="fa-solid fa-download"></i> Download</a> + <a class="button button-inline" href="#"><i class="fa-solid fa-share-nodes" id="video-share-btn"></i></a> + </div> + <p style="text-align: end;" class="half-opacity-text" id="video-license-parent">Licensed under<br> + <a class="link" href="#" id="video-license-info"><a> + </p> + </div> + </div> + </div> + </div> + </section> + {[{content}]} +</body> + +</html> |