Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
all: first version rigging up tasks and geo location
css/footer.css | 9 +++++++ css/header.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++ css/layout.css | 17 ++++++++++++++ css/main.css | 46 ++++++++++++++++++++++++++++++++++++++++ css/reset.css | 6 +++++ index.html | 12 ++++++++- js/app.js | 5 ++++ js/geolocation.js | 20 +++++++++++++++++ js/menu.js | 8 +++++++ js/tasks.js | 20 +++++++++++++++++
diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000000000000000000000000000000000000..3c708ef315910337453046ee47b84960bddb1afa --- /dev/null +++ b/css/footer.css @@ -0,0 +1,9 @@ +footer { + margin-top: 20px; + padding: 10px; + background-color: #4CAF50; + color: white; + font-size: 0.9rem; + text-align: center; +} + diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000000000000000000000000000000000000..da60e9a0a794d7c558952536104793579d3ce93a --- /dev/null +++ b/css/header.css @@ -0,0 +1,56 @@ +header { + background-color: #4CAF50; + color: white; + padding: 20px 10px; + text-align: center; +} + +header h1 { + font-size: 1.8rem; +} + +nav ul { + list-style: none; + padding: 0; +} + +nav ul li { + display: inline; + margin: 0 10px; +} + +nav ul li a { + color: white; + text-decoration: none; +} + +#menuToggle { + font-size: 1.5rem; + background: none; + border: none; + color: white; + cursor: pointer; +} + +nav ul.hidden { + display: none; +} + +nav ul.visible { + display: flex; + flex-direction: column; + gap: 10px; +} + +@media (min-width: 768px) { + #menuToggle { + display: none; + } + + nav ul { + display: flex !important; + justify-content: center; + flex-direction: row; + gap: 20px; + } +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000000000000000000000000000000000000..1005e9f76d823b59f22f4838f3da22b27da401e9 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,17 @@ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f9f9f9; + margin: 0; + padding: 0; +} + +main { + margin: 20px auto; + padding: 20px; + background: white; + max-width: 800px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000000000000000000000000000000000000..1635f04d839df3262125703a92807450ea060093 --- /dev/null +++ b/css/main.css @@ -0,0 +1,46 @@ +form { + display: flex; + flex-direction: column; + align-items: center; +} + +form input { + width: 80%; + padding: 10px; + margin: 10px 0; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 5px; +} + +form button { + padding: 10px 20px; + font-size: 1rem; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +form button:hover { + background-color: #45a049; +} + +#task-list { + list-style: none; + padding: 0; +} + +#task-list li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + margin: 10px 0; + background: #f0f0f0; + border: 1px solid #ccc; + border-radius: 5px; +} + diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000000000000000000000000000000000000..cfbe57bc24947f8a6c5f9000bfcb63c36ec48700 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,6 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + diff --git a/index.html b/index.html index 40643432b9e75cbc2ba8ae17b39d4c549d72eb09..2347dcdb61e86a1a0f3228365a72e771a49ff27e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,12 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Planejador Diário</title> - <link rel="stylesheet" href="css/style.css"> + + <link rel="stylesheet" href="css/reset.css"> + <link rel="stylesheet" href="css/layout.css"> + <link rel="stylesheet" href="css/header.css"> + <link rel="stylesheet" href="css/main.css"> + <link rel="stylesheet" href="css/footer.css"> </head> <body> <header> @@ -45,7 +50,10 @@