feat(tailwind): add tailwind config, update general pages using tiles

Makefile

@@ -1,7 +1,7 @@
 PREFIX=/usr/local
 BINDIR=$(PREFIX)/bin
 RESOURCEDIR=$(PREFIX)/share/gitstats
-RESOURCES=gitstats.css sortable.js *.gif
+RESOURCES=gitstats.css sortable.js *.gif tailwind.json
 BINARIES=gitstats
 VERSION=$(shell git describe 2>/dev/null || git rev-parse --short HEAD 2>/dev/null || date +%Y-%m-%d)
 SEDVERSION=perl -pi -e 's/VERSION = 0/VERSION = "$(VERSION)"/' --

gitstats

@@ -853,7 +853,7 @@ class HTMLReportCreator(ReportCreator):
 		binarypath = os.path.dirname(os.path.abspath(__file__))
 		secondarypath = os.path.join(binarypath, '..', 'share', 'gitstats')
 		basedirs = [binarypath, secondarypath, '/usr/share/gitstats']
-		for file in (conf['style'], 'sortable.js', 'arrow-up.gif', 'arrow-down.gif', 'arrow-none.gif'):
+		for file in (conf['style'], 'sortable.js', 'arrow-up.gif', 'arrow-down.gif', 'arrow-none.gif', 'tailwind.json'):
 			for base in basedirs:
 				src = base + '/' + file
 				if os.path.exists(src):
@@ -866,21 +866,47 @@ class HTMLReportCreator(ReportCreator):
 		# General
 		format = '%Y-%m-%d %H:%M:%S'
 
-		general_content = ['<h1 class="text-3xl font-bold underline">GitStats - %s</h1>' % data.projectname]
+		# general_content = ['<h1 class="text-3xl font-bold underline">GitStats - %s</h1>' % data.projectname]
+
+		general_content = []
+
+
+		tiles = '\n'.join([
+			self.tilesItemStat(title='Project name', info=data.projectname),
+			self.tilesItemStat(title='Generated', info=datetime.datetime.now().strftime(format)),
+			self.tilesItemStat(title='Report Period', info=f'{data.getFirstCommitDate().strftime(format)} to {data.getLastCommitDate().strftime(format)}'),
+		])
+
+		cards = '\n'.join([
+			self.cardItemStat(title='Branches', count=data.total_branches), 
+			self.cardItemStat(title='Tags', count=data.total_tags), 
+			self.cardItemStat(title='Age', count=f'{data.getCommitDeltaDays():.1f} days'), 
+			self.cardItemStat(title='Active days', count=f'{len(data.getActiveDays())}', stat=f'{(100.0 * len(data.getActiveDays()) / data.getCommitDeltaDays()):3.2f}%', arrow='up'), 
+			self.cardItemStat(title='Total files', count=data.getTotalFiles()), 
+			self.cardItemStat(title='Total LOC', count=data.getTotalLOC()),
+			self.cardItemStat(title='Total lines added', count=data.total_lines_added, stat=f'{((data.total_lines_added/data.getTotalLOC())*100):.2f}%', arrow='up'),
+			self.cardItemStat(title='Total lines removed', count=data.total_lines_removed, stat=f'{((data.total_lines_removed/data.getTotalLOC())*100):.2f}%', arrow='up'), 
+			self.cardItemStat(title='Total commits', count=data.getTotalCommits(), stat=f'{(float(data.getTotalCommits()) / len(data.getActiveDays())):.1f}', arrow='up'),
+			self.cardItemStat(title='Authors', count=data.getTotalAuthors(), stat=f'{((1.0 * data.getTotalCommits()) / data.getTotalAuthors()):.1f}', arrow='up'),
+			])
+		
+		general_content.append(f'<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">{tiles}</div>')
+
+		general_content.append(f'<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">{cards}</div>')
 
-		general_content.append('<div><div class="card-body"><dl>')
-		general_content.append('<dt>Project name</dt><dd>%s (%s branches, %s tags)</dd>' % (data.projectname, data.total_branches, data.total_tags))
-		general_content.append('<dt>Generated</dt><dd>%s (in %d seconds)</dd>' % (datetime.datetime.now().strftime(format), time.time() - data.getStampCreated()))
-		general_content.append('<dt>Generator</dt><dd><a href="http://gitstats.sourceforge.net/">GitStats</a> (version %s), %s, %s</dd>' % (getversion(), getgitversion(), getgnuplotversion()))
-		general_content.append('<dt>Report Period</dt><dd>%s to %s</dd>' % (data.getFirstCommitDate().strftime(format), data.getLastCommitDate().strftime(format)))
-		general_content.append('<dt>Age</dt><dd>%d days, %d active days (%3.2f%%)</dd>' % (data.getCommitDeltaDays(), len(data.getActiveDays()), (100.0 * len(data.getActiveDays()) / data.getCommitDeltaDays())))
-		general_content.append('<dt>Total Files</dt><dd>%s</dd>' % data.getTotalFiles())
-		general_content.append('<dt>Total Lines of Code</dt><dd>%s (%d added, %d removed)</dd>' % (data.getTotalLOC(), data.total_lines_added, data.total_lines_removed))
-		general_content.append('<dt>Total Commits</dt><dd>%s (average %.1f commits per active day, %.1f per all days)</dd>' % (data.getTotalCommits(), float(data.getTotalCommits()) / len(data.getActiveDays()), float(data.getTotalCommits()) / data.getCommitDeltaDays()))
-		general_content.append('<dt>Authors</dt><dd>%s (average %.1f commits per author)</dd>' % (data.getTotalAuthors(), (1.0 * data.getTotalCommits()) / data.getTotalAuthors()))
-		general_content.append('</dl></div></div>')
+		# general_content.append('<div><div class="card-body"><dl>')
+		# general_content.append('<dt>Project name</dt><dd>%s (%s branches, %s tags)</dd>' % (data.projectname, data.total_branches, data.total_tags))
+		# general_content.append('<dt>Generated</dt><dd>%s (in %d seconds)</dd>' % (datetime.datetime.now().strftime(format), time.time() - data.getStampCreated()))
+		# general_content.append('<dt>Generator</dt><dd><a href="http://gitstats.sourceforge.net/">GitStats</a> (version %s), %s, %s</dd>' % (getversion(), getgitversion(), getgnuplotversion()))
+		# general_content.append('<dt>Report Period</dt><dd>%s to %s</dd>' % (data.getFirstCommitDate().strftime(format), data.getLastCommitDate().strftime(format)))
+		# general_content.append('<dt>Age</dt><dd>%d days, %d active days (%3.2f%%)</dd>' % (data.getCommitDeltaDays(), len(data.getActiveDays()), (100.0 * len(data.getActiveDays()) / data.getCommitDeltaDays())))
+		# general_content.append('<dt>Total Files</dt><dd>%s</dd>' % data.getTotalFiles())
+		# general_content.append('<dt>Total Lines of Code</dt><dd>%s (%d added, %d removed)</dd>' % (data.getTotalLOC(), data.total_lines_added, data.total_lines_removed))
+		# general_content.append('<dt>Total Commits</dt><dd>%s (average %.1f commits per active day, %.1f per all days)</dd>' % (data.getTotalCommits(), float(data.getTotalCommits()) / len(data.getActiveDays()), float(data.getTotalCommits()) / data.getCommitDeltaDays()))
+		# general_content.append('<dt>Authors</dt><dd>%s (average %.1f commits per author)</dd>' % (data.getTotalAuthors(), (1.0 * data.getTotalCommits()) / data.getTotalAuthors()))
+		# general_content.append('</dl></div></div>')
 
-		self.printPage(general_content, f'{path}/index.html', "FRONT'S STATS")
+		self.printPage(general_content, f'{path}/index.html', f"{data.projectname}'S STATS")
 
 		###
 		# activity.html
