diff --git a/docs/assets/logo.png b/docs/assets/logo.png new file mode 100644 index 0000000..dab4133 Binary files /dev/null and b/docs/assets/logo.png differ diff --git a/docs/assets/placeholder-app.png b/docs/assets/placeholder-app.png new file mode 100644 index 0000000..32b949e Binary files /dev/null and b/docs/assets/placeholder-app.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..1d0d87b --- /dev/null +++ b/docs/index.html @@ -0,0 +1,144 @@ + + + + + + + JiraTime | Streamlined Jira Time Tracking + + + + + + + + + + +
+
+
+

Track Time Without
the Friction.

+

JiraTime is a lightweight browser extension that brings your Jira tickets directly to your toolbar. + Log hours in seconds, not minutes.

+
+ Get JiraTime +
+
+ JiraTime Interface Mockup +
+
+
+ +
+
+

Built for Developers.

+
+
+
🚀
+

Smart List

+

Automatically displays your "In Progress" tickets based on customizable filters. No more + searching for issue keys.

+
+
+
⏱️
+

Live Timer

+

Start and stop timers with a single click. JiraTime keeps track of the duration while you + focus on the code.

+
+
+
⚡
+

Quick Entry

+

Prefer manual logging? Quickly log time (e.g., "1h 30m") with minimal keystrokes directly + from the popup.

+
+
+
📌
+

Pinned Tasks

+

Keep important tickets or administrative tasks (like Epics) permanently pinned for instant + access.

+
+
+
+
+ +
+
+

Installation

+

Get up and running in less + than a minute.

+ +
+
+
1
+
+

Download the Extension

+

Go to the GitHub Releases + page and download the latest JiraTime-vX.X.X.zip file.

+
+
+
+
2
+
+

Extract the Archive

+

Unzip the downloaded file to a permanent location on your computer (e.g., a folder named + JiraTime). +

+
+
+
+
3
+
+

Enable Developer Mode

+

Open your browser (Chrome, Edge, or Brave) and navigate to + chrome://extensions. Switch on the Developer Mode toggle + in the top right corner. +

+
+
+
+
4
+
+

Load JiraTime

+

Click the Load unpacked button and select the folder where you extracted + the extension. JiraTime will now appear in your toolbar!

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..083d4a6 --- /dev/null +++ b/docs/style.css @@ -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; + } +}