Streak Counter

static/css/style.css

@@ -106,12 +106,16 @@ h1 {
 
 .date-grid {
     display: grid;
-    grid-template-columns: repeat(30, 1fr); /* Adjust based on your date range */
+    grid-template-columns: repeat(30, 1fr);
+    /* Adjust based on your date range */
     gap: 2px;
     padding: 5px 0;
-    overflow-x: auto; /* Enable horizontal scrolling if dates exceed width */
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    overflow-x: auto;
+    /* Enable horizontal scrolling if dates exceed width */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
@@ -120,7 +124,8 @@ h1 {
 }
 
 .date-square {
-    width: 15px; /* Adjust size as needed */
+    width: 15px;
+    /* Adjust size as needed */
     height: 15px;
     background-color: #555;
     border-radius: 2px;
@@ -133,15 +138,22 @@ h1 {
 
 /* Modal Styles */
 .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 1;
+    /* Sit on top */
     left: 0;
     top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    /* Full height */
+    overflow: auto;
+    /* Enable scroll if needed */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* Black w/ opacity */
     justify-content: center;
     align-items: center;
 }
@@ -153,7 +165,7 @@ h1 {
     border-radius: 10px;
     width: 80%;
     max-width: 500px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     position: relative;
 }
 
@@ -223,7 +235,8 @@ h1 {
 
 .date-grid-modal {
     display: grid;
-    grid-template-columns: repeat(7, 1fr); /* 7 days a week */
+    grid-template-columns: repeat(7, 1fr);
+    /* 7 days a week */
     gap: 5px;
     margin-bottom: 20px;
 }
@@ -242,7 +255,8 @@ h1 {
 }
 
 .date-cell.today {
-    border: 2px solid #007bff; /* Highlight today */
+    border: 2px solid #007bff;
+    /* Highlight today */
 }
 
 .date-cell.empty {
@@ -250,6 +264,30 @@ h1 {
     cursor: default;
 }
 
+.streak-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    padding: 5px;
+    background-color: #444;
+    border-radius: 15px;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.flame-icon {
+    font-size: 1.2em;
+    margin-right: 5px;
+}
+
+.streak-count {
+    color: #e0e0e0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
 .modal-actions {
     display: flex;
     justify-content: space-around;