Projeto-1/index.html at master · weriwei/Projeto-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./app.css" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="manifest" href="/manifest.json" />
    <script src="./scripts.js"></script>
    <title>Corre ou carro?</title>
  </head>
  <body>
    <header class="headerBar">
      <div class="appName">Corre ou carro?</div>
      <div class="wallet">
        <a id="totalBudget">0,00</a>
      </div>
    </header>

    <div id="addButtonContent" class="addContent">
      <h1 class="mt2">Adicionar gastos</h1>
      <button id="addButton" class="iconButton ml1">
        <img class="addIcon mt1" src="./assets/add.png" />
      </button>
    </div>

    <div id="filterContent" class="filterContainer mt1 hidden">
      <label for="cars">Filtrar: </label>
      <select name="filter" id="filter" onchange="listBudgets()">
        <option value="All" selected>Exibir tudo</option>
        <option value="Viagem">Viagem</option>
        <option value="Carro">Corrida particular</option>
        <option value="Ônibus">Transporte público</option>
      </select>
    </div>

    <div id="blank">
      <img src="./assets/money-bag.png" />
      <p class="mt1">Nenhum gasto cadastrado.</p>
    </div>

    <div id="categoryButtonsContent" class="buttonGroup hidden mt2">
      <button id="travelButton" type="button" class="button">
        Viagens ( Avião / Buser )
        <img class="buttonIcon" src="./assets/airplane.png" />
      </button>

      <button id="busButton" type="button" class="button">
        Coletivo ( Ônibus / Metrô )
        <img class="buttonIcon" src="./assets/bus.png" />
      </button>

      <button id="carButton" type="button" class="button">
        Particular ( Uber / Táxi )
        <img class="buttonIcon" src="./assets/car.png" />
      </button>
    </div>

    <div id="budgetInputContent" class="hidden mt2">
      <h1 class="ml2">Detalhes dos gastos</h1>
      <div class="field mt2">
        <label>Descrição: </label>
        <input id="inputDescription" type="text" autocomplete="off" required />

        <label>Data: </label>
        <input id="inputDate" type="date" autocomplete="off" required />

        <label>Valor: </label>
        <input
          type="number"
          min="0.00"
          max="10000.00"
          step="0.01"
          autocomplete="off"
          id="inputValue"
          required
        />
      </div>
      <div class="budgetButtonsContainer mt3">
        <button id="confirmButton" type="button" class="button-budget">
          Confirmar
        </button>
        <button id="cleanButton" type="button" class="button-budget">
          Limpar
        </button>
        <button id="backButton" type="button" class="button-budget">
          Voltar
        </button>
      </div>
    </div>

    <div id="budgetListContainer" class="budgetListContainer hidden mt3 ml3">
      <h1>Gastos</h1>
      <ul id="budgetList" class="list hidden mt1"></ul>
    </div>

    <div id="singleBudget" class="hidden mt3">
      <h1 class="ml2">O que deseja fazer?</h1>
      <div class="singleBudgetContainer mt2 ml1">
        <label id="selectedBudget"></label>
      </div>
      <div class="budgetButtonsContainer mt3">
        <button id="editButton" type="button" class="button-budget">
          Editar
        </button>
        <button id="deleteButton" type="button" class="button-budget">
          Apagar
        </button>
        <button id="cancelButton" type="button" class="button-budget">
          Cancelar
        </button>
      </div>
    </div>
  </body>
</html>