[add] pwa, icons, banner, themes
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -2,45 +2,59 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<title>VReader - {{ metadata.title }}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#123636" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<!-- Markdown Overrides -->
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--color-primary-text);
|
||||
font-size: 1.50em !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
h2 {
|
||||
color: var(--color-primary-text);
|
||||
font-size: 1.25em !important;
|
||||
}
|
||||
p {
|
||||
color: var(--color-secondary-text);
|
||||
margin-top: 0.25em !important;
|
||||
margin-bottom: 1.5em !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>VReader - {{ metadata.title }}</title>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/tailwind.css">
|
||||
</head>
|
||||
<body class="bg-slate-200">
|
||||
<header class="w-screen h-16 bg-slate-300 mb-5">
|
||||
<body class="text-ptext bg-secondary">
|
||||
<header class="w-screen h-16 bg-secondary">
|
||||
<div
|
||||
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto rounded bg-slate-300"
|
||||
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto"
|
||||
>
|
||||
<a class="font-bold flex justify-center items-center" href="/">All Articles</a>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
id="content"
|
||||
class="w-11/12 md:w-5/6 mx-auto rounded px-10 py-5 bg-slate-300"
|
||||
>
|
||||
<div class="flex justify-center pb-5 w-full">
|
||||
<a target="_blank" href="https://www.youtube.com/watch?v={{ metadata.video_id }}">
|
||||
<img class="h-32 rounded" src="https://i.ytimg.com/vi_webp/{{ metadata.video_id }}/maxresdefault.webp"></img>
|
||||
<a class="flex gap-2 justify-center items-center" href="/">
|
||||
<img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img>
|
||||
<span class="font-bold flex justify-center items-center">VReader</span>
|
||||
</a>
|
||||
</div>
|
||||
<hr class="border-gray-500 pb-5" />
|
||||
{{ markdown_html|safe }}
|
||||
</div>
|
||||
</header>
|
||||
<main class="relative overflow-hidden bg-primary">
|
||||
<div id="container" class="h-[100dvh] overflow-auto md:px-6 w-11/12 md:w-5/6 mx-auto mt-3">
|
||||
<div id="content" class="rounded bg-secondary p-6 mb-3">
|
||||
<div class="flex justify-center w-full mb-6">
|
||||
<a target="_blank" href="https://www.youtube.com/watch?v={{ metadata.video_id }}">
|
||||
<img class="h-32 rounded" src="https://i.ytimg.com/vi_webp/{{ metadata.video_id }}/maxresdefault.webp"></img>
|
||||
</a>
|
||||
</div>
|
||||
<hr class="border-primary pb-5" />
|
||||
{{ markdown_html|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,39 +2,50 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=0.9, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="theme-color" content="#E5E7EB" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#123636" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<title>VReader - Home</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/tailwind.css">
|
||||
</head>
|
||||
<body class="bg-slate-200">
|
||||
<header class="w-screen h-16 bg-slate-300 mb-5">
|
||||
<body class="text-ptext bg-secondary">
|
||||
<header class="w-screen h-16 bg-secondary">
|
||||
<div
|
||||
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto rounded bg-slate-300"
|
||||
class="flex px-2 h-16 w-11/12 md:w-5/6 mx-auto"
|
||||
>
|
||||
<span class="font-bold flex justify-center items-center">VReader</span>
|
||||
<a class="flex gap-2 justify-center items-center" href="/">
|
||||
<img class="h-10 rounded items-center" src="/static/icons/icon512.png"></img>
|
||||
<span class="font-bold flex justify-center items-center">VReader</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex flex-col gap-4">
|
||||
<div id="submit"
|
||||
class="flex gap-4 items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-slate-300"
|
||||
>
|
||||
<input type="text" placeholder="YouTube URL" class="w-full p-2 bg-gray-700 text-white">
|
||||
<button class="p-2 bg-gray-500 text-gray-800 hover:bg-gray-100" type="submit">Generate</button>
|
||||
</div>
|
||||
<main class="relative overflow-hidden bg-primary">
|
||||
<div id="container" class="h-[100dvh] flex flex-col gap-3 px-4 overflow-auto md:px-6 mt-3">
|
||||
<div id="submit"
|
||||
class="flex gap-4 items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-secondary transition-all duration-200"
|
||||
>
|
||||
<input type="text" placeholder="YouTube URL" class="w-full px-2 py-1 bg-tertiary text-stext rounded">
|
||||
<button class="px-2 py-1 bg-tertiary text-stext hover:bg-primary rounded">Generate</button>
|
||||
</div>
|
||||
|
||||
{% for article in articles %}
|
||||
<a
|
||||
href="/articles/{{ article.video_id }}"
|
||||
class="flex items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-slate-300 hover:bg-slate-400 transition-all duration-200"
|
||||
>
|
||||
<img class="h-14 md:h-24 mr-6 rounded" src="https://i.ytimg.com/vi_webp/{{ article.video_id }}/maxresdefault.webp"></img>
|
||||
<span>{{ article.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% for article in articles %}
|
||||
<a
|
||||
href="/articles/{{ article.video_id }}"
|
||||
class="flex items-center text-lg w-11/12 md:w-4/6 mx-auto rounded px-6 py-3 bg-secondary hover:bg-tertiary transition-all duration-200"
|
||||
>
|
||||
<img class="h-14 md:h-24 mr-6 rounded" src="https://i.ytimg.com/vi_webp/{{ article.video_id }}/maxresdefault.webp"></img>
|
||||
<span>{{ article.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="mb-0.5"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
const LOADING_SVG = `<svg
|
||||
@@ -92,14 +103,6 @@
|
||||
return fetch(data.url, fetchObj).then((resp) => resp.json());
|
||||
}
|
||||
|
||||
function getVideoArticle(videoID) {
|
||||
return apiCall({
|
||||
url: "/api/v1/generate",
|
||||
method: "POST",
|
||||
data: { video: videoID },
|
||||
});
|
||||
}
|
||||
|
||||
function generateAction(){
|
||||
let inputEl = document.querySelector("input");
|
||||
let inputVal = inputEl.value;
|
||||
|
||||
Reference in New Issue
Block a user