Skip to content
Snippets Groups Projects
Commit 0d68cd03 authored by AA2875's avatar AA2875
Browse files

UI muutos

parent d6ec7602
No related branches found
No related tags found
No related merge requests found
......@@ -8,7 +8,7 @@ app.use(cors())
app.use(express.json())
const mongoose = require('mongoose')
const mongoDB = 'mongodb+srv://eemuli:N33k3r123@test.147x5qr.mongodb.net/hyppynet'
const mongoDB = 'mongodb+srv://eemuli:P4s1ll3-L0v33@test.147x5qr.mongodb.net/hyppynet'
mongoose.connect(mongoDB, {useNewUrlParser: true, useUnifiedTopology: true})
const db = mongoose.connection
......
......@@ -7,8 +7,11 @@
<script src="code.js"></script>
</head>
<body onload="init()">
<div class="headerLogo">
<h1>HyppyNet</h1>
<p>Hyppypäiväkirja netissä</p>
</div>
<div id="container">
<h1>Hypyt</h1>
<input type="text" placeholder="Hyppy nro.*" id="newJumpNumber"
onkeypress="return /[0-9]/i.test(event.key)" onfocus="nextJumpNumber()"/>
<input type="text" placeholder="Päivä*" id="newJumpDate"/>
......
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');
:root {
--dblue: #437fc7;
--lblue: #6daffe;
--grey: #edf6ff;
--orange: #f79256;
}
* {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
html {
height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
background: linear-gradient(135deg, rgb(112, 174, 250) 0%, rgb(51, 106, 173) 100%);
background-attachment: fixed;
}
.headerLogo {
color: white;
margin: 2em auto 4em;
width: 30em;
padding: 0 2em;
}
h1 {
font-weight: 800;
margin: 0.5em 0 0;
}
#container {
width: 420px;
background: linear-gradient(135deg, rgb(112, 174, 250) 0%, rgb(51, 106, 173) 100%);
border-radius: 15px;
padding: 0px 15px 0px 15px;
width: 26em;
background: white;
border-radius: 0.625em;
padding: 2em;
margin: 10px auto;
border: 1px solid #ddd;
}
h1 {
background-color: white;
text-align: center;
color: black;
padding: 5px;
border-radius: 10px;
#addJumpBtn {
display: block;
float: right;
background-color: var(--orange);
color: white;
text-decoration: none;
margin: 1em 0;
padding: .9em;
border: #ffb88f 0px solid;
border-radius: .25em;
}
#sortJumpsButton {
cursor: pointer;
float: none;
margin-top: 3em;
}
ul {
......@@ -60,8 +96,8 @@ li {
}
.jumpEditAndDeleteButtons>img:hover {
/* Edit button #ffffff */
filter: invert(100%) sepia(0%) saturate(7444%) hue-rotate(83deg) brightness(110%) contrast(101%);
/* Edit button #6daffe */
filter: invert(55%) sepia(76%) saturate(323%) hue-rotate(174deg) brightness(102%) contrast(102%);
cursor: pointer;
}
......@@ -76,12 +112,42 @@ li {
margin-left: 20px;
}
#newJumpNumber,
#newJumpDate,
#newJumpPlace,
#newJumpPlane,
#newJumpCanopy,
#newJumpHeight,
#newJumpFalltime,
#newJumpTotalFalltime,
#newJumpComments,
#newJumpLink {
display: inline-block;
box-sizing: border-box;
padding: 0.6em;
margin: 3px 0;
border: grey solid 0.0625em;
border-radius: 0.25em;
font-size: 1em;
width: 135.8px;
}
#newJumpFalltime,
#newJumpTotalFalltime {
width: 205.9px;
}
#newJumpComments,
#newJumpLink {
width: 100%;
}
.inputNumber,
.inputDate {
outline: none;
border: none;
font-size: 1em;
background-color: #b0cef3;
background-color: #ccc;
}
.inputNumber {
......@@ -109,27 +175,12 @@ li {
font-size: 1em;
padding: 0;
margin: 0;
background-color: #b0cef3;
background-color: #ccc;
}
.cancelDeleteButton {
float: right;
color: darkred;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
padding: 5px;
width: 300px;
font-size: 15px;
}
button {
border: 1px solid #ccc;
margin-left: 15px;
padding: 5px 15px;
font-size: 15px;
color: #fc1c1c;
cursor: pointer;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment