Elijah Lucian 1 year ago
parent d4483e5041
commit 9f1e2c1ca5
  1. 16
      package-lock.json
  2. 1
      package.json
  3. 38
      src/App.css
  4. 27
      src/App.tsx

16
package-lock.json generated

@ -17,6 +17,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-webcam": "^6.0.0",
"typescript": "^4.4.4",
"web-vitals": "^1.1.2"
}
@ -16170,6 +16171,15 @@
"semver": "bin/semver"
}
},
"node_modules/react-webcam": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-6.0.0.tgz",
"integrity": "sha512-pw7067WYnDHRjAXYXrsLeig9/AAxCFDnnaEJzZ5ep6UZoYMqF4UNRtVkeTk0LotpwqT/c8vHisn/+QodNbUsQA==",
"peerDependencies": {
"react": ">=15.3.0",
"react-dom": ">=15.3.0"
}
},
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -33529,6 +33539,12 @@
}
}
},
"react-webcam": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-6.0.0.tgz",
"integrity": "sha512-pw7067WYnDHRjAXYXrsLeig9/AAxCFDnnaEJzZ5ep6UZoYMqF4UNRtVkeTk0LotpwqT/c8vHisn/+QodNbUsQA==",
"requires": {}
},
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

@ -13,6 +13,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-webcam": "^6.0.0",
"typescript": "^4.4.4",
"web-vitals": "^1.1.2"
},

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@ -1,24 +1,15 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Webcam from "react-webcam";
import "./app.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className="app">
<Webcam className="webcam" />
<div className="overlay"></div>
<div className="header"></div>
<div className="headtext">Scan the Record QR Code.</div>
<div className="footer"></div>
</div>
);
}

Loading…
Cancel
Save