From 6371e7794d2fa9ba5b79f267219e50e885057342 Mon Sep 17 00:00:00 2001 From: bndw Date: Sat, 30 May 2020 12:33:16 -0700 Subject: Initial commit --- src/App.css | 38 -------------------------------- src/App.js | 32 +++++++++++++-------------- src/components/Card.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++ src/components/style.css | 47 ++++++++++++++++++++++++++++++++++++++++ src/index.css | 13 ----------- src/index.js | 2 +- src/light.min.css | 2 ++ src/style.css | 11 ++++++++++ 8 files changed, 133 insertions(+), 68 deletions(-) delete mode 100644 src/App.css create mode 100644 src/components/Card.js create mode 100644 src/components/style.css delete mode 100644 src/index.css create mode 100644 src/light.min.css create mode 100644 src/style.css (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -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); - } -} diff --git a/src/App.js b/src/App.js index ce9cbd2..6ba42f0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,24 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import Card from './components/Card'; +import './style.css'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ +

WiFi Card

+ +

+ Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc. +

+ +

+ Your information is never sent to the server. + View the source code. +

+ + +
); } diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 0000000..c555a25 --- /dev/null +++ b/src/components/Card.js @@ -0,0 +1,56 @@ +import React from 'react'; +import QRCode from 'qrcode.react'; +import './style.css'; + +class Card extends React.Component { + constructor(props) { + super(props); + this.state = {ssid: '', password: '', qrvalue: ''}; + this.handleSSIDChange = this.handleSSIDChange.bind(this); + this.handlePasswordChange= this.handlePasswordChange.bind(this); + } + + handleSSIDChange(event) { + this.setState({ssid: event.target.value}, () => this.generateqr()); + } + + handlePasswordChange(event) { + this.setState({password: event.target.value}, () => this.generateqr()); + } + + generateqr() { + const qrcode = `WIFI:T:WPA;S:${this.state.ssid};P:${this.state.password};;` + this.setState({qrvalue: qrcode}); + } + + render() { + return ( +
+ +
+ +
+
+ ) + } +} + +export default Card; diff --git a/src/components/style.css b/src/components/style.css new file mode 100644 index 0000000..e5b01e3 --- /dev/null +++ b/src/components/style.css @@ -0,0 +1,47 @@ +#print-area { + margin-top: 2em; + padding: 1em; +} +.details { + display: flex; + padding: 1em; +} +.details .text{ + margin: 0; +} +.details .text * { + margin: 0 1em; +} +.details .text input { + background-color: #fff; + border: solid 1px #ddd; + font-size: 1.4em; + font-weight: bold; + line-height: 2; +} +.print-btn { + padding-top: 2em; +} +.print-btn button { + color: #fff; + height: 50px; + width: 180px; + background-color: #0074d9; +} + +@media print { + body * { + visibility: hidden; + } + #print-area, #print-area * { + visibility: visible; + } + #print-area input { + border: none; + } + #print-area { + position: absolute; + left: 0; + top: 0; + } +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index f5185c1..be3b97a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './light.min.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/light.min.css b/src/light.min.css new file mode 100644 index 0000000..8ce73eb --- /dev/null +++ b/src/light.min.css @@ -0,0 +1,2 @@ +@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"πŸ“§ "}a[href^=tel]:before{content:"πŸ“ž "}a[href^=sms]:before{content:"πŸ’¬ "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4} +/*# sourceMappingURL=light.min.css.map */ diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..3e55788 --- /dev/null +++ b/src/style.css @@ -0,0 +1,11 @@ +body { + max-width: 650px; +} +.tag { + line-height: 1.6; +} + +iframe { + float: right; + margin: -2em; +} -- cgit v1.2.3