forked from MicrosoftEdge/Demos-old
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request MicrosoftEdge#136 from thinkpixellab/webnote-holidays
Add the Christmas edition of the WebNote coloring book.
- Loading branch information
Showing
48 changed files
with
371 additions
and
40 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| <!doctype html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Web Note Coloring Book</title> | ||
| <meta name="description" content="Web Note is a new feature of Microsoft Edge that helps you write, draw, make notes and share web pages."> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <link rel="stylesheet" type="text/css" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css"> | ||
| <link rel="stylesheet" type="text/css" href="css/app.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="webnoteColorPages"> | ||
| <div id="pages"> | ||
| <div id="intro" class="page"> | ||
| <div id="introTop"> | ||
| <div id="introTitleContent"> | ||
| <div id="introTitle"></div> | ||
| <div id="introText"> | ||
| <p>Web Note is a new feature of <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">Microsoft Edge</a>. It helps you write, draw and make notes directly on the web page. You can also share the web page with your notes on it. </p> | ||
| <p>This animal themed coloring book will take you through how to use Web Note. Click the <i class="webnote icon"></i> and scroll down to start with the monkey maze.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="introTiles"> | ||
| <div class="introTile" style="background-image: url(images/04.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/01.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/05.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/08.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/07.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/09.png);"></div> | ||
| <div class="introTile" style="background-image: url(images/06.png);"></div> | ||
| </div> | ||
|
|
||
| <div id="introBottom"> | ||
| <div id="introBottomContent"> | ||
| <h4>Click the browser's Web Note icon <i class="webnotedark icon"></i> and then scroll to get started!</h4> | ||
| <img id="introBrowser" src="images/browser.png"></div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div id="page01" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Complete the Maze</h3> | ||
| <p>Click the Pen <i class="pen icon"></i>.</p> | ||
| <p>Trace a path through the maze to get to the bananas.</p> | ||
| <p class="nextStep">Scroll down to continue with Connect the Dots.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/01.png);" ></div> | ||
| </div> | ||
| <div id="page02" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Connect the Dots</h3> | ||
| <p>Select the pen <i class="pen icon"></i> tool again to select color and size. Then try connecting the dots to complete the lion. </p> | ||
| <p>You can clip a selection of the page to your clipboard by using the Clip tool <i class="clip icon"></i>. Once copied to the clipboard, you can paste it anywhere.</p> | ||
| <p>Select the pen or highlighter to exit Clip mode.</p> | ||
| <p class="nextStep">Scroll down to continue with the Animal Word Jumble.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/02.png);" ></div> | ||
| </div> | ||
| <div id="page03" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Animal Word Jumble</h3> | ||
| <p>Select a pen <i class="icon pen"></i> color. We recommend the medium size pen for this activity.</p> | ||
| <p>Draw a continuous line in any direction across the letters to cross out the animal names hidden in the word jumble.</p> | ||
| <p>You can save your web notes and come back to the later by clicking Save <i class="icon save"></i> and then choosing OneNote, Favorites or Reading List. Your Web Note will be saved and be available for you via OneNote, Favorites or Reading List.</p> | ||
| <p class="nextStep">Scroll down to continue with the coloring book.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/03.png)"></div> | ||
| </div> | ||
| <div id="page04" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Turtle</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the turtle so you can see the outline while you color. </p> | ||
| <p>Select a color and brush size to begin. </p> | ||
| <p>You can change your highlighter color and size at any time to do different parts of the turtle.</p> | ||
| <p>You can also erase your markings by selecting the Eraser <i class="icon eraser"></i> and then strike through your markups for them to be erased.</p> | ||
| <p>Switch back to the pen or highlighter when you’re done erasing.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/04.png)"></div> | ||
| </div> | ||
| <div id="page05" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Kangaroo</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the kangaroo so you can see the outline while you color. </p> | ||
| <p>Select a color and brush size to begin. You can change your highlighter color and size at any time to do different parts of the kangaroo.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/05.png)"></div> | ||
| </div> | ||
| <div id="page06" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Koala</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the koala so you can see the outline while you color. </p> | ||
| <p>You can clip a selection of the page to your clipboard by using the Clip tool <i class="icon clip"></i>.</p> | ||
| <p>You can also email your clip or share it on Facebook or Twitter via Share <i class="icon social"></i>.</p> | ||
| <p>You can also have Facebook or Twitter show as options on the Share panel once you install the apps from Windows Store.</p> | ||
| <p class="nextStep">Scroll down for more animals <span class="nowrap">to color in.</span></p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/06.png)"></div> | ||
| </div> | ||
| <div id="page07" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Whale</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the whale so you can see the outline while you color. </p> | ||
| <p>If you open Web Note on a web page that has content to the right or left of what you can see, you can pan the web note view by using the Pan tool <i class="icon pan"></i>.</p> | ||
| <p>Touch one of the other Web Note tools to exit panning mode.</p> | ||
| <p class="nextStep">Scroll down for more animals <span class="nowrap">to color in.</span></p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/07.png)"></div> | ||
| </div> | ||
| <div id="page08" class="page"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Cheetah</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the cheetah so you can see the outline while you color. </p> | ||
| <p>You can save your Web Note and come back to it later by clicking Save <i class="icon save"></i> and then choosing OneNote, Favorites or Reading List. You can access your Favorites or Reading list via Hub <i class="icon hub"></i>. You can open your OneNote app from the Start menu. </p> | ||
| <p>Scroll down to continue with the coloring book. You can exit Web Note mode at any time by clicking <strong>Exit</strong>. If you haven’t saved your Web Note, it will be discarded when you exit. So be sure to Save if you want to continue again later.</p> | ||
| <p class="nextStep">Scroll down for the final animal <span class="nowrap">to color in.</span></p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/08.png)"></div> | ||
| </div> | ||
| <div id="page09" class="page noBorder"> | ||
| <div class="pageInfo"> | ||
| <h3>Color in the Crocodile</h3> | ||
| <p>Select the highlighter <i class="icon highlight"></i> for coloring the crocodile so you can see the outline while you color. </p> | ||
| <p>You can add a typed comment to the page by selecting the Typed note icon <i class="icon comment"></i>. Use your keyboard to type a note and use your mouse to drag the position of the note around the page and collapse the note.</p> | ||
| <p>You can expand and collapse notes using the note anchor <i class="icon position"></i> on the page. </p> | ||
| <p>You can exit Web Note mode by clicking <strong>Exit</strong>. Any unsaved notes you’ve made will be discarded and you’ll return to the web page.</p> | ||
| </div> | ||
| <div class="pageContent" style="background-image: url(images/09.png)"></div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <div id="top"></div> | ||
| </div> | ||
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> | ||
| <script src="scripts/demo.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.