Skip to content

Commit

Permalink
added dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bilalkamal
Bilalkamal committed Dec 30, 2024
1 parent fab90a6 commit af8b2ff
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 34 deletions.
4 changes: 2 additions & 2 deletions src/templates/base.jinja
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand Down Expand Up @@ -51,7 +51,7 @@
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="bg-[#FFFDF8] min-h-screen flex flex-col">
<body class="bg-[#FFFDF8] dark:bg-gray-900 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
<canvas id="snow-canvas"></canvas>
{% include 'components/navbar.jinja' %}
<!-- Main content wrapper -->
Expand Down
4 changes: 2 additions & 2 deletions src/templates/components/footer.jinja
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<footer class="w-full border-t-[3px] border-gray-900 mt-auto">
<footer class="w-full border-t-[3px] border-gray-900 dark:border-gray-400 mt-auto">
<div class="max-w-4xl mx-auto px-4 py-4">
<div class="flex justify-center items-center text-gray-900 text-sm">
<div class="flex justify-center items-center text-gray-900 dark:text-white text-sm">
<div class="flex flex-col items-center">
<div class="flex items-center">
made with ❤️ by
Expand Down
22 changes: 11 additions & 11 deletions src/templates/components/github_form.jinja
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="relative">
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 dark:border-gray-600 bg-[#fff4da] dark:bg-gray-800">
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
<form class="flex md:flex-row flex-col w-full h-full justify-center items-stretch space-y-5 md:space-y-0 md:space-x-5"
Expand All @@ -14,12 +14,12 @@
placeholder="https://github.com/..."
value="{{ github_url if github_url else '' }}"
required
class="border-[3px] w-full relative z-20 border-gray-900 placeholder-gray-600 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
class="border-[3px] w-full relative z-20 border-gray-900 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
</div>
<div class="relative w-auto flex-shrink-0 h-full group">
<div class="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<button type="submit"
class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 font-medium bg-[#ffc480] tracking-wide text-lg flex-shrink-0 text-gray-900">
class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 dark:border-gray-600 font-medium bg-[#ffc480] dark:bg-[#fca847] tracking-wide text-lg flex-shrink-0 text-gray-900">
Ingest
</button>
</div>
Expand All @@ -31,18 +31,18 @@
<div class="w-[200px] sm:w-[250px] mr-9 mt-4">
<div class="relative">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
<div class="flex relative z-20 border-[3px] border-gray-900 dark:border-gray-600 rounded bg-white dark:bg-gray-700">
<div class="relative flex items-center">
<select id="pattern_type"
name="pattern_type"
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] dark:bg-gray-600 dark:text-white focus:outline-none border-r-[3px] border-gray-900 dark:border-gray-600">
<option value="exclude"
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
Exclude
</option>
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
</select>
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
<svg class="absolute right-2 w-4 h-4 pointer-events-none dark:text-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
Expand All @@ -58,12 +58,12 @@
name="pattern"
placeholder="*.md, src/ "
value="{{ pattern if pattern else '' }}"
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
class="py-2 px-2 bg-[#E8F0FE] dark:bg-gray-600 dark:text-white focus:outline-none w-full">
</div>
</div>
</div>
<div class="w-[200px] sm:w-[200px] mt-3">
<label for="file_size" class="block text-gray-700 mb-1">
<label for="file_size" class="block text-gray-700 dark:text-gray-300 mb-1">
Include files under: <span id="size_value" class="font-bold">50kb</span>
</label>
<input type="range"
Expand All @@ -73,17 +73,17 @@
max="500"
required
value="{{ default_file_size }}"
class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000] ">
class="w-full h-3 bg-[#FAFAFA] dark:bg-gray-600 bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 dark:border-gray-600 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-300 [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:dark:border-gray-600 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
</div>
</div>
{% if show_examples %}
<!-- Example repositories section -->
<div class="mt-4">
<p class="opacity-70 mb-1">Try these example repositories:</p>
<p class="opacity-70 dark:text-gray-300 mb-1">Try these example repositories:</p>
<div class="flex flex-wrap gap-2">
{% for example in examples %}
<button onclick="submitExample('{{ example.url }}')"
class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
class="px-4 py-1 bg-[#EBDBB7] dark:bg-gray-700 hover:bg-[#FFC480] dark:hover:bg-[#fca847] text-gray-900 dark:text-white rounded transition-colors duration-200 border-[3px] border-gray-900 dark:border-gray-600 relative hover:-translate-y-px hover:-translate-x-px">
{{ example.name }}
</button>
{% endfor %}
Expand Down
53 changes: 48 additions & 5 deletions src/templates/components/navbar.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,58 @@
}
fetchGitHubStars();
// Dark mode toggle functionality
function initDarkMode() {
const isDark = localStorage.getItem('darkMode') === 'true' ||
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', isDark);
updateDarkModeIcon(isDark);
}
function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', isDark);
updateDarkModeIcon(isDark);
}
function updateDarkModeIcon(isDark) {
const moonIcon = document.getElementById('moon-icon');
const sunIcon = document.getElementById('sun-icon');
if (isDark) {
moonIcon.classList.add('hidden');
sunIcon.classList.remove('hidden');
} else {
moonIcon.classList.remove('hidden');
sunIcon.classList.add('hidden');
}
}
// Initialize dark mode on page load
document.addEventListener('DOMContentLoaded', initDarkMode);
</script>
<header class="sticky top-0 bg-[#FFFDF8] border-b-[3px] border-gray-900 z-50">
<header class="sticky top-0 bg-[#FFFDF8] dark:bg-gray-900 border-b-[3px] border-gray-900 dark:border-gray-400 z-50">
<div class="max-w-4xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center gap-4">
<h1 class="text-2xl font-bold tracking-tight">
<a href="/" class="hover:opacity-80 transition-opacity">
<span class="text-gray-900">Git</span><span class="text-[#fca847]">ingest</span>
<span class="text-gray-900 dark:text-white">Git</span><span class="text-[#fca847] dark:text-[#5CF1A4]">ingest</span>
</a>
</h1>
</div>
<!-- Navigation with updated styling -->
<nav class="flex items-center space-x-6">
<a href="/api"
class="text-gray-900 hover:-translate-y-0.5 transition-transform">API</a>
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform">API</a>
<div class="flex items-center gap-2">
<a href="https://github.com/cyclotruc/gitingest"
target="_blank"
rel="noopener noreferrer"
class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
<svg class="w-4 h-4"
fill="currentColor"
viewBox="0 0 24 24"
Expand All @@ -50,7 +81,7 @@
</svg>
GitHub
</a>
<div class="flex items-center text-sm text-gray-600">
<div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
<svg class="w-4 h-4 text-[#ffc480] mr-1"
fill="currentColor"
viewBox="0 0 20 20">
Expand All @@ -59,6 +90,18 @@
<span id="github-stars">0</span>
</div>
</div>
<button onclick="toggleDarkMode()"
class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label="Toggle dark mode">
<!-- Moon icon -->
<svg id="moon-icon" class="w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
<!-- Sun icon -->
<svg id="sun-icon" class="hidden w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
</nav>
</div>
</div>
Expand Down
Loading

0 comments on commit af8b2ff

Please sign in to comment.