@@ -1404,7 +1430,7 @@ class HTMLReportCreator(ReportCreator):
 			lines_content.append('<tr><th>%s</th><td style="background-color: rgb(%d, 0, 0)">%d</td></tr>' % (i, r, commits))
 		lines_content.append('</tr></table>')
 
-		self.printPage(lines_content, f'{path}/tags.html', title='Lines')
+		self.printPage(lines_content, f'{path}/lines.html', title='Lines')
 
 		###
 		# tags.html
@@ -1746,7 +1772,8 @@ plot """
 
 	def getHeader(self, title = None):
 		title = title or f'GitStats - {self.title}'
-		return """
+		config = json.load(open('tailwind.json'))
+		return '''
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -1755,8 +1782,9 @@ plot """
 	<link rel="stylesheet" href="%s" type="text/css" />
 	<meta name="generator" content="GitStats %s" />
 	<script src="https://cdn.tailwindcss.com"></script>
+	<script> tailwind.config = %s </script>
 </head>
-""" % (title, conf['style'], getversion())
+''' % (title, conf['style'], getversion(), json.dumps(config))
 	
 
 	def getBody(self, content, title):
@@ -1775,37 +1803,131 @@ plot """
 	<!-- ===== Preloader End ===== -->
 
 	<!-- ===== Page Wrapper Start ===== -->
-	<div class="flex h-screen overflow-hidden antialiased text-gray-900 bg-gray-100 ">
+	<div class="flex h-screen overflow-hidden">
 		{sidebar}
 
 		<!-- ===== Content Area Start ===== -->
 		<div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
 			{topBar}
 			<!-- Main content -->
-			<main class="p-2">{content}</main>
+			<main>
+				<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+					{content}
+				</div>
+			</main>
 		</div>
 		<!-- ===== Content Area End ===== -->
 
 	</div>
 	<!-- ===== Page Wrapper End ===== -->
 
-	<script src="//unpkg.com/alpinejs" defer></script>
+	<!-- <script src="//unpkg.com/alpinejs" defer></script> -->
+	<!-- Alpine Plugins -->
+	<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.13.0/dist/cdn.min.js"></script>
+	
+	<!-- Alpine Core -->
+	<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
 	<script type="text/javascript" src="sortable.js"></script>
 </body>
 '''
+	def tilesItemStat(self, title='', info='', icon=None, stat=None):
+		if icon is not None:
+			icon = f'''
+<div class="flex items-center justify-center mb-6 md:mb-0">
+	<span class="inline-flex justify-center items-center w-12 h-12 rounded-full text-emerald-500 bg-gray-50 dark:bg-slate-800 md:mr-6">
+		<svg viewBox="0 0 24 24" width="24" height="24" class="inline-block">
+			<path fill="currentColor" d="M15 15V17H18V20H20V17H23V15H20V12H18V15M14.97 11.61C14.85 10.28 13.59 8.97 12 9C10.3 9.03 9 10.3 9 12C9 13.7 10.3 14.94 12 15C12.38 15 12.77 14.92 13.14 14.77C13.41 13.67 13.86 12.63 14.97 11.61M13 16H7C7 14.9 6.11 14 5 14V10C6.11 10 7 9.11 7 8H17C17 9.11 17.9 10 19 10V10.06C19.67 10.06 20.34 10.18 21 10.4V6H3V18H13.32C13.1 17.33 13 16.66 13 16Z"></path>
+		</svg>
+	</span>
+</div>'''
+			
+		if stat is not None:
+			stat = '''
+<div class="text-center md:text-right space-y-2">
+	<p class="text-sm text-gray-500">Home Loan Account</p>
+		<div>
+			<div class="inline-flex items-center capitalize leading-none text-xs border rounded-full py-1 px-3 bg-emerald-500 border-emerald-500 text-white">
+			<span>deposit</span>
+		</div>
+	</div>
+</div>'''
+
+		return f'''
+<div class="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
+	<div class="flex flex-col">
+		<div class="flex-1 p-6">
+			<div class="justify-between items-center block md:flex">
+				<div class="flex items-center justify-center mb-6 md:mb-0">
+					<div class="justify-start items-center block md:flex">
+						{icon or ''}
+						<div class="flex items-center justify-center">
+							<div class="text-center text-black dark:text-white space-y-1 md:text-left md:mr-6">
+								<h4 class="text-xl">{info}</h4>
+								<p>{title}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex items-center justify-center">
+					{stat or ''}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>'''
+
+	def cardItemStat(self, count='$3.456K', title='Total views', stat = None, arrow= 'up', icon = None):
+
+		stat_html = ''
+		if stat is not None:
+			stat_html = f'''
+<span class="flex items-center gap-1 text-sm font-medium text-meta-3">
+	{stat}
+	<svg class="fill-meta-3" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+		{arrow is 'up' and '<path d="M4.35716 2.47737L0.908974 5.82987L5.0443e-07 4.94612L5 0.0848689L10 4.94612L9.09103 5.82987L5.64284 2.47737L5.64284 10.0849L4.35716 10.0849L4.35716 2.47737Z" fill=""></path>'}
+		{arrow is 'down'  and '<path d="M5.64284 7.69237L9.09102 4.33987L10 5.22362L5 10.0849L-8.98488e-07 5.22362L0.908973 4.33987L4.35716 7.69237L4.35716 0.0848701L5.64284 0.0848704L5.64284 7.69237Z" fill=""></path>'}
+    </svg>
+</span>'''
+			
+		if icon is None:
+			icon = '''
+<svg class="fill-primary dark:fill-white" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11 15.1156C4.19376 15.1156 0.825012 8.61876 0.687512 8.34376C0.584387 8.13751 0.584387 7.86251 0.687512 7.65626C0.825012 7.38126 4.19376 0.918762 11 0.918762C17.8063 0.918762 21.175 7.38126 21.3125 7.65626C21.4156 7.86251 21.4156 8.13751 21.3125 8.34376C21.175 8.61876 17.8063 15.1156 11 15.1156ZM2.26876 8.00001C3.02501 9.27189 5.98126 13.5688 11 13.5688C16.0188 13.5688 18.975 9.27189 19.7313 8.00001C18.975 6.72814 16.0188 2.43126 11 2.43126C5.98126 2.43126 3.02501 6.72814 2.26876 8.00001Z" fill=""></path>
+    <path d="M11 10.9219C9.38438 10.9219 8.07812 9.61562 8.07812 8C8.07812 6.38438 9.38438 5.07812 11 5.07812C12.6156 5.07812 13.9219 6.38438 13.9219 8C13.9219 9.61562 12.6156 10.9219 11 10.9219ZM11 6.625C10.2437 6.625 9.625 7.24375 9.625 8C9.625 8.75625 10.2437 9.375 11 9.375C11.7563 9.375 12.375 8.75625 12.375 8C12.375 7.24375 11.7563 6.625 11 6.625Z" fill=""></path>
+</svg>'''
+
+		return f'''
+<div class="rounded-sm border border-stroke bg-white px-7.5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark">
+	<div class="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+		{icon}
+	</div>
+
+    <div class="mt-4 flex items-end justify-between">
+		<div>
+			<h4 class="text-title-md font-bold text-black dark:text-white">{count}</h4>
+            <span class="text-sm font-medium">{title}</span>
+        </div>
+
+        {stat_html}
+	</div>
+</div>'''
 	
 	def getSideBar(self):
 		menu = ''.join([f'''
-<a href="{href}"
-	class="flex items-center p-2 text-gray-500 transition-colors rounded-md dark:text-light hover:bg-primary-100 dark:hover:bg-primary"
-	role="button">
-	<span aria-hidden="true">
-		<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-		</svg>
-	</span>
-	<span class="ml-2 text-sm">{label}</span>
-</a>
+<li>
+	<a href="{href}"
+		@click="selected = (selected === '{label}' ? '':'{label}')"
+		:class="{{ 'bg-graydark dark:bg-meta-4': (selected === '{label}') }}"
+		class="group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4"
+		role="button">
+		<span aria-hidden="true">
+			<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+			</svg>
+		</span>
+		<span class="ml-2 text-sm">{label}</span>
+	</a>
+</li>
 ''' for (label, href) in [
 			("General", "index.html"),
 			("Activity", "activity.html"),
@@ -1817,18 +1939,49 @@ plot """
 
 		return f'''
 <!-- Sidebar -->
-<aside class="flex-shrink-0 hidden w-64 bg-white border-r dark:border-primary-darker dark:bg-darker md:block">
-	<div class="flex flex-col h-full">
+<aside :class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
+	@click.outside="sidebarToggle = false"
+	class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 -translate-x-full">
+
+	<!-- SIDEBAR HEADER -->
+	<div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+		<a href="index.html">
+		<img src="https://demo.tailadmin.com/src/images/logo/logo.svg" alt="Logo" />
+		</a>
+
+		<button
+		class="block lg:hidden"
+		@click.stop="sidebarToggle = !sidebarToggle"
+		>
+		<svg
+			class="fill-current"
+			width="20"
+			height="18"
+			viewBox="0 0 20 18"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+			d="M19 8.175H2.98748L9.36248 1.6875C9.69998 1.35 9.69998 0.825 9.36248 0.4875C9.02498 0.15 8.49998 0.15 8.16248 0.4875L0.399976 8.3625C0.0624756 8.7 0.0624756 9.225 0.399976 9.5625L8.16248 17.4375C8.31248 17.5875 8.53748 17.7 8.76248 17.7C8.98748 17.7 9.17498 17.625 9.36248 17.475C9.69998 17.1375 9.69998 16.6125 9.36248 16.275L3.02498 9.8625H19C19.45 9.8625 19.825 9.4875 19.825 9.0375C19.825 8.55 19.45 8.175 19 8.175Z"
+			fill=""
+			/>
+		</svg>
+		</button>
+	</div>
+	<!-- SIDEBAR HEADER -->
+
+	<div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
 		  <!-- Sidebar links -->
-		  <nav aria-label="Main" class="flex-1 px-2 py-4 space-y-2 overflow-y-hidden hover:overflow-y-auto">
-		  {menu}
+		  <nav aria-label="Main" class="mt-5 px-4 py-4 lg:mt-9 lg:px-6" x-data="{{selected: $persist('General')}}">
+			<div>
+				<h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
+				<ul class="mb-6 flex flex-col gap-1.5">
+				{menu}
+				</ul>
+			</div>
 		  </nav>
 		  <!-- Sidebar footer -->
-		  <div class="flex-shrink-0 px-2 py-4 space-y-2">
-			<button type="button" class="flex items-center justify-center w-full px-4 py-2 text-sm text-white rounded-md bg-blue hover:bg-primary-dark focus:outline-none focus:ring focus:ring-primary-dark focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-offset-dark">
-				<span>Customize</span>
-			</button>
-		  </div>
+		  <div class="flex-shrink-0 px-2 py-4 space-y-2"></div>
 	</div>
 </aside>
 '''
