Skip to content

feat: Init Landingpage #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devdorn merged 1 commit into from
Jan 21, 2026
Merged

feat: Init Landingpage #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/assets/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/placeholder-app.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 144 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JiraTime | Streamlined Jira Time Tracking</title>
<meta name="description"
content="A simple, fast browser extension for tracking time in Jira. Designed for developers who value speed.">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
<nav>
<div class="container">
<div class="logo">
<img src="assets/logo.png" alt="JiraTime Logo">
<span>JiraTime</span>
</div>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#install">Installation</a>
</div>
<a href="https://github.com/devdorn/JiraTime" class="github-link">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
GitHub
</a>
</div>
</nav>

<main>
<section class="hero">
<div class="container">
<h1>Track Time Without<br>the Friction.</h1>
<p>JiraTime is a lightweight browser extension that brings your Jira tickets directly to your toolbar.
Log hours in seconds, not minutes.</p>
<div class="cta-group">
<a href="#install" class="cta-button">Get JiraTime</a>
</div>
<div class="hero-mockup">
<img src="assets/placeholder-app.png" alt="JiraTime Interface Mockup">
</div>
</div>
</section>

<section id="features">
<div class="container">
<h2 style="text-align: center; font-size: 2.5rem;">Built for Developers.</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Smart List</h3>
<p>Automatically displays your "In Progress" tickets based on customizable filters. No more
searching for issue keys.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⏱️</div>
<h3>Live Timer</h3>
<p>Start and stop timers with a single click. JiraTime keeps track of the duration while you
focus on the code.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Quick Entry</h3>
<p>Prefer manual logging? Quickly log time (e.g., "1h 30m") with minimal keystrokes directly
from the popup.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📌</div>
<h3>Pinned Tasks</h3>
<p>Keep important tickets or administrative tasks (like Epics) permanently pinned for instant
access.</p>
</div>
</div>
</div>
</section>

<section id="install" style="background: rgba(15, 23, 42, 0.5);">
<div class="container">
<h2 style="text-align: center; font-size: 2.5rem;">Installation</h2>
<p style="text-align: center; color: var(--text-muted); margin-top: 10px;">Get up and running in less
than a minute.</p>

<div class="setup-steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-content">
<h3>Download the Extension</h3>
<p>Go to the <a href="https://github.com/devdorn/JiraTime/releases"
style="color: var(--accent-color); text-decoration: underline;">GitHub Releases</a>
page and download the latest <code>JiraTime-vX.X.X.zip</code> file.</p>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-content">
<h3>Extract the Archive</h3>
<p>Unzip the downloaded file to a permanent location on your computer (e.g., a folder named
<code>JiraTime</code>).
</p>
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-content">
<h3>Enable Developer Mode</h3>
<p>Open your browser (Chrome, Edge, or Brave) and navigate to
<code>chrome://extensions</code>. Switch on the <strong>Developer Mode</strong> toggle
in the top right corner.
</p>
</div>
</div>
<div class="step">
<div class="step-num">4</div>
<div class="step-content">
<h3>Load JiraTime</h3>
<p>Click the <strong>Load unpacked</strong> button and select the folder where you extracted
the extension. JiraTime will now appear in your toolbar!</p>
</div>
</div>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Bernhard Dorn. <a href="https://www.humangehalt.org" rel="nofollow"><em>H/80</em></a></p>
<p style="margin-top: 10px; font-size: 0.875rem;">This project is open source. Pull requests are not
accepted, but forks are welcome.</p>
</div>
</footer>
</body>

</html>
244 changes: 244 additions & 0 deletions docs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
:root {
--bg-color: #0f172a;
--text-color: #f8fafc;
--text-muted: #94a3b8;
--accent-color: #38bdf8;
--card-bg: #1e293b;
--border-color: #334155;
--nav-bg: rgba(15, 23, 42, 0.8);
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
line-height: 1.6;
overflow-x: hidden;
}

/* Typography */
h1, h2, h3 {
font-weight: 700;
letter-spacing: -0.025em;
}

a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}

/* Layout */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}

section {
padding: 100px 0;
}

/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
background: var(--nav-bg);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
}

nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}

.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.25rem;
font-weight: 700;
}

.logo img {
height: 32px;
}

.nav-links {
display: flex;
gap: 30px;
}

.nav-links a:hover {
color: var(--accent-color);
}

.github-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
font-weight: 500;
}

.github-link:hover {
background: var(--border-color);
}

/* Hero Section */
.hero {
padding-top: 180px;
text-align: center;
}

.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
background: linear-gradient(to right, #f8fafc, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 40px;
}

.cta-button {
display: inline-block;
padding: 14px 32px;
background: var(--text-color);
color: var(--bg-color);
border-radius: 12px;
font-weight: 600;
font-size: 1.125rem;
transition: transform 0.2s, background 0.2s;
}

.cta-button:hover {
transform: translateY(-2px);
background: #e2e8f0;
}

.hero-mockup {
margin-top: 60px;
position: relative;
}

.hero-mockup img {
max-width: 100%;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-color);
}

/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 60px;
}

.feature-card {
padding: 40px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 24px;
transition: border-color 0.2s;
}

.feature-card:hover {
border-color: var(--accent-color);
}

.feature-card h3 {
margin: 20px 0 10px;
font-size: 1.5rem;
}

.feature-card p {
color: var(--text-muted);
}

/* Installation */
.setup-steps {
max-width: 800px;
margin: 60px auto 0;
}

.step {
display: flex;
gap: 30px;
margin-bottom: 60px;
}

.step-num {
flex-shrink: 0;
width: 48px;
height: 48px;
background: var(--accent-color);
color: var(--bg-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
}

.step-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.step-content p {
color: var(--text-muted);
}

.step-content code {
background: rgba(0,0,0,0.3);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}

/* Footer */
footer {
padding: 60px 0;
border-top: 1px solid var(--border-color);
text-align: center;
color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.nav-links {
display: none;
}
.step {
flex-direction: column;
gap: 15px;
}
}