More sexy

Author: awlx

go-rewrite/static/css/styles.css

@@ -20,7 +20,7 @@ body {
 }
 
 h1, h2, h3, h4 {
-    color: #1f77b4;
+    color: #3498db;
     margin-bottom: 15px;
     font-weight: 600;
 }
@@ -29,7 +29,7 @@ h1 {
     text-align: center;
     margin: 25px 0;
     font-size: 32px;
-    background: linear-gradient(45deg, #1f77b4, #2ca8ff);
+    background: linear-gradient(45deg, #3498db, #1abc9c);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -42,7 +42,7 @@ h1::after {
     display: block;
     width: 100px;
     height: 3px;
-    background: linear-gradient(45deg, #1f77b4, #2ca8ff);
+    background: linear-gradient(45deg, #3498db, #1abc9c);
     margin: 10px auto 0;
     border-radius: 3px;
 }
@@ -91,7 +91,7 @@ h1::after {
 .file-label {
     width: 100%;
     height: 100%;
-    border: 2px dashed #1f77b4;
+    border: 2px dashed #3498db;
     border-radius: 12px;
     display: flex;
     justify-content: center;
@@ -102,18 +102,18 @@ h1::after {
     background-size: cover;
     font-weight: 500;
     box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-    background-color: rgba(31, 119, 180, 0.05);
+    background-color: rgba(52, 152, 219, 0.05);
 }
 
 .file-label:hover {
-    background-color: rgba(31, 119, 180, 0.1);
+    background-color: rgba(52, 152, 219, 0.1);
     border-style: solid;
     box-shadow: 0 6px 16px rgba(0,0,0,0.1);
     transform: translateY(-2px);
 }
 
 .button {
-    background: linear-gradient(45deg, #1f77b4, #2ca8ff);
+    background: linear-gradient(45deg, #3498db, #1abc9c);
     color: white;
     border: none;
     border-radius: 8px;
@@ -122,14 +122,14 @@ h1::after {
     margin: 8px;
     transition: all 0.3s ease;
     font-weight: 500;
-    box-shadow: 0 4px 8px rgba(31, 119, 180, 0.3);
+    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
     font-size: 14px;
 }
 
 .button:hover {
-    background: linear-gradient(45deg, #166baa, #1c98eb);
+    background: linear-gradient(45deg, #2980b9, #16a085);
     transform: translateY(-2px);
-    box-shadow: 0 6px 12px rgba(31, 119, 180, 0.4);
+    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.4);
 }
 
 /* Date filter section */
@@ -150,7 +150,7 @@ h1::after {
 .date-picker input {
     margin: 0 10px;
     padding: 8px;
-    border: 2px solid #1f77b4;
+    border: 2px solid #3498db;
     border-radius: 5px;
 }
 
@@ -283,8 +283,20 @@ h1::after {
 .session-selector select {
     width: 100%;
     padding: 8px;
-    border: 2px solid #1f77b4;
+    border: 2px solid #3498db;
     border-radius: 5px;
+    background-color: #fff;
+    color: #333;
+    font-size: 16px;
+    cursor: pointer;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.session-selector select:hover,
+.session-selector select:focus {
+    border-color: #1abc9c;
+    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2);
+    outline: none;
 }
 
 /* Session details */
@@ -310,18 +322,71 @@ h1::after {
     min-width: 300px;
 }
 
+/* Modern Session Cards */
+#combined-gauges {
+    min-height: 400px;
+    border-radius: 15px;
+    margin-bottom: 30px;
+    overflow: hidden;
+    background-color: #f8f9fa;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    padding: 5px;
+}
+
+#combined-gauges:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
+}
+
+.session-metric-card, .session-info-card {
+    border-radius: 12px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.session-metric-card:hover, .session-info-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
 /* Footer */
 footer {
     text-align: center;
     margin-top: 60px;
     padding: 20px 0;
     clear: both;
     position: relative;
-    font-weight: bold;
     border-top: 1px solid #ddd;
     width: 100%;
 }
 
+.imprint {
+    margin: 20px auto;
+    max-width: 600px;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.imprint:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
+.imprint h3 {
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.imprint p {
+    margin: 5px 0;
+    color: #666;
+}
+
 /* Responsive styles */
 @media (max-width: 768px) {
     .upload-container {

go-rewrite/static/index.html

@@ -93,10 +93,12 @@ <h4>SOC Statistics</h4>
 
         <section class="session-details">
             <h3 id="session-info"></h3>
+            <!-- Map moved above the session details container -->
+            <div id="range-map" class="map"></div>
+            
             <div class="session-details-container">
                 <div class="left-panel">
-                    <div id="range-map" class="map"></div>
-                    <div id="combined-gauges" class="chart"></div>
+                    <div id="combined-gauges" class="chart" style="height: auto; min-height: 600px;"></div>
                 </div>
                 <div class="right-panel">
                     <div id="charge-details-graph" class="chart"></div>
@@ -106,6 +108,15 @@ <h3 id="session-info"></h3>
         </section>
     </div>
 
+    <footer>
+        <div class="imprint">
+            <h3>Impressum</h3>
+            <p>Freie Netze München e. V.</p>
+            <p>Parkstraße 28</p>
+            <p>82131 Gauting</p>
+        </div>
+    </footer>
+
     <script src="/static/js/app.js"></script>
 </body>
 </html>