-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
333 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+22.8 KB
code/pete/javascript/examples/14-clock-light-dark-mode-vue/fonts/digital-7 (italic).ttf
Binary file not shown.
Binary file added
BIN
+33.6 KB
code/pete/javascript/examples/14-clock-light-dark-mode-vue/fonts/digital-7 (mono).ttf
Binary file not shown.
Binary file added
BIN
+22.4 KB
code/pete/javascript/examples/14-clock-light-dark-mode-vue/fonts/digital-7-mono.ttf
Binary file not shown.
Binary file added
BIN
+33.6 KB
code/pete/javascript/examples/14-clock-light-dark-mode-vue/fonts/digital-7.ttf
Binary file not shown.
87 changes: 87 additions & 0 deletions
87
code/pete/javascript/examples/14-clock-light-dark-mode-vue/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Clock</title> | ||
| <script src="https://cdn.tailwindcss.com/"></script> | ||
| <script src="https://unpkg.com/vue@3"></script> | ||
| <style> | ||
| @font-face { | ||
| font-family: digital; | ||
| src: url('fonts/digital-7-mono.ttf'); | ||
| } | ||
| * { | ||
| font-family: digital; | ||
| } | ||
| .black-text { | ||
| color: #222323; | ||
| } | ||
| .white-text { | ||
| color: #f0f6f0; | ||
| } | ||
| .black-background { | ||
| background-color: #222323; | ||
| } | ||
| .white-background { | ||
| background-color: #f0f6f0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="app"> | ||
| <main | ||
| :class="` | ||
| flex flex-col justify-center h-screen | ||
| ${mode === 'light' ? 'white-background black-text' : 'black-background white-text'} | ||
| `" | ||
| > | ||
| <h1 class="text-9xl text-center py-6">Clock</h1> | ||
| <figure class="text-9xl text-center py-6">{{ hours }}:{{ minutes }}:{{ seconds }}</figure> | ||
| <button @click="switchMode" class="text-2xl">Switch Mode</button> | ||
| </main> | ||
| </div> | ||
| <script> | ||
| const App = { | ||
| data () { | ||
| return { | ||
| hours: '12', | ||
| minutes: '34', | ||
| seconds: '56', | ||
| mode: 'light' | ||
| } | ||
| }, | ||
| created () { | ||
| this.setTime() | ||
| setInterval(() => { | ||
| this.setTime() | ||
| }, 1000) | ||
| }, | ||
| methods: { | ||
| setTime () { | ||
| const now = new Date() | ||
| this.hours = String(now.getHours()).padStart(2, '0') | ||
| this.minutes = String(now.getMinutes()).padStart(2, '0') | ||
| this.seconds = String(now.getSeconds()).padStart(2, '0') | ||
| }, | ||
| switchMode () { | ||
| // ternary operator | ||
| // expression ? value if truthy : value if falsey | ||
| this.mode = this.mode === 'light' ? 'dark' : 'light' | ||
|
|
||
| // this is the plain if/else if version: | ||
| // if (this.mode === 'light') { | ||
| // this.mode = 'dark' | ||
| // } else if (this.mode === 'dark') { | ||
| // this.mode = 'light' | ||
| // } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| Vue.createApp(App).mount('#app') | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
73 changes: 73 additions & 0 deletions
73
code/pete/javascript/examples/14-clock-light-dark-mode-vue/readme.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| True Type Fonts: DIGITAL-7 version 1.02 | ||
|
|
||
|
|
||
| EULA | ||
| -==- | ||
| The fonts Digital-7 is freeware for home using. | ||
|
|
||
|
|
||
| DESCRIPTION | ||
| -=========- | ||
|
|
||
| This font created specially for program Calculator-7 (download shareware version: http://www.styleseven.com/ and use 7 days fo free). | ||
|
|
||
| The program Calculator-7 offers you the following possibilities: | ||
| * calculate using seven operator: addition, subtraction, multiply, divide, percent, square root, 1 divide to X; | ||
| * set decimal position (0, 2, 3, float) and round type (up, mathematical, down); | ||
| * customize an appearance of work window: scale, fonts for digital panel and buttons, background color; | ||
| * customize an appearance of number in digital panel: leading zero for decimal, thousand separator, decimal separator, digit grouping; | ||
| * calculate total from clipboard (copy data to clipboard from table or text and press one button). | ||
|
|
||
|
|
||
| Files in digital-7_font.zip: | ||
| readme.txt this file; | ||
| digital-7.ttf digital-7 regular font; | ||
| digital-7 (italic).ttf digital-7 italic font; | ||
| digital-7 (mono).ttf digital-7 mono font; | ||
| digital-7 (mono italic).ttf digital-7 mono font. | ||
|
|
||
| Please visit http://www.styleseven.com/ for download our other products as freeware as shareware. | ||
| We will welcome any useful suggestions and comments; please send them to [email protected] | ||
|
|
||
|
|
||
| FREEWARE USE (NOTES) | ||
| -=================- | ||
| Also you may: | ||
| * Use the font in freeware software (credit needed); | ||
| * Use the font for your education process. | ||
|
|
||
|
|
||
| COMMERCIAL OR BUSINESS USE | ||
| -========================- | ||
|
|
||
| You can buy font for commercial use here ($24.95): http://store.esellerate.net/s.aspx?s=STR0331655240 | ||
| You may: | ||
| * Include the font to your installation; | ||
| * Use one license up to 100 computers in your office. | ||
| Please contact us for any questions. | ||
|
|
||
|
|
||
| WHAT IS NEW? | ||
| -==========- | ||
|
|
||
| Version 1.01 April 05 2009 | ||
| -------------------------- | ||
| * Change Typeface name for fonts "Digital-7 (mono)" and "Digital-7 (italic)" (now available all fonts for select in application, for example Word Pad). | ||
| * Corrected symbol ':'. | ||
|
|
||
| Version 1.01 April 07 2011 | ||
| -------------------------- | ||
| * Embedding is allowed. | ||
|
|
||
| Version 1.1 June 07 2013 | ||
| -------------------------- | ||
| * Mono Italic font is added. | ||
|
|
||
|
|
||
| AUTHOR | ||
| -====- | ||
|
|
||
| Sizenko Alexander | ||
| Style-7 | ||
| http://www.styleseven.com | ||
| Created: October 7 2008 |
Binary file added
BIN
+22.8 KB
code/pete/javascript/examples/15-clock-multiple-themes-vue/fonts/digital-7 (italic).ttf
Binary file not shown.
Binary file added
BIN
+33.6 KB
code/pete/javascript/examples/15-clock-multiple-themes-vue/fonts/digital-7 (mono).ttf
Binary file not shown.
Binary file added
BIN
+22.4 KB
code/pete/javascript/examples/15-clock-multiple-themes-vue/fonts/digital-7-mono.ttf
Binary file not shown.
Binary file added
BIN
+33.6 KB
code/pete/javascript/examples/15-clock-multiple-themes-vue/fonts/digital-7.ttf
Binary file not shown.
100 changes: 100 additions & 0 deletions
100
code/pete/javascript/examples/15-clock-multiple-themes-vue/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Clock</title> | ||
| <script src="https://cdn.tailwindcss.com/"></script> | ||
| <script src="https://unpkg.com/vue@3"></script> | ||
| <style> | ||
| @font-face { | ||
| font-family: digital; | ||
| src: url('fonts/digital-7-mono.ttf'); | ||
| } | ||
| * { | ||
| font-family: digital; | ||
| } | ||
| .black-text { | ||
| color: #222323; | ||
| } | ||
| .white-text { | ||
| color: #f0f6f0; | ||
| } | ||
| .black-background { | ||
| background-color: #222323; | ||
| } | ||
| .white-background { | ||
| background-color: #f0f6f0; | ||
| } | ||
| .green-text { | ||
| color: #212c28; | ||
| } | ||
| .green-background { | ||
| background-color: #72a488 | ||
| } | ||
| .yellow-text { | ||
| color: #292b30 | ||
| } | ||
| .yellow-background { | ||
| background-color: #cfab4a | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="app"> | ||
| <main | ||
| :class="` | ||
| flex flex-col justify-center h-screen | ||
| ${themeClasses} | ||
| `" | ||
| > | ||
| <h1 class="text-9xl text-center py-6">Clock</h1> | ||
| <figure class="text-9xl text-center py-6">{{ hours }}:{{ minutes }}:{{ seconds }}</figure> | ||
| <section class="flex justify-evenly"> | ||
| <button @click="switchMode('black')" class="p-2 rounded-md text-2xl white-background black-text">Switch Mode</button> | ||
| <button @click="switchMode('green')" class="p-2 rounded-md text-2xl green-background green-text">Switch Mode</button> | ||
| <button @click="switchMode('yellow')" class="p-2 rounded-md text-2xl yellow-background yellow-text">Switch Mode</button> | ||
| </section> | ||
| </main> | ||
| </div> | ||
| <script> | ||
| const App = { | ||
| data () { | ||
| return { | ||
| hours: '12', | ||
| minutes: '34', | ||
| seconds: '56', | ||
| themeClasses: 'white-background black-text' | ||
| } | ||
| }, | ||
| created () { | ||
| this.setTime() | ||
| setInterval(() => { | ||
| this.setTime() | ||
| }, 1000) | ||
| }, | ||
| methods: { | ||
| setTime () { | ||
| const now = new Date() | ||
| this.hours = String(now.getHours()).padStart(2, '0') | ||
| this.minutes = String(now.getMinutes()).padStart(2, '0') | ||
| this.seconds = String(now.getSeconds()).padStart(2, '0') | ||
| }, | ||
| switchMode (mode) { | ||
| if (mode === 'black') { | ||
| this.themeClasses = 'white-background black-text' | ||
| } else if (mode === 'green') { | ||
| this.themeClasses = 'green-background green-text' | ||
| } else if (mode === 'yellow') { | ||
| this.themeClasses = 'yellow-background yellow-text' | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| Vue.createApp(App).mount('#app') | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
73 changes: 73 additions & 0 deletions
73
code/pete/javascript/examples/15-clock-multiple-themes-vue/readme.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| True Type Fonts: DIGITAL-7 version 1.02 | ||
|
|
||
|
|
||
| EULA | ||
| -==- | ||
| The fonts Digital-7 is freeware for home using. | ||
|
|
||
|
|
||
| DESCRIPTION | ||
| -=========- | ||
|
|
||
| This font created specially for program Calculator-7 (download shareware version: http://www.styleseven.com/ and use 7 days fo free). | ||
|
|
||
| The program Calculator-7 offers you the following possibilities: | ||
| * calculate using seven operator: addition, subtraction, multiply, divide, percent, square root, 1 divide to X; | ||
| * set decimal position (0, 2, 3, float) and round type (up, mathematical, down); | ||
| * customize an appearance of work window: scale, fonts for digital panel and buttons, background color; | ||
| * customize an appearance of number in digital panel: leading zero for decimal, thousand separator, decimal separator, digit grouping; | ||
| * calculate total from clipboard (copy data to clipboard from table or text and press one button). | ||
|
|
||
|
|
||
| Files in digital-7_font.zip: | ||
| readme.txt this file; | ||
| digital-7.ttf digital-7 regular font; | ||
| digital-7 (italic).ttf digital-7 italic font; | ||
| digital-7 (mono).ttf digital-7 mono font; | ||
| digital-7 (mono italic).ttf digital-7 mono font. | ||
|
|
||
| Please visit http://www.styleseven.com/ for download our other products as freeware as shareware. | ||
| We will welcome any useful suggestions and comments; please send them to [email protected] | ||
|
|
||
|
|
||
| FREEWARE USE (NOTES) | ||
| -=================- | ||
| Also you may: | ||
| * Use the font in freeware software (credit needed); | ||
| * Use the font for your education process. | ||
|
|
||
|
|
||
| COMMERCIAL OR BUSINESS USE | ||
| -========================- | ||
|
|
||
| You can buy font for commercial use here ($24.95): http://store.esellerate.net/s.aspx?s=STR0331655240 | ||
| You may: | ||
| * Include the font to your installation; | ||
| * Use one license up to 100 computers in your office. | ||
| Please contact us for any questions. | ||
|
|
||
|
|
||
| WHAT IS NEW? | ||
| -==========- | ||
|
|
||
| Version 1.01 April 05 2009 | ||
| -------------------------- | ||
| * Change Typeface name for fonts "Digital-7 (mono)" and "Digital-7 (italic)" (now available all fonts for select in application, for example Word Pad). | ||
| * Corrected symbol ':'. | ||
|
|
||
| Version 1.01 April 07 2011 | ||
| -------------------------- | ||
| * Embedding is allowed. | ||
|
|
||
| Version 1.1 June 07 2013 | ||
| -------------------------- | ||
| * Mono Italic font is added. | ||
|
|
||
|
|
||
| AUTHOR | ||
| -====- | ||
|
|
||
| Sizenko Alexander | ||
| Style-7 | ||
| http://www.styleseven.com | ||
| Created: October 7 2008 |