-
Notifications
You must be signed in to change notification settings - Fork 13
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
4 changed files
with
131 additions
and
106 deletions.
There are no files selected for viewing
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
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
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
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 |
|---|---|---|
| @@ -1,90 +1,100 @@ | ||
| <!DOCTYPE html | ||
| PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | ||
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
|
||
| <html> | ||
| <head> | ||
| <title>WebGPU Unleashed : A practical tutorial</title> | ||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&family=Pragati+Narrow&display=swap'); | ||
|
|
||
| body { | ||
| background-color: #03386f; | ||
| margin: 0; | ||
| position:relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: end; | ||
| } | ||
| <head> | ||
| <title>WebGPU Unleashed : A practical tutorial</title> | ||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&family=Pragati+Narrow&display=swap'); | ||
|
|
||
| .header { | ||
| height: 20px; | ||
| background-color: #ffd790; | ||
| } | ||
| body { | ||
| background-color: #03386f; | ||
| margin: 0; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: end; | ||
| } | ||
|
|
||
| .footer { | ||
| height: 40px; | ||
| background-color: #ffd790; | ||
| } | ||
| .header { | ||
| height: 20px; | ||
| background-color: #ffd790; | ||
| } | ||
|
|
||
| .title { | ||
| height: 220px; | ||
| background-image: url("./titlebg.png"); | ||
| background-size: cover; | ||
| } | ||
| .footer { | ||
| height: 40px; | ||
| background-color: #ffd790; | ||
| } | ||
|
|
||
| .main-title { | ||
| color: #ffd790; | ||
| font-weight: 600; | ||
| font-family: 'Pragati Narrow', sans-serif; | ||
| font-size: 60px; | ||
| margin: 20px; | ||
| margin-bottom: 4px; | ||
| vertical-align: bottom; | ||
| } | ||
| .title { | ||
| height: 220px; | ||
| background-image: url(./readme/titlebg.png); | ||
| background-size: cover; | ||
| } | ||
|
|
||
| .subtitle { | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: white; | ||
| font-weight: 400; | ||
| font-size: 20px; | ||
| margin-left: 20px; | ||
| margin-top: 4px; | ||
| } | ||
| .main-title { | ||
| color: #ffd790; | ||
| font-weight: 600; | ||
| font-family: 'Pragati Narrow', sans-serif; | ||
| font-size: 60px; | ||
| margin: 20px; | ||
| margin-bottom: 4px; | ||
| vertical-align: bottom; | ||
| } | ||
|
|
||
| .author { | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: white; | ||
| font-weight: 400; | ||
| font-size: 18px; | ||
| margin-right: 20px; | ||
| margin-bottom: 4px; | ||
| text-align: right; | ||
| } | ||
| .subtitle { | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: white; | ||
| font-weight: 400; | ||
| font-size: 20px; | ||
| margin-left: 20px; | ||
| margin-top: 4px; | ||
| } | ||
|
|
||
| .banner { | ||
| height: 320px; | ||
| background-size: cover; | ||
| background-image: url(./banner.jpg); | ||
| } | ||
| .author { | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: white; | ||
| font-weight: 400; | ||
| font-size: 18px; | ||
| margin-right: 20px; | ||
| margin-bottom: 4px; | ||
| text-align: right; | ||
| } | ||
|
|
||
| .instruction { | ||
| flex-grow: 1; | ||
| background-color: #01376f; | ||
| color: white; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="instruction">Welcome</div> | ||
| <div class="header"></div> | ||
| <div class="title"> | ||
| <div class="main-title">WebGPU Unleashed</div> | ||
| <div class="subtitle">A Practical Tutorial</div> | ||
| <div class="author">Shi Yan</div> | ||
| </div> | ||
| <div class="banner"></div> | ||
| <div class="footer"></div> | ||
| </body> | ||
| </html> | ||
| .banner { | ||
| height: 320px; | ||
| background-size: cover; | ||
| background-image: url(./readme/banner.jpg); | ||
| } | ||
|
|
||
| .instruction { | ||
| flex-grow: 1; | ||
| background-color: #01376f; | ||
| color: white; | ||
| font-family: 'Open Sans', sans-serif; | ||
| margin: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="instruction"> | ||
| <p>Welcome to the code samples for the book 'WebGPU Unleashed: A Practical Tutorial', your ticket to the | ||
| dynamic world of graphics programming.</p> | ||
| <p>Dive in and discover the magic of creating stunning visuals from | ||
| scratch, mastering the art of real-time graphics, and unlocking | ||
| the power of WebGPU - all in one captivating tutorial.</p> | ||
| <p>Get started by browsing the chapters using the <span><svg stroke-width="0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="currentColor" fill="currentColor" style="vertical-align: middle;"><path d="M64 384h384v-42.67H64Zm0-106.67h384v-42.66H64ZM64 128v42.67h384V128Z"></path></svg> MENU</span> button and running each sample with the <span><svg stroke-width="0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" color="currentColor" fill="currentColor" style="vertical-align: middle;"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80v352c0 17.4 9.4 33.4 24.5 41.9S58.2 482 73 473l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path></svg> RUN<span> button. The | ||
| code editor is live, so feel free to alter the sample code for your own experiments and exploration.</p> | ||
| </div> | ||
| <div class="header"></div> | ||
| <div class="title"> | ||
| <div class="main-title">WebGPU Unleashed</div> | ||
| <div class="subtitle">A Practical Tutorial</div> | ||
| <div class="author">Shi Yan</div> | ||
| </div> | ||
| <div class="banner"></div> | ||
| <div class="footer"></div> | ||
| </body> | ||
|
|
||
| </html> |