@@ -1836,11 +1989,107 @@ plot """
 	def getTopBar(self, title):
 		return f'''
 <!-- Navbar -->
-<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1">
+<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
 	<div class="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-		<a href="#" class="inline-block text-2xl font-bold tracking-wider uppercase text-primary-dark">{title}</a>
+		<div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+			<!-- Hamburger Toggle BTN -->
+			<button
+				class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+				@click.stop="sidebarToggle = !sidebarToggle">
+				<span class="relative block h-5.5 w-5.5 cursor-pointer">
+				<span class="du-block absolute right-0 h-full w-full">
+					<span
+					class="relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white"
+					:class="{{ '!w-full delay-300': !sidebarToggle }}"
+					></span>
+					<span
+					class="relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white"
+					:class="{{ '!w-full delay-400': !sidebarToggle }}"
+					></span>
+					<span
+					class="relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white"
+					:class="{{ '!w-full delay-500': !sidebarToggle }}"
+					></span>
+				</span>
+				<span class="du-block absolute right-0 h-full w-full rotate-45">
+					<span
+					class="absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white"
+					:class="{{ '!h-0 delay-[0]': !sidebarToggle }}"
+					></span>
+					<span
+					class="delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white"
+					:class="{{ '!h-0 dealy-200': !sidebarToggle }}"
+					></span>
+				</span>
+				</span>
+			</button>
+			<!-- Hamburger Toggle BTN -->
+			<a class="block flex-shrink-0 lg:hidden" href="index.html">
+				<img src="https://demo.tailadmin.com/src/images/logo/logo-icon.svg" alt="Logo" />
+			</a>
+		</div>
+		
+		<div class="hidden sm:block">
+			<a href="#" class="inline-block text-2xl font-bold tracking-wider uppercase">{title}</a>
+		</div>
 		
 		<div class="flex items-center gap-3 2xsm:gap-7">
+		<ul class="flex items-center gap-2 2xsm:gap-4">
+			<li>
+				<!-- Dark Mode Toggler -->
+				<label
+					:class="darkMode ? 'bg-primary' : 'bg-stroke'"
+					class="relative m-0 block h-7.5 w-14 rounded-full"
+				>
+					<input
+					type="checkbox"
+					:value="darkMode"
+					@change="darkMode = !darkMode"
+					class="absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
+					/>
+					<span
+					:class="darkMode && '!right-1 !translate-x-full'"
+					class="absolute left-1 top-1/2 flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear"
+					>
+					<span class="dark:hidden">
+						<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						>
+						<path
+							d="M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z"
+							fill="#969AA1"
+						/>
+						<path
+							d="M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z"
+							fill="#969AA1"
+						/>
+						</svg>
+					</span>
+					<span class="hidden dark:inline-block">
+						<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						>
+						<path
+							d="M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z"
+							fill="#969AA1"
+						/>
+						</svg>
+					</span>
+					</span>
+				</label>
+				<!-- Dark Mode Toggler -->
+			</li>
+		</ul>
+
+		<!-- User Area -->
 		<div class="relative" x-data="{{ dropdownOpen: false }}" @click.outside="dropdownOpen = false">
 			<a class="flex items-center gap-4" href="#" @click.prevent="dropdownOpen = ! dropdownOpen">
 				<span class="hidden text-right lg:block">
@@ -1897,7 +2146,9 @@ plot """
 			</div>
 			<!-- Dropdown End -->
       		</div>
