-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (132 loc) · 9.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<title>The Google Tour</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="vendor/bower/platform/platform.js"></script>
<link rel="import" href="vendor/bower/core-scaffold/core-scaffold.html">
<link rel="import" href="vendor/bower/paper-item/paper-item.html">
<link rel="import" href="vendor/bower/core-icons/core-icons.html">
<link rel="import" href="vendor/bower/core-icons/iconsets/image-icons.html">
<link rel="import" href="vendor/bower/core-icons/iconsets/social-icons.html">
<link rel="import" href="vendor/bower/core-pages/core-pages.html">
<link rel="import" href="vendor/bower/polymer-ui-card/polymer-ui-card.html">
<link rel="import" href="vendor/bower/paper-button/paper-button.html">
<link rel="import" href="vendor/bower/paper-fab/paper-fab.html">
<link rel="stylesheet" href="assets/css/tour.css">
</head>
<body unresolved>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar><div id="logo"><img src="//material-design.storage.googleapis.com/images/Google_Logo.svg" alt="Google logo"></div></core-toolbar>
<core-menu selected="0">
<paper-item icon="google" label="Welcome" class="core-selected" pageNumber="0"></paper-item>
<paper-item icon="info" label="Google News" pageNumber="1"></paper-item>
<paper-item icon="drive-video" label="Google Toolbar" pageNumber="2"></paper-item>
<paper-item icon="social:group" label="Google Groups" pageNumber="3"></paper-item>
<paper-item icon="image:image" label="Google Images" pageNumber="4"></paper-item>
<paper-item icon="shopping-cart" label="Google Shopping" pageNumber="5"></paper-item>
<paper-item icon="help" label="The Google Gamble" pageNumber="6"></paper-item>
<paper-item icon="explore" label="Explore Further" pageNumber="7"></paper-item>
</core-menu>
</core-header-panel>
<div tool>The Google Tour</div>
<div class="content">
<core-pages id="cards">
<div>
<polymer-ui-card>
<h2>Explore ways to take your search further.</h2>
<p>Work is hard and you need a break. A sunsoaked vacation is just the ticket, but where to begin? With Google there’s a world of helpful, timesaving features right at your fingertips. To see how these free services can help you find what you’re looking for faster, tag along as we plan a tropical vacation, or go straight to <a href="http://www.google.com/intl/en/about/products/" target="_blank">Google Products</a>.</p>
<paper-button label="Google Services and Tools" raisedButton onclick="window.open('http://www.google.com/intl/en/about/products/','_blank');"></paper-button>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Get the latest from Google News.</h2>
<p>The destination determined, you decide to visit <a href="http://news.google.com" target="_blank">Google News</a> to brush up on the very latest, so you’ll be able to converse with the natives intelligently about the events of the day. Search and browse 4,000 leading news sources from around the world, with headlines and photos continuously updated automatically throughout the day. Click on a headline to be taken directly to the original source of the story you want to read.</p>
<paper-button label="Read Google News" raisedButton onclick="window.open('http://news.google.com','_blank');"></paper-button>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Remember Internet Explorer?</h2>
<p>Realizing you will hit a lot of websites before you hit the beach, ten years ago you might have been using Internet Explorer, to which you would add the Google Toolbar so you can take Google with you anywhere on the web. It took mere seconds to install and enabled you to easily use Google without having to return to the homepage. These days, there’s a better way to browser the internet.</p>
<paper-button label="Upgrade to Chrome" raisedButton onclick="window.open('http://google.com/chrome','_blank');"></paper-button>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Visit Google Groups for great advice.</h2>
<p>It’s always helpful to have a guide when planning a trip, so you check in with a couple million experts. <a href="https://groups.google.com/" target="_blank">Google Groups</a> is a searchable database of more than 800 million Usenet posts on every imaginable topic, including unspoiled islands and lowcost airfare. Ask questions and read comments in Usenet discussion forums. Explore topics in detail by perusing posts that contain amateur advice, professional recommendations and everything in between.</p>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Check out the views at Google Images.</h2>
<p>Refusing to allow a small setback like bad weather dampen your spirits, you take a visual tour of other potential warm weather hot spots using <a href="http://images.google.com/" target="_blank">Google Images</a> where you can search more than 500 million photos, artworks and other graphics. You enter the query “tropical vacations” and click a thumbnail to see the largest image and the web page on which it’s located.</p>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Find great products with Google Shopping.</h2>
<p>Having decided to soak your stress away in a home hot tub, you use <a href="http://www.google.com/shopping" target="_blank">Google Shopping</a>, the product search service from Google, to find the best deal on exactly the model you want to buy. Google Shopping’s objective results take you directly to the store selling the tub you’re hot for. Use Google Shopping to locate the best deal on the exact products you want. Searching through millions of relevant web sites, Google pinpoints sites offering any specific product you select, enabling you to save money and time.</p>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>For a quicker trip, try “I’m Feeling Lucky.”</h2>
<p>You’ve found the perfect solution to melt your stress. All you need now are some tunes to set the mood. You type your favorite radio station’s call letters into the Google search box and hit the button that says “I’m Feeling Lucky,” which takes you directly to the first web page Google returned from your query. When you know the exact name of the company, subject or person you’re looking for, it’s a pretty safe bet Google will deliver the site you want as the first result. <a href="http://google.com" target="_blank">Try it for yourself</a> and see how lucky you really are.</p>
</polymer-ui-card>
</div>
<div>
<polymer-ui-card>
<h2>Get equipped to search even further.</h2>
<p>As you soak away in your bubbly corner of paradise, you consider how far Google was able to take you and contemplate other ways Google can improve your existence. You determine to learn more about Google by reviewing the <a href="http://www.google.com/intl/en/help/features.html" target="_blank">Google Search Features</a> page. Starting … tomorrow.</p>
<p>You’ve seen a few of the ways to use Google that take you beyond the homepage. There are many more timesaving options Google has to offer, including:</p>
<ul>
<li><a href="https://translate.google.com/" target="_blank">Google Translate</a></li>
<li><a href="http://www.google.com/advanced_search" target="_blank">Advanced Search</a></li>
<li><a href="http://books.google.com/" target="_blank">Google Book Search</a></li>
<li>and <a href="#" target="_blank">more</a>.</li>
</ul>
<p>Visit the More Google products page to see the complete list.</p>
<p><strong>Bon Voyage!</strong></p>
</polymer-ui-card>
</div>
</core-pages>
<paper-fab icon="arrow-forward"></paper-fab>
</div>
</core-scaffold>
<script>
window.addEventListener('polymer-ready', function(e) {
var pages = document.querySelector('core-pages');
var navItems = document.querySelectorAll('paper-item');
document.querySelector('paper-fab').onclick = function(e) {
updatePage((pages.selected + 1) % pages.items.length);
updateMenu(pages.selected);
};
document.querySelector('core-menu').onclick = function(e) {
var pageNumber = parseInt(e.target.getAttribute('pageNumber'));
updatePage(pageNumber)
updateMenu(pageNumber);
}
updatePage = function(pageNumber) {
pages.selected = pageNumber;
pages.async(function() {
if (pages.selectedIndex == 0) {
pages.selectedItem.classList.remove('begin');
} else if (pages.selectedIndex == pages.items.length - 1) {
pages.items[0].classList.add('begin');
}
});
}
updateMenu = function(pageNumber) {
[].forEach.call(navItems, function (el) {
el.classList.remove('core-selected');
});
document.querySelector('paper-item[pageNumber="'+pageNumber+'"').classList.add('core-selected');
}
});
</script>
</body>
</html>