-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
153 lines (137 loc) · 7.49 KB
/
index.html
File metadata and controls
153 lines (137 loc) · 7.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevJournal - Programming Learning Journal</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="auto-save-status" id="autoSaveStatus">Auto-Save: ON</div>
<div id="notification" class="notification"></div>
<div class="container">
<div class="header">
<h1>DevJournal</h1>
<p>Track your coding journey and daily development tasks</p>
</div>
<div class="main-grid">
<div class="left-section">
<div class="controls">
<div class="control-group">
<label for="focus">Learning Focus</label>
<select id="focus" onchange="updateTemplates()">
<option value="daily">Daily Coding Log</option>
<option value="project">Project Development</option>
<option value="skill">Skill Building</option>
<option value="debugging">Bug Hunting</option>
<option value="learning">Learning New Tech</option>
</select>
</div>
<div class="control-group">
<label for="language">Primary Language</label>
<select id="language" onchange="updateTemplates()">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="cpp">C++</option>
<option value="react">React</option>
<option value="nodejs">Node.js</option>
<option value="other">Other</option>
</select>
</div>
<div class="control-group">
<label for="experience">Experience Level</label>
<select id="experience" onchange="updateTemplates()">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
</div>
<div id="templates" class="templates">
<!-- Templates will be generated here -->
</div>
</div>
<div class="todo-panel">
<div class="todo-header">
<div class="todo-title">
<span>⚡</span>
<span>Today's Dev Tasks</span>
</div>
<div class="auto-save-toggle">
<span>Auto-Save</span>
<div class="toggle-switch active" id="autoSaveToggle" onclick="toggleAutoSave()"></div>
</div>
</div>
<div class="todo-input">
<input type="text" id="todoInput" placeholder="Add a coding task..." maxlength="100">
<button class="add-btn" onclick="addTodo()">+</button>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="stats">
<span id="completedCount">0 completed</span>
<span id="totalCount">0 total</span>
</div>
<ul class="todo-list" id="todoList">
<!-- Todos will be added here -->
</ul>
<div class="import-export-section">
<div class="import-section">
<div class="file-input-wrapper">
<input type="file" id="importFile" class="file-input" accept=".json" onchange="handleFileImport(event)">
<div class="file-input-button">📁 Import Data</div>
</div>
<button class="export-btn" onclick="clearCompleted()" style="background: #ff4757; margin: 0; font-size: 0.8rem; padding: 8px 12px;">Clear Completed</button>
</div>
</div>
</div>
</div>
<div class="export-section">
<h3>📦 Data Management</h3>
<div class="data-info">
Last saved: <span id="lastSavedTime">Never</span> |
Entries: <span id="entryCount">0</span> |
Todos: <span id="todoCount">0</span>
</div>
<div class="import-export-grid">
<div class="import-section">
<h4>📥 Import Data</h4>
<p style="margin-bottom: 15px; color: #888; font-size: 0.9rem;">Restore your journal and todos from backup</p>
<div class="file-input-wrapper">
<input type="file" id="importFullData" class="file-input" accept=".json" onchange="handleFullDataImport(event)">
<div class="import-btn file-input-button">📁 Import Full Backup</div>
</div>
<button class="import-btn" onclick="mergeDataPrompt()">🔄 Merge with Existing</button>
</div>
<div class="export-section-inner">
<h4>📤 Export Data</h4>
<p style="margin-bottom: 15px; color: #888; font-size: 0.9rem;">Save your progress for backup or sharing</p>
<button class="export-btn" onclick="exportAsText()">📄 Export as Text</button>
<button class="export-btn" onclick="exportAsJSON()">💾 Full Backup</button>
<button class="export-btn" onclick="copyToClipboard()">📋 Copy Entries</button>
<button class="export-btn" onclick="exportTodos()">✅ Export Todos</button>
</div>
</div>
</div>
<div class="tips">
<h3>💡 Dev Learning Best Practices</h3>
<ul>
<li>Document your debugging process - future you will thank you</li>
<li>Track what technologies you're learning and why</li>
<li>Note down code snippets and solutions that worked well</li>
<li>Record performance bottlenecks and how you solved them</li>
<li>Keep track of useful resources, docs, and Stack Overflow links</li>
<li>Review your code regularly and note areas for improvement</li>
<li>Set daily coding goals and track your progress</li>
<li>Document your project decisions and trade-offs</li>
<li>Export your data regularly to prevent loss</li>
<li>Use auto-save to keep your progress safe</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>