Skip to content

Commit bf7b942

Browse files
bibekyessbibekyess
committed
Updates UI
1 parent ef37632 commit bf7b942

File tree

2 files changed

+92
-18
lines changed

2 files changed

+92
-18
lines changed

‎index.html

+91-17
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,108 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
45
<title>ReNameify</title>
6+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
57
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
613
body {
7-
font-family: Arial, sans-serif;
8-
padding: 20px;
14+
font-family: 'Inter', Arial, sans-serif;
15+
background-color: #f4f6f9;
16+
color: #333;
17+
line-height: 1.6;
918
}
10-
button {
11-
padding: 10px 20px;
12-
margin: 10px 0;
19+
.container {
20+
max-width: 800px;
21+
margin: 0 auto;
22+
padding: 40px 20px;
23+
}
24+
.header {
25+
text-align: center;
26+
margin-bottom: 30px;
27+
}
28+
.header h1 {
29+
color: #2c3e50;
30+
font-weight: 600;
31+
margin-bottom: 10px;
32+
}
33+
.header h3 {
34+
color: #7f8c8d;
35+
font-weight: 300;
36+
}
37+
.description {
38+
background-color: #ecf0f1;
39+
border-left: 4px solid #3498db;
40+
padding: 15px;
41+
margin-bottom: 25px;
42+
border-radius: 4px;
43+
}
44+
.btn-group {
45+
display: flex;
46+
justify-content: center;
47+
gap: 15px;
48+
margin-bottom: 30px;
49+
}
50+
.btn {
51+
background-color: #3498db;
52+
color: white;
53+
border: none;
54+
padding: 12px 25px;
55+
border-radius: 6px;
56+
cursor: pointer;
57+
font-weight: 600;
58+
transition: background-color 0.3s ease;
59+
text-transform: uppercase;
60+
letter-spacing: 1px;
61+
}
62+
.btn:hover {
63+
background-color: #2980b9;
1364
}
1465
#fileList {
15-
margin-top: 20px;
66+
background-color: white;
67+
border-radius: 8px;
68+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
69+
padding: 20px;
1670
}
1771
.file-item {
18-
margin: 5px 0;
19-
padding: 10px;
20-
background: #f0f0f0;
21-
border-radius: 4px;
72+
background-color: #f8f9fa;
73+
margin: 10px 0;
74+
padding: 15px;
75+
border-radius: 6px;
76+
display: flex;
77+
justify-content: space-between;
78+
align-items: center;
79+
border-left: 4px solid #2ecc71;
80+
}
81+
.file-item:hover {
82+
background-color: #f1f3f4;
2283
}
2384
</style>
2485
</head>
2586
<body>
26-
<h1>ReNameify</h1>
27-
<h3>Rename your Files based on its Content</h3>
28-
<p>Select a directory and organize all your files with a context-aware file-names. It is saved under <b>renamed_files</b> under the selected directory</p>
29-
<button id="selectDir">Select Directory</button>
30-
<button id="processFiles">Process Files</button>
31-
<div id="fileList"></div>
87+
<div class="container">
88+
<div class="header">
89+
<h1>ReNameify</h1>
90+
<h3>Intelligent File Renaming Utility</h3>
91+
</div>
92+
93+
<div class="description">
94+
<p>Select a directory and organize your files with context-aware file names.
95+
Renamed files will be saved under <strong>renamed_files</strong> in the selected directory.</p>
96+
</div>
97+
98+
<div class="btn-group">
99+
<button id="selectDir" class="btn">Select Directory</button>
100+
<button id="processFiles" class="btn">Process Files</button>
101+
</div>
102+
103+
<div id="fileList"></div>
104+
</div>
105+
32106
<script src="renderer.js"></script>
33107
</body>
34108
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "file-renamer-app",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "Organizes files based on the inside contents",
55
"main": "main.js",
66
"scripts": {

0 commit comments

Comments
 (0)