-	  	</div>			
+	  	</div>	
+		<!-- User Area -->		
+
 	</div>
 </header>'''
 	
@@ -1915,7 +2166,6 @@ Please see the manual page for more details.
 """ % conf
 	print(text)
 
-
 class GitStats:
 	def run(self, args_orig):
 		optlist, args = getopt.getopt(args_orig, 'hc:', ["help"])
@@ -1999,4 +2249,6 @@ if __name__=='__main__':
 	g.run(sys.argv[1:])
 
 
-# https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template/tree/main
+# https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template/tree/main
+# https://codepen.io/Zsena/pen/ZEMaaoX?editors=1010
+# https://sebastiandedeyne.com/non-reactive-data-in-alpine-js/

tailwind.json

@@ -0,0 +1,222 @@
+{
+    "darkMode": "class",
+    "theme": {
+      "extend": {
+        "colors": {
+          "current": "currentColor",
+          "transparent": "transparent",
+          "white": "#FFFFFF",
+          "black": "#1C2434",
+          "black-2": "#010101",
+          "body": "#64748B",
+          "bodydark": "#AEB7C0",
+          "bodydark1": "#DEE4EE",
+          "bodydark2": "#8A99AF",
+          "primary": "#3C50E0",
+          "secondary": "#80CAEE",
+          "stroke": "#E2E8F0",
+          "gray": "#EFF4FB",
+          "graydark": "#333A48",
+          "gray-2": "#F7F9FC",
+          "gray-3": "#FAFAFA",
+          "whiten": "#F1F5F9",
+          "whiter": "#F5F7FD",
+          "boxdark": "#24303F",
+          "boxdark-2": "#1A222C",
+          "strokedark": "#2E3A47",
+          "form-strokedark": "#3d4d60",
+          "form-input": "#1d2a39",
+          "meta-1": "#DC3545",
+          "meta-2": "#EFF2F7",
+          "meta-3": "#10B981",
+          "meta-4": "#313D4A",
+          "meta-5": "#259AE6",
+          "meta-6": "#FFBA00",
+          "meta-7": "#FF6766",
+          "meta-8": "#F0950C",
+          "meta-9": "#E5E7EB",
+          "success": "#219653",
+          "danger": "#D34053",
+          "warning": "#FFA70B"
+      },
+      "fontSize": {
+          "title-xxl": ["44px", "55px"],
+          "title-xl": ["36px", "45px"],
+          "title-xl2": ["33px", "45px"],
+          "title-lg": ["28px", "35px"],
+          "title-md": ["24px", "30px"],
+          "title-md2": ["26px", "30px"],
+          "title-sm": ["20px", "26px"],
+          "title-xsm": ["18px", "24px"]
+      },
+      "spacing": {
+          "4.5": "1.125rem",
+          "5.5": "1.375rem",
+          "6.5": "1.625rem",
+          "7.5": "1.875rem",
+          "8.5": "2.125rem",
+          "9.5": "2.375rem",
+          "10.5": "2.625rem",
+          "11": "2.75rem",
+          "11.5": "2.875rem",
+          "12.5": "3.125rem",
+          "13": "3.25rem",
+          "13.5": "3.375rem",
+          "14": "3.5rem",
+          "14.5": "3.625rem",
+          "15": "3.75rem",
+          "15.5": "3.875rem",
+          "16": "4rem",
+          "16.5": "4.125rem",
+          "17": "4.25rem",
+          "17.5": "4.375rem",
+          "18": "4.5rem",
+          "18.5": "4.625rem",
+          "19": "4.75rem",
+          "19.5": "4.875rem",
+          "21": "5.25rem",
+          "21.5": "5.375rem",
+          "22": "5.5rem",
+          "22.5": "5.625rem",
+          "24.5": "6.125rem",
+          "25": "6.25rem",
+          "25.5": "6.375rem",
+          "26": "6.5rem",
+          "27": "6.75rem",
+          "27.5": "6.875rem",
+          "29": "7.25rem",
+          "29.5": "7.375rem",
+          "30": "7.5rem",
+          "31": "7.75rem",
+          "32.5": "8.125rem",
+          "34": "8.5rem",
+          "34.5": "8.625rem",
+          "35": "8.75rem",
+          "36.5": "9.125rem",
+          "37.5": "9.375rem",
+          "39": "9.75rem",
+          "39.5": "9.875rem",
+          "40": "10rem",
+          "42.5": "10.625rem",
+          "44": "11rem",
+          "45": "11.25rem",
+          "46": "11.5rem",
+          "47.5": "11.875rem",
+          "49": "12.25rem",
+          "50": "12.5rem",
+          "52": "13rem",
+          "52.5": "13.125rem",
+          "54": "13.5rem",
+          "54.5": "13.625rem",
+          "55": "13.75rem",
+          "55.5": "13.875rem",
+          "59": "14.75rem",
+          "60": "15rem",
+          "62.5": "15.625rem",
+          "65": "16.25rem",
+          "67": "16.75rem",
+          "67.5": "16.875rem",
+          "70": "17.5rem",
+          "72.5": "18.125rem",
+          "73": "18.25rem",
+          "75": "18.75rem",
+          "90": "22.5rem",
+          "94": "23.5rem",
+          "95": "23.75rem",
+          "100": "25rem",
+          "115": "28.75rem",
+          "125": "31.25rem",
+          "132.5": "33.125rem",
+          "150": "37.5rem",
+          "171.5": "42.875rem",
+          "180": "45rem",
+          "187.5": "46.875rem",
+          "203": "50.75rem",
+          "230": "57.5rem",
+          "242.5": "60.625rem"
+      },
+      "maxWidth": {
+          "2.5": "0.625rem",
+          "3": "0.75rem",
+          "4": "1rem",
+          "11": "2.75rem",
+          "13": "3.25rem",
+          "14": "3.5rem",
+          "15": "3.75rem",
+          "22.5": "5.625rem",
+          "25": "6.25rem",
+          "30": "7.5rem",
+          "34": "8.5rem",
+          "35": "8.75rem",
+          "40": "10rem",
+          "42.5": "10.625rem",
+          "44": "11rem",
+          "45": "11.25rem",
+          "60": "15rem",
+          "70": "17.5rem",
+          "90": "22.5rem",
+          "94": "23.5rem",
+          "125": "31.25rem",
+          "132.5": "33.125rem",
+          "142.5": "35.625rem",
+          "150": "37.5rem",
+          "180": "45rem",
+          "203": "50.75rem",
+          "230": "57.5rem",
+          "242.5": "60.625rem",
+          "270": "67.5rem",
+          "280": "70rem",
+          "292.5": "73.125rem"
+      },
+      "maxHeight": {
+          "35": "8.75rem",
+          "70": "17.5rem",
+          "90": "22.5rem",
+          "550": "34.375rem",
+          "300": "18.75rem"
+      },
+      "minWidth": {
+          "22.5": "5.625rem",
+          "42.5": "10.625rem",
+          "47.5": "11.875rem",
+          "75": "18.75rem"
+      },
+      "zIndex": {
+          "999999": "999999",
+          "99999": "99999",
+          "9999": "9999",
+          "999": "999",
+          "99": "99",
+          "9": "9",
+          "1": "1"
+      },
+      "opacity": {
+          "65": ".65"
+      },
+      "transitionProperty": { "width": "width", "stroke": "stroke" },
+      "borderWidth": {
+          "6": "6px"
+      },
+      "boxShadow": {
+          "default": "0px 8px 13px -3px rgba(0, 0, 0, 0.07)",
+          "card": "0px 1px 3px rgba(0, 0, 0, 0.12)",
+          "card-2": "0px 1px 2px rgba(0, 0, 0, 0.05)",
+          "switcher":
+          "0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)",
+          "switch-1": "0px 0px 5px rgba(0, 0, 0, 0.15)",
+          "1": "0px 1px 3px rgba(0, 0, 0, 0.08)",
+          "2": "0px 1px 4px rgba(0, 0, 0, 0.12)",
+          "3": "0px 1px 5px rgba(0, 0, 0, 0.14)",
+          "4": "0px 4px 10px rgba(0, 0, 0, 0.12)",
+          "5": "0px 1px 1px rgba(0, 0, 0, 0.15)",
+          "6": "0px 3px 15px rgba(0, 0, 0, 0.1)",
+          "7": "-5px 0 0 #313D4A, 5px 0 0 #313D4A",
+          "8": "1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)"
+      },
+      "dropShadow": {
+          "1": "0px 1px 0px #E2E8F0",
+          "2": "0px 1px 4px rgba(0, 0, 0, 0.12)"
+      }
+      }
+    }
+  }