├── .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 |
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 |
--------------------------------------------------------------------------------
/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 |
123 |
124 |
125 |
126 |
127 |
How to Center
128 | Anything with HTML & CSS
129 |
130 |
131 |
132 |
133 |
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 |
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 |
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 |
52 |
53 |
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 |
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 |
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 |
50 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/html/form/tabindex/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | First Name
5 |
6 |
7 | Last Name
8 |
9 |
10 |
11 | Do You Have An E-Mail?
12 |
13 |
14 |
15 | E-Mail
16 |
17 |
18 | Save
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 |
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 |
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 |
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 |
--------------------------------------------------------------------------------
/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 | Alert
82 |
83 |
84 |
95 |
96 |
97 |
98 |
99 |
100 |