commited

Lucasdias067 · Oct 25, 2022 · 620e040 · 620e040
commit 620e040
Show file tree

Hide file tree

Showing 391 changed files with 205,465 additions and 0 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["PKief.material-icon-theme", "esbenp.prettier-vscode"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,32 @@
+{
+  // editor
+  "editor.wordWrap": "on",
+  "editor.fontSize": 14,
+  "editor.lineHeight": 20,
+  "editor.tabSize": 2,
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.minimap.enabled": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+
+  // explorer
+  "explorer.compactFolders": false,
+
+  // prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
+  "prettier.singleQuote": false,
+  "prettier.tabWidth": 2,
+  "prettier.semi": false,
+
+  // terminal
+  "terminal.integrated.fontSize": 16,
+  "terminal.integrated.profiles.windows": {
+    "Git Bash": {
+      "source": "Git Bash"
+    }
+  },
+  "terminal.integrated.defaultProfile.windows": "Git Bash",
+  "window.zoomLevel": 0
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,48 @@
+<h1 align="center"> Explorer Lab #01 </h1>
+
+<p align="center">
+Evento exclusivo e gratuito, promovido pela Rocketseat para ensino de tecnologias WEB.
+</p>
+
+<p align="center">
+  <a href="#-tecnologias">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-projeto">Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-layout">Layout</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#memo-licença">Licença</a>
+</p>
+
+<p align="center">
+  <img alt="License" src="https://img.shields.io/static/v1?label=license&message=MIT&color=49AA26&labelColor=000000">
+</p>
+
+<br>
+
+<p align="center">
+  <img alt="rocketpay" src=".github/project.png" width="100%">
+</p>
+
+## 🚀 Tecnologias
+
+Esse projeto foi desenvolvido com as seguintes tecnologias:
+
+- HTML e CSS
+- JavaScript e JSON
+- [Node e NPM](https://nodejs.org/)
+- [Vite](https://vitejs.dev/)
+- [iMask](https://imask.js.org)
+
+## 💻 Projeto
+
+O Rocketpay é um componente que simula o formulário de preenchimento de cartão de crédito, onde é possível adicionar máscara aos inputs e atualizar elementos HTML via DOM.
+
+## 🔖 Layout
+
+Você pode visualizar o layout do projeto através [DESSE LINK](https://www.figma.com/file/gpqavL469k0pPUGOmAQEM9/Explorer-Lab-%2301/duplicate). É necessário ter conta no [Figma](https://figma.com) para acessá-lo.
+
+## :memo: Licença
+
+Esse projeto está sob a licença MIT.
+
+---
+
+Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat)
diff --git a/index.html b/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/cc-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rocketpay</title>
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app">
+      <header>
+        <img src="logo.svg" alt="ícone rocketpay" />
+      </header>
+
+      <section class="cc">
+        <div class="cc-bg">
+          <svg
+            width="360"
+            height="230"
+            viewBox="0 0 360 230"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <mask
+              id="mask0_3_2547"
+              style="mask-type: alpha"
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="360"
+              height="230"
+            >
+              <rect width="360" height="230" rx="15.4011" fill="#16084C" />
+            </mask>
+            <g mask="url(#mask0_3_2547)">
+              <g filter="url(#filter0_f_3_2547)">
+                <path
+                  d="M451.518 -135.506C473.881 -89.3531 414.166 -13.4917 318.142 33.9349C222.118 81.3615 126.147 82.3939 103.784 36.2409C81.4215 -9.91221 141.136 -85.7735 237.16 -133.2C333.184 -180.627 429.156 -181.659 451.518 -135.506Z"
+                  fill="black"
+                />
+              </g>
+              <g filter="url(#filter1_f_3_2547)">
+                <path
+                  d="M399.134 -169.756C421.497 -123.603 361.783 -47.742 265.758 -0.315356C169.734 47.1113 73.7629 48.1437 51.4003 1.99062C29.0377 -44.1624 88.7521 -120.024 184.776 -167.45C280.8 -214.877 376.772 -215.909 399.134 -169.756Z"
+                  fill="gray"
+                />
+              </g>
+            </g>
+            <defs>
+              <filter
+                id="filter0_f_3_2547"
+                x="43.2629"
+                y="-225.286"
+                width="468.777"
+                height="351.306"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="27.9144"
+                  result="effect1_foregroundBlur_3_2547"
+                />
+              </filter>
+              <filter
+                id="filter1_f_3_2547"
+                x="-9.12087"
+                y="-259.536"
+                width="468.777"
+                height="351.306"
+                filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                <feBlend
+                  mode="normal"
+                  in="SourceGraphic"
+                  in2="BackgroundImageFix"
+                  result="shape"
+                />
+                <feGaussianBlur
+                  stdDeviation="27.9144"
+                  result="effect1_foregroundBlur_3_2547"
+                />
+              </filter>
+            </defs>
+          </svg>
+        </div>
+
+        <div class="cc-logo">
+          <span><img src="/cc-icon.svg" alt="ícone padrão de cartão" /></span>
+          <span
+            ><img
+              src="/cc-default.svg"
+              alt="ícone do cartão de crédito selecionado"
+          /></span>
+        </div>
+
+        <div class="cc-info">
+          <div class="cc-number">1234 5678 9012 3456</div>
+
+          <div class="cc-holder">
+            <div class="label">Nome do titular</div>
+            <div class="value">FULANO DA SILVA</div>
+          </div>
+
+          <div class="cc-extra">
+            <div class="cc-expiration">
+              <div class="label">Expiração</div>
+              <div class="value">02/32</div>
+            </div>
+            <div class="cc-security">
+              <div class="label">CVC</div>
+              <div class="value">123</div>
+            </div>
+            <img src="/cc-chip.svg" alt="ícone de chip de cartão de crédito" />
+          </div>
+        </div>
+      </section>
+
+      <form action="">
+        <div class="input-wrapper">
+          <label for="card-number">Número do cartão</label>
+          <input id="card-number" />
+        </div>
+
+        <div class="input-wrapper">
+          <label for="card-holder">Nome do titular</label>
+          <input id="card-holder" />
+        </div>
+
+        <div class="flex">
+          <div class="input-wrapper">
+            <label for="expiration-date">Expiração</label>
+            <input id="expiration-date" />
+          </div>
+
+          <div class="input-wrapper">
+            <label for="security-code">CVC</label>
+            <input id="security-code" />
+          </div>
+        </div>
+
+        <button id="add-card">ADICIONAR CARTÃO</button>
+      </form>
+    </div>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/node_modules/.bin/esbuild b/node_modules/.bin/esbuild
diff --git a/node_modules/.bin/esbuild.cmd b/node_modules/.bin/esbuild.cmd
diff --git a/node_modules/.bin/esbuild.ps1 b/node_modules/.bin/esbuild.ps1
diff --git a/node_modules/.bin/nanoid b/node_modules/.bin/nanoid
diff --git a/node_modules/.bin/nanoid.cmd b/node_modules/.bin/nanoid.cmd
diff --git a/node_modules/.bin/nanoid.ps1 b/node_modules/.bin/nanoid.ps1
diff --git a/node_modules/.bin/resolve b/node_modules/.bin/resolve