Skip to content

Commit

Permalink
Merge pull request #37 from AalokeCode/master
Browse files Browse the repository at this point in the history 
Issue #36: Minor Improvements to CSS, Added Icons, Accessibility Improvement
  • Loading branch information
@harsxv
harsxv authored Oct 24, 2024
2 parents 0b7536d + 08e8bc0 commit f0b0856
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 16 deletions.
13 changes: 9 additions & 4 deletions history.html.theme
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="TinyStatus is a simple, customizable status page generator that allows you to monitor the status of various services and display them on a clean, responsive web page.">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
Expand All @@ -20,16 +21,20 @@
--card-shadow: rgba(0,0,0,0.1);
--footer-color: #7f8c8d;
--link-color: #3498db;
--secondary-bg-color: #fff;
--status-down-color: #e74c3c;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--bg-color: #18181b;
--text-color: #e0e0e0;
--heading-color: #b0b0b0;
--card-bg: #2a2a2a;
--card-shadow: rgba(255,255,255,0.1);
--card-bg: #27272a;
--card-shadow: rgba(9,9,11,0.4);
--footer-color: #888;
--link-color: #5dade2;
--secondary-bg-color: #27272a;
--status-down-color: #FF9185;
}
}
body {
Expand Down Expand Up @@ -70,7 +75,7 @@
justify-content: space-between;
}
.status-up { color: #27ae60; }
.status-down { color: #e74c3c; }
.status-down { color: var(--status-down-color); }
.footer {
text-align: center;
font-size: .9em;
Expand Down
93 changes: 81 additions & 12 deletions index.html.theme
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
<link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="TinyStatus is a simple, customizable status page generator that allows you to monitor the status of various services and display them on a clean, responsive web page.">
<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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Golos+Text:[email protected]&display=swap" rel="stylesheet">

<style>
:root {
--bg-color: #f4f4f4;
Expand All @@ -20,16 +25,20 @@
--card-shadow: rgba(0,0,0,0.1);
--footer-color: #7f8c8d;
--link-color: #3498db;
--secondary-bg-color: #fff;
--status-down-color: #e74c3c;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--bg-color: #18181b;
--text-color: #e0e0e0;
--heading-color: #b0b0b0;
--card-bg: #2a2a2a;
--card-shadow: rgba(255,255,255,0.1);
--card-bg: #27272a;
--card-shadow: rgba(9,9,11,0.4);
--footer-color: #888;
--link-color: #5dade2;
--secondary-bg-color: #27272a;
--status-down-color: #FF9185;
}
a,
a:link,
Expand All @@ -43,7 +52,7 @@
}
}
body {
font-family: sans-serif;
font-family: 'Golos Text', sans-serif;
line-height: 1.6;
color: var(--text-color);
max-width: 1200px;
Expand All @@ -55,6 +64,42 @@
color: var(--heading-color);
text-align: center;
}
hr{
border-color: var(--secondary-bg-color);
opacity: 10%;
}
.logo{
display: flex;
align-items: center;
justify-content: center;
gap:10px;
}
.logo img{
width: 50px;
}
.icons{
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 10px;
}
.icons a{
display: flex;
align-items: center;
padding: 5px 20px;
gap:10px;
background: var(--secondary-bg-color);
border-radius: 50px 50px;
}
.sub-heading{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.sub-heading svg{
fill: var(--heading-color);
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Expand All @@ -75,8 +120,21 @@
.status-item h3 {
margin: 0 0 10px;
}
.status-up { color: #27ae60; }
.status-down { color: #e74c3c; }
.status-up {
color: #27ae60;
display: flex;
align-items: center;
gap: 5px;
fill: #27ae60;
justify-content: center;
}
.status-down { color: var(--status-down-color);
display: flex;
align-items: center;
gap: 5px;
fill: var(--status-down-color);
justify-content: center;
}
.incidents {
background: var(--card-bg);
border-radius: 8px;
Expand All @@ -99,19 +157,28 @@
a:link,
a:visited {
cursor: pointer;
color: rgb(255, 255, 255);
color: var(--link-color);
text-decoration: none !important;
}

.status-item h3, .icons a {
color: var(--text-color) !important;
}

a:hover {
color: rgb(86, 86, 86);
}

</style>
</head>
<body>
<h1>TinyStatus</h1>
<h2>Current Status</h2>
<div class="logo"><img src="assets/apple-touch-icon.png" alt="Logo"/><h1>TinyStatus</h1></div>
<div class="icons">
<a href="https://github.com/harsxv/tinystatus" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><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 d="M9 18c-4.51 2-5-2-7-2"/></svg> GitHub</a>
</div>
<hr>
<div class="sub-heading">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M240,128a8,8,0,0,1-8,8H204.94l-37.78,75.58A8,8,0,0,1,160,216h-.4a8,8,0,0,1-7.08-5.14L95.35,60.76,63.28,131.31A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.85L88.72,36.69a8,8,0,0,1,14.76.46l57.51,151,31.85-63.71A8,8,0,0,1,200,120h32A8,8,0,0,1,240,128Z"></path></svg>
<h2>Current Status</h2></div>
{% for group, checks in groups.items() %}
<h3>{{group}} Status</h3>
<div class="status-grid">
Expand All @@ -122,7 +189,7 @@
<div class="status-item">
<h3>{{ check.name }}</h3>
<p class="{% if check.status %}status-up{% else %}status-down{% endif %}">
{{ 'Operational' if check.status else 'Down' }}
{{ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg> Operational' if check.status else '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg> Down' }}
</p>
</div>
{% if check.url %}
Expand All @@ -131,7 +198,9 @@
{% endfor %}
</div>
{% endfor %}
<h2>Incident History</h2>
<div class="sub-heading">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"></path></svg>
<h2>Incident History</h2></div>
<div class="incidents">
{{ incidents | safe }}
</div>
Expand Down

0 comments on commit f0b0856

Please sign in to comment.