Skip to content

Commit

Permalink
Claimr
Browse files Browse the repository at this point in the history
  • Loading branch information
@diegoescala
diegoescala committed Oct 5, 2023
1 parent 84d16c1 commit 54b023b
Show file tree
Hide file tree
Showing 408 changed files with 84,853 additions and 55,994 deletions.
Binary file added beep.mp3
View file
Binary file not shown.
356 changes: 329 additions & 27 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,345 @@
#app {
width: 99%;
}
.futurepanel {
box-sizing: border-box;
display: inline-block;
font: normal 300 14px/1.2em 'Exo 2', Arial, sans-serif;
letter-spacing: 0.06em;
background-color: rgba(120, 200, 255, .1);
border: 1px solid rgba(120, 200, 255, .2);
color: rgba(120, 200, 255, .8);
padding: 0 1em 1em;
}

h2 {
font-family: Lato, sans-serif;
font-weight: 800;
font-size: 75px;
.futurepanel .futurepanel__header {
box-sizing: border-box;
border-bottom: 1px solid rgba(120, 200, 255, .2);
}
.futurepanel .futurepanel__title {
box-sizing: border-box;
font: normal 300 1.429em/1em 'Exo 2', Arial, sans-serif;
text-transform: uppercase;
padding: 0.4em 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.futurepanel .futurepanel__body {
box-sizing: border-box;
padding: 1em;
}
.futurepanel .futurepanel__divider {
box-sizing: border-box;
height: 0.6em;
margin-top: 0.6em;
border-top: 1px solid rgba(120, 200, 255, .2);
}
.futurepanel .futurepanel__footer {
box-sizing: border-box;
height: 2em;
font-size: 0.8em;
color: rgba(120, 200, 255, .2);
}
.futureinput {
font: normal 100 16px/1.2em 'Exo 2', Arial, sans-serif;
letter-spacing: 0.06em;
color: rgba(120, 200, 255, .8);
margin: 0;
padding: 0;
}
.futureinput label {
font: normal 100 1em/1.8em 'Exo 2', Arial, sans-serif;
margin: 0 0 4em 0;
}
.futureinput label.required:after {
display: relative;
content: '*';
padding-left: 0.2em;
color: rgba(255, 120, 120, .8);
font: normal 100 1em/1.8em 'Exo 2', Arial, sans-serif;
}
.futureinput input[type="text"] {
font: normal 100 1em/2.4em 'Exo 2', Arial, sans-serif;
background-color: rgba(120, 200, 255, .1);
border: 1px solid rgba(120, 200, 255, .2);
color: rgba(120, 200, 255, .8);
height: 2.4em;
box-sizing: border-box;
padding: 0 0.8em;
letter-spacing: 0.06em;
width: 100%;
}
.futureinput textarea {
font: normal 100 1em/2.4em monospace, 'Exo 2', Arial, sans-serif;
background-color: rgba(120, 200, 255, .1);
border: 1px solid rgba(120, 200, 255, .2);
color: rgba(210, 230, 244, 0.8);
line-height: 1.5em;
box-sizing: border-box;
padding: 0 0.8em;
letter-spacing: 0.06em;
width: 100%;
}

.weather-widget {
background-image: linear-gradient(#3c3e5f, #1b192d);
padding: 32px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 5px 10px #1d1b24;
.futureinput input[type="text"]:focus {
background-color: rgba(120, 200, 255, .2);
border: 1px solid rgba(120, 200, 255, .3);
color: rgba(120, 200, 255, .9);
outline: none;
}
.futureinput input[type="text"]::-webkit-input-placeholder {
color: rgba(120, 200, 255, .5);
font: normal 100 1em/2.4em 'Exo 2', Arial, sans-serif;
}
.futureinput input[type="text"]:-moz-placeholder {
color: rgba(120, 200, 255, .5);
font: normal 100 1em/2.4em 'Exo 2', Arial, sans-serif;
}
.futureinput input[type="text"][disabled] {
background-color: rgba(120, 200, 255, .04);
border: 1px solid rgba(120, 200, 255, .06);
color: rgba(120, 200, 255, .2);
cursor: not-allowed;
}
.futureinput input[type="text"][disabled]::-webkit-input-placeholder {
color: rgba(120, 200, 255, .2);
}
.futureinput input[type="text"][disabled]:-moz-placeholder {
color: rgba(120, 200, 255, .2);
}
.futureinput .futureinput__help {
display: block;
font: normal 100 0.8em/1.2em 'Exo 2', Arial, sans-serif;
padding: 0.6em 0;
color: rgba(120, 200, 255, .5);
}
.futureinput .futureinput__error {
display: block;
font: normal 100 0.8em/1.2em 'Exo 2', Arial, sans-serif;
text-transform: uppercase;
padding: 0.6em 0;
color: rgba(255, 120, 120, .8);
}
.futurebutton {
font: normal 300 14px/1.2em 'Exo 2', Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, .8);
margin: 1px;
padding: 0.4em 1em;
border: 1px solid rgba(120, 200, 255, .2);
background-color: rgba(120, 200, 255, .6);
cursor: pointer;
}
.futurebutton:hover {
background-color: rgba(120, 200, 255, .4);
color: rgba(255, 255, 255, .6);
}
.futurebutton[disabled] {
background-color: rgba(120, 200, 255, .2);
border: 1px solid rgba(120, 200, 255, .1);
color: rgba(255, 255, 255, .3);
cursor: not-allowed;
}
.futurebutton--alert {
background-color: rgba(120, 0, 0, .9);
border: 1px solid rgba(255, 120, 120, .4);
color: rgba(255, 255, 255, .8);
}
.futurebutton--alert:hover {
background-color: rgba(120, 0, 0, .9);
color: rgba(255, 255, 255, .8);
}
.futurebutton--alert[disabled] {
background-color: rgba(120, 0, 0, .2);
border: 1px solid rgba(255, 120, 120, .2);
color: rgba(255, 255, 255, .4);
}
.futuremetric {
font: normal 300 14px/1.2em 'Exo 2', Arial, sans-serif;
box-sizing: border-box;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid rgba(120, 200, 255, .4);
color: rgba(120, 200, 255, .8);
/* height: 9em; */
/* width: 9em; */
min-width: 4em;
margin: 1%;
padding: 0.4em;
text-align: center;
/* border-radius: 50%; */
}
.futuremetric .futuremetric__value {
font: normal 300 2em/1.2em 'Exo 2', Arial, sans-serif;
/* margin-top: 1.0em; */
}
.futuremetric .futuremetric__value--optimal {
color: rgba(100, 200, 100, .8);
}
.futuremetric .futuremetric__value--optimal:hover {
color: #64c864;
}
.futuremetric .futuremetric__value--warning {
color: rgba(255, 200, 0, .8);
}
.futuremetric .futuremetric__value--warning:hover {
color: #ffc800;
}
.futuremetric .futuremetric__value--alert {
color: rgba(255, 120, 120, .8);
}
.futuremetric .futuremetric__value--alert:hover {
color: #ff7878;
}
.futuremetric .futuremetric__label {
font-size: 0.8em;
}
.futuregrid {
font: normal 300 14px/1.2em 'Exo 2', Arial, sans-serif;
box-sizing: border-box;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid rgba(120, 200, 255, .4);
color: rgba(120, 200, 255, .8);
margin: 0;
padding: 0;
width: 100%;
}
.futuregrid .futuregrid__cell {
display: inline-block;
box-sizing: border-box;
margin: 0;
border-right: 1px solid rgba(120, 200, 255, .4);
border-bottom: 1px solid rgba(120, 200, 255, .4);
height: 3.6em;
width: 3.6em;
text-align: center;
}
.heading {
font: normal 100 12px/1.2em 'Exo 2', Arial, sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
h6.heading {
font-size: 1em;
}
h5.heading {
font-size: 1.143em;
}
h4.heading {
font-size: 1.286em;
}
h3.heading {
font-size: 1.429em;
}
h2.heading {
font-size: 1.714em;
}
h1.heading {
font-size: 2em;
border-bottom: 1px solid rgba(0, 255, 255, .2);
}
body {
background-color: #012;
}
body * {
/* width: 24%; */
margin: 0.4%;
vertical-align: top;
color: rgba(120, 200, 255, .8);
}
nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
background-color: #555;
transition: background-color 0.3s;
}

.current-temp h3 {
font-size: 70px;
nav ul li a:hover {
background-color: #777;
}

.weather-widget h1,h2,h3 {
color: #e5e5e5;
text-shadow: 1px 2px 2px #b0b0b0;
#app {
display: flex;
flex-direction: column; /* Stack vertically */
align-items: stretch; /* Stretch children to fill width */
}

.low-temp {
float: left;
border-right: 1px solid white;
/* Metrics panel to act like a status bar. */
#metrics-panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* Space out metrics */
}

.hi-temp {
float: right;
.futuremetric {
flex: 1 0 auto; /* Allow metrics to grow but not shrink, with no basis */
}

html, body {
background-color: #201836;
/* EDI Panel */
#edi-panel {
order: 2; /* Place it below the claims */
margin-top: 20px; /* Some spacing between components */
}

.weather-pane {
/* max-height: 500px; */
/* background-color: red; */
/* overflow-y: scroll; */
padding: 10px;
/* Claims panel */
#claims-panel {
order: 1; /* Place it just below the metrics */
width: 100%; /* Full width */
}

/* Load panel - you might want this below or above, adjust 'order' accordingly. */
#load-panel {
order: 3; /* Place it at the bottom */
}

/* Limit text width and center */
#app, .futurepanel__body {
max-width: 1200px;
/* margin: 0 auto; */
}

/* Increase primary content font size for readability */
.futurepanel__body {
font-size: 16px; /* Adjust based on preference */
}

/* Compact metrics section */
#metrics-panel .futuremetric {
margin: 0.5em; /* Reduce margin */
padding: 0.5em; /* Reduce padding */
}

/* Visual indication for expandable claims */
.futurebutton {
background-color: rgba(120, 200, 255, .7);
border: 1px solid rgba(120, 200, 255, .9);
}

/* Enhance button prominence */
.futurebutton:hover {
background-color: rgba(120, 200, 255, .9);
}

/* Make the 'Load Data' button more noticeable */
.futurebutton[data-purpose="load-data"] {
background-color: rgba(0, 200, 0, .6);
border-color: rgba(0, 200, 0, .8);
}
.futurebutton[data-purpose="load-data"]:hover {
background-color: rgba(0, 220, 0, .8);
}

Loading

0 comments on commit 54b023b

Please sign in to comment.