├── .gitignore ├── LICENSE ├── README.md ├── api └── db.json ├── bin ├── deploy-site.js ├── last-dev.txt └── libs │ ├── aws-utils.js │ └── helpers.js ├── components ├── a2hs │ ├── index.html │ └── onboarding │ │ ├── component.base.js │ │ ├── index.html │ │ ├── safari-ipad-share-a2hs-right.png │ │ ├── safari-ipad-share-a2hs.png │ │ └── wizard.js ├── chips │ ├── chips.css │ ├── chips.js │ └── index.html ├── circle-gauge │ ├── circle-gauge.css │ ├── circle-gauge.js │ └── index.html ├── gdpr │ └── index.html ├── index.html └── newsletter │ └── example_1 │ ├── example_1.css │ └── index.html ├── css ├── absolute-center │ ├── img │ │ ├── cat-w-shiny-ball-1125x1125.jpg │ │ ├── cat-w-shiny-ball-320x320.jpg │ │ ├── cat-w-shiny-ball-460x460.jpg │ │ ├── cat-w-shiny-ball-720x720.jpg │ │ └── cat-w-shiny-ball-980x980.jpg │ ├── index.html │ └── readme.md ├── all.css ├── all.min.css ├── animate.min.css ├── background-stripes │ ├── barber-shop │ │ └── index.html │ ├── index.html │ ├── readme.md │ └── zig-zag │ │ └── index.html ├── banners │ └── index.html ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap.min.css.map ├── bootstrap │ └── navbar │ │ ├── index.html │ │ └── readme.md ├── bullet-list │ ├── index.html │ └── readme.md ├── center-text-vertically │ └── index.html ├── css-padding │ └── index.html ├── foggy-glass │ └── index.html ├── grid │ └── index.html ├── hamburger │ └── index.html ├── header-bar.css ├── header-bar │ └── index.html ├── index.html ├── iphone │ └── notch │ │ └── index.html ├── libs │ ├── all.css │ ├── all.min.css │ ├── animate.css │ ├── animate.min.css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map ├── main.css ├── mdb.min.css ├── modals │ └── index.html ├── placeholder-color │ └── index.html ├── pricing │ └── cardflip │ │ ├── card-flip.css │ │ └── index.html ├── responsive-background-hero │ └── index.html ├── same-height-card-list │ └── index.html ├── shapes │ ├── index.html │ └── style.css ├── tab-panel.css ├── text-transform │ ├── capitalize.html │ ├── first-letter.html │ ├── lowercase.html │ ├── title-case.html │ └── uppercase.html ├── underline │ └── index.html ├── vertical-menu │ └── index.html └── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ ├── fa-solid-900.woff2 │ ├── fontello.eot │ ├── fontello.svg │ ├── fontello.ttf │ ├── fontello.woff │ └── fontello.woff2 ├── fetch ├── fileUpload │ └── index.html └── index.html ├── generate.js ├── html ├── acrylic-dialog │ └── index.html ├── amazon │ └── cart │ │ └── qty-dropdown │ │ ├── cart-qty.css │ │ └── index.html ├── animated-search │ └── index.html ├── audio │ ├── index.html │ └── podcast.mp3 ├── chat │ ├── 1 │ │ └── index.html │ └── 2 │ │ └── index.html ├── checkbox │ ├── index.html │ └── todo │ │ └── index.html ├── contact-form │ └── index.html ├── datalist │ └── index.html ├── editor │ ├── index.html │ └── wysiwyg.js ├── file │ └── upload │ │ └── index.html ├── form │ ├── index.html │ └── tabindex │ │ └── index.html ├── horizontal-line │ └── index.html ├── index.html ├── live-video │ └── index.html ├── login │ ├── login-form │ │ ├── css │ │ │ └── login.css │ │ ├── img │ │ │ ├── wild-dot-logo-square-120x120.png │ │ │ ├── wild-dot-logo-square-130x130.png │ │ │ ├── wild-dot-logo-square-320x320.png │ │ │ ├── wild-dot-logo-square-460x460.png │ │ │ └── wild-dot-logo-square-500x500.png │ │ └── index.html │ └── materialize │ │ └── index.html ├── material │ ├── appbars │ │ └── index.html │ └── snackbar │ │ └── index.html ├── medium │ ├── example-figure.html │ ├── index.html │ ├── medium.css │ ├── medium.js │ ├── medium.min.js │ ├── rangy-classapplier.js │ ├── rangy-core.js │ ├── rangy-highlighter.js │ ├── rangy-selectionsaverestore.js │ ├── rangy-serializer.js │ ├── rangy-textrange.js │ ├── undo.js │ └── wysiwyg.js ├── pull-quote │ └── index.html ├── pwa-clip │ └── index.html ├── slideshare │ └── index.html ├── sms │ └── index.html ├── subscribe │ └── index.html ├── textarea │ └── index.html └── video │ └── index.html ├── img ├── 5-star-rating.png ├── avtar-8.jpg ├── background-1932466_1920-1240x821.jpg ├── background-1932466_1920-1500x993.jpg ├── background-1932466_1920-1760x1166.jpg ├── background-1932466_1920-1920x1271.jpg ├── background-1932466_1920-320x212.jpg ├── background-1932466_1920-460x305.jpg ├── background-1932466_1920-720x477.jpg ├── background-1932466_1920-980x649.jpg ├── banner-rect-278x157.jpg ├── iphone.png ├── love2dev-logo-light-dev-trans-1280x214.png ├── love2dev-logo-light-dev-trans-320x54.png ├── love2dev-logo-light-dev-trans-460x77.png ├── love2dev-logo-light-dev-trans-717x120.png ├── love2dev-logo-light-dev-trans.html ├── love2dev-logo-light-dev-trans.png ├── marker-image.png ├── mediterranean-cuisine-2378758_1920-1240x827.jpg ├── mediterranean-cuisine-2378758_1920-1500x1000.jpg ├── mediterranean-cuisine-2378758_1920-1760x1174.jpg ├── mediterranean-cuisine-2378758_1920-1920x1280.jpg ├── mediterranean-cuisine-2378758_1920-320x214.jpg ├── mediterranean-cuisine-2378758_1920-460x307.jpg ├── mediterranean-cuisine-2378758_1920-720x480.jpg ├── mediterranean-cuisine-2378758_1920-980x654.jpg ├── wild-dot-logo-square-130x130.png ├── wild-dot-logo-square-320x320.png ├── wild-dot-logo-square-460x460.png └── wild-dot-logo-square-500x500.png ├── index.html ├── javascript ├── alert │ ├── alert.html │ ├── banner.html │ ├── confirm.html │ ├── index.html │ ├── modal.html │ └── prompt.html ├── barcode │ ├── barcode.js │ ├── example-barcode.jpg │ ├── example-barcode.png │ └── index.html ├── camera │ ├── camera.js │ └── index.html ├── character-counter │ └── index.html ├── contains │ └── index.html ├── device-orientation │ └── index.html ├── face-recognition │ └── index.html ├── file-upload │ └── index.html ├── forEach │ └── index.html ├── gamepad │ └── index.html ├── geo-location │ ├── index.html │ ├── map │ │ └── index.html │ └── watch │ │ └── index.html ├── index.html ├── inheritance │ ├── index.html │ └── page.js ├── inject-content │ └── index.html ├── lazy │ ├── app.js │ ├── index.html │ ├── intersection-observer.js │ └── lazy.load.js ├── maps │ ├── 1 │ │ └── index.html │ ├── bing │ │ └── index.html │ ├── google │ │ └── index.html │ └── index.html ├── mustache │ ├── child1.html │ ├── child2.html │ ├── index.html │ ├── template.html │ ├── template1.html │ ├── template2.html │ └── template3.html ├── otp │ └── index.html ├── stripe │ └── index.html ├── tab-panel-form-focus │ └── index.html ├── teleprompter │ └── index.html ├── web-vitals │ └── index.html ├── webauthn │ └── index.html ├── webpayments │ └── index.html └── webshare │ ├── index.html │ └── share.js ├── js ├── dollar-bill.js ├── dollar-bill.min.js ├── mustache.min.js ├── popper.js ├── popper.js.map ├── popper.min.js ├── popper.min.js.map ├── register.js ├── stripe-sdk.js ├── tab-panel.js ├── web-vitals.es5.min.js └── web-vitals.js ├── manifest.json ├── meta ├── 088dabd0-58de-02ad-dad1-11826f3f1aa0.webPlatform.png ├── 0d00f352-d9e4-2cbc-ff21-981acf0aa8c4.webPlatform.png ├── 1151807e-90b8-2b80-c40e-c7ff7177ba74.webPlatform.png ├── 164fd7bb-5d92-5143-b146-b057e19995c6.webPlatform.png ├── 22c61d0e-7e6c-8ff4-a993-34525fb4526b.webPlatform.png ├── 24d5b086-693c-a559-1926-8fa98f0b5684.webPlatform.png ├── 4bea0338-9893-de98-fb97-35bb58e98826.webPlatform.png ├── 4c701bc1-3618-e8a3-e259-aeb69f04c87c.webPlatform.png ├── 599c1a51-c127-c843-e38c-5d676bcfb9c3.webPlatform.png ├── 5b0f30da-09b7-fa83-4c3f-6366b2eb6356.webPlatform.png ├── 5dd3cc24-a551-c9e0-d0a3-70ef5c242259.webPlatform.png ├── 636cab50-ec7e-071b-02d2-8c05e9a07c76.webPlatform.png ├── 68d9574f-26bf-c3cf-97be-224ac804fcc8.webPlatform.png ├── 6c6fc52d-ff38-8a3d-eba5-41d235151092.webPlatform.png ├── 72370e8a-992c-9032-7ef3-18d40a22d681.webPlatform.png ├── 73e74bb7-b2a8-cc3f-e464-f700c9a4475a.webPlatform.png ├── 76bfa290-2b0d-f254-462c-de2d449ebfbb.webPlatform.png ├── 77aa4c06-70cd-2877-9fa9-19b04711d5d0.webPlatform.png ├── 78f1ca32-3a25-0d39-8259-b653aacadbdd.webPlatform.png ├── 98d26e28-a717-46ba-1dd8-e43017088186.webPlatform.png ├── a474fda6-4f84-efc2-7a90-6754c4116cee.webPlatform.png ├── a59505de-9ef1-9969-1ac1-f4355fa0759a.webPlatform.png ├── af567750-7c2c-9dc7-ed00-1882e8631881.webPlatform.png ├── b2cbda7f-3ba8-393d-3262-6d8e80bfeb43.webPlatform.png ├── ba1e099c-a1f9-25b3-a9cc-7f07685db439.webPlatform.png ├── cf2692f1-f709-dcf7-3159-0d32af791fdf.webPlatform.png ├── d259de1b-59e4-dd72-8230-00eeacdb3802.webPlatform.png ├── d4fdaf93-58cc-7d58-e432-e35d89b62d88.webPlatform.png ├── dafcec93-ec99-8e14-b34a-99a1d549656c.webPlatform.png ├── deec9077-dfeb-bc13-21d7-47069e6fb2d6.webPlatform.png ├── e620463c-b1c4-ea6f-ca44-1ec04c1170a9.webPlatform.png ├── ec979761-0a4d-3fa2-9e56-8f4519a701e0.webPlatform.png ├── efa7e36d-65b1-f94a-c4ca-d0210623c857.webPlatform.png ├── fast-furniture-logo-300x39-t.png ├── fast-furniture-logo-300x39.png └── fdeb3350-043a-beef-2437-09572c675b9b.webPlatform.png ├── offline.html ├── package-lock.json ├── package.json ├── santa ├── manifest.json └── sw.js ├── shell.html ├── sw.js └── webfonts ├── fa-brands-400.eot ├── fa-brands-400.svg ├── fa-brands-400.ttf ├── fa-brands-400.woff ├── fa-brands-400.woff2 ├── fa-regular-400.eot ├── fa-regular-400.svg ├── fa-regular-400.ttf ├── fa-regular-400.woff ├── fa-regular-400.woff2 ├── fa-solid-900.eot ├── fa-solid-900.svg ├── fa-solid-900.ttf ├── fa-solid-900.woff ├── fa-solid-900.woff2 ├── fa-v4compatibility.ttf ├── fa-v4compatibility.woff2 ├── fontello.eot ├── fontello.svg ├── fontello.ttf ├── fontello.woff └── fontello.woff2 /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | /javascript/lazy/lazy.zip 61 | /bin/dev.env 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Love2Dev-Code-Samples 2 | A repository of code samples used in articles on [Love2Dev](https://love2dev.com/blog/). 3 | 4 | -------------------------------------------------------------------------------- /api/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "emails": [ "Manuela.Zboncak64@hotmail.com", 3 | "Devan31@yahoo.com", "Felicia44@hotmail.com", "Jorge_Dicki@hotmail.com", "Karlie.Conn@yahoo.com", "Shanon.Gleason95@gmail.com", "Nico_Pacocha62@hotmail.com", "Athena.Witting77@yahoo.com", "Denis_Dicki84@yahoo.com", "Silas.Miller@hotmail.com", "Julia_Baumbach62@yahoo.com", "Mossie63@gmail.com", "Adolf.Vandervort40@gmail.com", "Gudrun_Thiel75@gmail.com", "Shawna.Adams52@hotmail.com", "William21@hotmail.com", "Wava.Muller70@hotmail.com", "German.Pfannerstill59@hotmail.com", "Fae.Friesen@gmail.com", "Jordi.Krajcik@gmail.com", "Tyrese11@hotmail.com", "Abbigail89@yahoo.com" 4 | ], 5 | "terms": [ "Savings Account embrace Ergonomic Granite Computer program", 6 | "tan interactive Ford Outdoors Buckinghamshire", 7 | "interface Kenyan Shilling Computers Guinea-Bissau multi-byte", 8 | "internet solution Games Soft", 9 | "digital", 10 | "transmit compressing systems driver", 11 | "Directives View Principal utilize", "teal Ergonomic Realigned EXE invoice", "Keyboard Specialist Bedfordshire Tasty Wooden Table", "synthesize turn-key", "e-commerce payment FTP", "grow Generic", "USB withdrawal", "tan Armenian Dram strategic quantifying Handmade Granite Pants", "TCP Handcrafted Avon Specialist Haiti", "Checking Account transmitter deposit" 12 | ] 13 | } -------------------------------------------------------------------------------- /bin/deploy-site.js: -------------------------------------------------------------------------------- 1 | const glob = require("glob"), 2 | fs = require("fs"), 3 | gitlog = require("gitlog"), 4 | helpers = require("./libs/helpers"), 5 | aws = require("./libs/aws-utils"); 6 | 7 | let baseTime = parseInt(helpers.readFile("last-dev.txt"), 10); 8 | 9 | /* 10 | { 11 | "Bucket": "your bucket name here" 12 | } 13 | */ 14 | let env = helpers.readJSON("dev.env"); 15 | let fileCount = 0, 16 | current_time = new Date().getTime(); 17 | let uploads = []; 18 | 19 | const git_options = { 20 | repo: "../", 21 | since: new Date(baseTime), 22 | fields: ["subject", "committerDate"], 23 | execOptions: { 24 | maxBuffer: 1000 * 1024 25 | } 26 | }; 27 | 28 | //let commits = gitlog(git_options); 29 | 30 | let git_results = { 31 | files: [], 32 | subjects: [], 33 | committerDate: [] 34 | }; 35 | 36 | // commits.forEach(commit => { 37 | // git_results.files = git_results.files.concat(commit.files); 38 | // git_results.subjects.push(commit.subject); 39 | // git_results.committerDate.push(commit.committerDate); 40 | // }); 41 | 42 | function buildGitLog(git) { 43 | let str = "Updated Files:\r\n"; 44 | 45 | git.files.forEach(file => { 46 | str += file; 47 | str += "\r\n"; 48 | }); 49 | 50 | str += "----------------------\r\nComments\r\n"; 51 | 52 | git.subjects.forEach(subject => { 53 | str += subject; 54 | str += "\r\n"; 55 | }); 56 | 57 | str += "----------------------\r\nComit Dates\r\n"; 58 | 59 | git.committerDate.forEach(file => { 60 | str += file; 61 | str += "\r\n"; 62 | }); 63 | 64 | return str; 65 | } 66 | 67 | function uploadFile(src, key) { 68 | console.log(typeof src); 69 | 70 | let options = { 71 | Bucket: env.Bucket, 72 | gzip: true, 73 | isString: true, 74 | Body: src.replace(/version = \"\d+\.\d+\"/, "version = " + current_time), 75 | key: key.toLowerCase().replace("../", "") 76 | }; 77 | 78 | if (options.Body) { 79 | return aws.uploadFile(options).catch(err => { 80 | console.error("error"); 81 | console.error(err); 82 | }); 83 | } 84 | 85 | return Promise.resolve(); 86 | } 87 | 88 | function uploadFiles(files) { 89 | for (let index = 0; index < files.length; index++) { 90 | const file = files[index]; 91 | 92 | if (fs.existsSync(file)) { 93 | let fileTime = parseInt(fs.statSync(file).mtimeMs, 10); 94 | 95 | if (fileTime > baseTime) { 96 | try { 97 | let src = helpers.readFile(file); 98 | 99 | fileCount += 1; 100 | 101 | uploadFile(src, file.replace(/..\/public\//, "")); 102 | 103 | console.log(file); 104 | } catch (error) { 105 | console.error(error); 106 | console.log(file); 107 | } 108 | } 109 | } 110 | } 111 | } 112 | 113 | // options is optional 114 | glob("../**/*.css", {}, function(er, files) { 115 | uploadFiles(files); 116 | }); 117 | 118 | glob("../**/*.js", {}, function(er, files) { 119 | uploads.push(uploadFiles(files)); 120 | }); 121 | 122 | glob("../**/*.html", {}, function(er, files) { 123 | uploads.push(uploadFiles(files)); 124 | }); 125 | 126 | // glob("../**/*.json", {}, function(er, files) { 127 | // uploads.push(uploadFiles(files)); 128 | // }); 129 | 130 | // glob( "../www/font/*.*", {}, function ( er, files ) { 131 | // uploads.push( uploadFiles( files ) ); 132 | // } ); 133 | 134 | Promise.all(uploads).then(results => { 135 | console.log(results.length); 136 | console.log("fileCount: ", fileCount); 137 | 138 | // contacts.forEach( contact => { 139 | // sendSMS( contact ); 140 | // } ); 141 | 142 | // let body = 143 | // "A source code update has been pushed to the 2 Weeks Ready site.\r\nas always you can visit\r\nhttps://d3eohv5wzdvi1t.cloudfront.net" + 144 | // "\r\n\r\n" + 145 | // buildGitLog( git_results ); 146 | 147 | // emails.forEach( email => { 148 | // aws.sendEMail( { 149 | // fromAddr: "info@love2dev.com", 150 | // subject: "2 Weeks Ready Site Update", 151 | // toAddr: email, 152 | // htmlBody: body.replace( /\r\n/g, "
" ), 153 | // txtBody: body 154 | // } ); 155 | // } ); 156 | 157 | helpers.createFile("last-dev.txt", current_time, true); 158 | 159 | console.log(env); 160 | }); 161 | -------------------------------------------------------------------------------- /bin/last-dev.txt: -------------------------------------------------------------------------------- 1 | 1598060762823 -------------------------------------------------------------------------------- /components/a2hs/onboarding/safari-ipad-share-a2hs-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/components/a2hs/onboarding/safari-ipad-share-a2hs-right.png -------------------------------------------------------------------------------- /components/a2hs/onboarding/safari-ipad-share-a2hs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/components/a2hs/onboarding/safari-ipad-share-a2hs.png -------------------------------------------------------------------------------- /components/chips/chips.css: -------------------------------------------------------------------------------- 1 | .chip { 2 | display: inline-block; 3 | height: 32px; 4 | font-size: 13px; 5 | font-weight: 500; 6 | color: rgba(0, 0, 0, 0.6); 7 | line-height: 32px; 8 | padding: 0 12px; 9 | border-radius: 16px; 10 | background-color: #e4e4e4; 11 | margin-bottom: 5px; 12 | margin-right: 5px; 13 | } 14 | 15 | .chip>img { 16 | float: left; 17 | margin: 0 8px 0 -12px; 18 | height: 32px; 19 | width: 32px; 20 | border-radius: 50%; 21 | } 22 | 23 | .chip .close { 24 | cursor: pointer; 25 | float: right; 26 | font-size: 16px; 27 | line-height: 32px; 28 | padding-left: 8px; 29 | } 30 | 31 | .chips { 32 | border: none; 33 | border-bottom: 1px solid #9e9e9e; 34 | -webkit-box-shadow: none; 35 | box-shadow: none; 36 | margin: 0 0 20px 0; 37 | min-height: 45px; 38 | outline: none; 39 | -webkit-transition: all .3s; 40 | transition: all .3s; 41 | } 42 | 43 | .chips.focus { 44 | border-bottom: 1px solid #26a69a; 45 | -webkit-box-shadow: 0 1px 0 0 #26a69a; 46 | box-shadow: 0 1px 0 0 #26a69a; 47 | } 48 | 49 | .chips:hover { 50 | cursor: text; 51 | } 52 | 53 | .chips .chip.selected { 54 | background-color: #26a69a; 55 | color: #fff; 56 | } 57 | 58 | .chips .input { 59 | background: none; 60 | border: 0; 61 | color: rgba(0, 0, 0, 0.6); 62 | display: inline-block; 63 | font-size: 1rem; 64 | height: 3rem; 65 | line-height: 32px; 66 | outline: 0; 67 | margin: 0; 68 | padding: 0 !important; 69 | width: 120px !important; 70 | } 71 | 72 | .chips .input:focus { 73 | border: 0 !important; 74 | -webkit-box-shadow: none !important; 75 | box-shadow: none !important; 76 | } 77 | 78 | .chips .autocomplete-content { 79 | margin-top: 0; 80 | margin-bottom: 0; 81 | } 82 | 83 | .prefix~.chips { 84 | margin-left: 3rem; 85 | width: 92%; 86 | width: calc(100% - 3rem); 87 | } 88 | 89 | .chips:empty~label { 90 | font-size: 0.8rem; 91 | -webkit-transform: translateY(-140%); 92 | transform: translateY(-140%); 93 | } -------------------------------------------------------------------------------- /components/chips/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Love2Dev - Chips 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 | -------------------------------------------------------------------------------- /components/circle-gauge/circle-gauge.css: -------------------------------------------------------------------------------- 1 | .pie-container { 2 | width: 100px; 3 | height: 100px; 4 | position: relative; 5 | } 6 | 7 | .right-pie, 8 | .left-pie { 9 | position: absolute; 10 | z-index: 50; 11 | top: 10px; 12 | left: 10px; 13 | width: 100px; 14 | height: 100px; 15 | border-radius: 50%; 16 | background-color: #d13438; 17 | clip: rect(0px, 300px, 0, 150px); 18 | animation: fill linear 2s; 19 | } 20 | 21 | .left-pie { 22 | clip: rect(300px, 150px, 300px, 0px); 23 | animation: fillleft 3.9s ease-in-out; 24 | } 25 | 26 | .inner-pie { 27 | position: absolute; 28 | top: 20px; 29 | left: 20px; 30 | background-color: #fff; 31 | z-index: 100; 32 | width: 95px; 33 | height: 95px; 34 | border-radius: 50%; 35 | box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.2); 36 | } 37 | 38 | .back-pie { 39 | position: absolute; 40 | top: 9px; 41 | left: 9px; 42 | z-index: 1; 43 | width: 100px; 44 | height: 100px; 45 | background-color: #fff; 46 | border-radius: 50%; 47 | box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); 48 | } 49 | 50 | .gauge-value { 51 | font-size: 36px; 52 | } 53 | 54 | @keyframes fill { 55 | 0% { 56 | clip: rect(0px, 300px, 0, 150px); 57 | } 58 | } 59 | 60 | @keyframes fillleft { 61 | 0% { 62 | clip: rect(300px, 150px, 300px, 0px); 63 | } 64 | 65 | 49% { 66 | clip: rect(300px, 150px, 300px, 0px); 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /components/circle-gauge/circle-gauge.js: -------------------------------------------------------------------------------- 1 | ( function ( window, undefined ) { 2 | 3 | "use strict"; 4 | 5 | var defaults = { 6 | width: 400, 7 | height: 400, 8 | value: 75, 9 | min: 0, 10 | max: 100, 11 | color: "#000", 12 | circles: { 13 | selectors: { 14 | rightCSS: ".right-pie", 15 | leftCSS: ".left-pie", 16 | innerCircleCSS: ".inner-pie", 17 | backPieCSS: ".back-pie", 18 | containerCSS: ".pie-container", 19 | gaugevalue: ".gauge-value" 20 | } 21 | } 22 | }, 23 | settings = {}, 24 | $right, 25 | $left, 26 | $innerCircle, 27 | $container, 28 | $backPie, 29 | $gaugevalue; 30 | 31 | function initialize( options ) { 32 | 33 | settings = Object.assign( {}, defaults, options ); 34 | 35 | selectElements() 36 | .then( function () { 37 | 38 | initializeCircles(); 39 | 40 | } ); 41 | 42 | } 43 | 44 | function selectElements() { 45 | 46 | $container = document.querySelector( settings.circles.selectors.containerCSS ); 47 | $right = $container.querySelector( settings.circles.selectors.rightCSS ); 48 | $left = $container.querySelector( settings.circles.selectors.leftCSS ); 49 | $innerCircle = $container.querySelector( settings.circles.selectors.innerCircleCSS ); 50 | $backPie = $container.querySelector( settings.circles.selectors.backPieCSS ); 51 | $gaugevalue = $container.querySelector( settings.circles.selectors.gaugevalue ); 52 | return Promise.resolve(); 53 | 54 | } 55 | 56 | function initializeCircles() { 57 | 58 | var percent = ( settings.value / ( settings.max - settings.min ) ) * 2, 59 | leftValue = 1, 60 | rightValue = percent; 61 | 62 | percent = percent.toFixed( 2 ); 63 | 64 | $gaugevalue.innerText = ( percent * 50 ).toFixed( 2 ) + "%"; 65 | 66 | if ( percent > 1 ) { 67 | leftValue = 1 - ( percent - 1 ); 68 | rightValue = 1; 69 | } 70 | 71 | $right.style.backgroundColor = settings.color; 72 | $left.style.backgroundColor = settings.color; 73 | 74 | $right.style.width = settings.width + "px"; 75 | $left.style.width = settings.width + "px"; 76 | $backPie.style.width = settings.width + "px"; 77 | $innerCircle.style.width = ( settings.width - 20 ) + "px"; 78 | 79 | $container.style.width = settings.width + "px"; 80 | 81 | // $innerCircle.style.top = ( settings.height * settings.innerBorder ) + "px"; 82 | // $innerCircle.style.left = ( settings.width * settings.innerBorder ) + "px"; 83 | 84 | $container.style.height = settings.height + "px"; 85 | $innerCircle.style.height = ( settings.height - 20 ) + "px"; 86 | $right.style.height = settings.height + "px"; 87 | $left.style.height = settings.height + "px"; 88 | $backPie.style.height = settings.height + "px"; 89 | 90 | $right.style.clip = "rect(0px, " + 91 | settings.width + "px, " + 92 | ( rightValue * settings.height ) + "px, " + 93 | ( settings.width / 2 ) + "px)"; 94 | 95 | $left.style.clip = "rect(" + 96 | ( leftValue * settings.height ) + "px, " + 97 | ( settings.width / 2 ) + "px, " + 98 | settings.width + "px, 0px)"; 99 | 100 | } 101 | 102 | 103 | window.circleGauge = { 104 | initialize: initialize 105 | }; 106 | 107 | }( window ) ); -------------------------------------------------------------------------------- /components/circle-gauge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Love2Dev - Circle Gauge 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 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /components/newsletter/example_1/index.html: -------------------------------------------------------------------------------- 1 |
3 |
4 |
5 |
7 |
8 |
9 |
Subscribe to our newsletter!
10 |

Get industry news, studies, how-to articles, exclusive 11 | Bannersnack offers and product updates every other week.

12 |
13 |
14 |
20 |
25 |
26 |
29 | 32 | 34 | 35 |
36 |

Thank you for 37 | subscribing.

38 |

Something went wrong. 39 |

40 |

We respect your privacy and take protecting it seriously 41 |

42 |
43 |
44 |
45 |
46 |
-------------------------------------------------------------------------------- /css/absolute-center/img/cat-w-shiny-ball-1125x1125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/absolute-center/img/cat-w-shiny-ball-1125x1125.jpg -------------------------------------------------------------------------------- /css/absolute-center/img/cat-w-shiny-ball-320x320.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/absolute-center/img/cat-w-shiny-ball-320x320.jpg -------------------------------------------------------------------------------- /css/absolute-center/img/cat-w-shiny-ball-460x460.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/absolute-center/img/cat-w-shiny-ball-460x460.jpg -------------------------------------------------------------------------------- /css/absolute-center/img/cat-w-shiny-ball-720x720.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/absolute-center/img/cat-w-shiny-ball-720x720.jpg -------------------------------------------------------------------------------- /css/absolute-center/img/cat-w-shiny-ball-980x980.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/absolute-center/img/cat-w-shiny-ball-980x980.jpg -------------------------------------------------------------------------------- /css/absolute-center/index.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | 7 | CSS Demos - Centering Elements 8 | 9 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
101 | 102 |
103 | 120 |
121 | 122 |
123 | 124 |
125 | 126 |
127 |

How to Center

128 |

Anything with HTML & CSS

129 |
130 | 131 | 132 |
133 | cat-w-shiny-ball 135 |
136 | 137 |
138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /css/absolute-center/readme.md: -------------------------------------------------------------------------------- 1 | [Read the Blog Post](https://love2dev.com/blog/absolute-centering-css/) -------------------------------------------------------------------------------- /css/background-stripes/barber-shop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Demos - Barbershop Pole Using Animated CSS Background Stripes 8 | 9 | 57 | 58 | 59 | 60 | 61 |

CSS Barbershop Pole Effect

62 | 63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /css/background-stripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | CSS Demos - Background Stripes 10 | 11 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |

CSS Background Stripes Effect

107 |
108 |
109 |

Horizontal Stripes

110 |
111 |
112 |

Vertical Stripes

113 |
114 |
115 |

Rotate Stripes

116 |
117 |
118 |
119 |
120 |

Blue Striped Loader

121 |
122 |

Red Striped Loader

123 | 124 |
125 |

Yellow Striped Loader

126 | 127 |
128 |

Purple Striped Loader

129 | 130 |
131 |

Green Striped Loader

132 | 133 |
134 |
135 |
136 |
137 |
138 | Zig Zag Stripes 139 |
140 | Barber Shop Pole 141 |
142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /css/background-stripes/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/background-stripes/readme.md -------------------------------------------------------------------------------- /css/background-stripes/zig-zag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Demos - Zig Zag Background Stripes 8 | 9 | 33 | 34 | 35 | 36 | 37 |

CSS Zig-Zag Effect

38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /css/bootstrap/navbar/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/bootstrap/navbar/index.html -------------------------------------------------------------------------------- /css/bootstrap/navbar/readme.md: -------------------------------------------------------------------------------- 1 | [Read the Blog Post](https://love2dev.com/blog/bootstrap-navbar/) -------------------------------------------------------------------------------- /css/bullet-list/readme.md: -------------------------------------------------------------------------------- 1 | [Read the Blog Post](https://love2dev.com/blog/customize-bulleted-list/) -------------------------------------------------------------------------------- /css/center-text-vertically/index.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | 7 | CSS Demos - Centering Elements 8 | 9 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |
100 | 101 |
102 | 119 |
120 | 121 |
122 | 123 |
124 | 125 |
126 |

How to Center

127 |

Anything with HTML & CSS

128 |
129 | 130 |
131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /css/css-padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Demos - Changing Bulleted Lists 7 | 8 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css/foggy-glass/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Demos - Foggy Glass Background 7 | 8 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 | 65 | 66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /css/header-bar.css: -------------------------------------------------------------------------------- 1 | .profile-avatar img { 2 | border-radius: 50%; 3 | height: 24px; 4 | width: 24px; 5 | } -------------------------------------------------------------------------------- /css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Demos 8 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /css/iphone/notch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Love2Dev - iPhone Notch 8 | 9 | 10 | 11 | 12 | 13 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |

iPhone Notch Test

53 |

If you are viewing this on an iPhone X or 11 with a notch you should see some crimson border. There are a few 54 | Androids with notches as well. Hopefully you see the crimson border there too.

55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /css/same-height-card-list/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/same-height-card-list/index.html -------------------------------------------------------------------------------- /css/tab-panel.css: -------------------------------------------------------------------------------- 1 | /* Tab Panel 2 | 3 | Apache License 4 | 5 | */ 6 | 7 | .tab-container .nav-pills { 8 | width: 100%; 9 | margin: auto; 10 | } 11 | 12 | .tab-content { 13 | padding: calc(var(--bs-gutter-x) * .5); 14 | margin: 0; 15 | display: flex; 16 | } 17 | 18 | .tab-pill-slider-container { 19 | overflow: hidden; 20 | overflow-x: scroll; 21 | width: 100%; 22 | text-align: center; 23 | padding: 0; 24 | margin: 0; 25 | } 26 | 27 | .tab-pill-slider-container::-webkit-scrollbar { 28 | width: 0px; 29 | } 30 | 31 | .tab-pill-slider-container .nav-pills { 32 | margin-right: 36px; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | flex-direction: row; 37 | font-size: 14px; 38 | color: var(--site-dark-gray); 39 | line-height: 100%; 40 | height: 48px; 41 | flex-wrap: nowrap; 42 | } 43 | 44 | .tab-pill-slider-container .nav-pills .nav-item { 45 | display: inline-block; 46 | width: 200px; 47 | } 48 | 49 | .tab-pills { 50 | margin: 0; 51 | padding-left: 0; 52 | display: flex; 53 | align-items: center; 54 | justify-content: left; 55 | flex-direction: row; 56 | font-size: 14px; 57 | color: var(--site-dark-gray); 58 | line-height: 100%; 59 | height: 48px; 60 | flex-wrap: nowrap; 61 | } 62 | 63 | .tab-pill { 64 | display: inline-block; 65 | } 66 | 67 | .tab-tab { 68 | background-color: var(--site-primary-darker); 69 | color: var(--site-white); 70 | text-decoration: none; 71 | padding: 0.5em; 72 | font-size: 1.25em; 73 | margin: 0 3px; 74 | border-radius: 3px; 75 | } 76 | 77 | .tab-tab.active { 78 | background-color: var(--site-primary); 79 | color: var(--site-white); 80 | } 81 | 82 | .tab-content :target, 83 | .tab-content>.active { 84 | display: flex; 85 | position: relative; 86 | width: 100%; 87 | flex-direction: column; 88 | left: 0; 89 | right: 0; 90 | } 91 | 92 | .tab-pane { 93 | display: flex; 94 | margin: 0; 95 | padding-right: calc(var(--bs-gutter-x) * .5); 96 | padding-left: calc(var(--bs-gutter-x) * .5); 97 | } -------------------------------------------------------------------------------- /css/text-transform/capitalize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform capitalize demo 6 | 7 | 16 | 17 | 18 | 19 | 43 |

Use Capitalize to Title Case a String

44 | 45 |

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but Every wOrd Starts wITH a Capital lEETTER.

46 | 47 |

this example is a more proper title case example.

48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css/text-transform/first-letter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform Apply Custom Styles to 1st Letter Demo 6 | 7 | 26 | 27 | 28 | 29 | 30 | 54 | 55 |

Capitalize The First Word and Apply Unique Styling

56 |

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but THE firST wOrd Starts wITH a laRGe Capital lEETTER. This is a second sentance.

57 | 58 | 59 | -------------------------------------------------------------------------------- /css/text-transform/lowercase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform lowercase demo 6 | 7 | 16 | 17 | 18 | 19 | 43 | 44 |

Make all the Text lowercase

45 | 46 |

THIS IS A SCREAMING SENTANCE THAT CAN BE SOFTENED USING LOWERCASE!

47 | 48 | 49 | -------------------------------------------------------------------------------- /css/text-transform/title-case.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform title-case demo 6 | 7 | 20 | 21 | 22 | 23 | 47 |

Use Capitalize & Lowercase to Title Case a String

48 | 49 |

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but Every wOrd Starts wITH a Capital lEETTER.

50 | 51 |

this example is a more proper title case example.

52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /css/text-transform/uppercase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text-transform uppercase demo 6 | 7 | 16 | 17 | 18 | 19 | 43 | 44 |

Make all the Characters UPPERCASE

45 | 46 |

this example converts an all lowercase string to screaming uppercase.

47 | 48 | 49 | -------------------------------------------------------------------------------- /css/underline/index.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | CSS Demos - Changing Bulleted Lists 7 | 8 | 56 | 57 | 58 | 59 | 60 |
61 | 62 |

63 | Bacon ipsum dolor amet turkey frankfurter swine 64 | brisket bresaola buffalo sirloin meatloaf sausage tri-tip fatback prosciutto short ribs. Spare ribs shoulder 65 | short ribs, biltong tail t-bone cow pastrami andouille boudin burgdoggen. Porchetta jerky pork, turkey frankfurter 66 | strip steak flank meatloaf cow 67 | alcatra shankle tenderloin. Kevin tri-tip pork belly beef turducken meatball, strip steak t-bone kielbasa. 68 | Sirloin pork loin corned beef prosciutto porchetta landjaeger short ribs burgdoggen filet mignon ham. Beef sirloin 69 | frankfurter, porchetta picanha jerky bresaola ball tip tongue biltong brisket venison short loin ham. Jerky meatball 70 | ribeye salami jowl

71 |

Kielbasa burgdoggen sausage ribeye pancetta pork chop. T-bone short ribs rump shank ribeye bacon jerky sausage kielbasa. 72 | Short ribs fatback meatloaf biltong frankfurter pork chicken burgdoggen filet mignon prosciutto brisket tri-tip. 73 | Doner salami corned beef tri-tip rump shank bacon. Brisket ribeye pork belly, pork tail tri-tip drumstick landjaeger 74 | kielbasa chicken frankfurter salami kevin. Kevin sirloin brisket drumstick t-bone andouille, sausage shankle 75 | bacon filet mignon meatball ball tip. Leberkas prosciutto sausage pork loin salami, hamburger turducken kevin 76 | ham hock pork.

77 |

Turducken venison shankle tail rump short ribs, jerky cupim alcatra. Alcatra pork chop brisket drumstick kevin strip 78 | steak pork ribeye pastrami turducken bresaola. Pancetta capicola drumstick flank. Strip steak boudin meatloaf 79 | short ribs alcatra tenderloin. Spare ribs pork loin picanha, jerky fatback prosciutto ground round beef.

80 | 81 |
82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /css/vertical-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /css/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /css/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /css/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /css/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /css/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /css/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /css/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /css/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /css/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /css/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /css/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /css/webfonts/fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fontello.eot -------------------------------------------------------------------------------- /css/webfonts/fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fontello.ttf -------------------------------------------------------------------------------- /css/webfonts/fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fontello.woff -------------------------------------------------------------------------------- /css/webfonts/fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/css/webfonts/fontello.woff2 -------------------------------------------------------------------------------- /fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /generate.js: -------------------------------------------------------------------------------- 1 | const fs = require( "fs" ), 2 | path = require( "path" ), 3 | faker = require( "faker" ), 4 | utf8 = "utf-8"; 5 | 6 | let db = fs.readFileSync( path.resolve( "api/db.json" ), utf8 ); 7 | 8 | db = JSON.parse( db ); 9 | 10 | 11 | function fakeEmails() { 12 | 13 | var emails = [], 14 | length = faker.random.number( 25 ); 15 | 16 | for ( let i = 0; i < length; i++ ) { 17 | 18 | emails.push( faker.internet.email() ); 19 | 20 | } 21 | 22 | return emails; 23 | 24 | } 25 | 26 | function fakeSearchTerms() { 27 | 28 | var terms = [], 29 | length = faker.random.number( 50 ); 30 | 31 | for ( let i = 0; i < length; i++ ) { 32 | 33 | terms.push( faker.random.words( faker.random.number( 4 ) + 1 ) ); 34 | 35 | } 36 | 37 | return terms; 38 | 39 | } 40 | 41 | 42 | db.emails = fakeEmails(); 43 | db.terms = fakeSearchTerms(); 44 | 45 | 46 | fs.writeFileSync( path.resolve( "api/db.json" ), JSON.stringify( db ), utf8 ); -------------------------------------------------------------------------------- /html/acrylic-dialog/index.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Love2Dev - Acryllic Dialog 11 | 12 | 88 | 89 | 90 | 91 | 92 |
93 | 94 |
95 |

How to Center

96 |

Anything with HTML & CSS

97 |
98 | 99 | 100 | 101 |
102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /html/amazon/cart/qty-dropdown/cart-qty.css: -------------------------------------------------------------------------------- 1 | .a-popover-wrapper { 2 | overflow: hidden; 3 | border: 1px solid #cdcdcd; 4 | border-color: rgba(0, 0, 0, .2); 5 | height: 100%; 6 | width: 100%; 7 | border-radius: 4px; 8 | box-shadow: 0 2px 4px rgba(0, 0, 0, .13); 9 | background-color: #fff; 10 | } 11 | 12 | .a-dropdown-common .a-popover-inner { 13 | padding: 8px 0; 14 | } 15 | 16 | .a-popover-inner { 17 | background-color: #fff; 18 | padding: 14px 18px; 19 | text-align: left; 20 | overflow-x: hidden; 21 | } 22 | 23 | .a-popover-inner dl:last-child, 24 | .a-popover-inner ol:last-child, 25 | .a-popover-inner p:last-child, 26 | .a-popover-inner ul:last-child { 27 | margin-bottom: 0; 28 | } 29 | 30 | .a-dropdown-common .a-list-link { 31 | position: relative; 32 | left: -1px; 33 | margin-right: -1px; 34 | } 35 | 36 | .a-ordered-list.a-list-link, 37 | .a-unordered-list.a-list-link, 38 | ol.a-list-link, 39 | ul.a-list-link { 40 | margin: -2px 0 0; 41 | } 42 | 43 | .a-ordered-list.a-nostyle, 44 | .a-unordered-list.a-nostyle, 45 | ol.a-nostyle, 46 | ul.a-nostyle { 47 | margin-left: 0; 48 | color: #111; 49 | } 50 | 51 | .a-ordered-list, 52 | .a-unordered-list, 53 | ol, 54 | ul { 55 | padding: 0; 56 | } 57 | 58 | .a-unordered-list, 59 | ul { 60 | margin: 0 0 0 18px; 61 | color: #111; 62 | } 63 | 64 | .a-dropdown-common .a-dropdown-item { 65 | margin: 0; 66 | outline: 0; 67 | } 68 | 69 | .a-ordered-list.a-list-link li, 70 | .a-unordered-list.a-list-link li, 71 | ol.a-list-link li, 72 | ul.a-list-link li { 73 | display: block; 74 | position: relative; 75 | } 76 | 77 | .a-ordered-list.a-nostyle li, 78 | .a-unordered-list.a-nostyle li, 79 | ol.a-nostyle li, 80 | ul.a-nostyle li { 81 | list-style: none; 82 | } 83 | 84 | .a-ordered-list li, 85 | .a-unordered-list li, 86 | ol li, 87 | ul li { 88 | word-wrap: break-word; 89 | margin: 0; 90 | } 91 | 92 | .a-unordered-list li, 93 | ul li { 94 | list-style: disc; 95 | } -------------------------------------------------------------------------------- /html/audio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Love2Dev - Audio 8 | 9 | 10 | 11 | 12 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 |

Audio Element Example

43 |
44 |
45 |

You can see how to play an audio file using the HTML audio element. To test if the device and browser 46 | supports playing with the lock screen you can keep the episode playing and see what happens.

47 |
48 |
49 |
50 | 51 | 54 | 55 |
56 |
57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /html/audio/podcast.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/audio/podcast.mp3 -------------------------------------------------------------------------------- /html/checkbox/todo/index.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | HTML Demos - The Checkbox 7 | 8 | 87 | 88 | 89 | 90 | 91 |
92 | 93 |
94 |
95 | 96 | 97 |
98 |
99 | 100 |
101 | 102 |
103 | Choose your interests 104 |
105 | 106 | 107 |
108 |
109 | 110 | 111 |
112 |
113 | 114 |
115 | 116 |
117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /html/contact-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML Demos - The Checkbox 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | 25 | We'll never share your email with anyone 26 | else. 27 |
28 |
29 | 30 | 32 |
33 |
34 | 35 | 37 |
38 |
39 | 40 | 42 |
43 |
44 | 45 |
46 |
47 |
48 |
49 | 50 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /html/editor/wysiwyg.js: -------------------------------------------------------------------------------- 1 | ( function ( window, document, undefined ) { 2 | 3 | "use strict"; 4 | 5 | var wysiwyg = function ( selector, options ) { 6 | 7 | return new wysiwyg.fn.init( selector, options ); 8 | 9 | }; 10 | 11 | wysiwyg.fn = wysiwyg.prototype = { 12 | 13 | constructor: wysiwyg, 14 | 15 | init: function ( selector, options ) { 16 | 17 | var wrapper, i; 18 | 19 | if ( !selector ) { 20 | 21 | this.length = 0; 22 | return this; 23 | 24 | } 25 | 26 | if ( typeof selector === "string" ) { 27 | 28 | wrapper = document.querySelector( selector ); 29 | 30 | } else if ( selector.nodeType ) { 31 | 32 | wrapper = selector; 33 | 34 | } 35 | 36 | this.toolbar = wrapper.querySelector( options.toolbar || ".editor-toolbar" ); 37 | this.editor = wrapper.querySelector( options.editor || ".body-wyswyg-editor" ); 38 | 39 | this.bindToolbar( this.toolbar ); 40 | 41 | return this; 42 | }, 43 | 44 | version: "0.0.1", 45 | 46 | context: undefined, 47 | 48 | toolbar: {}, 49 | editor: {}, 50 | 51 | bindToolbar: function () { 52 | 53 | var self = this, 54 | toolbarButtons = self.toolbar.querySelectorAll( ".btn-edit" ); 55 | 56 | for ( var index = 0; index < toolbarButtons.length; index++ ) { 57 | 58 | toolbarButtons[ index ].addEventListener( "click", function ( e ) { 59 | 60 | self.handleToolbarButton.call( self, e ); 61 | 62 | } ); 63 | 64 | } 65 | 66 | }, 67 | 68 | handleToolbarButton: function ( e ) { 69 | 70 | e.preventDefault(); 71 | 72 | var command = e.currentTarget.getAttribute( "data-edit" ); 73 | 74 | console.log( command ); 75 | 76 | // this.editor.focus(); 77 | 78 | var sel = window.getSelection(); 79 | 80 | console.log( sel ); 81 | 82 | // if ( !selectionInside( this.editor, true ) ) { // returns 'selection inside editor' 83 | // return false; 84 | // } 85 | 86 | // document.execCommand( command, false ); 87 | 88 | return false; 89 | } 90 | 91 | }; 92 | 93 | function selectionInside( containerNode, force ) { 94 | // selection inside editor? 95 | var sel = window.getSelection(); 96 | 97 | // force selection to editor 98 | var range = document.createRange(); 99 | range.selectNodeContents( containerNode ); 100 | range.collapse( false ); 101 | sel.removeAllRanges(); 102 | sel.addRange( range ); 103 | return true; 104 | } 105 | 106 | // Give the init function the wysiwyg prototype for later instantiation 107 | wysiwyg.fn.init.prototype = wysiwyg.fn; 108 | 109 | return ( window.wysiwyg = wysiwyg ); 110 | 111 | 112 | } )( window, document ); -------------------------------------------------------------------------------- /html/file/upload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Love2Dev - File Upload 8 | 9 | 10 | 11 | 12 | 13 | 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 | -------------------------------------------------------------------------------- /html/form/tabindex/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 | 8 |
9 |
10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /html/live-video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Live Video 7 | 8 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | Video Thumbnail 77 |
LIVE
78 |
79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /html/login/login-form/css/login.css: -------------------------------------------------------------------------------- 1 | /*---------------------------------------- 2 | Login Page 3 | ------------------------------------------*/ 4 | 5 | .login-container { 6 | z-index: 999; 7 | padding: 10% 5%; 8 | width: 100vw; 9 | overflow: hidden; 10 | } 11 | 12 | .login-form { 13 | width: 100%; 14 | } 15 | 16 | .login-form-text { 17 | text-transform: uppercase; 18 | letter-spacing: 2px; 19 | font-size: 0.8rem; 20 | } 21 | 22 | .profile-image-login { 23 | width: 100px; 24 | height: 100px !important; 25 | } 26 | 27 | .login-text { 28 | margin-top: -6px; 29 | margin-left: -6px !important; 30 | } 31 | 32 | .auth-providers { 33 | width: 100%; 34 | } 35 | 36 | .auth-providers .btn-floating.btn-large, 37 | .auth-providers .btn-floating.btn-large i { 38 | font-size: 1.2rem; 39 | line-height: 43px; 40 | width: 42px; 41 | height: 42px; 42 | } 43 | 44 | .btn-login { 45 | margin-right: 3%; 46 | } 47 | 48 | .dial-pad { 49 | display: flex; 50 | flex-direction: row; 51 | flex-wrap: wrap; 52 | width: 270px; 53 | justify-content: center; 54 | } 55 | 56 | .user-face, 57 | .faceid-camera { 58 | width: 100%; 59 | } 60 | 61 | .profile-img-card { 62 | width: 96px; 63 | height: 96px; 64 | margin: 0 auto 10px; 65 | display: block; 66 | border-radius: 50%; 67 | } 68 | 69 | .voiceid-container { 70 | width: 100%; 71 | text-align: center; 72 | } 73 | 74 | .voiceid-btn { 75 | width: 200px; 76 | height: 200px; 77 | line-height: 200px; 78 | } 79 | 80 | .voiceid-btn.btn-floating i { 81 | font-size: 5em; 82 | line-height: 200px; 83 | } 84 | 85 | @media only screen and (min-width: 480px) { 86 | .login-form { 87 | width: 480px; 88 | } 89 | } 90 | 91 | @media only screen and (min-width: 720px) { 92 | 93 | .auth-providers .btn-floating.btn-large, 94 | .auth-providers .btn-floating.btn-large i { 95 | font-size: 1.6rem; 96 | line-height: 55.5px; 97 | width: 55px; 98 | height: 55px; 99 | } 100 | 101 | } 102 | 103 | @media(min-width: 982px) { 104 | 105 | .login-container { 106 | width: 60vw; 107 | } 108 | 109 | } 110 | 111 | @media(min-width: 1024px) { 112 | 113 | .login-container { 114 | width: 600px; 115 | } 116 | 117 | } -------------------------------------------------------------------------------- /html/login/login-form/img/wild-dot-logo-square-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/login/login-form/img/wild-dot-logo-square-120x120.png -------------------------------------------------------------------------------- /html/login/login-form/img/wild-dot-logo-square-130x130.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/login/login-form/img/wild-dot-logo-square-130x130.png -------------------------------------------------------------------------------- /html/login/login-form/img/wild-dot-logo-square-320x320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/login/login-form/img/wild-dot-logo-square-320x320.png -------------------------------------------------------------------------------- /html/login/login-form/img/wild-dot-logo-square-460x460.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/login/login-form/img/wild-dot-logo-square-460x460.png -------------------------------------------------------------------------------- /html/login/login-form/img/wild-dot-logo-square-500x500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/html/login/login-form/img/wild-dot-logo-square-500x500.png -------------------------------------------------------------------------------- /html/material/snackbar/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Material Design Snackbars 14 | 15 | 16 | 17 | 18 | 19 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html/medium/example-figure.html: -------------------------------------------------------------------------------- 1 |
2 | Server Side Rendered Web Page 6 | 8 |
Server Side Rendered Web Page
9 |
-------------------------------------------------------------------------------- /html/medium/medium.css: -------------------------------------------------------------------------------- 1 | .Medium{ 2 | position: relative; 3 | min-height: 10px; 4 | } 5 | .Medium-clear{ 6 | background: transparent !important; 7 | background-color: transparent !important; 8 | border-color: transparent !important; 9 | } 10 | .Medium, 11 | .Medium p:first-child{ 12 | margin-top:0; 13 | } 14 | .Medium p:last-child{ 15 | margin-bottom:0; 16 | } 17 | .Medium p:empty { 18 | display: block; 19 | height: 1em; 20 | } 21 | .Medium-paste-hook{ 22 | opacity: 0; 23 | width: 1px; 24 | height: 1px; 25 | position: absolute; 26 | } 27 | .Medium-placeholder{ 28 | position: absolute; 29 | } 30 | .Medium-placeholder div{ 31 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 32 | filter: alpha(opacity=50); 33 | opacity: 0.5; 34 | position: absolute; 35 | } 36 | .Medium-placeholder-rich div{ 37 | font-style: italic; 38 | } 39 | .Medium-inline, 40 | .Medium-placeholder-inline div, 41 | .Medium-inlineRich, 42 | .Medium-placeholder-inlineRich div{ 43 | overflow: hidden; 44 | white-space: nowrap; 45 | } 46 | .Medium-drag { 47 | position: absolute; 48 | cursor: move; 49 | margin-left: -5px; 50 | margin-top: -20px; 51 | } 52 | .Medium-toolbar-hide { 53 | overflow: hidden; 54 | max-height: 0; 55 | padding-top: 0; 56 | padding-bottom: 0; 57 | margin-top: 0; 58 | margin-bottom: 0; 59 | transition-property: opacity; 60 | -moz-transition-duration: 0.3s; 61 | -webkit-transition-duration: 0.3s; 62 | -o-transition-duration: 0.3s; 63 | transition-duration: 0.3s; 64 | -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 65 | -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 66 | -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 67 | transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 68 | opacity: 0; 69 | } 70 | 71 | .Medium-toolbar-show { 72 | transition-property: opacity; 73 | -moz-transition-duration: 0.3s; 74 | -webkit-transition-duration: 0.3s; 75 | -o-transition-duration: 0.3s; 76 | transition-duration: 0.3s; 77 | -moz-transition-timing-function: ease-in; 78 | -webkit-transition-timing-function: ease-in; 79 | -o-transition-timing-function: ease-in; 80 | transition-timing-function: ease-in; 81 | max-height: 1000px; 82 | opacity: 1; 83 | width: auto !important; 84 | } 85 | 86 | .Medium-toolbar-fixed { 87 | position: fixed; 88 | } 89 | .Medium-focused { 90 | transition: all 500ms ease-in-out 0s; 91 | -moz-box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2); 92 | -webkit-box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2); 93 | box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.2); 94 | } -------------------------------------------------------------------------------- /html/medium/undo.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Undo.js - A undo/redo framework for JavaScript 3 | * 4 | * http://jzaefferer.github.com/undo 5 | * 6 | * Copyright (c) 2011 Jörn Zaefferer 7 | * 8 | * MIT licensed. 9 | */ 10 | (function() { 11 | 12 | // based on Backbone.js' inherits 13 | var ctor = function(){}; 14 | var inherits = function(parent, protoProps) { 15 | var child; 16 | 17 | if (protoProps && protoProps.hasOwnProperty('constructor')) { 18 | child = protoProps.constructor; 19 | } else { 20 | child = function(){ return parent.apply(this, arguments); }; 21 | } 22 | 23 | ctor.prototype = parent.prototype; 24 | child.prototype = new ctor(); 25 | 26 | if (protoProps) extend(child.prototype, protoProps); 27 | 28 | child.prototype.constructor = child; 29 | child.__super__ = parent.prototype; 30 | return child; 31 | }; 32 | 33 | function extend(target, ref) { 34 | var name, value; 35 | for ( name in ref ) { 36 | value = ref[name]; 37 | if (value !== undefined) { 38 | target[ name ] = value; 39 | } 40 | } 41 | return target; 42 | }; 43 | 44 | var Undo = { 45 | version: '0.1.15' 46 | }; 47 | 48 | Undo.Stack = function() { 49 | this.commands = []; 50 | this.stackPosition = -1; 51 | this.savePosition = -1; 52 | }; 53 | 54 | extend(Undo.Stack.prototype, { 55 | execute: function(command) { 56 | this._clearRedo(); 57 | command.execute(); 58 | this.commands.push(command); 59 | this.stackPosition++; 60 | this.changed(); 61 | }, 62 | undo: function() { 63 | this.commands[this.stackPosition].undo(); 64 | this.stackPosition--; 65 | this.changed(); 66 | }, 67 | canUndo: function() { 68 | return this.stackPosition >= 0; 69 | }, 70 | redo: function() { 71 | this.stackPosition++; 72 | this.commands[this.stackPosition].redo(); 73 | this.changed(); 74 | }, 75 | canRedo: function() { 76 | return this.stackPosition < this.commands.length - 1; 77 | }, 78 | save: function() { 79 | this.savePosition = this.stackPosition; 80 | this.changed(); 81 | }, 82 | dirty: function() { 83 | return this.stackPosition != this.savePosition; 84 | }, 85 | _clearRedo: function() { 86 | // TODO there's probably a more efficient way for this 87 | this.commands = this.commands.slice(0, this.stackPosition + 1); 88 | }, 89 | changed: function() { 90 | // do nothing, override 91 | } 92 | }); 93 | 94 | Undo.Command = function(name) { 95 | this.name = name; 96 | } 97 | 98 | var up = new Error("override me!"); 99 | 100 | extend(Undo.Command.prototype, { 101 | execute: function() { 102 | throw up; 103 | }, 104 | undo: function() { 105 | throw up; 106 | }, 107 | redo: function() { 108 | this.execute(); 109 | } 110 | }); 111 | 112 | Undo.Command.extend = function(protoProps) { 113 | var child = inherits(this, protoProps); 114 | child.extend = Undo.Command.extend; 115 | return child; 116 | }; 117 | 118 | // AMD support 119 | if (typeof define === "function" && define.amd) { 120 | // Define as an anonymous module 121 | define(Undo); 122 | } else if(typeof module != "undefined" && module.exports){ 123 | module.exports = Undo 124 | }else { 125 | this.Undo = Undo; 126 | } 127 | }).call(this); 128 | -------------------------------------------------------------------------------- /html/pull-quote/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Component Demos - Pull Quote 6 | 7 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /html/slideshare/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SlideShare Embde Example 7 | 8 | 9 | 10 | 11 | 12 | 13 |
The server is dead going serverless to create a highly scalable application you can manage from Chris Love
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/sms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Live Video 7 | 8 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | Send SMS 77 | Send MMS 78 | 79 | 80 | -------------------------------------------------------------------------------- /html/video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Video 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /img/5-star-rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/5-star-rating.png -------------------------------------------------------------------------------- /img/avtar-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/avtar-8.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-1240x821.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-1240x821.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-1500x993.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-1500x993.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-1760x1166.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-1760x1166.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-1920x1271.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-1920x1271.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-320x212.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-320x212.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-460x305.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-460x305.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-720x477.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-720x477.jpg -------------------------------------------------------------------------------- /img/background-1932466_1920-980x649.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/background-1932466_1920-980x649.jpg -------------------------------------------------------------------------------- /img/banner-rect-278x157.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/banner-rect-278x157.jpg -------------------------------------------------------------------------------- /img/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/iphone.png -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans-1280x214.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/love2dev-logo-light-dev-trans-1280x214.png -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans-320x54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/love2dev-logo-light-dev-trans-320x54.png -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans-460x77.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/love2dev-logo-light-dev-trans-460x77.png -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans-717x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/love2dev-logo-light-dev-trans-717x120.png -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans.html: -------------------------------------------------------------------------------- 1 | love2dev-logo-light-dev-trans -------------------------------------------------------------------------------- /img/love2dev-logo-light-dev-trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/love2dev-logo-light-dev-trans.png -------------------------------------------------------------------------------- /img/marker-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/marker-image.png -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-1240x827.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-1240x827.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-1500x1000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-1500x1000.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-1760x1174.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-1760x1174.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-1920x1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-1920x1280.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-320x214.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-320x214.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-460x307.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-460x307.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-720x480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-720x480.jpg -------------------------------------------------------------------------------- /img/mediterranean-cuisine-2378758_1920-980x654.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/mediterranean-cuisine-2378758_1920-980x654.jpg -------------------------------------------------------------------------------- /img/wild-dot-logo-square-130x130.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/wild-dot-logo-square-130x130.png -------------------------------------------------------------------------------- /img/wild-dot-logo-square-320x320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/wild-dot-logo-square-320x320.png -------------------------------------------------------------------------------- /img/wild-dot-logo-square-460x460.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/wild-dot-logo-square-460x460.png -------------------------------------------------------------------------------- /img/wild-dot-logo-square-500x500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/img/wild-dot-logo-square-500x500.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /javascript/alert/alert.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Alert Dialog 8 | 9 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |

JavaScript Alert Dialog

78 |
79 | 80 |
81 | 82 |
83 | 84 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /javascript/alert/confirm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Confirm Dialog 7 | 8 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |

JavaScript Confirm Dialog

70 |
71 | 72 |
73 | 74 |
75 | 76 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /javascript/alert/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Array forEach Method 7 | 8 | 24 | 25 | 26 | 27 | 28 | 29 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /javascript/alert/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom Alert Modal Dialogs 8 | 9 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |

JavaScript Alert Dialog

78 |
79 | 80 |
81 | 82 |
83 | 84 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /javascript/alert/prompt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Prompt Dialog 8 | 9 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |

JavaScript Prompt Dialog

78 |
79 | 80 |
81 | 82 |
83 | 84 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /javascript/barcode/barcode.js: -------------------------------------------------------------------------------- 1 | function fetchImage() { 2 | 3 | fetch( "javascript/barcode/example-barcode.png" ) 4 | .then( response => { 5 | if ( !response.ok ) { 6 | throw new Error( 'Network response was not ok' ); 7 | } 8 | return response.blob(); 9 | } ) 10 | .then( img => { 11 | 12 | return parseBarCode( img ); 13 | 14 | } ) 15 | .catch( error => { 16 | console.error( 'There has been a problem with your fetch operation:', error ); 17 | } ); 18 | } 19 | 20 | function addBarCode( barcode ) { 21 | 22 | let $output = document.querySelector( ".barcode-value" ); 23 | 24 | $output.innerHTML = barcode + "
"; 25 | 26 | } 27 | 28 | function parseBarCode( src ) { 29 | 30 | let img = document.querySelector( ".src-img" ); 31 | 32 | // img.src = URL.createObjectURL( src ); 33 | 34 | const barcodeDetector = new BarcodeDetector( { 35 | // (Optional) A series of barcode formats to search for. 36 | // Not all formats may be supported on all platforms 37 | formats: [ 38 | 'aztec', 39 | 'code_128', 40 | 'code_39', 41 | 'code_93', 42 | 'codabar', 43 | 'data_matrix', 44 | 'ean_13', 45 | 'ean_8', 46 | 'itf', 47 | 'pdf417', 48 | 'qr_code', 49 | 'upc_a', 50 | 'upc_e' 51 | ] 52 | } ); 53 | 54 | return barcodeDetector.detect( img ) 55 | .then( barcodes => { 56 | 57 | barcodes.forEach( barcode => addBarCode( barcode ) ); 58 | 59 | } ) 60 | .catch( e => { 61 | console.error( 'Barcode detection failed:', e ); 62 | } ); 63 | 64 | } 65 | 66 | //fetchImage(); 67 | parseBarCode(); -------------------------------------------------------------------------------- /javascript/barcode/example-barcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/javascript/barcode/example-barcode.jpg -------------------------------------------------------------------------------- /javascript/barcode/example-barcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/javascript/barcode/example-barcode.png -------------------------------------------------------------------------------- /javascript/barcode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Barcode Example 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

JavaScript Barcode Reader

25 |
26 | 27 | example barcode 28 | 29 |
30 |
waiting...
31 |
32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /javascript/camera/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 | 58 |
59 |
60 |
61 | 62 | 63 | 64 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /javascript/character-counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Input Character Counter Similar to Twitter's 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /javascript/contains/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript String Contains 7 | 8 | 24 | 25 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /javascript/face-recognition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /javascript/forEach/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Array forEach Method 7 | 8 | 24 | 25 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /javascript/gamepad/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /javascript/geo-location/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Using Geolocation getCurrentPosition 8 | 9 | 10 | 11 | 12 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /javascript/geo-location/map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Geolocation with Bing Maps 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 16 | 20 | 21 | 27 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /javascript/inheritance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Object Inheritance 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /javascript/lazy/app.js: -------------------------------------------------------------------------------- 1 | ( function () { 2 | 3 | "use strict"; 4 | 5 | // var navigation_Key = "user-navigation", 6 | // profile, domain, 7 | // $ = love2dev.component; 8 | 9 | function initialize() { 10 | 11 | lazyLoad.lazyDisplay(); 12 | 13 | } 14 | 15 | 16 | if ( document.readyState === "interactive" || document.readyState === "complete" ) { 17 | 18 | initialize(); 19 | 20 | } else { 21 | 22 | document.onreadystatechange = function () { 23 | 24 | if ( document.readyState === "complete" ) { 25 | 26 | initialize(); 27 | 28 | } 29 | 30 | }; 31 | 32 | } 33 | 34 | } )(); -------------------------------------------------------------------------------- /javascript/lazy/index.html: -------------------------------------------------------------------------------- 1 | Animated Map of the Obesity Epidemic in America over a 25 Year Period -------------------------------------------------------------------------------- /javascript/maps/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 8 | 9 | 10 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /javascript/maps/bing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Web Development Demos 9 | 10 | 11 | 12 | 21 | 22 | 23 | 24 | 87 | 88 | 89 | 90 | 91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | Google
101 | 102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /javascript/maps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Development Demos 6 | 7 | 16 | 17 | 18 | 19 | Bing 20 | Google 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /javascript/mustache/child1.html: -------------------------------------------------------------------------------- 1 |
2 |

Child Template

3 |

{{child_value1}}

4 |

{{child}}

5 |
6 |
-------------------------------------------------------------------------------- /javascript/mustache/child2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/javascript/mustache/child2.html -------------------------------------------------------------------------------- /javascript/mustache/template.html: -------------------------------------------------------------------------------- 1 | {{>template1}} 2 | {{>template2}} 3 | {{>template3}} -------------------------------------------------------------------------------- /javascript/mustache/template1.html: -------------------------------------------------------------------------------- 1 |
2 |

{{value1}}

3 |
4 |
-------------------------------------------------------------------------------- /javascript/mustache/template2.html: -------------------------------------------------------------------------------- 1 |
2 |

{{value2.text}}

3 | {{>child1}} 4 |
5 |
-------------------------------------------------------------------------------- /javascript/mustache/template3.html: -------------------------------------------------------------------------------- 1 |
2 |

{{value3}}

3 | {{>child1}} 4 | 5 | {{>child1}} 6 | 7 | {{>child1}} 8 | 9 |
10 |
-------------------------------------------------------------------------------- /javascript/otp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Example Page for Web OTP

19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /javascript/teleprompter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 25 | 26 | 27 | 28 |

Progressive web apps rock and so do the

29 |

Texas Rangers

30 |

But Spartan is sidelined

31 |

for the yearhowever you can stillbust

32 |

your ass and get in to killer shapeand

33 |

get your financial house in order

34 | 35 | 50 | 51 | -------------------------------------------------------------------------------- /javascript/web-vitals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Example Page for Web Vitals

19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /javascript/webauthn/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/javascript/webauthn/index.html -------------------------------------------------------------------------------- /javascript/webshare/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Example Page

19 |

Progressive 24 | Web Apps are websites 25 | that use a combination of modern 26 | technologies 27 | (APIs), best 28 | practices and design concepts to deliver a great, 'app-like' user experience across all 29 | platforms.

32 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /javascript/webshare/share.js: -------------------------------------------------------------------------------- 1 | ( function () { 2 | 3 | "use strict"; //https://love2dev.com/blog/javascript-strict-mode/ 4 | 5 | var webShare = 'share' in navigator; 6 | 7 | //a little helper object to abstract common code into a single place 8 | var self = { 9 | 10 | qsa: function ( s ) { 11 | return document.querySelectorAll( s ); 12 | }, 13 | 14 | getAttributeValue: function ( target, attr, levels ) { 15 | 16 | levels = levels || 3; 17 | 18 | var index = 0, 19 | value = target.getAttribute( attr ); 20 | 21 | while ( ( value === null || value === undefined ) && 22 | target && target.getAttribute && index++ < levels ) { 23 | 24 | target = target.parentNode; 25 | 26 | if ( target ) { 27 | 28 | value = target.getAttribute( attr ); 29 | 30 | } 31 | 32 | } 33 | 34 | return value; 35 | 36 | }, 37 | 38 | on: function ( target, evt, fn, bubble ) { 39 | 40 | if ( typeof target === "string" ) { 41 | target = this.qsa( target ); 42 | } 43 | 44 | if ( target.length === undefined ) { 45 | target = [ target ]; 46 | } 47 | 48 | bubble = ( bubble === true ) ? true : false; 49 | 50 | for ( var i = 0; i < target.length; i++ ) { 51 | target[ i ].addEventListener( evt, fn, bubble ); 52 | } 53 | 54 | }, 55 | 56 | toggleClass: function ( target, className ) { 57 | 58 | target = this.qsa( target ); 59 | 60 | for ( var i = 0; i < target.length; i++ ) { 61 | 62 | target[ i ].classList.toggle( className ); 63 | 64 | } 65 | 66 | } 67 | 68 | }; 69 | 70 | //default setttings 71 | var defaults = { 72 | quoteTargets: ".share-quote", 73 | shareBtn: ".btn-share", 74 | fallback: ".share-buttons" 75 | }, 76 | options = {}; 77 | 78 | //leaving it open for customization 79 | function initialize( config ) { 80 | 81 | options = Object.assign( {}, defaults, config ); 82 | 83 | displayTargets() 84 | .then( function () { 85 | bindShareButtons(); 86 | } ); 87 | 88 | } 89 | 90 | //show native share button or fallback buttons 91 | function displayTargets() { 92 | 93 | //feature detect to show/hide native or fallback targets 94 | if ( navigator.share ) { 95 | // If we have web share enabled use that 96 | self.toggleClass( options.shareBtn, "invisible" ); 97 | } else { 98 | // Else do something else to help people share 99 | // your content 100 | self.toggleClass( options.fallback, "invisible" ); 101 | 102 | } 103 | 104 | return Promise.resolve(); 105 | 106 | } 107 | 108 | //bind sharebutton handlers to button(s) and pull quotes 109 | function bindShareButtons() { 110 | 111 | self.on( options.shareBtn, "click", sendTarget ); 112 | self.on( options.quoteTargets, "click", sendTarget ); 113 | 114 | } 115 | 116 | function sendTarget( evt ) { 117 | 118 | evt.preventDefault(); 119 | 120 | var target = evt.target; 121 | 122 | if ( webShare ) { 123 | 124 | var share = { 125 | title: self.getAttributeValue( target, "share-title" ), 126 | text: self.getAttributeValue( target, "share-text" ), 127 | url: self.getAttributeValue( target, "share-url" ) 128 | }; 129 | 130 | navigator.share( share ) 131 | .then( function () { 132 | console.log( 'Successful share' ) 133 | } ) 134 | .catch( function ( error ) { 135 | console.log( 'Error sharing', error ) 136 | } ); 137 | 138 | } 139 | 140 | return false; 141 | 142 | } 143 | 144 | initialize(); 145 | 146 | } )(); -------------------------------------------------------------------------------- /js/dollar-bill.min.js: -------------------------------------------------------------------------------- 1 | !function(t,n){"use strict";function r(t,e){var i,n,l=new r.fn.init(t,e);if(t)if("string"==typeof t)for(i=(e&&e.nodeType?e:document).querySelectorAll(t),l.length=i.length,l.selector=t,n=0;n 2 | 3 | 4 | 5 | 6 | Web Development Demos 7 | 8 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

You are Offline :(

35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "love2dev_web_samples", 3 | "version": "0.0.1", 4 | "description": "Love2Dev Web Samples", 5 | "main": "bin/build.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "http-server -p 17700 -c -i" 9 | }, 10 | "author": "Chris Love", 11 | "private": true, 12 | "devDependencies": { 13 | "del": "*", 14 | "faker": "*", 15 | "generate-schema": "*", 16 | "gitlog": "*", 17 | "glob": "*", 18 | "jsdom": "*", 19 | "json-forms": "*", 20 | "lodash": "*", 21 | "matchdep": "*", 22 | "mime-types": "*", 23 | "mkdirp": "*", 24 | "mustache": "*", 25 | "ncp": "*", 26 | "papaparse": "*", 27 | "popper.js": "*", 28 | "strip-bom": "*", 29 | "uglify-es": "*", 30 | "watch": "*", 31 | "web-vitals": "*", 32 | "yargs": "*" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /santa/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Google Santa Tracker", 3 | "short_name": "Santa", 4 | "start_url": "./?utm_source=web_app_manifest&utm_medium=web_app_manifest", 5 | "display": "standalone", 6 | "orientation": "any", 7 | "theme_color": "#00c6ed", 8 | "background_color": "#3ec4f0", 9 | "icons": [ 10 | { 11 | "src": "/images/favicon-16.png", 12 | "sizes": "16x16", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "/images/favicon-32.png", 17 | "sizes": "32x32", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "/images/icon-76.png", 22 | "sizes": "76x76", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "/images/icon-120.png", 27 | "sizes": "120x120", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "/images/icon-152.png", 32 | "sizes": "144x144", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "/images/icon-192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | }, 40 | { 41 | "src": "/images/icon-256.png", 42 | "sizes": "256x256", 43 | "type": "image/png" 44 | } 45 | ], 46 | "related_applications": [ 47 | { 48 | "platform": "web" 49 | }, 50 | { 51 | "platform": "play", 52 | "url": "https://play.google.com/store/apps/details?id=com.google.android.apps.santatracker" 53 | } 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /shell.html: -------------------------------------------------------------------------------- 1 | ` 2 | 3 | 4 | 5 | 6 | 7 | {Title Here}} 8 | 9 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /webfonts/fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fontello.eot -------------------------------------------------------------------------------- /webfonts/fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fontello.ttf -------------------------------------------------------------------------------- /webfonts/fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fontello.woff -------------------------------------------------------------------------------- /webfonts/fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docluv/Love2Dev-Code-Samples/165a221d37c166a220afa27323deb0283c4bb1ed/webfonts/fontello.woff2 --------------------------------------------------------------------------------