Skip to content

Commit d1115f4

Browse files
fantasticmaofantasticmao
committed
feat: update index.html
1 parent 5527234 commit d1115f4

File tree

2 files changed

+90
-53
lines changed

2 files changed

+90
-53
lines changed

‎docs/index.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10-
<div class="container">
10+
<main>
1111
<h1>CSV-to-iCal</h1>
1212
<p>
1313
An online tool to convert CSV files into iCal subscription links. Edit the table below to generate your own calendar.
@@ -24,7 +24,17 @@ <h2>Edit CSV Events</h2>
2424
<button id="subscribe-ical-btn">Subscribe iCal</button>
2525
</div>
2626
<div id="csv-table-container"></div>
27-
</div>
27+
</main>
28+
<footer>
29+
<p>Copyright &copy; 2023 fantasticmao. Powered by <a href="https://github.com/fantasticmao/csv-to-ical" target="_blank">csv-to-ical</a>.</p>
30+
</footer>
31+
<a target="_blank" href="https://github.com/fantasticmao/csv-to-ical" class="github-corner" aria-label="View source on GitHub">
32+
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
33+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
34+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
35+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
36+
</svg>
37+
</a>
2838
<script src="script.js"></script>
2939
</body>
3040
</html>

‎docs/style.css‎

Lines changed: 78 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,65 @@
11
body {
22
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
33
line-height: 1.6;
4-
background-color: #f4f4f4;
5-
color: #333;
4+
background-color: #fefefe;
5+
color: #2e2e2e;
66
margin: 0;
7-
padding: 20px;
7+
padding: 0;
8+
display: flex;
9+
flex-direction: column;
10+
min-height: 100vh;
811
}
912

10-
.container {
11-
max-width: 90%;
12-
margin: auto;
13-
background: #fff;
14-
padding: 20px 30px;
15-
border-radius: 8px;
16-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
13+
main, footer {
14+
max-width: 1200px;
15+
width: 100%;
16+
margin: 0 auto;
17+
padding: 2rem;
18+
}
19+
20+
footer {
21+
text-align: center;
22+
font-size: 0.9em;
23+
color: #777;
24+
}
25+
26+
h1 {
27+
font-size: 2em;
28+
border-bottom: 1px solid #eaecef;
29+
margin-top: 0;
30+
margin-bottom: 1rem;
31+
color: #24292e;
32+
}
33+
34+
h2 {
35+
font-size: 1.5em;
36+
margin-top: 1.2rem;
37+
margin-bottom: 1rem;
38+
color: #24292e;
1739
}
1840

19-
h1, h2 {
20-
color: #333;
41+
a {
42+
color: #0366d6;
43+
text-decoration: none;
44+
}
45+
46+
a:hover {
47+
text-decoration: underline;
2148
}
2249

2350
#editor-controls {
24-
margin-bottom: 15px;
51+
margin-bottom: 1rem;
2552
}
2653

2754
#editor-controls button {
55+
margin-right: 5px;
2856
background-color: #007bff;
2957
color: #fff;
30-
padding: 8px 15px;
58+
padding: 0.5rem 1rem;
3159
border: none;
32-
border-radius: 5px;
60+
border-radius: 4px;
3361
cursor: pointer;
34-
font-size: 14px;
62+
font-size: 0.9rem;
3563
}
3664

3765
#editor-controls button:hover {
@@ -41,7 +69,6 @@ h1, h2 {
4169
#csv-table-container {
4270
overflow-x: auto;
4371
border: 1px solid #ddd;
44-
border-radius: 5px;
4572
}
4673

4774
table {
@@ -51,20 +78,37 @@ table {
5178

5279
th, td {
5380
border: 1px solid #ddd;
54-
padding: 8px;
81+
padding: 0.5rem;
5582
text-align: left;
56-
min-width: 120px;
83+
min-width: 100px;
5784
}
5885

5986
th {
6087
background-color: #f8f9fa;
6188
font-weight: bold;
6289
}
6390

91+
tr.dragging {
92+
opacity: 0.5;
93+
background: #cce5ff;
94+
}
95+
96+
tr.drag-over {
97+
border-top: 2px solid #007bff;
98+
}
99+
100+
.drag-handle {
101+
cursor: grab;
102+
text-align: center;
103+
width: 70px;
104+
min-width: 70px;
105+
color: #aaa;
106+
}
107+
64108
input, select, [contenteditable] {
65109
width: 100%;
66110
box-sizing: border-box;
67-
padding: 6px;
111+
padding: 0.5rem;
68112
border: 1px solid transparent;
69113
border-radius: 4px;
70114
}
@@ -75,49 +119,32 @@ input:focus, select:focus, [contenteditable]:focus {
75119
background-color: #e8f0fe;
76120
}
77121

78-
.delete-row-btn {
79-
background-color: #dc3545;
122+
.action-buttons button {
123+
margin-right: 5px;
124+
}
125+
126+
.insert-below-btn {
127+
background-color: #28a745;
80128
color: white;
81129
border: none;
82-
padding: 5px 10px;
130+
padding: 0.5rem 1rem;
83131
border-radius: 4px;
84132
cursor: pointer;
85133
}
86134

87-
.delete-row-btn:hover {
88-
background-color: #c82333;
89-
}
90-
91-
.drag-handle {
92-
cursor: grab;
93-
text-align: center;
94-
width: 20px;
95-
min-width: 20px;
96-
color: #aaa;
97-
}
98-
99-
tr.dragging {
100-
opacity: 0.5;
101-
background: #cce5ff;
102-
}
103-
104-
tr.drag-over {
105-
border-top: 2px solid #007bff;
135+
.insert-below-btn:hover {
136+
background-color: #218838;
106137
}
107138

108-
.insert-below-btn {
109-
background-color: #28a745; /* Green color for add action */
139+
.delete-row-btn {
140+
background-color: #dc3545;
110141
color: white;
111142
border: none;
112-
padding: 5px 10px;
143+
padding: 0.5rem 1rem;
113144
border-radius: 4px;
114145
cursor: pointer;
115146
}
116147

117-
.insert-below-btn:hover {
118-
background-color: #218838;
119-
}
120-
121-
.action-buttons button {
122-
margin-right: 5px;
148+
.delete-row-btn:hover {
149+
background-color: #c82333;
123150
}

0 commit comments

Comments
 (0)