├── index.html ├── logo.svg ├── notification-icon.svg └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DSMeta 8 | 9 | 10 | 11 | 12 |
13 |
14 | DSMeta 15 |

DSMeta

16 |

17 | Desenvolvido por 18 | @devsuperior.ig 19 |

20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 |

Vendas

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 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 95 | 96 | 97 | 98 |
IDDataVendedorVisitasVendasTotalNotificar
#34108/07/2022Anakin1511R$ 55300.00 59 |
60 |
61 | Notificar 62 |
63 |
64 |
#34108/07/2022Anakin1511R$ 55300.00 74 |
75 |
76 | Notificar 77 |
78 |
79 |
#34108/07/2022Anakin1511R$ 55300.00 89 |
90 |
91 | Notificar 92 |
93 |
94 |
99 |
100 | 101 |
102 |
103 |
104 |
105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /notification-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"); 2 | 3 | * { 4 | font-family: "Roboto", sans-serif; 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body, 11 | html { 12 | background-color: #000; 13 | color: #fff; 14 | } 15 | 16 | a, 17 | a:hover, 18 | a:visited { 19 | color: unset; 20 | text-decoration: none; 21 | } 22 | 23 | header { 24 | background: linear-gradient(180deg, #102347 0%, #181818 100%); 25 | height: 220px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .dsmeta-logo-container { 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | } 36 | 37 | .dsmeta-logo-container img { 38 | width: 235px; 39 | } 40 | 41 | .dsmeta-logo-container h1 { 42 | margin-top: 15px; 43 | font-size: 24px; 44 | } 45 | 46 | .dsmeta-logo-container p { 47 | font-size: 14px; 48 | font-weight: 300; 49 | } 50 | 51 | .dsmeta-card { 52 | background-color: #283142; 53 | border-radius: 10px; 54 | padding: 30px 10px; 55 | } 56 | 57 | .dsmeta-container { 58 | width: 100%; 59 | max-width: 900px; 60 | margin: 0 auto; 61 | } 62 | 63 | #sales { 64 | padding: 40px 10px; 65 | } 66 | 67 | .dsmeta-sales-title { 68 | color: #676fff; 69 | font-size: 24px; 70 | margin-bottom: 20px; 71 | } 72 | 73 | .dsmeta-form-control-container { 74 | margin-bottom: 16px; 75 | max-width: 300px; 76 | } 77 | 78 | .dsmeta-form-control { 79 | width: 100%; 80 | height: 46px; 81 | background-color: #1b2531; 82 | border: 1px solid #384459; 83 | border-radius: 5px; 84 | color: #9aaabe; 85 | padding: 0 20px; 86 | font-size: 18px; 87 | } 88 | 89 | .dsmeta-sales-table { 90 | width: 100%; 91 | border-spacing: 0; 92 | border-collapse: collapse; 93 | } 94 | 95 | .dsmeta-sales-table thead { 96 | height: 55px; 97 | font-size: 16px; 98 | color: #e9e9e9; 99 | font-weight: 700; 100 | } 101 | 102 | .dsmeta-sales-table tbody { 103 | font-size: 14px; 104 | font-weight: 400; 105 | color: #cfcfcf; 106 | text-align: center; 107 | } 108 | 109 | .dsmeta-sales-table tbody tr { 110 | height: 74px; 111 | border-top: 1px solid #5f6e82; 112 | } 113 | 114 | .dsmeta-sales-table tbody tr:hover > td { 115 | background-color: #384459; 116 | } 117 | 118 | .dsmeta-sales-table tbody tr:nth-child(odd) { 119 | background-color: #242c3b; 120 | } 121 | 122 | .dsmeta-red-btn-container { 123 | display: flex; 124 | justify-content: center; 125 | } 126 | 127 | .dsmeta-red-btn { 128 | height: 45px; 129 | width: 45px; 130 | background: rgba(255, 107, 114, 0.1); 131 | border: 1px solid #ff6b72; 132 | border-radius: 10px; 133 | display: flex; 134 | align-items: center; 135 | justify-content: center; 136 | cursor: pointer; 137 | } 138 | 139 | .dsmeta-red-btn img { 140 | width: 19px; 141 | } 142 | 143 | .show576 { 144 | display: none; 145 | } 146 | 147 | .show992 { 148 | display: none; 149 | } 150 | 151 | @media (min-width: 576px) { 152 | .show576 { 153 | display: table-cell; 154 | } 155 | 156 | .dsmeta-card { 157 | padding: 35px; 158 | } 159 | 160 | .dsmeta-sales-table tbody tr { 161 | height: 55px; 162 | } 163 | 164 | .dsmeta-sales-table tbody { 165 | font-size: 18px; 166 | } 167 | } 168 | 169 | @media (min-width: 992px) { 170 | .show992 { 171 | display: table-cell; 172 | } 173 | } 174 | --------------------------------------------------------------------------------